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

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

直觀菜單

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

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

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

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

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

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

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

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

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

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

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

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

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

隱藏菜單

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

彌補(bǔ)隱藏菜單不夠直觀的缺陷

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

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

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

我們還應(yīng)記?。航缑嬖胶?jiǎn)單，用戶(hù)就越容易發(fā)現(xiàn)隱藏菜單，完全不需要設(shè)計(jì) 各種花哨的圖標(biāo)吸引用戶(hù)的注意。

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

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

配上說(shuō)明文字

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

配上通告文字

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

配上動(dòng)畫(huà)

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

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