底部導(dǎo)航BottomBar的設(shè)計(jì)思路

時(shí)間：2023-09-02 02:06:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-09-02 02:06:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

底部導(dǎo)航BottomBar的設(shè)計(jì)思路：


隨著我們的手機(jī)越來(lái)越大，我們需要重新調(diào)整構(gòu)建和設(shè)計(jì)網(wǎng)站的方式。從應(yīng)用程序設(shè)計(jì)和點(diǎn)擊欄中有什么可以學(xué)習(xí)的嗎?我們能否修正網(wǎng)站的移動(dòng)導(dǎo)航，以降低交互成本?在本文中，我們將找出答案。

?

每當(dāng)你聽(tīng)到“移動(dòng)導(dǎo)航”時(shí)，首先想到的是什么？我猜是漢堡滑出菜單。這種設(shè)計(jì)模式從最初的響應(yīng)式設(shè)計(jì)開(kāi)始就一直在使用，盡管從那時(shí)起已經(jīng)發(fā)生了很多變化，但是這種特殊的模式并沒(méi)有改變，這是為什么呢?




首先，我們?nèi)绾伍_(kāi)始使用漢堡包菜單的頂部導(dǎo)航?還有更好的選擇嗎?在本文中，我將嘗試探討這些問(wèn)題。

頂級(jí)導(dǎo)航和漢堡包的歷史

第一個(gè)漢堡菜單圖標(biāo)開(kāi)始出現(xiàn)在80年代，它由Norm Cox為Xerox Star設(shè)計(jì)，這是世界上第一個(gè)圖形用戶界面，他還為同一界面設(shè)計(jì)了文檔圖標(biāo)。這段歷史是由Geof Allday（他實(shí)際上給Norm Cox發(fā)了郵件）發(fā)現(xiàn)的。你可以點(diǎn)擊這里閱讀整個(gè)電子郵件回復(fù)。后來(lái)，它出現(xiàn)在了Windows 1和DOS上。




目前的移動(dòng)導(dǎo)航，正如我們所知，在2011年由Ethan Marcotte的“響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)”一書(shū)推廣開(kāi)來(lái)的。從那時(shí)起，頂級(jí)導(dǎo)航和漢堡就成為了行業(yè)的標(biāo)準(zhǔn)。

手機(jī)屏幕尺寸在10年內(nèi)翻了一番

從最初的iPhone以來(lái)，手機(jī)銷量一直在逐年增加。2019年是市場(chǎng)達(dá)到飽和點(diǎn)的第一年，銷售額開(kāi)始下降，但這并不意味著人們不使用手機(jī)。據(jù)Quartz和Ciodive 報(bào)道，到2020年，我們將把80％的時(shí)間花在手機(jī)上。相比2010年，只有四分之一的互聯(lián)網(wǎng)用戶是基于手機(jī)的。




隨著手機(jī)銷量的增加，屏幕尺寸也增加了一倍多。智能手機(jī)的平均屏幕尺寸從3.2英寸一直增加到了5.5英寸。2017年，設(shè)備制造商開(kāi)始采用更高的18：9縱橫比，配備5.7英寸和6英寸18：9顯示器?，F(xiàn)在，我們開(kāi)始看到6英寸18：9顯示器成為旗艦和中檔價(jià)格領(lǐng)域的新標(biāo)準(zhǔn)，因?yàn)樗鼈儞碛斜?.5英寸16：9顯示器更多的屏幕區(qū)域，XDA-Developers報(bào)告。







基本上，手機(jī)屏幕的尺寸越來(lái)越大，但我們要如何調(diào)整我們的設(shè)計(jì)模式以反映這些變化呢？

拇指驅(qū)動(dòng)設(shè)計(jì)

我第一次聽(tīng)說(shuō)“拇指驅(qū)動(dòng)設(shè)計(jì)”一詞是來(lái)自維塔利弗里德曼。它基于Steven Hoober和Josh Clark關(guān)于人們?nèi)绾文檬謾C(jī)的研究。




它的要點(diǎn)是，幾乎在所有情況下，最常見(jiàn)的是三個(gè)基本握法。49％的人用單手握住手機(jī)，36％用一只手握住手機(jī)，用另一只手的手指或拇指戳手機(jī)，剩下的15％采用雙手兩個(gè)手來(lái)操作手機(jī)，用兩個(gè)拇指不停地敲擊。Steven Hoober發(fā)現(xiàn)75％的用戶只用一只拇指觸摸屏幕。因此，就有了術(shù)語(yǔ)拇指驅(qū)動(dòng)設(shè)計(jì)。







2016年，Samantha Ingram寫(xiě)了一篇名為“ 拇指區(qū)：為移動(dòng)用戶設(shè)計(jì) ”的文章，進(jìn)一步探討了這些想法。她定義了易于觸及，難以觸及和中間區(qū)域。







但是，我認(rèn)為，隨著手機(jī)尺寸的增加，圖像已經(jīng)發(fā)生了一些變化：







當(dāng)手機(jī)很小時(shí)，大多數(shù)區(qū)域都很容易到達(dá)。但隨著我們的屏幕越來(lái)越大，如果不調(diào)整手機(jī)，頂部幾乎無(wú)法觸摸。從上面的例子中，我們可以看到最有效的屏幕空間在哪里。然而，它經(jīng)常在網(wǎng)頁(yè)上被忽略。我們?cè)撊绾谓鉀Q這個(gè)問(wèn)題？

底部導(dǎo)航模式

網(wǎng)絡(luò)上會(huì)不時(shí)出現(xiàn)底部導(dǎo)航模式，這個(gè)想法本身很簡(jiǎn)單：向下移動(dòng)導(dǎo)航欄。







將導(dǎo)航欄定位在底部使用戶可以更輕松地單擊菜單圖標(biāo)，而輔助項(xiàng)目可以移動(dòng)到頂部?；旧希阒恍枰淖冺樞?。移動(dòng)應(yīng)用程序一直使用這種邏輯與條形圖案。這本身并不是一個(gè)新想法，但它在網(wǎng)頁(yè)設(shè)計(jì)中仍然不像在應(yīng)用程序設(shè)計(jì)中那么流行。




這不是一個(gè)萬(wàn)無(wú)一失的解決方案，因?yàn)樗岢隽艘恍╆P(guān)鍵問(wèn)題，但它是一個(gè)有價(jià)值的替代方案。讓我們探討一些可能出現(xiàn)的問(wèn)題吧。

主要和次要項(xiàng)目

由于屏幕頂端變得難以觸及，所以，將主菜單項(xiàng)放置在底部附近是更好的選擇，但其他同樣重要的事情呢？

我提出兩個(gè)想法來(lái)解決這個(gè)問(wèn)題：

• 將搜索欄或任何非主要項(xiàng)目置于頂部;
• CTA按鈕應(yīng)保留在菜單項(xiàng)旁邊的底部，因?yàn)樗菍?dǎo)航的重要部分。

這會(huì)如何影響滾動(dòng)大菜單？

有些網(wǎng)站有廣泛的菜單，子菜單以及介于兩者之間的所有內(nèi)容。當(dāng)然，會(huì)涉及滾動(dòng)。如何在這種情況下翻轉(zhuǎn)主要/輔助項(xiàng)目？







使主要和輔助項(xiàng)目（菜單鏈接，徽標(biāo)，搜索輸入）固定，同時(shí)保持菜單列表可滾動(dòng)。這樣，你的用戶就能夠獲得他們需要的關(guān)鍵內(nèi)容。

你把標(biāo)志放置在哪里？

你可能會(huì)擔(dān)心標(biāo)識(shí)的位置。這里有兩種方法可以解決它：

• 將徽標(biāo)放在底部可能有點(diǎn)尷尬，但拇指很可能不會(huì)阻礙它。但是，它可能會(huì)被遺漏，因?yàn)槲覀儍A向于從上到下掃描。
• 更合理的選擇是將徽標(biāo)保留在頁(yè)面頂部，但不要將其固定。將其作為內(nèi)容的一部分，以便在滾動(dòng)時(shí)消失。這樣，人們?nèi)匀豢梢酝昝赖乜吹剿?/li>

如您所見(jiàn)，我在線框中使用了菜單標(biāo)簽。凱文羅賓遜發(fā)現(xiàn)，在圖標(biāo)旁邊放置一個(gè)標(biāo)簽使參與率增加了75％：

這如何與把手一起使用？

某些操作系統(tǒng)和瀏覽器傾向于將屏幕的底部區(qū)域用于其自身目的。iOS手柄可能會(huì)妨礙底部導(dǎo)航。確保導(dǎo)航足夠?qū)挸ㄒ匀菁{iOS安全區(qū)域。







如果將徽標(biāo)放置在中心位置，則鏈接可能會(huì)與手柄功能發(fā)生沖突。稍微填充一下就可以了。

用戶會(huì)適應(yīng)這種模式嗎？

在我寫(xiě)這篇文章的時(shí)候，我一直在想，對(duì)于瀏覽你網(wǎng)站的用戶來(lái)說(shuō)，這是否會(huì)變成一個(gè)重大的重新設(shè)計(jì)或簡(jiǎn)單的可用性改進(jìn)。畢竟，根據(jù)雅各布定律，用戶把大部分時(shí)間都花在了其他網(wǎng)站上。這意味著用戶更喜歡你的網(wǎng)站以與他們已經(jīng)熟悉的所有其他網(wǎng)站相同的方式工作。




作為雅各布定律的反駁，我想提出菲茨法律。它認(rèn)為獲得目標(biāo)的時(shí)間是目標(biāo)的距離和大小的函數(shù)?；旧希繕?biāo)越小越遠(yuǎn)，交互成本越高。NN / g有一個(gè)精彩的視頻，更詳細(xì)地解釋了這一點(diǎn)：

https://www.zhihu.com/video/1152530106055430144“與頂級(jí)菜單圖標(biāo)相比，底部漢堡菜單圖標(biāo)的交互成本要低得多，因?yàn)樗咏?。通過(guò)將菜單CTA放在拇指附近，我們?cè)试S用戶更快地達(dá)到它的最終目標(biāo)。如果降低交互成本，用戶是否會(huì)發(fā)現(xiàn)該功能會(huì)迷失方向？可能不是?！?br>

如何與Tap Bar模式集成？

點(diǎn)擊欄模式列出了三到五個(gè)最常見(jiàn)的第一級(jí)操作，可以單擊一行。你可能已經(jīng)在流行的應(yīng)用程序和一些網(wǎng)站上看到它：







Nielsen認(rèn)為，隱藏式導(dǎo)航（漢堡菜單）會(huì)顯著降低移動(dòng)和桌面用戶體驗(yàn)。在移動(dòng)設(shè)備上，人們?cè)?7％的情況下使用隱藏導(dǎo)航，而在86％的情況下使用組合導(dǎo)航，即1.5倍以上！尼爾森所指的組合導(dǎo)航是一個(gè)標(biāo)簽欄模式與漢堡菜單相結(jié)合 - 這里有一個(gè)例子：







它看起來(lái)似乎是一個(gè)完美的解決方案，但它也有它的問(wèn)題。Fabian Sebastian提出了一個(gè)很好的觀點(diǎn)，它只適用于頂級(jí)視圖，不適用于輔助導(dǎo)航項(xiàng)。為了解決這個(gè)問(wèn)題，誕生了一種漢堡和tap bar的混合產(chǎn)品。如果你關(guān)注一下三星的應(yīng)用程序，你會(huì)發(fā)現(xiàn)菜單上的最后一項(xiàng)是“*More*”按鈕，它會(huì)調(diào)出漢堡包菜單。




從本質(zhì)上講，如果你想要將兩者結(jié)合起來(lái)，則底部導(dǎo)航模式可以很好地集成到條形圖案中。尋找好例子的最好地方是在移動(dòng)應(yīng)用程序領(lǐng)域。

一些受歡迎的網(wǎng)站重新構(gòu)想

打開(kāi)Photoshop，對(duì)一些熱門(mén)網(wǎng)站進(jìn)行快速模擬，以便解釋改變導(dǎo)航欄自下而上并不困難。




我們先來(lái)看看 Bloomberg：







接下來(lái)，我們來(lái)看看Invision：







最后是Reddit：







這個(gè)想法雖然引發(fā)了一些問(wèn)題，但它很簡(jiǎn)單，足以適應(yīng)網(wǎng)絡(luò)。它確實(shí)會(huì)產(chǎn)生可用性差異，因?yàn)榻换コ杀疽偷枚唷?br>

如何說(shuō)服我的客戶呢？

作為設(shè)計(jì)師，你可能會(huì)看到這種模式的潛力，但如果你的客戶或您的老板不這樣做呢？我會(huì)用幾個(gè)論點(diǎn)回答這個(gè)問(wèn)題：

• 多年來(lái)，移動(dòng)應(yīng)用程序一直將有價(jià)值的菜單項(xiàng)放在最下面，我們可以把以下兩本書(shū)發(fā)送給初學(xué)者。
  1.“ 底部導(dǎo)航設(shè)計(jì)的黃金法則 ”，由Nick Babich撰寫(xiě)
  2.“ 移動(dòng)導(dǎo)航的基本模式：入門(mén) ”，由Raluca Budiu撰寫(xiě)
• 我注意到流行的移動(dòng)應(yīng)用程序開(kāi)始將重要位置轉(zhuǎn)移到底部的情況，優(yōu)步就是一個(gè)很好的例子。對(duì)于他們來(lái)說(shuō)，搜索欄是屏幕上最重要的項(xiàng)目之一。在舊的設(shè)計(jì)中，它的位置在頂部，現(xiàn)在，他們已經(jīng)把它轉(zhuǎn)移到了底部。我們可以在這里做些什么嗎？

在移動(dòng)應(yīng)用程序里，將重要導(dǎo)航項(xiàng)目移至底部不是什么新鮮事兒。只是，出于某種原因，網(wǎng)絡(luò)行業(yè)尚未趕上這一點(diǎn)。

總結(jié)

事實(shí)很清楚：手機(jī)越來(lái)越大，屏幕的某些部分比其他部分更容易互動(dòng)。將漢堡包菜單放在頂部會(huì)產(chǎn)生過(guò)大的交互成本，而且我們擁有大量使用屏幕底部的移動(dòng)應(yīng)用程序設(shè)計(jì)，這些設(shè)計(jì)利用了屏幕的底部。也許是時(shí)候網(wǎng)頁(yè)設(shè)計(jì)界也開(kāi)始在網(wǎng)站上使用這些想法了？




我知道所有這些都不是所有用例的萬(wàn)無(wú)一失的解決方案，但它值得一試。它有助于使體驗(yàn)更好一點(diǎn)。如果你有更好的想法，歡迎和我們?cè)诹粞詤^(qū)分享哦！




如果您有更好的觀點(diǎn)歡迎關(guān)注我們的公眾號(hào)，并在留言區(qū)和我們分享哦！當(dāng)然，如果您想了解更多的前瞻信息和權(quán)威專家普修的專業(yè)性建議，就留言聯(lián)系我們吧！

參考：Arthur：Bottom Navigation Pattern On Mobile Web Pages: A Better Alternative?