提到Path這款應(yīng)用，人們往往首先會(huì)想到它美麗的設(shè)計(jì)和豐富的細(xì)節(jié)。但是卻往往有一種“叫好不叫座”的感覺，最近Path有所行動(dòng)，更新了4.0版本，意圖改變被用戶忽視的局面。我自己雖然不是Path的老用戶，但是我喜歡每一個(gè)用熱忱的心態(tài)構(gòu)建產(chǎn)品的團(tuán)隊(duì)。

Path更新后，我決定設(shè)計(jì)細(xì)節(jié)系列再更新一期關(guān)于Path的，希望你們能夠喜歡這些Path的小細(xì)節(jié)。各位要記住構(gòu)建這款美麗應(yīng)用的設(shè)計(jì)師:?Dustin Mierau?and?Ed Kim

下面我來羅列一下Path 4.0中我最喜歡的一些細(xì)節(jié)。

1. 模態(tài)窗口登錄

Path的這種彈出設(shè)計(jì)，能夠取悅新用戶，蹦出和下落給予了應(yīng)用活力感。但是這種效果不是曇花一現(xiàn)，Path將其上升到了設(shè)計(jì)語言一般的高度，在應(yīng)用中很多地方，也采取了這種彈出動(dòng)效，非常的一致。

2. 引導(dǎo)頁設(shè)計(jì)

平滑的引導(dǎo)流程，簡(jiǎn)約至極——簡(jiǎn)簡(jiǎn)單單的附上必要信息，完成3步后，模態(tài)窗口便下落消失，然后在屏幕下方中央的主要按鈕中，便出現(xiàn)了用戶教學(xué)提示框。你可以感到設(shè)計(jì)者在用戶教學(xué)上是下了很大功夫的，尤其是 彈出的提示框。

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

3. Path的招牌動(dòng)效

我還記得Path剛出來的時(shí)候——它的按鈕圓盤彈出動(dòng)效轟動(dòng)一時(shí)。我當(dāng)時(shí)盯了屏幕好久，琢磨了半天這幫人是怎么做出來的。Path 4.0中，對(duì)招牌動(dòng)效進(jìn)行了細(xì)微改動(dòng)，但是效果依然很悅?cè)恕?/p>

點(diǎn)擊 ‘+’按鈕，便能打開彈出菜單，顯示出你可以分享的不同類內(nèi)容。充滿愉悅的外彈效果，仿真般的旋轉(zhuǎn)。雖然動(dòng)效可能會(huì)比較耗費(fèi)時(shí)間，但是對(duì)于新用戶來說，所能帶來的驚奇感是不言而喻的。

4. 用戶教學(xué)

Path的細(xì)節(jié)設(shè)計(jì)引人入勝，模態(tài)窗口的用戶教學(xué)非常統(tǒng)一。當(dāng)新用戶打開新標(biāo)簽時(shí)，這一窗口就出現(xiàn)，給予用戶上下文提示。讓用戶可以熟悉的操作Path，讓應(yīng)用體驗(yàn)具有整體感，這是很多產(chǎn)品設(shè)計(jì)師需要考慮的問題。

注意：模態(tài)窗口下落的動(dòng)效和前文依然非常一致。

5. 個(gè)人頁的漸隱（網(wǎng)速問題，壓縮的比較過）

已經(jīng)有很多應(yīng)用采用這種滾動(dòng)+漸隱的技術(shù)——交互性非常棒，這是Path的版本。當(dāng)你在個(gè)人頁下拉的時(shí)候，個(gè)人資料會(huì)緩緩的漸隱，最后被一個(gè)標(biāo)頭“Me”取代

同時(shí)要留意的是背景照片的高度變化，最后成為窄窄的一條，緊挨著狀態(tài)欄，感覺非常棒！

6. 點(diǎn)贊交互

Path 有著友好的、愉悅的方式來點(diǎn)贊——提供了精美的表情，用來定制化點(diǎn)贊（大部分的點(diǎn)贊表情是需要購(gòu)買的）。注意表情依次彈動(dòng)的方式非常可愛。

7. 修改個(gè)人頁背景照片

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

8. 購(gòu)買點(diǎn)贊表情

這個(gè)細(xì)節(jié)必須加上，交互和動(dòng)效和上文的效果非常一致，這種效果一直貫穿整個(gè)應(yīng)用。

9. 地圖視圖

有兩點(diǎn)值得贊賞：

• 返回圖標(biāo)采用了Path標(biāo)志性的“P”Logo，讓整個(gè)應(yīng)用極具個(gè)性化。
• 注意當(dāng)我旋轉(zhuǎn)地圖時(shí)，整個(gè)地圖的變化：指南針、Z軸的透視感，文本的變換，極富細(xì)節(jié)。

10. 搜索

這個(gè)錄得不是很好

Search的搜索頁面做的很贊，當(dāng)我點(diǎn)擊上方的模糊玻璃搜索框時(shí)，會(huì)有氣泡般的搜索過濾項(xiàng)出現(xiàn)，吸引著用戶點(diǎn)擊探索。我非常喜歡所提供的搜索過濾項(xiàng)，和用戶的生活息息相關(guān)，很多應(yīng)用應(yīng)該學(xué)習(xí)一下。

11. 加載指示器

當(dāng)我點(diǎn)擊搜索附近的時(shí)候，出現(xiàn)加載指示器非常可愛。設(shè)計(jì)者沒有復(fù)用搜索框中的旋轉(zhuǎn)加載指示器，而是自創(chuàng)了一個(gè)很有生活情趣的指示器。

12. 特別關(guān)注一個(gè)朋友

在這個(gè)界面中，我們可以通過點(diǎn)擊星星圖標(biāo)來將朋友加入到特別關(guān)注中。細(xì)節(jié)雖小，但是不容忽視——注意添加、移除特別關(guān)注好友時(shí)的彈動(dòng)效果。

13. 分享流程

上文提到過Path的招牌分享按鈕動(dòng)效，這里我們來看看分享流程。當(dāng)點(diǎn)擊任意一個(gè)具體圖標(biāo)后，比如說圖中的“引用”，引用圖標(biāo)擴(kuò)大并漸隱。同時(shí)新的界面自下而上滑出，這種效果最近很多應(yīng)用也在采用。

進(jìn)入具體分享潔面后，我選擇了分享給特別關(guān)注好友，以及私人分享——注意上下文信息的滑出效果，讓體驗(yàn)非常流暢。

14. 跟時(shí)間線一樣效果的小時(shí)鐘

這一點(diǎn)肯定不會(huì)忽視的！我還記得我第一次用Path的時(shí)候，這個(gè)小細(xì)節(jié)令我沉迷，當(dāng)我滾動(dòng)翻看新的消息時(shí)，一個(gè)小時(shí)鐘出現(xiàn)在屏幕右上方，用來提示消息的時(shí)間。當(dāng)你繼續(xù)滑動(dòng)時(shí)，時(shí)間也會(huì)動(dòng)態(tài)的改變。而日期漸隱的改變。

Path很值得下載，光為了看看他們是怎樣通過細(xì)節(jié)取悅用戶的都值！

15. 最末端的消息

這個(gè)用圖片就可以說明，不用gif也可以。

當(dāng)你翻到最老的消息時(shí)，頁面到達(dá)了末端：出現(xiàn)了一個(gè)裝飾精美、稍微下凹的花紋插畫。這一幕很少見，但是讓人印象深刻。

16. 下拉刷新

跟小時(shí)鐘、轉(zhuǎn)盤彈出菜單一樣，Path的這個(gè)下拉刷新也是得以保留的招牌效果。我不記得我反復(fù)體驗(yàn)這個(gè)效果有多少回了。關(guān)于下拉刷新的文章做了很多，但是很少有界面能達(dá)到Path這種境界：流動(dòng)感十足，彈性十足，整體的交互感很愉悅。都說Facebook Paper改變了人們對(duì)于交互、動(dòng)效的看法，但是我想說，Path在這方面的努力要早于Paper。

17. Path的網(wǎng)站

這些家伙終于完成了4.0！估計(jì)這幾天他們的訪問量會(huì)激增。網(wǎng)站努力營(yíng)造出和應(yīng)用一致的愉悅體驗(yàn)——有興趣的趕緊去Path.com看看，很贊的網(wǎng)頁設(shè)計(jì)。

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

譯文出處：UI中國(guó)??譯文作者：MartinRGB