為什么移動應(yīng)用的菜單欄總是在屏幕底部?
為什么移動端應(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é)議
logo可以放在左上角,畢竟logo只需要觀看,當(dāng)然如果logo擔(dān)任返回首頁功能,可以考慮放在底部
講真,我覺得這篇文章很有道理,如果要普及,有兩點障礙就是
用戶需要適應(yīng)這種設(shè)計方法
導(dǎo)航放在下面需要設(shè)計的更加顯眼
這是我的拙見
MD是世界上最優(yōu)秀的風(fēng)格
第一個和第二個圖,什么是大屏手機?什么是小屏手機?對于一個身高190的人來講7p一樣是小手機,而對于身高150左右的人5s也算大。這個根本沒有固定的標(biāo)準(zhǔn)吧。圖上的備注寫的基于一般手指的長度,那我想問下樓主,一般長度是多長?一般長度真的代表大多數(shù)人嗎?
最后我要說,不要為了交互而交互,細節(jié)而細節(jié)。需求才是最主要的。最近總是發(fā)現(xiàn)一些人寫的文章只注重交互、細節(jié)。完全忽視需求。
樓主開始就說經(jīng)一項研究發(fā)現(xiàn)……進一步的研究發(fā)現(xiàn)……(希望能夠明確指出哪像研究,有哪些數(shù)據(jù)作支撐。否則只是語言帶過,很難讓人信服。)
如果交互設(shè)計師就是按照你上面陳述的這個研究在做設(shè)計,這樣也是不合理的,交互設(shè)計不能完全按照交互得出的理論而執(zhí)行。應(yīng)該考慮的業(yè)務(wù)場景,有些產(chǎn)品的使用環(huán)境和時間,就是迫使了用戶單手操作,而有些環(huán)境和時間,用戶就是雙手操作更舒服。并沒有絕對的結(jié)論。所以可操作的核心區(qū)域,還是需要根據(jù)業(yè)務(wù)需求和目標(biāo)用戶來定的。而不是單純的憑借某項研究。
研究報告我附了鏈接,請自行點擊,并收回你“只是語言帶過,很難讓人信服。”的話。
另外,這是一篇譯文,原文地址在文章底部,作者叫Anthony,我翻了一下原文底下的17條評論,沒有問到你提的問題。最相關(guā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?”針對這個問題原作者還沒有回復(fù)。
你可以到評論區(qū)去教育一下他如何指導(dǎo)交互設(shè)計師進行設(shè)計。
1、你那個“一項研究”和“進一項研究”建議樓主把字體顏色變成高亮顏色,讓讀者知道那里是有鏈接的,這也是交互的基本常識了吧,高亮顏色更容易引導(dǎo)用戶點擊。就像這個平臺這些評論的用戶名一樣,都是高亮顏色,要不然有多少用戶會知道這是可以點擊的呢?
2、雖然一篇譯文,但是就算是譯文也有他不足之處,既然你翻譯了這篇譯文,就說明你認同了這些觀點,但是這些觀點確實只停留在了表象的分析,不同的用戶特征和不同產(chǎn)品的使用環(huán)境并不能以這些依據(jù)來做用戶體驗設(shè)計。希望樓主以后翻譯譯文的的文章,選好題材,補充不足之處。這樣更便于我們讀者漲知識。
3、具體設(shè)計什么樣的菜單,不能完全根據(jù)交互的一些理論知識,產(chǎn)品的類型、需求、功能,這些在做交互設(shè)計時候一定要考慮進去,而并不是根據(jù)某項研究就決定用什么樣的菜單?;蛟S這樣的菜單確實適合某個場景下的產(chǎn)品使用,但還有一些產(chǎn)品并不適合用這樣的菜單呢?
1. 人人有沒有高亮功能請你自己去查清楚再來敲鍵盤。
2.此文受人人編輯之托翻譯發(fā)布,已將建議反饋至人人編輯部。
3.還是一樣,請聯(lián)系原作者跟他討論。
看著這片文章就想到了本款產(chǎn)品的返回鍵,但其實我貌似更加習(xí)慣在頂部左邊返回…所以,每次返回都有迷糊下
個人見解,個人比較偏向MD設(shè)計風(fēng)格的APP,現(xiàn)在手機都是大屏,想要單手操作基本不現(xiàn)實。所以單手觸摸底部導(dǎo)航欄我也覺得費勁。
material design的設(shè)計風(fēng)格,側(cè)邊欄直接右滑可呼出菜單(左下角右滑也可以,當(dāng)然側(cè)邊欄的設(shè)計不局限右滑,也可以放右側(cè)左滑),相對于底部菜單欄設(shè)計,側(cè)邊菜單按鈕豐富,實用性更強,而底欄則不同,數(shù)量受限,還需單獨騰出一個按鈕給予層級按鈕選項(內(nèi)容類似側(cè)邊欄豐富的按鈕)
其實很多國外優(yōu)秀的安卓軟件都是使用MD設(shè)計風(fēng)格,只是國內(nèi)很多軟件優(yōu)先適配IOS,節(jié)約控制成本和時間在UI上使安卓的軟件和IOS統(tǒng)一化了
MD是google的設(shè)計風(fēng)格,我是很少見到ios上使用MD設(shè)計的APP
除了實用性,MD設(shè)計風(fēng)格的APP會相對來說更加簡潔和大氣,個人體驗實用性比底部導(dǎo)航欄更強,僅僅個人意見
我最近也在玩兩個系統(tǒng),感覺差別確實蠻大的。
MD風(fēng)格要配合底部的系統(tǒng)導(dǎo)航鍵使用的,所以iOS上很少見MD規(guī)范的App。
至于側(cè)滑抽屜導(dǎo)航,使用習(xí)慣了或許不錯,但上手太難了。隱藏太深,層級感不強,容易迷路。