用戶體驗設計除了細節還是細節，每一個界面，每個動作我們都要深入分析經歷無數的體驗找到其中最優的體驗方式呈現給用戶，這是我們作為設計師必不可以的過程，前面我們通過《移動終端應該提供什么服務內容?》一文向大家介紹了作為移動終端以什么方的方式將內容呈現給用戶，接下來由南昌APP開發公司百恒網絡UI設計師向大家進一步介紹移動端菜單的設計要求及應達到的效果。

設計者在選定了應用程度與網站的內容和功能后，就應該考慮如何向用戶展 示，讓用戶很容易看到內容、使用到功能。關于移動終端的菜單設計，別人最 常問我的問題是：采用選項卡菜單還是漢堡菜單 ?應該如何選擇?和大部分用戶 體驗的相關問題一樣，我的最佳答案是：“看情況而定?！痹O計者要根據應用的內 容、具體環境、設計策略多個條件做決定。最終呈現在用戶面前的界面不過是對 上述條件深思熟慮后，精心設計的結果而已。

直觀菜單

最傳統的菜單設計與網頁菜單設計十分相近，即列舉出菜單的所有項目。這 種方法沒有任何風險：一切都在眼前，用戶不會錯過任何內容。但難點在于很難 把希望展示的內容統統列舉出來。

什么時候使用直觀菜單?

下面是可以或必須采用直觀菜單的幾種情況。

◎ 當菜單擁有建議能力的時候，換句話說，菜單可以激發用戶產生瀏覽頁面 的想法。

◎ 當用戶需要高效率的時候：用戶需要通過菜單立即進入各個功能，這時直 觀菜單更理想。

◎ 當菜單選項不多的時候：添加一個“其他”選項就可以達到全面覆蓋目 的，我在后文中會詳細介紹。

◎ 當基本不存在屏幕空間不足問題的時候。

◎ 當用戶需要常常從一個頁面跳轉到另一個頁面的時候。

彌補直觀菜單的缺陷

直觀菜單存在兩種缺陷：一是菜單在屏幕上占據空間較大;二是菜單無法容 納過多數量的選項。以下是彌補這兩種缺陷的方法。

在用戶不需要菜單的時候將菜單隱藏

直觀菜單最大的問題是它始終存在于屏幕上，十分礙事。所以，在人機交互 的某些時刻，尤其在用戶探索頁面和閱讀內容的時候，最好將菜單隱藏起來。此 時，我們可以假設用戶不需要太多的整體導航功能選項。

兩者兼顧的方法 在 iPhone 最初的開發指導思想中有這樣一條建議：標簽欄 (tab bar)中的 最后一個選項應當是“更多內容”“其他”等類似選項，用戶只需點擊一下就可 以展開次要選項。當然，在任何移動應用中都能采用這種方法。

隱藏菜單

移動終端像素有限，設計者顯然需要其他方案來解決菜單過大的問題，于是 漢堡菜單 4444 及其衍生設計應運而生。無論菜單是大是小，“漢堡菜單”的主要原則 是隱藏菜單，并通過點擊屏幕上的圖標展開菜單。隱藏菜單往往在旁側豎立擺 放，需要瀏覽時會出現在屏幕的左側或右側。因此人們也把這類菜單叫做“抽屜 菜單”，在軟件里也有類似的設計。

什么時候采用隱藏菜單?

隱藏菜單的最大優點是占據屏幕空間極少，可以把空間留給其他元素。其最大 缺點是隱藏了菜單的具體內容：如果用戶不打開菜單查看，從表面上什么都看不到。

眾所周知，可以被直接看見的直觀目標的使用頻率更高。如果采用隱藏菜 單，被隱藏的具體選項功能的使用頻率會大幅降低。隱藏菜單沒有建議能力 4444 ，也 就是說，只有在用戶主觀希望去尋找一些東西時，才會點擊隱藏菜單進行搜索。

隱藏菜單不會自行給予用戶任何啟發，激發他們產生使用隱藏內容的想法。常言 道：“眼不見，心不念?！边@句話在人機交互的世界中得到了最完美的詮釋。

然而，如果被隱藏的內容并非應用中的關鍵部分，那么隱藏菜單完全可以接 受，甚至應該得到推崇。從人機工程學角度看來，通過點擊一下來展示所有功 能，這種設計沒有太大意義：這其實意味著，設計者不知道該如何取舍，如何找 到合適的平衡點。還是那句話，想要設計高效的導航，設計者首先要考慮如何按 照內容和功能的重要性進行分級的問題。

南昌網站建設公司百恒網絡UI設計認為以下是可以或必須使用隱藏菜單的幾種情況。

◎ 當菜單里沒有任何重要內容，或者設計者希望向用戶重點推薦的內容時： 即次要內容和支持性功能，如用戶賬戶、設置參數、分類篩選、聯系人， 等等。

◎ 當屏幕上已經默認顯示了大部分功能時：以新聞實時播報、社交網絡為基 礎的移動應用大多如此。另外，一切屬于供應方推送 44 (push)而非用戶索 4 取 4 (pull)的應用也屬于這種情況。

◎ 當用戶已經知道或能夠猜到存在一些功能時：最常見的用戶登錄功能，以及 一些應用所特有的功能，例如，用戶應該能猜到報刊類應用程序或網站上 應該具有按照政治、金融、國際新聞等主題對內容進行分類篩選的功能。

◎ 當某一個選項屬于一系列慣例性操作中的一步時：比如用戶身份驗證。

◎ 當清單內容很長的時候：如電子商務網站的商品清單、在線雜志的欄目單 等。當然，在核心頁面和重要位置上，仍然可以重復強調隱藏菜單里列舉 的內容。

◎ 當不同項目之間的用途互不相關時：比如針對不同客戶群的不同項目。用 戶在使用中不會在各個選項之間穿梭，也就是說，不會從一個欄目跳到另 一個欄目。

◎ 當設計者希望盡可能去除屏幕上的多余元素，讓用戶聚焦關鍵內容時：隱 藏菜單實際上成為一種凈化界面、優化結構的好方法。

◎ 當出現兩個菜單，且彼此形成了競爭關系時：設計者應該找到妥協的方 法，隱藏相對次要的菜單或用戶能猜到存在的菜單。

彌補隱藏菜單不夠直觀的缺陷

隱藏菜單天生具有“隱藏”的缺陷。有幾種竅門可以彌補這種缺陷。如果設 計者在幾經權衡之后決心使用隱藏菜單，但仍擔心用戶看不到菜單藏起來的內 容，這時，以下方法就會發揮作用。尤其在用戶不了解或者很少使用移動應用的 時候，設計者更應該嘗試下文介紹的方法。

使用約定俗成的醒目圖標

第一條建議就是：尊重約定俗成的習慣。設計者選擇了隱藏菜單，就意味著 把菜單內容置于用戶的視線之外了。設計者應該竭盡所能讓隱藏菜單有機會展現 在用戶眼前。現在，設計者們最常采用漢堡菜單 的形式設計豎向綜合性菜單。但 是，“漢堡菜單”往往伴隨另一種視覺圖標，有的設計者甚至索性用這種圖標取 代“漢堡菜單”，讓菜單更醒目、更富內涵。

我們還應記住：界面越簡單，用戶就越容易發現隱藏菜單，完全不需要設計 各種花哨的圖標吸引用戶的注意。

豎向隱藏菜單的圖標該擺放在哪里?最常見的是把圖標放在屏幕的左上方。 設計者也可以打破習慣，只要保證圖標足夠突出就可以了。

如果隱藏菜單包含的選項具有相同的語義元素，那么設計者不必使用傳統圖 標(進入隱藏菜單的簡單方式)，而可以選擇一個展現所有選項共性的圖標。

配上說明文字

如果設計者十分希望凸顯菜單，但又不能默認顯示菜單內容，那么可以加入 說明文字。說明文字自然而然會增大進入菜單的按鍵尺寸，讓按鍵更加明顯。

配上通告文字

通告文字能夠把用戶的注意吸引到菜單欄目的更新內容上。當然，這絕不是 要“發明” 一堆和使用環境毫無關系的通知。設計者必須謹記，你要做的僅僅是 利用通告文字彌補相關欄目不夠明顯的缺陷。

配上動畫

設計者還可以通過動畫效果讓用戶注意到菜單的存在。采用動畫效果時也要 適度，避免增加人機交互操作的負擔。

本文僅限內部技術人員學習交流,不得作于其他商業用途.希望此文對廣技人員有所幫助。原創文章出自:南昌APP開發公司-百恒網絡 http://www.51yjwy.com/app/index.html 如轉載請注明出處!