隨著我們的手機(jī)越來(lái)越大，我們需要調(diào)整我們建立和設(shè)計(jì)網(wǎng)站的方式。是否可以從應(yīng)用程序設(shè)計(jì)和點(diǎn)擊欄中學(xué)到一些東西？我們可以修復(fù)網(wǎng)站的移動(dòng)導(dǎo)航以降低交互成本嗎？在本文中，我們將找出答案。
每當(dāng)您聽(tīng)到“移動(dòng)導(dǎo)航”時(shí)，首先想到的是什么？我的猜測(cè)是漢堡包滑出菜單。從最初的響應(yīng)式設(shè)計(jì)開(kāi)始，這種設(shè)計(jì)模式就一直在使用，盡管此后發(fā)生了很多變化，但是這種特定的模式?jīng)]有發(fā)生變化。這是為什么？
我們是如何首先從頂部菜單開(kāi)始使用頂部導(dǎo)航的？有更好的選擇嗎？在本文中，我將嘗試探討這些問(wèn)題。
頂級(jí)導(dǎo)航和漢堡的歷史
第一個(gè)漢堡菜單圖標(biāo)開(kāi)始于80年代出現(xiàn)。它是由Norm Cox為Xerox Star（世界上第一個(gè)圖形用戶界面）設(shè)計(jì)的。他還為相同的界面設(shè)計(jì)了文檔圖標(biāo)。這段歷史是由Geof Allday發(fā)現(xiàn)的。
眾所周知，當(dāng)前的移動(dòng)導(dǎo)航在2011年由Ethan Marcotte的“響應(yīng)式Web設(shè)計(jì)”書推廣。從那時(shí)起，頂級(jí)導(dǎo)航和漢堡包成為該行業(yè)的標(biāo)準(zhǔn)。
自從最初的iPhone以來(lái)，移動(dòng)設(shè)備的銷量一直在逐年增長(zhǎng)。2019年是市場(chǎng)達(dá)到飽和點(diǎn)并且銷量開(kāi)始下降的第一年。但這并不意味著人們沒(méi)有使用電話。據(jù)Quartz和Ciope報(bào)告，到2020年，我們將把80％的時(shí)間用于手機(jī)上網(wǎng)。與2010年相比，當(dāng)時(shí)只有四分之一的互聯(lián)網(wǎng)用戶使用電話。
隨著電話銷量的增長(zhǎng)，屏幕尺寸也增加了一倍以上。智能手機(jī)的平均屏幕尺寸從3.2英寸一直增加到5.5英寸。2017年，設(shè)備制造商開(kāi)始采用具有5.7英寸和6英寸18：9顯示屏的更高的18：9長(zhǎng)寬比?，F(xiàn)在，我們開(kāi)始看到6英寸18：9顯示器成為旗艦產(chǎn)品以及中端價(jià)格段的新標(biāo)準(zhǔn)，因?yàn)樗鼈兊钠聊幻娣e超過(guò)5.5英寸16：9顯示器。
基本上，手機(jī)的屏幕尺寸越來(lái)越大。很好，但是我們?nèi)绾握{(diào)整設(shè)計(jì)模式以反映這些變化？
拇指驅(qū)動(dòng)設(shè)計(jì)
要點(diǎn)是，在幾乎每種情況下，最基本的三種握法是最常見(jiàn)的。49％的人用一只手握住手機(jī)，36％的人一只手握住手機(jī)，用另一只手的手指或拇指猛擊，其余15％則采用雙手的BlackBerry-祈禱姿勢(shì)，同時(shí)用雙手大拇指。有75％的用戶僅用一個(gè)拇指就能觸摸屏幕。因此，術(shù)語(yǔ)“ 拇指驅(qū)動(dòng)設(shè)計(jì)”。
我們操作手機(jī)的三種主要方式。
下圖定義了容易到達(dá)，難以到達(dá)和介于兩者之間的區(qū)域。
但是，我們認(rèn)為，隨著電話尺寸的增加，映射發(fā)生了一些變化：
當(dāng)電話很小時(shí)，大多數(shù)區(qū)域都很容易到達(dá)。隨著屏幕的變大，如果不調(diào)節(jié)手機(jī)，幾乎無(wú)法觸摸頂部。從上面的示例中，我們可以看到最昂貴的屏幕空間在哪里。但是，它經(jīng)常在網(wǎng)頁(yè)上被忽略。我們?cè)撊绾谓鉀Q？
底部導(dǎo)航模式
有時(shí)，底部導(dǎo)航模式會(huì)在網(wǎng)絡(luò)上彈出。這個(gè)想法本身很簡(jiǎn)單：將導(dǎo)航欄進(jìn)一步向下移動(dòng)。
將導(dǎo)航欄置于底部可讓用戶更輕松地單擊菜單圖標(biāo)，而次要項(xiàng)目則可移至頂部。基本上，您只需切換順序。移動(dòng)應(yīng)用程序一直在點(diǎn)擊欄模式中使用此邏輯。它本身并不是一個(gè)新想法，但在網(wǎng)頁(yè)設(shè)計(jì)中仍然不如在應(yīng)用程序設(shè)計(jì)中流行。
這不是萬(wàn)無(wú)一失的解決方案，因?yàn)樗岢隽艘恍╆P(guān)鍵問(wèn)題，但這是一個(gè)值得選擇的選擇。讓我們探討一些可能出現(xiàn)的問(wèn)題。
主要和次要項(xiàng)目
隨著屏幕頂部越來(lái)越難以觸及，將主菜單項(xiàng)靠近底部放置是更好的選擇。但是其他同樣重要的事情呢？
我提出兩個(gè)想法來(lái)解決這個(gè)問(wèn)題：
將搜索欄或任何非主要項(xiàng)目放在頂部； 號(hào)召性按鈕應(yīng)保留在菜單項(xiàng)旁邊的底部，因?yàn)樗菍?dǎo)航的重要組成部分。
重新構(gòu)想的主要和次要導(dǎo)航項(xiàng)目的線框
大菜單對(duì)滾動(dòng)的影響如何？
一些網(wǎng)站具有廣泛的菜單，子菜單以及介于兩者之間的所有內(nèi)容。自然地，將涉及滾動(dòng)。在這種情況下如何翻轉(zhuǎn)主要/次要項(xiàng)目？
重新構(gòu)想的大型菜單的線框
使主要和次要項(xiàng)目（菜單鏈接，徽標(biāo)，搜索輸入）固定，同時(shí)使菜單列表可滾動(dòng)。這樣，您的用戶將能夠滿足他們所需的關(guān)鍵需求。
您在哪里放置徽標(biāo)？
您可能對(duì)徽標(biāo)的位置有所擔(dān)心。有兩種解決方法：
將徽標(biāo)放在底部可能會(huì)有些尷尬，但是，拇指很可能不會(huì)阻礙它。但是，由于我們傾向于從上到下掃描，因此可能會(huì)錯(cuò)過(guò)它。 一個(gè)更合理的選擇是將徽標(biāo)保留在頁(yè)面頂部，而不是將其固定。使其成為內(nèi)容的一部分，以便在滾動(dòng)時(shí)消失。這樣，人們?nèi)匀豢梢酝昝赖乜吹剿?如您所見(jiàn)，我們?cè)诰€框中使用了菜單標(biāo)簽。我們發(fā)現(xiàn)，在圖標(biāo)旁邊貼上標(biāo)簽可使用戶參與度提高75％：
徽標(biāo)的線框位于頂部，而菜單位于底部。
如何與把手一起使用？
某些操作系統(tǒng)和瀏覽器傾向于將屏幕底部用于自己的目的。iOS把手可能會(huì)妨礙底部導(dǎo)航。確保導(dǎo)航足夠?qū)挸ㄒ匀菁{iOS安全區(qū)域。
iOS把手和安全區(qū)域
如果將徽標(biāo)放在中心位置，則鏈接可能與把手功能沖突。一點(diǎn)填充即可解決問(wèn)題。
用戶會(huì)適應(yīng)這種模式還是會(huì)感到困惑？
在撰寫本文時(shí)，我們一直在思考對(duì)于瀏覽您的網(wǎng)站的用戶而言，這是否將成為重新設(shè)計(jì)或進(jìn)行簡(jiǎn)單的可用性改進(jìn)。畢竟，根據(jù)雅各布定律，用戶將大部分時(shí)間都花在其他網(wǎng)站上。這意味著用戶希望您的網(wǎng)站以與他們已經(jīng)熟悉的所有其他網(wǎng)站相同的方式工作。
與頂部菜單圖標(biāo)相比，底部漢堡菜單圖標(biāo)的交互成本要低得多，因?yàn)樗咏?。通過(guò)將CTA菜單放在拇指附近，我們使用戶可以更快地達(dá)到最終目標(biāo)。如果降低交互成本，用戶會(huì)發(fā)現(xiàn)該功能迷失了方向嗎？可能不是。
這將如何與Tap Bar模式集成？
輕擊欄模式列出了三到五個(gè)最常見(jiàn)的一級(jí)操作，以單擊單個(gè)行。您可能已經(jīng)在熱門應(yīng)用和某些網(wǎng)站上看到了它：
點(diǎn)擊直板設(shè)計(jì)
多年來(lái)，漢堡菜單引發(fā)了很多爭(zhēng)議。隱藏的導(dǎo)航（漢堡菜單）會(huì)大大降低手機(jī)和臺(tái)式機(jī)的用戶體驗(yàn)。在移動(dòng)設(shè)備上，人們?cè)?7％的情況下使用了隱藏導(dǎo)航，而在86％的情況下使用了組合導(dǎo)航，即多了1.5倍！組合導(dǎo)航是帶有漢堡包菜單的標(biāo)簽欄模式-以下為示例：
Samsung應(yīng)用示例
輕敲桿似乎是完美的解決方案，但它也有問(wèn)題。它僅適用于頂級(jí)視圖。它不適用于輔助導(dǎo)航項(xiàng)目。為了解決這個(gè)問(wèn)題，誕生了漢堡/輕敲棒混合組合。如果您關(guān)注三星應(yīng)用程序，則會(huì)看到菜單上的最后一項(xiàng)是“ 更多”按鈕，該按鈕調(diào)出漢堡菜單。
本質(zhì)上，如果您想將兩者組合在一起，則底部導(dǎo)航模式可以很好地集成到輕敲欄模式中。尋找良好范例的最佳方式是在移動(dòng)應(yīng)用程序中尋找。
重新構(gòu)想了一些受歡迎的網(wǎng)站
我打開(kāi)了Photoshop，并快速模擬了一些受歡迎的網(wǎng)站，以說(shuō)明將導(dǎo)航欄更改為自下而上并不是那么困難。
首先讓我們看一下彭博社：
在彭博社網(wǎng)站以重新想象底部導(dǎo)航
接下來(lái)，讓我們看一下Invision：
INVISION網(wǎng)站有重新設(shè)計(jì)底部導(dǎo)航
是的，這個(gè)想法確實(shí)引起了疑問(wèn)，但是它很簡(jiǎn)單，可以適應(yīng)網(wǎng)絡(luò)。由于交互成本要低得多，因此確實(shí)會(huì)造成可用性差異。
聽(tīng)起來(lái)不錯(cuò)，但如何說(shuō)服客戶？
作為設(shè)計(jì)師可能會(huì)看到這種模式的潛力，但是如果客戶或老板不知道該怎么辦？我會(huì)用幾個(gè)參數(shù)來(lái)回答這個(gè)問(wèn)題：
移動(dòng)應(yīng)用程序采用菜單項(xiàng)底部設(shè)計(jì)多年了。 我注意到流行的移動(dòng)應(yīng)用程序開(kāi)始將重要部分轉(zhuǎn)移到底部的情況。優(yōu)步就是一個(gè)很好的例子。對(duì)于他們來(lái)說(shuō)，搜索欄是屏幕上最重要的項(xiàng)目之一。在舊的設(shè)計(jì)中，其位置位于頂部?，F(xiàn)他們已將其移至底部。我們可以在這里做些什么嗎？
新舊Uber搜索欄設(shè)計(jì)
在移動(dòng)應(yīng)用程序設(shè)計(jì)中，將重要的導(dǎo)航項(xiàng)移到底部并不是什么新鮮事。僅僅是出于某種原因，網(wǎng)站設(shè)計(jì)行業(yè)尚未趕上這一步。
總結(jié)
事實(shí)很清楚：電話越來(lái)越大，屏幕的某些部分比其他部分更易于交互。在頂部使用漢堡菜單會(huì)增加交互成本，我們有大量使用屏幕底部的令人驚嘆的移動(dòng)應(yīng)用程序設(shè)計(jì)。也許是時(shí)候讓網(wǎng)頁(yè)設(shè)計(jì)界也開(kāi)始在網(wǎng)站上使用這些想法了嗎？
我們知道，對(duì)于所有范例而言，所有這些都不是萬(wàn)無(wú)一失的解決方案，但是值得一試。它有助于使用戶體驗(yàn)更好一點(diǎn)。
責(zé)任編輯：
