起點(diǎn)課堂會(huì)員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會(huì)特權(quán)
個(gè)人IP打造特權(quán)
30+門專項(xiàng)技能課
1300+專題課程
12場(chǎng)職場(chǎng)軟技能直播
12場(chǎng)求職輔導(dǎo)直播
12場(chǎng)專業(yè)技能直播
會(huì)員專屬社群
榮耀標(biāo)識(shí)為什么移動(dòng)應(yīng)用的菜單欄總是在屏幕底部？
為什么移動(dòng)端應(yīng)用的菜單欄總是在底部？這樣的設(shè)計(jì)背后到底有什么邏輯？它遵循著什么樣的設(shè)計(jì)原則？文章將一一解讀。
你使用手機(jī)的方式會(huì)影響你的大腦。一項(xiàng)研究發(fā)現(xiàn)，活躍的手機(jī)用戶有更大的軀體感覺(jué)皮層，這個(gè)皮層是控制拇指的大腦區(qū)域。
進(jìn)一步的研究發(fā)現(xiàn)，大多數(shù)用戶都用一只手來(lái)使用手機(jī)。當(dāng)他們拿著手機(jī)的時(shí)候，他們會(huì)用右或左拇指與屏幕交互。拇指就像用戶的鼠標(biāo)，但有局限性。
手指就是鼠標(biāo)
在桌面設(shè)備上，用戶使用鼠標(biāo)與屏幕交互。他們可以輕松地將鼠標(biāo)移動(dòng)到導(dǎo)航菜單上。這是因?yàn)槭髽?biāo)沒(méi)有限制人體的手腕運(yùn)動(dòng)。
但當(dāng)用戶手持手機(jī)時(shí)，他們拇指的動(dòng)作就會(huì)受到限制。屏幕上有些地方是拇指無(wú)法觸及的，這些區(qū)域的面積將由用戶的手指長(zhǎng)度和手機(jī)屏幕的大小來(lái)決定。
（基于一般手指長(zhǎng)度和跨度）
對(duì)比：大小屏幕手機(jī)
隨著越來(lái)越多的用戶選擇大屏幕手機(jī)，高端市場(chǎng)正變得越來(lái)越難以企及。大屏幕手機(jī)（超過(guò)5英寸）比小屏幕手機(jī)的可達(dá)性更低（不到5英寸）。
（基于一般手指長(zhǎng)度和跨度）
大屏幕手機(jī)的用戶如果要觸摸對(duì)面的邊也會(huì)產(chǎn)生困難。至于是左邊還是右邊更難觸達(dá)，都取決于用戶拿著手機(jī)的是哪只手。
如果他們的左手拿著電話，他們的拇指就難以觸達(dá)右下角的區(qū)域。如果他們右手持機(jī)，他們的拇指將很難到達(dá)左邊的角落。
相比之下，小屏手機(jī)在底部的角落里有很高的可達(dá)性。這是因?yàn)樾∑聊辉O(shè)備足夠窄，可以讓拇指到達(dá)角落。
拇指可達(dá)性法則
設(shè)計(jì)師無(wú)法改變用戶如何持有手機(jī)，但是他們可以改變導(dǎo)航菜單的位置。大多數(shù)設(shè)計(jì)師把導(dǎo)航菜單放在屏幕頂端。雖然這個(gè)設(shè)計(jì)在桌面端上是一個(gè)通用方案，但它并不能很好地轉(zhuǎn)化為移動(dòng)端的設(shè)計(jì)。
屏幕的頂部是拇指最難觸達(dá)的區(qū)域。把你的菜單放在頂部會(huì)讓用戶更難瀏覽你的界面，但用戶使用菜單的頻率非常高。我們有必要把菜單放在拇指觸手可及的地方，這樣用戶就能更快地完成他們的任務(wù)。
研究發(fā)現(xiàn)“拇指容易到達(dá)的區(qū)域是最快和最舒服的”，換句話說(shuō)，目標(biāo)越接近大拇指，就越容易點(diǎn)擊到。最容易到達(dá)的地方是底部，你應(yīng)該把菜單欄設(shè)計(jì)在底部。
菜單底部的位置允許用戶點(diǎn)擊LOGO圖標(biāo)，選擇更快的選項(xiàng)。把菜單放在最上面會(huì)迫使用戶調(diào)整手機(jī)位置，或者用另一只手進(jìn)行導(dǎo)航。這都需要進(jìn)行額外的物理操作，并減慢任務(wù)時(shí)間。
當(dāng)用戶用拇指點(diǎn)擊LOGO圖標(biāo)時(shí)，菜單就會(huì)從底部打開。更接近底部的菜單選項(xiàng)是拇指可達(dá)的。但是屏幕頂端的菜單選項(xiàng)已經(jīng)超出了拇指的范圍。
在傳統(tǒng)的菜單中，你會(huì)在頂部設(shè)置高優(yōu)先級(jí)選項(xiàng)。但對(duì)于底部菜單，你應(yīng)該在底部放置高優(yōu)先級(jí)選項(xiàng)。這使得它們能夠更快地觸達(dá)和點(diǎn)擊。新的菜單層次結(jié)構(gòu)將從頂部的最低優(yōu)先選項(xiàng)開始，到底部以最高的順序結(jié)束。
拇指點(diǎn)擊舒適區(qū)
用戶手持手機(jī)的方式會(huì)根據(jù)偏好而變化。那我們應(yīng)該把菜單放在哪一邊呢? 這份研究還發(fā)現(xiàn)了一個(gè)“從拇指移動(dòng)的舒適區(qū)”。這意味著用戶不必拉伸或彎曲他們的拇指來(lái)達(dá)到最佳的位置。
底部中間是放置菜單的最佳位置，無(wú)論是左手還是右手，這里是在小屏幕和大屏幕手機(jī)上使用拇指最輕松的地方。
舒適區(qū)更有利于大屏幕手機(jī)用戶。小屏幕手機(jī)用戶沒(méi)有無(wú)法到達(dá)的角落，但是用戶可能會(huì)需要彎曲和伸展他們的拇指才能到達(dá)他們想要到達(dá)的區(qū)域。
隨著大屏幕手機(jī)的發(fā)展趨勢(shì)，拇指的舒適區(qū)似乎更重要。理想的情況是，用戶可以通過(guò)盡可能少的拇指移動(dòng)來(lái)到達(dá)到需要的界面。拇指移動(dòng)效率的提升將提高用戶操作速度。
回應(yīng)一些常見(jiàn)的批評(píng)
任何偏離傳統(tǒng)做法的新建議都會(huì)受到批評(píng)。把移動(dòng)菜單放在底部并不是標(biāo)準(zhǔn)，但這應(yīng)該是基于用戶如何使用移動(dòng)設(shè)備的標(biāo)準(zhǔn)。很明顯，頂部的移動(dòng)菜單很難操作。如果遵循這些建議，我們會(huì)遇到哪些問(wèn)題? 讓我來(lái)回答這些批評(píng)。
“用戶將會(huì)錯(cuò)過(guò)移動(dòng)端的菜單，因?yàn)樗诘撞?，而不是用戶?xí)慣于看到導(dǎo)航的頂部?！?/p>
是的，用戶習(xí)慣于看到頂部的導(dǎo)航欄。但他們也在不同的移動(dòng)應(yīng)用和設(shè)備上看到了它。對(duì)于移動(dòng)用戶來(lái)說(shuō)，底部導(dǎo)航并不是一個(gè)不尋常的現(xiàn)象。
底部導(dǎo)航對(duì)于桌面界面來(lái)說(shuō)是確實(shí)少見(jiàn)。桌面的底部導(dǎo)航很容易被忽略，因?yàn)樽烂嬖O(shè)備的屏幕尺寸要比移動(dòng)設(shè)備屏幕大得多。這使得用戶很難將屏幕視為一個(gè)整體。
因?yàn)槠聊桓?，所以更容易在手機(jī)上發(fā)現(xiàn)底部導(dǎo)航。這使得用戶可以看到整個(gè)屏幕，在那里他們可以輕松地發(fā)現(xiàn)導(dǎo)航欄。
“底部導(dǎo)航將會(huì)阻礙瀏覽器的控制，而瀏覽器的控制也在底部。用戶會(huì)不小心點(diǎn)擊瀏覽器按鈕而不是菜單按鈕?！?/p>
你不會(huì)有瀏覽器控件來(lái)干擾原生APP的底部導(dǎo)航，但web應(yīng)用的底部導(dǎo)航欄將會(huì)有瀏覽器控件。用戶可能會(huì)在不小心點(diǎn)擊瀏覽器按鈕。但這和他們誤觸目標(biāo)按鈕左右兩邊的按鈕沒(méi)有什么不同。
當(dāng)兩個(gè)按鈕左右并排時(shí)，總是有可能出現(xiàn)用戶錯(cuò)誤。這并不意味著設(shè)計(jì)師不應(yīng)該把按鈕放在一起。這意味著它們應(yīng)該在按鈕之間添加空隙，以防止這些錯(cuò)誤。
你也可以在底部的導(dǎo)航欄上做同樣的事情。在菜單圖標(biāo)和瀏覽器欄之間添加空隙寬度，這樣就可以進(jìn)行視覺(jué)分離，這將防止意外點(diǎn)擊。
“當(dāng)用戶從底部滑動(dòng)時(shí)，菜單會(huì)干擾滾動(dòng)。這樣會(huì)分散用戶瀏覽內(nèi)容的注意力?！?/p>
用戶使用他們的拇指滾動(dòng)，他們的拇指更接近屏幕底部。這意味著當(dāng)他們向下滾動(dòng)一個(gè)頁(yè)面時(shí)，他們可以點(diǎn)擊導(dǎo)航欄。當(dāng)用戶查看內(nèi)容時(shí)，它也會(huì)分散用戶的注意力。
你可以使用一個(gè)滾動(dòng)條來(lái)解決這兩個(gè)問(wèn)題。這將在用戶滾動(dòng)頁(yè)面時(shí)隱藏導(dǎo)航欄，該欄只會(huì)在用戶重新啟動(dòng)時(shí)顯示。這是已經(jīng)在移動(dòng)應(yīng)用程序和瀏覽器上使用的一種常見(jiàn)技術(shù)。
“它會(huì)干擾著陸頁(yè)面上的呼叫按鈕，它比導(dǎo)航欄有更高的優(yōu)先級(jí)?！?/p>
同樣，重要的功能按鈕也應(yīng)該在拇指可達(dá)的范圍內(nèi)。但放功能按鈕還是菜單按鈕并不是二選一的問(wèn)題。如果你使用滾動(dòng)條，你可以把它們兩個(gè)都放在底部而不用擔(dān)心它們會(huì)互相干擾。
如果你不使用滾動(dòng)條，你應(yīng)該衡量你的業(yè)務(wù)目標(biāo)。如果你的目標(biāo)是提高用戶參與度，你可以把菜單放在拇指的范圍內(nèi)。如果你的目標(biāo)是在著陸頁(yè)上增加轉(zhuǎn)化，那你需要在拇指的范圍內(nèi)設(shè)置一個(gè)功能按鈕。
根據(jù)拇指的特點(diǎn)設(shè)計(jì)移動(dòng)端的菜單
與更熟悉的頂部位置相比，底部菜單看起來(lái)很不尋常。但前者忽略了用戶在移動(dòng)設(shè)備上拇指的功能。
拇指交互是與移動(dòng)設(shè)備交互的主要方式，這意味著菜單的形式應(yīng)該由拇指的特點(diǎn)來(lái)決定。忽略這個(gè)原則會(huì)我們就會(huì)設(shè)計(jì)出一個(gè)很難使用的菜單，這會(huì)減少用戶的參與度和滿意度。
用戶體驗(yàn)設(shè)計(jì)師的目標(biāo)是讓移動(dòng)導(dǎo)航盡可能快速和流暢。根據(jù)拇指可觸達(dá)法則，用戶可以更快更容易地完成任務(wù)。用這個(gè)簡(jiǎn)單的設(shè)計(jì)改變來(lái)消除拇指可觸達(dá)的障礙吧。
本文由 @倪爾東 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理?，未經(jīng)許可，禁止轉(zhuǎn)載。
原文地址：Why Mobile Menus Belong at the Bottom of the Screen
題圖來(lái)自PEXELS，基于CC0協(xié)議
logo可以放在左上角，畢竟logo只需要觀看，當(dāng)然如果logo擔(dān)任返回首頁(yè)功能，可以考慮放在底部
講真，我覺(jué)得這篇文章很有道理，如果要普及，有兩點(diǎn)障礙就是
用戶需要適應(yīng)這種設(shè)計(jì)方法
導(dǎo)航放在下面需要設(shè)計(jì)的更加顯眼
這是我的拙見(jiàn)
MD是世界上最優(yōu)秀的風(fēng)格
第一個(gè)和第二個(gè)圖，什么是大屏手機(jī)？什么是小屏手機(jī)？對(duì)于一個(gè)身高190的人來(lái)講7p一樣是小手機(jī)，而對(duì)于身高150左右的人5s也算大。這個(gè)根本沒(méi)有固定的標(biāo)準(zhǔn)吧。圖上的備注寫的基于一般手指的長(zhǎng)度，那我想問(wèn)下樓主，一般長(zhǎng)度是多長(zhǎng)？一般長(zhǎng)度真的代表大多數(shù)人嗎？
最后我要說(shuō)，不要為了交互而交互，細(xì)節(jié)而細(xì)節(jié)。需求才是最主要的。最近總是發(fā)現(xiàn)一些人寫的文章只注重交互、細(xì)節(jié)。完全忽視需求。
樓主開始就說(shuō)經(jīng)一項(xiàng)研究發(fā)現(xiàn)……進(jìn)一步的研究發(fā)現(xiàn)……（希望能夠明確指出哪像研究，有哪些數(shù)據(jù)作支撐。否則只是語(yǔ)言帶過(guò)，很難讓人信服。）
如果交互設(shè)計(jì)師就是按照你上面陳述的這個(gè)研究在做設(shè)計(jì)，這樣也是不合理的，交互設(shè)計(jì)不能完全按照交互得出的理論而執(zhí)行。應(yīng)該考慮的業(yè)務(wù)場(chǎng)景，有些產(chǎn)品的使用環(huán)境和時(shí)間，就是迫使了用戶單手操作，而有些環(huán)境和時(shí)間，用戶就是雙手操作更舒服。并沒(méi)有絕對(duì)的結(jié)論。所以可操作的核心區(qū)域，還是需要根據(jù)業(yè)務(wù)需求和目標(biāo)用戶來(lái)定的。而不是單純的憑借某項(xiàng)研究。
研究報(bào)告我附了鏈接，請(qǐng)自行點(diǎn)擊，并收回你“只是語(yǔ)言帶過(guò)，很難讓人信服?！钡脑?。
另外，這是一篇譯文，原文地址在文章底部，作者叫Anthony，我翻了一下原文底下的17條評(píng)論，沒(méi)有問(wèn)到你提的問(wèn)題。最相關(guān)的一個(gè)問(wèn)題是“”The thumb sweets spot is based on how “we” in the west hold our phones. What about some Asian countries where most people use an “i-ring”. The sweet spot will probably move to the middle/top of the screen in many cases. How to accommodate this?”針對(duì)這個(gè)問(wèn)題原作者還沒(méi)有回復(fù)。
你可以到評(píng)論區(qū)去教育一下他如何指導(dǎo)交互設(shè)計(jì)師進(jìn)行設(shè)計(jì)。
1、你那個(gè)“一項(xiàng)研究”和“進(jìn)一項(xiàng)研究”建議樓主把字體顏色變成高亮顏色，讓讀者知道那里是有鏈接的，這也是交互的基本常識(shí)了吧，高亮顏色更容易引導(dǎo)用戶點(diǎn)擊。就像這個(gè)平臺(tái)這些評(píng)論的用戶名一樣，都是高亮顏色，要不然有多少用戶會(huì)知道這是可以點(diǎn)擊的呢？
2、雖然一篇譯文，但是就算是譯文也有他不足之處，既然你翻譯了這篇譯文，就說(shuō)明你認(rèn)同了這些觀點(diǎn)，但是這些觀點(diǎn)確實(shí)只停留在了表象的分析，不同的用戶特征和不同產(chǎn)品的使用環(huán)境并不能以這些依據(jù)來(lái)做用戶體驗(yàn)設(shè)計(jì)。希望樓主以后翻譯譯文的的文章，選好題材，補(bǔ)充不足之處。這樣更便于我們讀者漲知識(shí)。
3、具體設(shè)計(jì)什么樣的菜單，不能完全根據(jù)交互的一些理論知識(shí)，產(chǎn)品的類型、需求、功能，這些在做交互設(shè)計(jì)時(shí)候一定要考慮進(jìn)去，而并不是根據(jù)某項(xiàng)研究就決定用什么樣的菜單?；蛟S這樣的菜單確實(shí)適合某個(gè)場(chǎng)景下的產(chǎn)品使用，但還有一些產(chǎn)品并不適合用這樣的菜單呢？
1. 人人有沒(méi)有高亮功能請(qǐng)你自己去查清楚再來(lái)敲鍵盤。
2.此文受人人編輯之托翻譯發(fā)布，已將建議反饋至人人編輯部。
3.還是一樣，請(qǐng)聯(lián)系原作者跟他討論。
看著這片文章就想到了本款產(chǎn)品的返回鍵，但其實(shí)我貌似更加習(xí)慣在頂部左邊返回…所以，每次返回都有迷糊下
個(gè)人見(jiàn)解，個(gè)人比較偏向MD設(shè)計(jì)風(fēng)格的APP，現(xiàn)在手機(jī)都是大屏，想要單手操作基本不現(xiàn)實(shí)。所以單手觸摸底部導(dǎo)航欄我也覺(jué)得費(fèi)勁。
material design的設(shè)計(jì)風(fēng)格，側(cè)邊欄直接右滑可呼出菜單（左下角右滑也可以，當(dāng)然側(cè)邊欄的設(shè)計(jì)不局限右滑，也可以放右側(cè)左滑），相對(duì)于底部菜單欄設(shè)計(jì)，側(cè)邊菜單按鈕豐富，實(shí)用性更強(qiáng)，而底欄則不同，數(shù)量受限，還需單獨(dú)騰出一個(gè)按鈕給予層級(jí)按鈕選項(xiàng)（內(nèi)容類似側(cè)邊欄豐富的按鈕）
其實(shí)很多國(guó)外優(yōu)秀的安卓軟件都是使用MD設(shè)計(jì)風(fēng)格，只是國(guó)內(nèi)很多軟件優(yōu)先適配IOS，節(jié)約控制成本和時(shí)間在UI上使安卓的軟件和IOS統(tǒng)一化了
MD是google的設(shè)計(jì)風(fēng)格，我是很少見(jiàn)到ios上使用MD設(shè)計(jì)的APP
除了實(shí)用性，MD設(shè)計(jì)風(fēng)格的APP會(huì)相對(duì)來(lái)說(shuō)更加簡(jiǎn)潔和大氣，個(gè)人體驗(yàn)實(shí)用性比底部導(dǎo)航欄更強(qiáng)，僅僅個(gè)人意見(jiàn)
我最近也在玩兩個(gè)系統(tǒng)，感覺(jué)差別確實(shí)蠻大的。
MD風(fēng)格要配合底部的系統(tǒng)導(dǎo)航鍵使用的，所以iOS上很少見(jiàn)MD規(guī)范的App。
至于側(cè)滑抽屜導(dǎo)航，使用習(xí)慣了或許不錯(cuò)，但上手太難了。隱藏太深，層級(jí)感不強(qiáng)，容易迷路。