用戶體驗設計除了細節(jié)還是細節(jié)，每一個界面，每個動作我們都要深入分析經(jīng)歷無數(shù)的體驗找到其中最優(yōu)的體驗方式呈現(xiàn)給用戶，這是我們作為設計師必不可以的過程，作為移動終端以什么方的方式將內(nèi)容呈現(xiàn)給用戶，接下來由成都APP開發(fā)公司創(chuàng)新互聯(lián)網(wǎng)絡UI設計師向大家進一步介紹移動端菜單的設計要求及應達到的效果。

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

直觀菜單

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

什么時候使用直觀菜單?

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

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

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

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

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

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

彌補直觀菜單的缺陷

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

在用戶不需要菜單的時候?qū)⒉藛坞[藏

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

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

隱藏菜單

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

什么時候采用隱藏菜單?

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

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

隱藏菜單不會自行給予用戶任何啟發(fā)，激發(fā)他們產(chǎn)生使用隱藏內(nèi)容的想法。常言 道：“眼不見，心不念。”這句話在人機交互的世界中得到了最好的詮釋。

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

成都網(wǎng)站建設公司創(chuàng)新互聯(lián)網(wǎng)絡UI設計認為以下是可以或必須使用隱藏菜單的幾種情況。

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

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

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

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

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

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

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

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

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

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

使用約定俗成的醒目圖標

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

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

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

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

配上說明文字

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

配上通告文字

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

配上動畫

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

網(wǎng)站題目：移動端設計時在何種環(huán)境下使用何種菜單？
網(wǎng)頁鏈接：http://www.js-pz168.com/news31/72981.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供關鍵詞優(yōu)化、企業(yè)網(wǎng)站制作、外貿(mào)網(wǎng)站建設、網(wǎng)站收錄、定制開發(fā)、域名注冊

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)