Path for iOS設計細節賞析

發表於2015-12-19

1.登入模態

Path使用他們的彈出(Popup)設計語言,在第一時間取悅新使用者。輕微的彈入和漸隱效果使得登入頁面看起來如此鮮活。太棒了——我們將會在接下來的部分看到這種式樣應用在Path的其他地方,保持了良好的一致性。

Image title

 

2.新手引導

新手引導流程是如此的順暢!沒有多餘的廢話,也沒有不必要的資訊,只顯示幾行簡單的入門提示,模態視窗隨之消失並顯示主頁,主要分享按鈕(下方的+號處)會彈出工具提示歡迎使用者到來。可以看得出設計師花了多少心血設計這些小細節——尤其是工具提示上的用語非常講究。

Image title

 

3.Path最著名的地方

我記得在Path剛問世的時候,這個彈出式分享按鈕吸引了大量使用者和設計師的目光。我記得我盯著螢幕看了老半天,一直在想他們到底是怎麼做出來這個的?!Path最近的更新對這一設計細節進行了細微處的更改,但使用者體驗基本不變。

單擊“+”號開啟一個彈出式選單,裡面是所有使用者可以分享的內容。選單圖示很有趣地向外彈出,同時旋轉。當然,這種動畫設計會讓選擇時間變長,但是給新使用者增加的愉悅感是無法估量的。

Image title

4.引導頁

Path在引導頁設計上有許多非常棒的小細節。這些頁面會在新使用者開啟一個新標籤時出現,幫助使用者更加了解Path。
不要忽略引導頁模態視窗從螢幕上滑走的細節動畫,它雖然只在短短一秒內發生,但卻為整體使用者體驗增色不少。

Image title

5.個人頁漸隱效果

我看到越來越多的app採用這種滾動+漸隱的效果了,這種互動很漂亮,在Path上的使用也非常得體。當你滾動個人頁時,螢幕上的一些元素會漸漸消失,逐漸被一個簡單的“我”的導航欄標題所代替。

需要注意的是背景照片是直接顯示在iOS狀態列的下方的,將自己的照片填充滿螢幕的感覺真好!

傳不上圖,點選檢視原文視訊

6.釋出頁互動

Path採用友好而又有趣的方式,讓使用者和朋友進行分享——畫素完美的貼紙表情可以傳達情感。注意看當我單擊發布文章的愛心按鈕時,表情框是像氣泡一樣彈出的,太可愛了。

Image title

7.更改個人頁圖片

這一細節互動同樣很有意義,但是經常被忽略掉了。單擊個人頁標題處的任何地方,會彈出更改背景圖的上拉選單(Action Sheet)。你不需要到處去找設定按鈕,或者選項皮膚,只要單擊你希望改變的地方,這樣的好處是沒有多餘的學習成本,我喜歡!

Image title

8.購買表情貼紙

我把這個細節加進來,是為了強調貫穿整個app的模態視窗動畫非常具有一致性。

Image title

9.地圖檢視

這個檢視上有兩點非常棒的地方:

①後退按鈕使用的是Path標誌性的“P”logo,這點對我來說很酷——對於設計師來說,這裡的處理會是加上一個簡單的“返回”或者“關閉”字樣,但是加上程式的logo會給這款app增添更多的風味和人情味。

②注意當我旋轉地圖時所有移動的部件:設計精美的指南針會隨之旋轉,文字也會旋轉並移動。

Image title

10.搜尋框

當我在毛玻璃風格的搜尋框內單擊時,一些篩選選項會像氣泡一樣出現在螢幕上,吸引我進一步點選探索。

Image title

11.載入提示

當我開啟臨近搜尋時,我們可以看到這個美妙的載入提示映入眼簾。我想強調的是Path的設計師放棄了好幾種顯而易見的解決方案——下拉選單(Spinner),進度條(Progress bar)或載入文字(Loading text),選擇建立自己的載入解決方案,與app整體的設計語言匹配。

Image title

12.朋友

在這個頁面中,我想搜尋一位朋友的名字,將他加到我的圈子裡去。過程的細節或許看起來微不足道,但不應該被忽略——注意當你新增或移除好友時,那顆星星彈入彈出的方式。

Image title

13.分享流

首先需要注意的是,當使用者單擊時分享按鈕是如何互動的。在下面的視訊中,我選擇了一段引用來分享,引用圖示會變大,同時漸漸消失。這的確是一個非常流暢順滑的過場動畫,我發現越來越多的app都在採用它了(例Twitter)。

一旦進入了編寫內容檢視,我試著切換“好友圈”和“私密”選項,發現滑入檢視中的上下文提示符運動地也非常流暢。

Image title

14.時鐘

當你滾動資訊流檢視時,螢幕的右側會出現一個時鐘工具。如果繼續滾動,會基於它下層的檢視來自動校正日期和時間。時鐘的指標動畫非常棒,如果你想要研究如何用簡單的辦法取悅使用者,不妨下一個Path試試。

Image title

15.下拉重新整理

沒有多少介面的流動性,彈性和整體觀感可以和Path的互動媲美。值得注意的是Path的很多互動要比Facebook的paper來得早。

Image title

16.官網

設計師同樣想辦法把網站也做得同樣有趣,即使對一個著陸頁也是如此。

圖傳不上,點選檢視原文視訊

相關文章