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