2018-4-10 藍藍設(shè)計的小編
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
設(shè)計師都知道，設(shè)計不只是為了好看。設(shè)計也決定用戶如何融入一個產(chǎn)品，無論是網(wǎng)站還是app。這是一種交談。導(dǎo)航就是一種交談。因為如果用戶不明白使用方式，你的網(wǎng)站或app再漂亮都沒用。
Steven Hoober在他的關(guān)于移動設(shè)備使用狀況的研究中發(fā)現(xiàn)，49%的人依靠一根手指完成手機上的操作。在下圖中，手機屏幕上的畫面表示大致的觸摸范圍，不同顏色表示用戶能用拇指在屏幕上觸及的區(qū)域。綠色表示輕易觸及；黃色表示需要伸長手指；紅色表示需要用戶改變持握方式。
圖片來源：uxmatters
圖片表示單手操作智能手機的舒適程度。
把最重要最常用的操作放在屏幕底部非常重要，因為它們能用一只手指輕松觸及。
許多應(yīng)用遵循這一規(guī)律，將底部導(dǎo)航（又稱作標簽欄）作為最重要的app功能。Facebook的核心功能一觸即達，能夠在不同功能中迅速切換。
Facebook的iOS底部標簽欄。
導(dǎo)航通常是搭載用戶的交通工具。底部導(dǎo)航應(yīng)該承載重要性等同的目的地。這些目的地需要在app的任何地方留有直接的入口。
優(yōu)秀的底部導(dǎo)航設(shè)計遵循以下3條定律：
在底部導(dǎo)航中使用3到5個目的地。如果少于3個，請考慮使用標簽代替。
底部導(dǎo)航避免使用5個以上，因為點擊目標相互會過于接近。在標簽欄放置過多的項目，讓人們難以點中他們的目標。每多展示一個標簽，app的復(fù)雜性就增加一分。
如果目的地確實有5個以上，不要用底部導(dǎo)航來承載這些入口，請考慮放在其他位置。
避免內(nèi)容滾動
小屏幕上顯而易見的解決方式，就是部分隱藏式的導(dǎo)航——不必擔心屏幕空間的局限，把標簽項放入滾動的標簽欄即可。但是滾動的內(nèi)容效率低下，因為你得滑動一下才能看到想要的選項。
iOS版Rookie Camapp中就存在“看不見就想不到”的問題。
沒有表達當前位置，可能是app菜單中最普遍的錯誤。“我在哪里”是用戶需要回答的基本問題之一，這是順利操作的前提。
用戶應(yīng)該在沒有任何外部引導(dǎo)的情況下，一眼就看出如何從A前往B。應(yīng)該提供適當?shù)囊曈X線索（圖標、標簽和顏色），操作就不需要任何說明了。
（1）圖標
正因為底部導(dǎo)航操作以圖標方式展現(xiàn)，它們所表達的內(nèi)容應(yīng)該要適合通過圖標來表達。有些用戶熟知的通用圖標，通常這些都表示搜索、郵件、打印等功能。不幸的是，“通用”圖標很少。app的設(shè)計師常常用圖標來代表一些非常難以分辨的功能。
老版本的Bloom.fm應(yīng)用Android版。真是相當難理解用戶當前所處位置。
（2）顏色
避免在底部標簽欄使用不同顏色的圖標和文字標簽。應(yīng)當使用app的主色來表示視覺焦點。
左圖：不同顏色的圖標讓app看起來像是圣誕樹；右圖：應(yīng)該只用主色。
遵循一條簡單的法則——用app的主色來提亮當前的底部導(dǎo)航項（包括圖標和文字標簽）。
iOS版Twitter的底部菜單欄。Messages是當前選中項。
如果底部導(dǎo)航欄有背景色，就要用黑白的圖標和文字標簽。
左圖：避免使用彩色圖標和彩色背景的組合；右圖：使用黑白圖形。
（3）文字標簽
文字標簽要為導(dǎo)航圖標提供簡短有意義的描述。不要用太長的標簽，因為它們不能截斷或換行。
避免換行、截斷和縮小文字標簽。
菜單元素要易于瀏覽。用戶要能理解他點擊某個元素時會發(fā)生什么。
（4）點擊尺寸
目標區(qū)域足夠大，才易于點擊。將界面寬度按操作項的數(shù)量等分，計算每個底部導(dǎo)航操作項的寬度。或者，把所有底部導(dǎo)航項的寬度設(shè)為最寬。
Android規(guī)范建議按照下圖的尺寸設(shè)計移動端的底部導(dǎo)航欄。
為什么底部導(dǎo)航如此重要？
標簽欄
底部導(dǎo)航設(shè)計的3個關(guān)鍵
1. 只顯示最重要的目的地
2. 表達出當前位置
藍藍設(shè)計( www.lzhte.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
藍藍設(shè)計的小編 http://www.lzhte.cn