移動(dòng)應(yīng)用側(cè)邊欄交互的利與弊與解決方法

1 評(píng)論 4759 瀏覽 4 收藏 12 分鐘

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

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

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

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

問(wèn)題

  1. 不易發(fā)現(xiàn)
  2. 更低效
  3. 與平臺(tái)原生導(dǎo)航模式?jīng)_突
  4. 并不是一目了然

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

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

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

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

不那么有效

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

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

側(cè)邊欄交互的利與弊個(gè)與解決方法

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

除了上面那些問(wèn)題,在iOS這樣的平臺(tái)上,側(cè)拉菜單與標(biāo)準(zhǔn)導(dǎo)航模式有沖突。

側(cè)邊欄交互的利與弊個(gè)與解決方法

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

側(cè)邊欄交互的利與弊個(gè)與解決方法

不一目了然

側(cè)邊欄交互的利與弊個(gè)與解決方法

因?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ì)師來(lái)說(shuō)可能要被迫去增加一個(gè)通用圖標(biāo),而不是弱化圖標(biāo)含義。

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

側(cè)邊欄交互的利與弊個(gè)與解決方法

認(rèn)知

側(cè)邊欄交互的利與弊個(gè)與解決方法

你可能有時(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é)省屏幕空間可以通過(guò)不損害導(dǎo)航或者不違背基本人機(jī)交互原則而達(dá)到目的,比如提供反饋或者展示當(dāng)前狀態(tài)。

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

解決方法

側(cè)邊欄交互的利與弊個(gè)與解決方法

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

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

側(cè)邊欄交互的利與弊個(gè)與解決方法

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

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

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

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

側(cè)邊欄交互的利與弊個(gè)與解決方法

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

側(cè)邊欄交互的利與弊個(gè)與解決方法

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

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

側(cè)邊欄交互的利與弊個(gè)與解決方法

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

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

側(cè)邊欄交互的利與弊個(gè)與解決方法

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

注意點(diǎn):

  1. 消息選項(xiàng)卡上直接顯示當(dāng)前狀態(tài)
  2. 項(xiàng)目總是可見的且可以立刻到達(dá)
  3. 導(dǎo)航手勢(shì)不能沖突

側(cè)邊欄交互的利與弊個(gè)與解決方法

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

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

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

網(wǎng)站長(zhǎng)圖在此:lmjabreu.com

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

如何拓展?

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

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

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

側(cè)邊欄交互的利與弊個(gè)與解決方法

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

側(cè)邊欄交互的利與弊個(gè)與解決方法

記住,與導(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è)拉菜單模式的問(wèn)題,并且在這里提供了iOS環(huán)境中的解決方法。

希望這是清楚和有用的,如果你有任何想法,你可以在twitter上聯(lián)系我@lmjabreu。

【更新】在本文的反饋是驚人的!Twitter上有超過(guò)2萬(wàn)4千名讀者訪問(wèn)并留下了更多的評(píng)論。我使用Storify整理了一些評(píng)論出來(lái)。似乎Android平臺(tái)上也有更多問(wèn)題要探討,尤其是想出一套適用于Web端的導(dǎo)航模式——這個(gè)目的驅(qū)動(dòng)下的圖標(biāo)有著極大的差別。

原文地址:lmjabreu

譯文地址:daichuanqing

譯者:張哲遠(yuǎn)

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 個(gè)人覺帶還是五個(gè)標(biāo)簽更好,從用戶體驗(yàn)來(lái)看,多個(gè)標(biāo)簽滑動(dòng)的話可能會(huì)比較繁瑣。并在做項(xiàng)目的時(shí)候,給用戶體驗(yàn)的時(shí)候,五個(gè)標(biāo)簽用戶標(biāo)示可以第一眼知道有這個(gè)東西,多個(gè)標(biāo)簽滑動(dòng)的話,還不是很適應(yīng)。更樓主開始說(shuō)的側(cè)邊框一樣不要第一眼辨認(rèn)。

    來(lái)自廣東 回復(fù)