為什么移動端應(yīng)用的菜單欄總是在底部？這樣的設(shè)計背后到底有什么邏輯？它遵循著什么樣的設(shè)計原則？文章將一一解讀。

你使用手機的方式會影響你的大腦。一項研究發(fā)現(xiàn)，活躍的手機用戶有更大的軀體感覺皮層，這個皮層是控制拇指的大腦區(qū)域。

進一步的研究發(fā)現(xiàn)，大多數(shù)用戶都用一只手來使用手機。當(dāng)他們拿著手機的時候，他們會用右或左拇指與屏幕交互。拇指就像用戶的鼠標(biāo)，但有局限性。

手指就是鼠標(biāo)

在桌面設(shè)備上，用戶使用鼠標(biāo)與屏幕交互。他們可以輕松地將鼠標(biāo)移動到導(dǎo)航菜單上。這是因為鼠標(biāo)沒有限制人體的手腕運動。

但當(dāng)用戶手持手機時，他們拇指的動作就會受到限制。屏幕上有些地方是拇指無法觸及的，這些區(qū)域的面積將由用戶的手指長度和手機屏幕的大小來決定。

（基于一般手指長度和跨度）

對比：大小屏幕手機

隨著越來越多的用戶選擇大屏幕手機，高端市場正變得越來越難以企及。大屏幕手機（超過5英寸）比小屏幕手機的可達性更低（不到5英寸）。

（基于一般手指長度和跨度）

大屏幕手機的用戶如果要觸摸對面的邊也會產(chǎn)生困難。至于是左邊還是右邊更難觸達，都取決于用戶拿著手機的是哪只手。

如果他們的左手拿著電話，他們的拇指就難以觸達右下角的區(qū)域。如果他們右手持機，他們的拇指將很難到達左邊的角落。

相比之下，小屏手機在底部的角落里有很高的可達性。這是因為小屏幕設(shè)備足夠窄，可以讓拇指到達角落。

拇指可達性法則

設(shè)計師無法改變用戶如何持有手機，但是他們可以改變導(dǎo)航菜單的位置。大多數(shù)設(shè)計師把導(dǎo)航菜單放在屏幕頂端。雖然這個設(shè)計在桌面端上是一個通用方案，但它并不能很好地轉(zhuǎn)化為移動端的設(shè)計。

屏幕的頂部是拇指最難觸達的區(qū)域。把你的菜單放在頂部會讓用戶更難瀏覽你的界面，但用戶使用菜單的頻率非常高。我們有必要把菜單放在拇指觸手可及的地方，這樣用戶就能更快地完成他們的任務(wù)。

研究發(fā)現(xiàn)“拇指容易到達的區(qū)域是最快和最舒服的”，換句話說，目標(biāo)越接近大拇指，就越容易點擊到。最容易到達的地方是底部，你應(yīng)該把菜單欄設(shè)計在底部。

菜單底部的位置允許用戶點擊LOGO圖標(biāo)，選擇更快的選項。把菜單放在最上面會迫使用戶調(diào)整手機位置，或者用另一只手進行導(dǎo)航。這都需要進行額外的物理操作，并減慢任務(wù)時間。

當(dāng)用戶用拇指點擊LOGO圖標(biāo)時，菜單就會從底部打開。更接近底部的菜單選項是拇指可達的。但是屏幕頂端的菜單選項已經(jīng)超出了拇指的范圍。

在傳統(tǒng)的菜單中，你會在頂部設(shè)置高優(yōu)先級選項。但對于底部菜單，你應(yīng)該在底部放置高優(yōu)先級選項。這使得它們能夠更快地觸達和點擊。新的菜單層次結(jié)構(gòu)將從頂部的最低優(yōu)先選項開始，到底部以最高的順序結(jié)束。

拇指點擊舒適區(qū)

用戶手持手機的方式會根據(jù)偏好而變化。那我們應(yīng)該把菜單放在哪一邊呢? 這份研究還發(fā)現(xiàn)了一個“從拇指移動的舒適區(qū)”。這意味著用戶不必拉伸或彎曲他們的拇指來達到最佳的位置。

底部中間是放置菜單的最佳位置，無論是左手還是右手，這里是在小屏幕和大屏幕手機上使用拇指最輕松的地方。

舒適區(qū)更有利于大屏幕手機用戶。小屏幕手機用戶沒有無法到達的角落，但是用戶可能會需要彎曲和伸展他們的拇指才能到達他們想要到達的區(qū)域。

隨著大屏幕手機的發(fā)展趨勢，拇指的舒適區(qū)似乎更重要。理想的情況是，用戶可以通過盡可能少的拇指移動來到達到需要的界面。拇指移動效率的提升將提高用戶操作速度。

回應(yīng)一些常見的批評

任何偏離傳統(tǒng)做法的新建議都會受到批評。把移動菜單放在底部并不是標(biāo)準(zhǔn)，但這應(yīng)該是基于用戶如何使用移動設(shè)備的標(biāo)準(zhǔn)。很明顯，頂部的移動菜單很難操作。如果遵循這些建議，我們會遇到哪些問題? 讓我來回答這些批評。

“用戶將會錯過移動端的菜單，因為它在底部，而不是用戶習(xí)慣于看到導(dǎo)航的頂部。”

是的，用戶習(xí)慣于看到頂部的導(dǎo)航欄。但他們也在不同的移動應(yīng)用和設(shè)備上看到了它。對于移動用戶來說，底部導(dǎo)航并不是一個不尋常的現(xiàn)象。

底部導(dǎo)航對于桌面界面來說是確實少見。桌面的底部導(dǎo)航很容易被忽略，因為桌面設(shè)備的屏幕尺寸要比移動設(shè)備屏幕大得多。這使得用戶很難將屏幕視為一個整體。

因為屏幕更小，所以更容易在手機上發(fā)現(xiàn)底部導(dǎo)航。這使得用戶可以看到整個屏幕，在那里他們可以輕松地發(fā)現(xiàn)導(dǎo)航欄。

“底部導(dǎo)航將會阻礙瀏覽器的控制，而瀏覽器的控制也在底部。用戶會不小心點擊瀏覽器按鈕而不是菜單按鈕。”

你不會有瀏覽器控件來干擾原生APP的底部導(dǎo)航，但web應(yīng)用的底部導(dǎo)航欄將會有瀏覽器控件。用戶可能會在不小心點擊瀏覽器按鈕。但這和他們誤觸目標(biāo)按鈕左右兩邊的按鈕沒有什么不同。

當(dāng)兩個按鈕左右并排時，總是有可能出現(xiàn)用戶錯誤。這并不意味著設(shè)計師不應(yīng)該把按鈕放在一起。這意味著它們應(yīng)該在按鈕之間添加空隙，以防止這些錯誤。

你也可以在底部的導(dǎo)航欄上做同樣的事情。在菜單圖標(biāo)和瀏覽器欄之間添加空隙寬度，這樣就可以進行視覺分離，這將防止意外點擊。

“當(dāng)用戶從底部滑動時，菜單會干擾滾動。這樣會分散用戶瀏覽內(nèi)容的注意力?！?/p>

用戶使用他們的拇指滾動，他們的拇指更接近屏幕底部。這意味著當(dāng)他們向下滾動一個頁面時，他們可以點擊導(dǎo)航欄。當(dāng)用戶查看內(nèi)容時，它也會分散用戶的注意力。

你可以使用一個滾動條來解決這兩個問題。這將在用戶滾動頁面時隱藏導(dǎo)航欄，該欄只會在用戶重新啟動時顯示。這是已經(jīng)在移動應(yīng)用程序和瀏覽器上使用的一種常見技術(shù)。

“它會干擾著陸頁面上的呼叫按鈕，它比導(dǎo)航欄有更高的優(yōu)先級。”

同樣，重要的功能按鈕也應(yīng)該在拇指可達的范圍內(nèi)。但放功能按鈕還是菜單按鈕并不是二選一的問題。如果你使用滾動條，你可以把它們兩個都放在底部而不用擔(dān)心它們會互相干擾。

如果你不使用滾動條，你應(yīng)該衡量你的業(yè)務(wù)目標(biāo)。如果你的目標(biāo)是提高用戶參與度，你可以把菜單放在拇指的范圍內(nèi)。如果你的目標(biāo)是在著陸頁上增加轉(zhuǎn)化，那你需要在拇指的范圍內(nèi)設(shè)置一個功能按鈕。

根據(jù)拇指的特點設(shè)計移動端的菜單

與更熟悉的頂部位置相比，底部菜單看起來很不尋常。但前者忽略了用戶在移動設(shè)備上拇指的功能。

拇指交互是與移動設(shè)備交互的主要方式，這意味著菜單的形式應(yīng)該由拇指的特點來決定。忽略這個原則會我們就會設(shè)計出一個很難使用的菜單，這會減少用戶的參與度和滿意度。

用戶體驗設(shè)計師的目標(biāo)是讓移動導(dǎo)航盡可能快速和流暢。根據(jù)拇指可觸達法則，用戶可以更快更容易地完成任務(wù)。用這個簡單的設(shè)計改變來消除拇指可觸達的障礙吧。

本文由 @倪爾東 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理?，未經(jīng)許可，禁止轉(zhuǎn)載。

原文地址：Why Mobile Menus Belong at the Bottom of the Screen

題圖來自PEXELS，基于CC0協(xié)議