現(xiàn)在我們已經(jīng)有數(shù)據(jù)說明側(cè)拉菜單(又稱漢堡包菜單)的使用，可能弊大于利。

　　下面是一些數(shù)據(jù)：

　　Side drawer navigation could be costing you half your user engagement

　　Mobile Menu AB Tested

　　Hamburger vs Menu: The Final AB Test

　　需要注意的是，這是一件十分微妙的問題。而同樣的問題，我們也已經(jīng)在用戶測(cè)試和其他一些事情中發(fā)現(xiàn)。

　　我希望你們閱讀過這篇文章后能對(duì)這個(gè)問題及解決方法有所了解，并且在使用這個(gè)模式前知曉其后果。

問題

　　不易發(fā)現(xiàn)

　　更低效

　　與平臺(tái)原生導(dǎo)航模式?jīng)_突

　　并不是一目了然

　　不易發(fā)現(xiàn)

　　“不在眼中的，就不會(huì)想到?！?/p>

　　在這個(gè)模式的默認(rèn)狀態(tài)，側(cè)拉菜單和里面所有的內(nèi)容都是隱藏的。

　　人們需要首先需要辨別側(cè)拉菜單按鈕是可以點(diǎn)擊的——公司都認(rèn)為應(yīng)該使用一個(gè)菜單或者工具圖標(biāo)來表示，他們也確實(shí)感覺有必要這么做——但是在應(yīng)用使用時(shí)可能就不是這個(gè)情況了，因?yàn)橹黜擄@承載了主要的功能。

　　不那么有效

　　盡管用戶了解并看重這一特征，但是這個(gè)模式帶來了一種導(dǎo)航認(rèn)知摩擦，因?yàn)樗仁谷藗兿却蜷_菜單，然后才能看到其中的條目。

　　下面是一個(gè)對(duì)比的案例。展示了如果導(dǎo)航元素一直可見的話，導(dǎo)航效果是多么迅速。

　和平臺(tái)導(dǎo)原生航模式?jīng)_突

　　除了上面那些問題，在iOS這樣的平臺(tái)上，側(cè)拉菜單在沒有與標(biāo)準(zhǔn)導(dǎo)航模式?jīng)_突下是無法實(shí)現(xiàn)的。

　　左邊的導(dǎo)航欄按鈕需要保留一個(gè)菜單按鈕，但是我們也得讓用戶有回去的方法。設(shè)計(jì)師要么承認(rèn)上圖中存在的導(dǎo)航欄內(nèi)容過載問題——甚至沒有給標(biāo)題留下空間，要么迫使用戶點(diǎn)擊好幾次來進(jìn)入下圖顯示的列表。

　　不一目了然

　　因?yàn)閷?dǎo)航僅在用戶想要進(jìn)入應(yīng)用其他部分時(shí)才可見，所以使得對(duì)特定內(nèi)容信息的呈現(xiàn)更加困難。

　　你可能會(huì)采用和Jawbone UP應(yīng)用相似的做法：在側(cè)拉菜單按鈕旁邊放置一個(gè)象征消息的圖標(biāo)。

　　這個(gè)并不實(shí)用，因?yàn)檫@需要你去處理更多的圖標(biāo)，并且作為設(shè)計(jì)師來說可能要被迫去增加一個(gè)通用圖標(biāo)，而不是弱化圖標(biāo)含義。

　　反之，下面的選項(xiàng)卡欄(采自twitter)，讓用戶了解通知的情境，并且直接引導(dǎo)其到達(dá)相關(guān)頁面。

　認(rèn)知

　　你可能有時(shí)為了節(jié)省屏幕空間而被迫使用它，但是這確實(shí)會(huì)讓人們對(duì)他們看到的東西產(chǎn)生誤導(dǎo)。當(dāng)你認(rèn)為用戶看到了呈現(xiàn)在他眼前的所有內(nèi)容的時(shí)候，其實(shí)我們會(huì)將注意力有一個(gè)焦點(diǎn)區(qū)域(而不是整個(gè)屏幕)，即使屏幕尺寸很小也是一樣。

　　案例：消失的圖標(biāo)——改變移動(dòng)設(shè)備的盲目性

　　所以節(jié)省屏幕空間可以通過不損害導(dǎo)航或者不違背基本人機(jī)交互原則而達(dá)到目的，比如提供反饋或者展示當(dāng)前狀態(tài)。

　　另外提醒一下：我們需要的是更新我們頭腦中對(duì)人機(jī)交互的理解。我很確信這會(huì)幫助人們?cè)谶M(jìn)行視覺設(shè)計(jì)時(shí)避免很多錯(cuò)誤產(chǎn)生。

　　解決方法

　　關(guān)于問題本身寫了很多，但是具體解決方法大家其實(shí)還不清楚。

　　什么時(shí)候該使用它呢?

　　極少數(shù)情況下這種模式有用，但是一般性的原則還是盡量避免使用。

　　IRCCloud是一個(gè)適合這個(gè)模式的應(yīng)用——可以實(shí)現(xiàn)頻道和頻道成員之間的導(dǎo)航。

　　由于主屏下面沒有子頁面的層級(jí)導(dǎo)航存在，所以這可以使用，信息可以簡(jiǎn)單地呈現(xiàn)出來。

　　但是即使是在這種情景下，可以看到用戶界面仍然信息過載了，應(yīng)用的信息架構(gòu)需要重新考慮了。

　　右側(cè)的側(cè)拉菜單展示了頻道成員內(nèi)容結(jié)果只是呈現(xiàn)活動(dòng)按鈕，而弱化展現(xiàn)整個(gè)頻道相關(guān)操作。反之，設(shè)計(jì)師沒有其他選擇余地，只能將頻道、網(wǎng)絡(luò)和賬號(hào)混合放在了一個(gè)單獨(dú)的菜單之中：

　　接下來讓我們?nèi)タ纯次恼碌南乱徊糠帧?/p>

　要是不用這種方法，我該怎么辦呢?

　　側(cè)邊菜單會(huì)導(dǎo)致糟糕的信息架構(gòu)，因?yàn)槟阒皇且晃秾⑵涮砑舆M(jìn)去，而沒有考慮結(jié)果——直到人們實(shí)際使用的時(shí)候才會(huì)意識(shí)到它有多糟糕。

解決方法是重新檢查你的信息架構(gòu)。

　　上面是一個(gè)如何去除側(cè)拉菜單的例子。你可以按照那些彩點(diǎn)來了解這兩種解決方法間元素的過渡方式。

　　注意點(diǎn)：

　消息選項(xiàng)卡上直接顯示當(dāng)前狀態(tài)

項(xiàng)目總是可見的且可以立刻到達(dá)

導(dǎo)航手勢(shì)不能沖突

　　就這些固定的問題而言，我們也能夠通過滾動(dòng)方向來隱藏導(dǎo)航條從而節(jié)省屏幕的垂直空間，F(xiàn)acebook和Safari都應(yīng)用了這種方式。固定的標(biāo)簽欄能夠清晰的告訴用戶當(dāng)前所處的位置，這樣我們就無需只依靠導(dǎo)航欄來確定了。

　　如果你想要更簡(jiǎn)單，那么一個(gè)工具欄就足夠了。關(guān)鍵是不要隱藏導(dǎo)航，而是允許直接操作，不要和現(xiàn)有的導(dǎo)航手勢(shì)沖突，并且在相關(guān)圖標(biāo)上提供反饋。

　　【更新】對(duì)于網(wǎng)站來說，我覺的最好的解決辦法還是重新審視信息架構(gòu)，而不是直接挪用iOS設(shè)計(jì)模式。下面一個(gè)只在網(wǎng)頁頂部展示導(dǎo)航的設(shè)計(jì)就很不錯(cuò)案例。作為網(wǎng)站導(dǎo)航來說它足夠明顯，人們可以去向下滾動(dòng)，然后立即看到呈現(xiàn)的可用選項(xiàng)。

　　同樣的，優(yōu)化移動(dòng)端網(wǎng)站體驗(yàn)還有一個(gè)秘訣：依據(jù)以下小竅門移除網(wǎng)頁300毫秒的點(diǎn)擊延遲，或添加觸控事件，具體論述看這里

如何拓展?

　　我這里給的例子是基于iOS平臺(tái)的，并且是在你使用標(biāo)簽欄或工具欄的情境下。

　　但是標(biāo)簽欄內(nèi)如何容納超過5個(gè)標(biāo)簽?zāi)?

　　這不是理想的情境，這時(shí)可能需要重新考慮一下應(yīng)用的信息架構(gòu)了。但是如果你必須得有5個(gè)以上的標(biāo)簽，普通的模式是使用最后一個(gè)標(biāo)簽提供更多的選項(xiàng)，很不幸，這很像一個(gè)菜單。

　　你也可以使用一個(gè)滾動(dòng)工具條，參見Rookie。這能避免使用側(cè)拉菜單的問題，但是需要承擔(dān)輕微高一些的導(dǎo)航認(rèn)知摩擦，因?yàn)橄到y(tǒng)在區(qū)分用戶點(diǎn)擊和滑動(dòng)意圖時(shí)錯(cuò)誤率會(huì)提升。

　　記住，與導(dǎo)航相比，第二種解決方法的操作更加合理。

　　Rookie的采取的方法涉及的工具欄不確定狀態(tài)下的滾動(dòng)后駐留，在完成諸如裁剪、旋轉(zhuǎn)等其中一項(xiàng)任務(wù)后就會(huì)隱藏表示任務(wù)已完成。

　　工具欄隱藏并在下一次出現(xiàn)前復(fù)位的方法可以防止不確定狀態(tài)的粘滯。

結(jié)論

　　所以你已經(jīng)讀了關(guān)于側(cè)拉菜單模式的問題，并且在這里提供了iOS環(huán)境中的解決方法。

文章名稱：干貨！側(cè)邊欄交互的利弊
新聞來源：http://www.rwnh.cn/news23/167773.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站排名、網(wǎng)站制作、電子商務(wù)、標(biāo)簽優(yōu)化、小程序開發(fā)、動(dòng)態(tài)網(wǎng)站

廣告

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