2016-10-28 資深UI設(shè)計者
如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點這里
#交互學(xué)堂# #用戶體驗# 把最重要最常用的操作放在屏幕底部非常重要,因為它們能用一只手指輕松觸及。
指輕松觸及。
設(shè)計師都知道,設(shè)計不只是為了好看。設(shè)計也決定用戶如何融入一個產(chǎn)品,無論是網(wǎng)站還是app。這是一種交談。導(dǎo)航就是一種交談。因為如果用戶不明白使用方式,你的網(wǎng)站或app再漂亮都沒用。
Steven Hoober在他的關(guān)于移動設(shè)備使用狀況的研究中發(fā)現(xiàn),49%的人依靠一根手指完成手機上的操作。在下圖中,手機屏幕上的畫面表示大致的觸摸范圍,不同顏色表示用戶能用拇指在屏幕上觸及的區(qū)域。綠色表示輕易觸及;黃色表示需要伸長手指;紅色表示需要用戶改變持握方式。
把最重要最常用的操作放在屏幕底部非常重要,因為它們能用一只手指輕松觸及。
許多應(yīng)用遵循這一規(guī)律,將底部導(dǎo)航(又稱作標(biāo)簽欄)作為最重要的app功能。Facebook的核心功能一觸即達,能夠在不同功能中迅速切換。
導(dǎo)航通常是搭載用戶的交通工具。底部導(dǎo)航應(yīng)該承載重要性等同的目的地。這些目的地需要在app的任何地方留有直接的入口。
優(yōu)秀的底部導(dǎo)航設(shè)計遵循以下3條定律:
在底部導(dǎo)航中使用3到5個目的地。如果少于3個,請考慮使用標(biāo)簽代替。
底部導(dǎo)航避免使用5個以上,因為點擊目標(biāo)相互會過于接近。在標(biāo)簽欄放置過多的項目,讓人們難以點中他們的目標(biāo)。每多展示一個標(biāo)簽,app的復(fù)雜性就增加一分。
如果目的地確實有5個以上,不要用底部導(dǎo)航來承載這些入口,請考慮放在其他位置。
小屏幕上顯而易見的解決方式,就是部分隱藏式的導(dǎo)航——不必?fù)?dān)心屏幕空間的局限,把標(biāo)簽項放入滾動的標(biāo)簽欄即可。但是滾動的內(nèi)容效率低下,因為你得滑動一下才能看到想要的選項。
沒有表達當(dāng)前位置,可能是app菜單中最普遍的錯誤。“我在哪里?”是用戶需要回答的基本問題之一,這是順利操作的前提。
用戶應(yīng)該在沒有任何外部引導(dǎo)的情況下,一眼就看出如何從A前往B。應(yīng)該提供適當(dāng)?shù)囊曈X線索(圖標(biāo)、標(biāo)簽和顏色),操作就不需要任何說明了。
正因為底部導(dǎo)航操作以圖標(biāo)方式展現(xiàn),它們所表達的內(nèi)容應(yīng)該要適合通過圖標(biāo)來表達。有些用戶熟知的通用圖標(biāo),通常這些都表示搜索、郵件、打印等功能。不幸的是,“通用”圖標(biāo)很少。app的設(shè)計師常常用圖標(biāo)來代表一些非常難以分辨的功能。
我在這篇文章《圖標(biāo)是優(yōu)秀用戶體驗的一部分》中強調(diào)了這個問題。
避免在底部標(biāo)簽欄使用不同顏色的圖標(biāo)和文字標(biāo)簽。應(yīng)當(dāng)使用app的主色來表示視覺焦點。
遵循一條簡單的法則——用app的主色來提亮當(dāng)前的底部導(dǎo)航項(包括圖標(biāo)和文字標(biāo)簽)。
如果底部導(dǎo)航欄有背景色,就要用黑白的圖標(biāo)和文字標(biāo)簽。
文字標(biāo)簽要為導(dǎo)航圖標(biāo)提供簡短有意義的描述。不要用太長的標(biāo)簽,因為它們不能截斷或換行。
菜單元素要易于瀏覽。用戶要能理解他點擊某個元素時會發(fā)生什么。
目標(biāo)區(qū)域足夠大,才易于點擊。將界面寬度按操作項的數(shù)量等分,計算每個底部導(dǎo)航操作項的寬度。或者,把所有底部導(dǎo)航項的寬度設(shè)為最寬。
Android規(guī)范建議按照下圖的尺寸設(shè)計移動端的底部導(dǎo)航欄。
可以在標(biāo)簽欄顯示小紅點,表示有相關(guān)的新信息。
優(yōu)秀的導(dǎo)航應(yīng)該感覺像一只隱形的手,在操作途中指引用戶。畢竟,如果用戶都無法找到,那最酷的功能和最有吸引人的內(nèi)容都沒用。
每個底部導(dǎo)航圖標(biāo)都要通向某個目的地。而不能是打開菜單或其他彈出窗口。點按底部導(dǎo)航圖標(biāo)應(yīng)該直接通向相應(yīng)界面,或者刷新當(dāng)前激活的界面。
不要用標(biāo)簽欄提供控制項,用來操作當(dāng)前界面或app模式中的元素。如果需要提供操作項,請改用工具欄。
盡可能在每種情況下都顯示標(biāo)簽欄。這樣能給用戶一種視覺上可靠的感覺。
不要因為功能不可用就移除某個標(biāo)簽。如果你在某些情況下移除一個標(biāo)簽,其他情況確保留,就會讓你的app界面感覺不可靠、難以預(yù)料。最佳解決方案是保證所有標(biāo)簽都是可用的,然后解釋為什么某個標(biāo)簽沒有內(nèi)容。例如,如果用戶沒有離線文件,Dropbox里的Offline標(biāo)簽會顯示一個界面,教你如何添加。這個功能就是空狀態(tài)。
如果界面里是滾動的信息流,標(biāo)簽欄可以在滾動查看更多內(nèi)容時隱藏,向下滑動嘗試回頂部時再顯示。
避免使用橫向滑動的動效來切換界面。激活和未激活的界面,切換過渡效果應(yīng)該使用疊加漸隱效果。
底部導(dǎo)航應(yīng)該:
原文鏈接:https://uxplanet.org/perfect-bottom-navigation-for-mobile-app-effabbb98c0f#.3z87f9p1s
作者信息:Nick Babich
I’m a software developer, tech enthusiast and UI/UX lover.
藍(lán)藍(lán)設(shè)計( m.820esy.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
藍(lán)藍(lán)設(shè)計的小編 http://m.820esy.cn