移動應用的完美導航

      在移動應用和網(wǎng)站中，用戶通常都會依賴菜單去查看內(nèi)容和使用功能。你會發(fā)現(xiàn)在每一個網(wǎng)站或APP中，菜單是如此的重要，但并不是所有的菜單都在同一個等級。我們面臨的最頻繁的菜單問題大概就是部分菜單讓人感到困惑，很難操作甚至根本找不到。

讓菜單可見

    大部分的文章都有談到漢堡菜單(hamburger menus)，也十分反對使用它。

    這個三條橫線的小按鈕是十分令人困擾的。并不是圖標本身，而是將導航菜單隱藏在一個圖標后面。

看不到，想不到

    對于小屏幕來說隱藏菜單是十分常見的方式，你將會考慮到有限的屏幕顯示區(qū)域，默認將整個菜單選項隱藏在一個滾動的抽屜里。

      但是漢堡菜單(hamburger menus)的效率并不高，每當你想看到選項的時候都必須點擊一次。

看得見，摸得著

    交互理論，A/B測試以及一些世界上不錯的APP的優(yōu)化改進都表明在有限的屏幕中可見的菜單選項會提高用戶的參與度和滿意度。

    這就是為什么許多的APP都慢慢的去掉了漢堡菜單，并且讓使用率最高的菜單選項一直保持可見。

Youtube提供了兩種核心功能的可選，允許用戶在兩種功能風格下進行快速切換。

Android端Youtube重新設計

    這同樣也有一些不錯的方式。當標簽菜單欄(Tab bar)不可用的時候讓它在可視區(qū)域內(nèi)消失。如果屏幕是一種信息流的話，當用戶向上滾動瀏覽內(nèi)容的時候標簽菜單欄將會消失，當用戶向下滾動回到頂部的時候標簽菜單欄又會顯示出來。

    最后一點，但它并不是不重要。許多的設計師都會犯一種錯誤，設計菜單的時候會將分類目錄放在下拉菜單中。但是這將會導致同樣的問題：用戶僅僅能看到當前默認選項，而且其它分類選項被無形的隱藏了起來。

識別性低的下拉菜單(Dropdown Menu)與識別度高的開關按鈕(Toggle Button)

IOS平臺的開關按鈕

注意：現(xiàn)在許多的APP仍然采用漢堡包菜單，因為這樣的話可以將大量的功能入口放置在APP中。但其實這會形成一種誤導，因為如果你的菜單很復雜的話，將菜單隱藏起來將會使你的APP很不友好。

聊一聊導航當前選擇項：

    在瀏覽網(wǎng)站或者APP的時候錯誤的表明用戶當前位置可能同樣也是非常普遍的錯誤。"我現(xiàn)在在哪里？"是用戶在一個友好的菜單系統(tǒng)中經(jīng)常詢問的問題之一。

    用戶通常依賴于菜單中的視覺線索來尋找自己的當前位置。但是有些時候用戶所看到的并不是他們想要看到的。

圖標

    現(xiàn)在有很多用戶識別度很高的圖標，大部分的圖標基本代表的是功能性的標識，比如搜索，郵箱和打印等等。不幸的是像這種識別度比較高的圖標還是比較稀少的。APP設計師經(jīng)常會將一些功能隱藏在一些識別度很低的圖標下，這讓用戶很茫然。

Bloom.fm 產(chǎn)品的之前的Android版本的菜單，實在是很難識別

顏色

    在標簽菜單欄中當前狀態(tài)可以通過對比比較明顯的顏色和選中的標簽標識。

按鈕的顏色該如何引導用戶點擊

不錯的選中顏色的案例：選中項在底部標簽菜單欄(Tab Bar)的顯示

注意：選中的圖標和顏色可以幫助用戶了解他們的當前位置。如果你使用圖標的話，總是會讓用戶自己進行可用性測試。

菜單項和用戶任務保持一致

    你應當使用那些理解性比較高的鏈接標簽。指明用戶在尋找什么，用相似度和相關度比較高的分類標簽，讓你的目標用戶更友好的使用你的產(chǎn)品。用行話來說的話菜單并不是你向用戶賣萌的地方。所以關鍵是要清晰的描述你的內(nèi)容和功能特性。

    用戶喜歡的那種可以快速識別和快速響應的產(chǎn)品。這樣的話你可以節(jié)省用戶識別菜單選項的時間。

Twitter應用IOS平臺的導航菜單

  復雜的功能特性的話應當搭配一些相應的文字提示以減少用戶識別的時間。

注意：菜單元素應當是很容易去識別的。當用戶點擊某一菜單元素的時候，用戶應當很容易理解發(fā)生了什么。

按鈕易操作

    可點擊元素太小或者間距太近都是讓產(chǎn)品用戶困擾的因素。因此讓菜單選項滿足用戶切換或點擊的大小是很重要的。

    一項MIT的觸摸點擊研究發(fā)現(xiàn)對于大部分成年人來說每個手指的寬度大概是1.6cm到2cm之間。轉換成像素的話大概是在45到57像素之間。

平均每個手指的觸摸區(qū)域寬度

    45到57像素的可觸摸區(qū)域可以讓用戶更容易的操作目標菜單選項，并且當用戶精確點擊目標菜單的時候可以得到更清晰的視覺反饋。

注意：菜單選項應當符合人的生理方面的設計。讓你的菜單選項跟人的平均手指可觸摸區(qū)域吻合的話可以提高你的產(chǎn)品的可用性。

總 結

    幫助用戶快速導航是每一個網(wǎng)站和移動產(chǎn)品的重中之重。要實現(xiàn)這個目標的話就是要創(chuàng)建一個與用戶心智模型自然一致的交互系統(tǒng)。

    簡單的用戶使用流程，清晰的視覺和令人難忘的設計會讓用戶感受到一種無縫流暢的用戶體驗。你的交互系統(tǒng)應當通過清晰的視覺交流為用戶解決問題。

    你應當以你的用戶為中心進行設計。你的用戶感覺你的產(chǎn)品越簡單易用，他們才更可能去使用你的產(chǎn)品，提高產(chǎn)品的使用率。

個人總結：

    漢堡包(hamburger menus)菜單形式與底部標簽(Tab Bar)切換的確存在很大的差別。基本上是辨別IOS和Android兩種平臺產(chǎn)品的特征。在IOS平臺的產(chǎn)品中大部分采用的是底部標簽切換的形式，在Android平臺的產(chǎn)品中漢堡包菜單也十分的普遍。尤其是Google系列的產(chǎn)品基本采用的是漢堡包菜單，但到現(xiàn)在Google也在慢慢的做出改變，Youtube的兩種切換形式就是典型代表，Google Photos也在做出相應的變化。同時在Google已經(jīng)發(fā)布的Material Design設計語言中，同時也加入了底部標簽的設計形式，這也是Google做出的一些改變。也許平臺與平臺之間固然會有一些典型的特征，但是像對于用戶來說可用易用的才是我們需要做出改變的。

(本文翻譯自Medium，如有不正確的地方請指正，謝謝)