1.登錄模態(tài)
Path使用他們的彈出(Popup)設(shè)計(jì)語言,在第一時(shí)間取悅新用戶。輕微的彈入和漸隱效果使得登錄頁面看起來如此鮮活。太棒了——我們將會在接下來的部分看到這種式樣應(yīng)用在Path的其他地方,保持了良好的一致性。
2.新手引導(dǎo)
新手引導(dǎo)流程是如此的順暢!沒有多余的廢話,也沒有不必要的信息,只顯示幾行簡單的入門提示,模態(tài)窗口隨之消失并顯示主頁,主要分享按鈕(下方的+號處)會彈出工具提示歡迎用戶到來。可以看得出設(shè)計(jì)師花了多少心血設(shè)計(jì)這些小細(xì)節(jié)——尤其是工具提示上的用語非常講究。
3.Path最著名的地方
我記得在Path剛問世的時(shí)候,這個(gè)彈出式分享按鈕吸引了大量用戶和設(shè)計(jì)師的目光。我記得我盯著屏幕看了老半天,一直在想他們到底是怎么做出來這個(gè)的?!Path最近的更新對這一設(shè)計(jì)細(xì)節(jié)進(jìn)行了細(xì)微處的更改,但用戶體驗(yàn)基本不變。
單擊“+”號打開一個(gè)彈出式菜單,里面是所有用戶可以分享的內(nèi)容。菜單圖標(biāo)很有趣地向外彈出,同時(shí)旋轉(zhuǎn)。當(dāng)然,這種動畫設(shè)計(jì)會讓選擇時(shí)間變長,但是給新用戶增加的愉悅感是無法估量的。
4.引導(dǎo)頁
Path在引導(dǎo)頁設(shè)計(jì)上有許多非常棒的小細(xì)節(jié)。這些頁面會在新用戶打開一個(gè)新標(biāo)簽時(shí)出現(xiàn),幫助用戶更加了解Path。
不要忽略引導(dǎo)頁模態(tài)窗口從屏幕上滑走的細(xì)節(jié)動畫,它雖然只在短短一秒內(nèi)發(fā)生,但卻為整體用戶體驗(yàn)增色不少。
5.個(gè)人頁漸隱效果
我看到越來越多的app采用這種滾動+漸隱的效果了,這種交互很漂亮,在Path上的使用也非常得體。當(dāng)你滾動個(gè)人頁時(shí),屏幕上的一些元素會漸漸消失,逐漸被一個(gè)簡單的“我”的導(dǎo)航欄標(biāo)題所代替。
需要注意的是背景照片是直接顯示在iOS狀態(tài)欄的下方的,將自己的照片填充滿屏幕的感覺真好!
(傳不上圖)
6.發(fā)布頁交互
Path采用友好而又有趣的方式,讓用戶和朋友進(jìn)行分享——像素完美的貼紙表情可以傳達(dá)情感。注意看當(dāng)我單擊發(fā)布文章的愛心按鈕時(shí),表情框是像氣泡一樣彈出的,太可愛了。
7.更改個(gè)人頁圖片
這一細(xì)節(jié)交互同樣很有意義,但是經(jīng)常被忽略掉了。單擊個(gè)人頁標(biāo)題處的任何地方,會彈出更改背景圖的上拉菜單(Action Sheet)。你不需要到處去找設(shè)置按鈕,或者選項(xiàng)面板,只要單擊你希望改變的地方,這樣的好處是沒有多余的學(xué)習(xí)成本,我喜歡!
8.購買表情貼紙
我把這個(gè)細(xì)節(jié)加進(jìn)來,是為了強(qiáng)調(diào)貫穿整個(gè)app的模態(tài)窗口動畫非常具有一致性。
9.地圖視圖
這個(gè)視圖上有兩點(diǎn)非常棒的地方:
①后退按鈕使用的是Path標(biāo)志性的“P”logo,這點(diǎn)對我來說很酷——對于設(shè)計(jì)師來說,這里的處理會是加上一個(gè)簡單的“返回”或者“關(guān)閉”字樣,但是加上程序的logo會給這款app增添更多的風(fēng)味和人情味。
②注意當(dāng)我旋轉(zhuǎn)地圖時(shí)所有移動的部件:設(shè)計(jì)精美的指南針會隨之旋轉(zhuǎn),文字也會旋轉(zhuǎn)并移動。
10.搜索框
當(dāng)我在毛玻璃風(fēng)格的搜索框內(nèi)單擊時(shí),一些篩選選項(xiàng)會像氣泡一樣出現(xiàn)在屏幕上,吸引我進(jìn)一步點(diǎn)擊探索。
11.加載提示
當(dāng)我開啟臨近搜索時(shí),我們可以看到這個(gè)美妙的加載提示映入眼簾。我想強(qiáng)調(diào)的是Path的設(shè)計(jì)師放棄了好幾種顯而易見的解決方案——下拉菜單(Spinner),進(jìn)度條(Progress bar)或加載文字(Loading text),選擇創(chuàng)建自己的加載解決方案,與app整體的設(shè)計(jì)語言匹配。
12.朋友
在這個(gè)頁面中,我想搜索一位朋友的名字,將他加到我的圈子里去。過程的細(xì)節(jié)或許看起來微不足道,但不應(yīng)該被忽略——注意當(dāng)你添加或移除好友時(shí),那顆星星彈入彈出的方式。
13.分享流
首先需要注意的是,當(dāng)用戶單擊時(shí)分享按鈕是如何交互的。在下面的視頻中,我選擇了一段引用來分享,引用圖標(biāo)會變大,同時(shí)漸漸消失。這的確是一個(gè)非常流暢順滑的過場動畫,我發(fā)現(xiàn)越來越多的app都在采用它了(例Twitter)。
一旦進(jìn)入了編寫內(nèi)容視圖,我試著切換“好友圈”和“私密”選項(xiàng),發(fā)現(xiàn)滑入視圖中的上下文提示符運(yùn)動地也非常流暢。
14.時(shí)鐘
當(dāng)你滾動信息流視圖時(shí),屏幕的右側(cè)會出現(xiàn)一個(gè)時(shí)鐘工具。如果繼續(xù)滾動,會基于它下層的視圖來自動校正日期和時(shí)間。時(shí)鐘的指針動畫非常棒,如果你想要研究如何用簡單的辦法取悅用戶,不妨下一個(gè)Path試試。
15.下拉刷新
沒有多少界面的流動性,彈性和整體觀感可以和Path的交互媲美。值得注意的是Path的很多交互要比Facebook的paper來得早。
16.官網(wǎng)
設(shè)計(jì)師同樣想辦法把網(wǎng)站也做得同樣有趣,即使對一個(gè)著陸頁也是如此。
0
喜歡他,就推薦他上首頁吧^_^
0371-86068866
4008887269
cndesign@163.com
CND設(shè)計(jì)網(wǎng)(CNDESIGN)會員所發(fā)布展示的 “原創(chuàng)作品/文章” 版權(quán)歸原作者所有,任何商業(yè)用途均需聯(lián)系作者。如未經(jīng)授權(quán)用作他處,作者將保留追究侵權(quán)者法律責(zé)任的權(quán)利。
Copyright ©2006-2019 CND設(shè)計(jì)網(wǎng)