漢堡菜單的使用注意事項(xiàng)

本文主要翻譯自“Don't Make These Mobile Menu Mistakes”

漢堡三線圖標(biāo)(又稱抽屜)

“三條杠”的漢堡菜單圖標(biāo)是現(xiàn)在相當(dāng)常用的導(dǎo)航方式?,F(xiàn)在主要流行的使用方式有兩種,一種是path的打開側(cè)邊欄,如下圖。

? ??

另一種是新浪微博的菜單。

那么在使用漢堡圖標(biāo)時(shí)要注意些什么呢

要:告訴你的用戶從哪里開始

Buckle向新用戶標(biāo)識(shí)出了菜單按鍵,并很好的吸引了他們的注意力。盡管用戶不知道按鈕后面是什么,但他們知道這是繼續(xù)體驗(yàn)的一個(gè)好的開始,之后他們會(huì)發(fā)現(xiàn)漢堡菜單通向了分類導(dǎo)航。

不要:讓漢堡菜單和logo混淆

下面幾個(gè)的漢堡菜單看起來像是logo

不要:大量留白

下圖中的圖片會(huì)吸引人的視線注意,落單靠右的漢堡菜單非常不起眼

要:將漢堡圖標(biāo)和其他導(dǎo)航按鈕放在一起

歸組
常用的:將漢堡菜單和搜索放在一起

放置漢堡按鈕時(shí)要注意一些習(xí)慣用法。

e-bag將漢堡按鈕放在最右上角,但在慣例里用戶會(huì)在這個(gè)位置尋找登錄和注冊(cè)。

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

將漢堡按鈕放在搜索框左邊更好,因?yàn)橐话阍谧筮呎归_菜單

要:標(biāo)識(shí)你的按鈕

在可行的情況下標(biāo)識(shí)你的按鈕



直接標(biāo)注menu

最后,原文寫于2013年,因此關(guān)于一些習(xí)俗、慣例方面的設(shè)計(jì)并不完全適用于現(xiàn)在的設(shè)計(jì)。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • 內(nèi)容抽屜菜單ListViewWebViewSwitchButton按鈕點(diǎn)贊按鈕進(jìn)度條TabLayout圖標(biāo)下拉刷新...
    皇小弟閱讀 46,900評(píng)論 22 665
  • 使用sketch最重要的一點(diǎn)是設(shè)計(jì)好控件的規(guī)范。 為做好設(shè)計(jì)規(guī)范需要對(duì)色彩進(jìn)行編號(hào),比如:color_a”_1,c...
    youyeath閱讀 26,301評(píng)論 2 237
  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫、插件、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 12,251評(píng)論 4 61
  • 身上這三穴能讓皮膚水嫩光滑! 隨著年齡的增長和壓力加大, 皮膚失去光澤,干燥粗糙, 除了食療和護(hù)膚品之外, 不妨常...
    陳藝文_有愛閱讀 253評(píng)論 0 1
  • 很巧今天在看季羨林先生的《季羨林談人生》里面剛好提到關(guān)于隔膜?!拔覀兤匠K^的‘隔膜’是指情意不相通,彼此不了解。...
    流氓文氓閱讀 396評(píng)論 0 0