在线看片电视剧免费看,精品国产一区二区三区2021,99久久久无码国产精品免费,精品人妻少妇嫩草AV无码专区

0411-39943997
工作時(shí)間:周一至周日 8:30-22:00
設計知識
News and information

側抽屜遭嫌棄,如何設計優(yōu)秀的導航欄?

標簽:設計理念瀏覽次數:?? 時(shí)間:2018-01-10

手機屏幕尺寸越做越大,作為互聯(lián)網(wǎng)的深度用戶(hù),我相信你已經(jīng)深刻體會(huì )到側抽屜導航在移動(dòng)(和桌面)端是如何降低用戶(hù)體驗的。先不談它較低的可發(fā)現性和使用效率,拿出你的手機試著(zhù)只用一手去按屏幕左上角。

欣慰的是,越來(lái)越多的應用和網(wǎng)站正在嘗試用更有效的方法解決這個(gè)問(wèn)題。這里我整理出了市面上能見(jiàn)到的所有方法進(jìn)行比較。有趣的是,Youtube 作為側抽屜的開(kāi)山鼻祖,它也不用了。

 

一、選項卡

如果應用的選項不是很多(一般不超過(guò)5個(gè)),而且使用頻次較高用戶(hù)需要經(jīng)常來(lái)回切換,選項卡導航是個(gè)不錯的解決方案:

 

這樣做似乎非常行之有效,但是,需要在設計考慮一些事情:

  • 選項不建議超過(guò)5個(gè)

  • 選項在視覺(jué)觀(guān)感上應得到強化

  • 選項優(yōu)先級隨順序逐級降低,符合用戶(hù)心理預期

  • 除了被用戶(hù)所熟知的圖標(如主頁(yè)、圖片、個(gè)人中心等)其它圖標建議標簽文字說(shuō)明

 

例如:淘票票 和 開(kāi)眼

 

二、“更多”項

當主要部分超過(guò)5個(gè)時(shí),一個(gè)切實(shí)可行的解決方案是顯示四至五個(gè)優(yōu)先級最高的選項,將其它的歸位一類(lèi)叫做更多項:

 

這個(gè)方案的設計原則和選項卡基本一致,更多項的子類(lèi)可以在導航頁(yè)面的下拉菜單中顯示:

 

你可以說(shuō)這種方案的使用效率比抽屜導航強不到哪去,對大多數用戶(hù)而言,只要可見(jiàn)項優(yōu)先級足夠高,有四至五個(gè)可見(jiàn)的高頻功能會(huì )極大的降低學(xué)習成本,改善用戶(hù)體驗。

 

例如:Facebook

動(dòng)態(tài)消息、好友請求、通知和搜索總是可見(jiàn),剩下的所有功能是可以在“更多”菜單里

 

三、折疊菜單

在網(wǎng)頁(yè)設計中,情況稍顯復雜,采用標簽+更多的導航設計,能夠自適應屏幕寬度,顯示盡可能多的選項,其它的歸到更多項:

這意味著(zhù)更多項中包含的子相會(huì )隨著(zhù)屏幕寬度的減小而變多,沒(méi)有足夠的空間項目就會(huì )折疊起來(lái)。尤其當寬度處于中間時(shí),這個(gè)解決方案的靈活性提供了一個(gè)更好的用戶(hù)體驗。

 

例如:BBC

 

四、滾動(dòng)導航

如果導航項的數量較大,而且優(yōu)先級幾乎沒(méi)什么區別,采用“更多”項將會(huì )是一個(gè)糟糕的妥協(xié),另一個(gè)方案是滾動(dòng)視圖中列出的所有項目:

 

這種方案的缺點(diǎn)是用戶(hù)只能看到可見(jiàn)范圍內的幾個(gè)選項,其余的選項用戶(hù)不可預知。盡管如此,當用戶(hù)探索購物或新聞類(lèi)選項時(shí),這依然是可接受的解決方案。

作為視覺(jué)設計,需要確保提供足夠的視覺(jué)線(xiàn)索,表明在水平滾動(dòng)后有更多的元素,弱化邊緣元素就是個(gè)不錯的辦法。

 

例如:C Channel

榮獲 2016年度 Material Design 設計獎(創(chuàng )意導航組)

 

五、下拉菜單

當其他部分的可見(jiàn)性和可訪(fǎng)問(wèn)性并不重要時(shí),一個(gè)少見(jiàn)但有趣的方案是使用下拉菜單:

 

下拉菜單有一個(gè)雙重角色:首先,它作為一個(gè)頁(yè)面標題,雖然選項隱藏其下,向下箭頭表明有可能迅速切換到相似的部分。其二,除了切換同級選項,切換到下級項目也是能被用戶(hù)接受的。

 

例如:多鄰國

通過(guò)下拉菜單快速切換練習語(yǔ)言

六、抽屜導航不一定很糟

對于大多數用戶(hù)來(lái)說(shuō),下拉菜單的交互方式并不常見(jiàn)。令人意外的是,抽屜導航可能是一個(gè)不錯的選擇。它的主要缺點(diǎn)是較低的可發(fā)現性,當設計二級導航選項是,這種模式可能是一個(gè)適當的解決方案。

 

例如:Uber(優(yōu)步) &  Red Dot(紅點(diǎn))

屏幕上的一切都是為了請求一輛車(chē),諸如歷史、設置這類(lèi)的二級選項不應該比從一個(gè)漢堡包菜單更突出

 

 

結論

沒(méi)有萬(wàn)能的導航欄設計,它取決于產(chǎn)品定位、用戶(hù)需求以及內容信息。適用于其它應用的導航可能不會(huì )為你工作,反之亦然。每一個(gè)優(yōu)秀的導航設計,是對優(yōu)先級、信息架構、邏輯結構和用戶(hù)需求的高度把控



本文地址:http://m.nwafulive.cn/library/shejizhishi/20180110564.html
Copyright? 2011 仟億科技,All rights reserved.
首頁(yè)關(guān)于我們新聞資訊服務(wù)項目軟件產(chǎn)品解決方案成功案例網(wǎng)站地圖加入我們聯(lián)系我們
国产精品一区二区久久精品| 久久久久噜噜噜亚洲熟女综合| 亚洲精品无码AV人在线观看国产| 欧美午夜乱理片无码视频| 蜜臀亚洲AV永久无码精品老司机| 国产欧美国产综合每日更新|