Path for iOS的交互細節
Path for iOS的交互細節-移動閱讀二維碼

提到Path這款應用,人們往往首先會想到它美麗的設計和豐富的細節。但是卻往往有一種”叫好不叫座”的感覺,最近Path有所行動,更新了4.0版本,意圖改變被用戶忽視的局面。我自己雖然不是Path的老用戶,但是我喜歡每一個用熱忱的心態構建產品的團隊。

Path更新后,我決定設計細節系列再更新一期關于Path的,希望你們能夠喜歡這些Path的小細節。各位要記住構建這款美麗應用的設計師:?Dustin Mierau?and?Ed Kim

下面我來羅列一下Path 4.0中我最喜歡的一些細節。

1. 模態窗口登錄

Path的這種彈出設計,能夠取悅新用戶,蹦出和下落給予了應用活力感。但是這種效果不是曇花一現,Path將其上升到了設計語言一般的高度,在應用中很多地方,也采取了這種彈出動效,非常的一致。

2. 引導頁設計

平滑的引導流程,簡約至極——簡簡單單的附上必要信息,完成3步后,模態窗口便下落消失,然后在屏幕下方中央的主要按鈕中,便出現了用戶教學提示框。你可以感到設計者在用戶教學上是下了很大功夫的,尤其是 彈出的提示框。

Create a moment?- 這個提示讓新用戶可以按照流程來分享生活中的美好瞬間——非常的有生活氛圍感,我很喜歡。

3. Path的招牌動效

我還記得Path剛出來的時候——它的按鈕圓盤彈出動效轟動一時。我當時盯了屏幕好久,琢磨了半天這幫人是怎么做出來的。Path 4.0中,對招牌動效進行了細微改動,但是效果依然很悅人。

點擊 \’+\’按鈕,便能打開彈出菜單,顯示出你可以分享的不同類內容。充滿愉悅的外彈效果,仿真般的旋轉。雖然動效可能會比較耗費時間,但是對于新用戶來說,所能帶來的驚奇感是不言而喻的。

4. 用戶教學

Path的細節設計引人入勝,模態窗口的用戶教學非常統一。當新用戶打開新標簽時,這一窗口就出現,給予用戶上下文提示。讓用戶可以熟悉的操作Path,讓應用體驗具有整體感,這是很多產品設計師需要考慮的問題。

注意:模態窗口下落的動效和前文依然非常一致。

5. 個人頁的漸隱(網速問題,壓縮的比較過)

已經有很多應用采用這種滾動+漸隱的技術——交互性非常棒,這是Path的版本。當你在個人頁下拉的時候,個人資料會緩緩的漸隱,最后被一個標頭”Me”取代

同時要留意的是背景照片的高度變化,最后成為窄窄的一條,緊挨著狀態欄,感覺非常棒!

6. 點贊交互

Path 有著友好的、愉悅的方式來點贊——提供了精美的表情,用來定制化點贊(大部分的點贊表情是需要購買的)。注意表情依次彈動的方式非??蓯?。

7. 修改個人頁背景照片

這個效果很帶感,但是很容易被忽視。在個人頁的背景圖像處隨意點擊,便能修改個人頁背景照片。無需笨拙的在標簽欄,或者選項中尋找背景圖片修改,只需要點一下就可以,流程的簡化,直白的交互,我很喜歡。

8. 購買點贊表情

這個細節必須加上,交互和動效和上文的效果非常一致,這種效果一直貫穿整個應用。

9. 地圖視圖

有兩點值得贊賞:

      • 返回圖標采用了Path標志性的”P”Logo,讓整個應用極具個性化。
      • 注意當我旋轉地圖時,整個地圖的變化:指南針、Z軸的透視感,文本的變換,極富細節。

10. 搜索

 

這個錄得不是很好

Search的搜索頁面做的很贊,當我點擊上方的模糊玻璃搜索框時,會有氣泡般的搜索過濾項出現,吸引著用戶點擊探索。我非常喜歡所提供的搜索過濾項,和用戶的生活息息相關,很多應用應該學習一下。

 

11. 加載指示器

當我點擊搜索附近的時候,出現加載指示器非??蓯?。設計者沒有復用搜索框中的旋轉加載指示器,而是自創了一個很有生活情趣的指示器。

12. 特別關注一個朋友

在這個界面中,我們可以通過點擊星星圖標來將朋友加入到特別關注中。細節雖小,但是不容忽視——注意添加、移除特別關注好友時的彈動效果。

13. 分享流程

 

上文提到過Path的招牌分享按鈕動效,這里我們來看看分享流程。當點擊任意一個具體圖標后,比如說圖中的”引用”,引用圖標擴大并漸隱。同時新的界面自下而上滑出,這種效果最近很多應用也在采用。

進入具體分享潔面后,我選擇了分享給特別關注好友,以及私人分享——注意上下文信息的滑出效果,讓體驗非常流暢。

 

14. 跟時間線一樣效果的小時鐘

 

這一點肯定不會忽視的!我還記得我第一次用Path的時候,這個小細節令我沉迷,當我滾動翻看新的消息時,一個小時鐘出現在屏幕右上方,用來提示消息的時間。當你繼續滑動時,時間也會動態的改變。而日期漸隱的改變。

Path很值得下載,光為了看看他們是怎樣通過細節取悅用戶的都值!

 

15. 最末端的消息

 

這個用圖片就可以說明,不用gif也可以。

當你翻到最老的消息時,頁面到達了末端:出現了一個裝飾精美、稍微下凹的花紋插畫。這一幕很少見,但是讓人印象深刻。

 

16. 下拉刷新

跟小時鐘、轉盤彈出菜單一樣,Path的這個下拉刷新也是得以保留的招牌效果。我不記得我反復體驗這個效果有多少回了。關于下拉刷新的文章做了很多,但是很少有界面能達到Path這種境界:流動感十足,彈性十足,整體的交互感很愉悅。都說Facebook Paper改變了人們對于交互、動效的看法,但是我想說,Path在這方面的努力要早于Paper。

17. Path的網站

 

這些家伙終于完成了4.0!估計這幾天他們的訪問量會激增。網站努力營造出和應用一致的愉悅體驗——有興趣的趕緊去Path.com看看,很贊的網頁設計。

作者Brainlovin? ?地址:http://blog.brianlovin.com/design-details-path-for-ios

譯文出處:UI中國??譯文作者:MartinRGB

本文鏈接:http://www.casaleticia.com/path-for-ios-interaction-details.html
本文標簽: , , ,