|
三、二維圖標(biāo)
定義：將項(xiàng)目在二維平面上排布，點(diǎn)擊項(xiàng)目，進(jìn)入子級(jí)。
適用情景：
用于甄別項(xiàng)目身份的信息可以在一個(gè)正方形區(qū)域內(nèi)展示。比如圖標(biāo)，但絕不僅限于圖標(biāo)哦。我寫(xiě)的這么抽象拗口，就是想讓大家把思路打開(kāi)。任何能滿(mǎn)足這一點(diǎn)的信息呈現(xiàn)方式都可以，目的只有一個(gè)，讓用戶(hù)知道該點(diǎn)什么。
討論：這是跟PC使用習(xí)慣最相似的一種。將二維屏幕分割成一系列方塊，放置一系列項(xiàng)目的入口。其實(shí)，當(dāng)可以明確預(yù)測(cè)用戶(hù)需求的時(shí)候，不應(yīng)該用這種導(dǎo)航方式。應(yīng)該直接引導(dǎo)用戶(hù)去做任務(wù)。只有當(dāng)不知道用戶(hù)到了這個(gè)APP里想搞什么，才得一次展示這么多入口。
完美無(wú)止境：
項(xiàng)目與項(xiàng)目之間要有明確的區(qū)分，才方便用戶(hù)找到想去的項(xiàng)目(3)。當(dāng)不能給每一個(gè)項(xiàng)目做個(gè)圖標(biāo)時(shí)，不妨用用現(xiàn)成的。feedsquare會(huì)把載入博客feed后的圖片拿來(lái)當(dāng)做該博客的圖標(biāo)，很有創(chuàng)意吧。
誰(shuí)說(shuō)圖標(biāo)就得是靜態(tài)的。為了告知用戶(hù)某個(gè)項(xiàng)目下有新內(nèi)容，值得一看(3)，蘋(píng)果設(shè)計(jì)了紅色的小創(chuàng)可貼。這樣有了推送，看起來(lái)就非常醒目。這也容易訓(xùn)練出很多“點(diǎn)貼貼強(qiáng)迫癥”，不把它消掉很難受啊。
如果越策到某些入口更重要，那么可以在視覺(jué)上做些強(qiáng)化。同時(shí)，還可以做一下分組，幫助用戶(hù)更快找到想要的入口(3) 。支付寶的界面上圖標(biāo)偏多，如果一定要用圖標(biāo)的話(huà)，可以考慮在這兩點(diǎn)上做點(diǎn)小優(yōu)化。
并不是每一個(gè)圖標(biāo)都得是信息層級(jí)上的入口，也可以在適當(dāng)?shù)奈恢梅派蟿?dòng)作鍵，比如這里的“新建”。
二維展示印象最為深刻的還是iPad上的相冊(cè)。用戶(hù)可以用手指分開(kāi)照片堆。照片四散開(kāi)來(lái)的動(dòng)畫(huà)可以很好地暗示用戶(hù)該怎么看下一級(jí)(4)，又該怎么回去(5)
出處：雪鸮的交互設(shè)計(jì)
責(zé)任編輯：bluehearts
上一頁(yè) 手機(jī)界面常用導(dǎo)航設(shè)計(jì)分析 [2] 下一頁(yè) 手機(jī)界面常用導(dǎo)航設(shè)計(jì)分析 [4]
|
第 1 頁(yè) 
第 3 頁(yè) 手機(jī)界面常用導(dǎo)航設(shè)計(jì)分析 [3]
