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

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

直觀菜單

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

什么時候使用直觀菜單?

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

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

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

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

◎ 當(dāng)基本不存在屏幕空間不足問題的時候。

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

彌補直觀菜單的缺陷

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

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

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

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

隱藏菜單

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

什么時候采用隱藏菜單?

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

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

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

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

南昌網(wǎng)站建設(shè)公司百恒網(wǎng)絡(luò)UI設(shè)計認為以下是可以或必須使用隱藏菜單的幾種情況。

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

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

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

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

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

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

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

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

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

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

使用約定俗成的醒目圖標(biāo)

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

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

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

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

配上說明文字

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

配上通告文字

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

配上動畫

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

本文僅限內(nèi)部技術(shù)人員學(xué)習(xí)交流,不得作于其他商業(yè)用途.希望此文對廣技人員有所幫助。原創(chuàng)文章出自:南昌APP開發(fā)公司-百恒網(wǎng)絡(luò) http://www.www16568.cn/app/index.html 如轉(zhuǎn)載請注明出處!