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

直觀菜單

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

什么時(shí)候使用直觀菜單?

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

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

2.當(dāng)用戶需要高效率的時(shí)候：用戶需要通過菜單立即進(jìn)入各個(gè)功能，這時(shí)直觀菜單更理想。

3.當(dāng)菜單選項(xiàng)不多的時(shí)候：添加一個(gè)“其他”選項(xiàng)就可以達(dá)到全面覆蓋目的。

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

5.當(dāng)用戶需要常常從一個(gè)頁面跳轉(zhuǎn)到另一個(gè)頁面的時(shí)候。

直觀菜單可以讓用戶直接點(diǎn)擊使用重要的功能，如 MAPPY 中的“路線”(Itinéraire)功能、FOODSPOTTING 中的“拍照”功能和 CAPTAINE TRAIN 中的“購物籃”功能，同時(shí)也可以鼓勵(lì)用戶探索不知曉或者從未瀏覽過的頁面，比如 MAPPY 中的“購物”功能。

彌補(bǔ)直觀菜單的缺陷

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

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

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

和大多數(shù)移動(dòng)瀏覽器一樣，當(dāng)用戶“卷起”頁面時(shí)，SAFARI 菜單消失;在用戶點(diǎn)擊時(shí)，菜單重新出現(xiàn)。

兩者兼顧的方法

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

其他”(Autre)設(shè)為菜單導(dǎo)航的最后一個(gè)選項(xiàng)，包含后續(xù)內(nèi)容和其他選項(xiàng)。

隱藏菜單

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

“漢堡菜單”通常采用三條上下排列的橫線作為按鍵，這種排列方式讓人聯(lián)想到漢堡包中面包與食材上下疊放的樣子，“漢堡菜單”因此得名。

什么時(shí)候采用隱藏菜單?

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

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

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

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

以下是可以或必須使用隱藏菜單的幾種情況。

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

旁側(cè)的菜單里都是些次要項(xiàng)目，完全可以隱藏起來。

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

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

顯然，在這款應(yīng)用程序中，一定存在根據(jù)運(yùn)動(dòng)項(xiàng)目分類篩選的功能，所以設(shè)計(jì)者可以把該功能隱藏起來，讓出更多界面空間給其他更重要的元素。

4.當(dāng)某一個(gè)選項(xiàng)屬于一系列慣例性操作中的一步時(shí)：比如用戶身份驗(yàn)證。

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

豎向的隱藏菜單十分適合在針對(duì)大眾的時(shí)尚網(wǎng)站上使用，因?yàn)橛脩裟軌虿鲁鰬?yīng)該存在商品的分類名單或搜索欄。設(shè)計(jì)者可以直接把主推商品放在核心頁面上，讓商品更為醒目。

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

使用這款應(yīng)用程序時(shí)，用戶通常每次只會(huì)使用搜索、建議、查詢路線這些主要功能中的一個(gè)。所以，當(dāng)用戶在首頁上選擇一個(gè)項(xiàng)目后，菜單完全可以隱藏起來。

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

隱藏菜單釋放了屏幕空間，讓內(nèi)容更清晰。

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

使用豎向的隱藏菜單(右圖)展示相對(duì)次要的欄目，以便突出另一個(gè)主要菜單(左圖)。這樣一來，用戶可以通過主要菜單在“清單”和“地點(diǎn)”之間切換。

將應(yīng)用程序中的整體導(dǎo)航功能放入隱藏菜單，讓這些操作能夠始終顯示。隱藏菜單對(duì)于選項(xiàng)、操作、篩選功能都非常適合。

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