国产亚洲精_丰满老熟好大的大bbb_男男激情做爰视频免费观看_欧美一区二区三区精品国产

畫底部tab圖標不知道用面性還是線性?

2019-5-16    ui設計分享達人

如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里

我們都知道UI設計并不僅僅是做出好看的東西,還涉及到交互和數據還有轉化率,就像是設計師通過界面在于用戶交流一樣,而底部導航欄就是交流對話中的一個。因為如果用戶連他們在產品的哪里都不知道,那么我們的設計再好優秀也是沒用的。



底部導航欄的用法


底部導航欄在屏幕底端展示3至5個目標選項,每一個選項由一個圖標和文字標簽展示,點擊底部導航圖標時,將帶領用戶前往與之關聯的視圖。


這里將目標選項放在底部的原因是,在手持的移動設備上容易被觸及,符合拇指定律,方便用戶單手操作。




底部導航欄的展示


根據我的觀察,底部導航欄的表現形式一般分為三種,首先我們先來說第一種:

1、文字+圖標

大部分的平臺都是使用的扁平風格,只有在節假日的時候才會出現,而多數情況下,我們常見的底部導航欄都是以文字+圖標的形式出現,在選中的狀態下,設計師也會根據對整體風格的把控和產品調性,增加一些變化和趣味,來突出產品的風格。如下圖所示:


全名K歌和知乎的底部導航欄就是使用文字加圖標的形式,其中全名K歌的底部圖標增加了一些有趣的變化,讓底部圖標變得更有趣,同時文字的存在能夠更好的讓用戶對圖標進行理解,提高用戶識別效率。


2、文字

文字按鈕目前來說產品里使用的也是比較多的,大多出現在以圖片和視頻為主的產品和界面中,如下圖所示:


抖音、美圖秀秀、小紅書,這三款APP的底部導航欄都是文字作為模塊切分,在使用的過程中,更能夠關注與閱讀內容,底部操作欄視覺層級相比上面的那種層級比較低,不影響瀏覽視覺,同時文字按鈕降低了用戶的理解成本。


3、圖標

單圖標按鈕是很少見的,很多圖標都沒有很強的識別度,所以僅僅用圖標放在底部操作欄,會造成用戶的認知負擔,不建議使用獨立的按鈕。如下圖所示:


VSCO是一款給用戶推薦產品的APP,因此底部操作欄只有三個按鈕,從設計的架構和產品的邏輯上來說,比較有利于用戶對圖標點擊操作。


Same的是一款社交的APP,有別于目前的大部分產品,它的底部是使用的單圖標的形式,雖然整體界面比較簡約,但是辨識度比較低,造成了使用產品時的認知負擔。


小總結:

1、當頁面圖片以圖片為主時,使用純文字或者純圖標的能夠降低底部圖標對用戶造成的干擾,但是純圖標的底部導航欄降低了用戶的識別度,引起用戶使用時的認知負擔。

2、文字+圖標的搭配屬于最穩妥的方式,適用于大部分的產品底部圖標設計。



底部導航欄圖標的設計


當我們準備做APP底部導航欄設計的時候,不知道大家有沒有遇到過經常不知道該用面性還是線性的糾結中,究竟要選擇哪種對用戶來說才是合適的呢?

大多數的人會覺得是出于個人喜好,但是一項名為《面性圖標vs線性圖標,對于可用性方面的影響》的研究表明:不同的圖標存在著不同的識別效率,而面性圖標一般會比線性圖標更快被用戶所識別。


1、特征線索

用戶要辨認圖標依靠的就是特征線索,如果一個圖標沒有明顯的特征,是很難被用戶所識別出來的。如下圖所示:



如上圖所示,發現的特征線索是它的眼睛,沒有眼睛,發現就是個橢圓;目的地的線索特征就是中間的圓,沒有了中間的圓,就是個小氣泡;行程是做成了行李的樣子,而沒有了行李箱上的特征標志,就變成了一個很普通的包。

所以圖標上的特征線索是用戶識別的關鍵,在我們設計圖標的時候,一定要確保它包含了用戶識別的線索。


2、什么情況下用線性圖標?

圖標除了要包含特征線索以外,線性和面性圖標之間也有區別,當一些圖標的外部特征為它的特征線索時,線性圖標會比面性圖標的識別度來的更為突出。


當我們的底部圖標的信息屬于特征線索比較微妙,并且出現在邊緣的時候,我們可以使用線性圖標,或者換個角度來說,就是當我們選擇底部圖標為線性的表現形式的時候,在圖標的表現形式上,盡量往形狀的邊緣特征來靠,這樣能夠讓圖標更加突出并且很快被識別。


3、什么情況下用面性?

大多數圖標其實就是將現實生活中的對象變成一個小縮影,因此面性剪影的圖標形式認知高于線性圖標。



盡管如此,用戶還是能夠識別線性圖標,但是當圖標的內部空間比較狹窄的時候,用戶識別線性圖標需要花費更多的時間來識別。

對于內部空間比較擁擠,或者線條比較多的圖標,最好使用面性圖標,剪影的表現方式提供了一個更簡潔也更具辨識度的方式,從這里我們可以發現一個事實,線性圖標的設計表現要求要高于面性圖標,因為線性圖標要在具有表現力的同時還需要有很高的識別度,同時不能太過復雜,內部不能過于擁擠。



劃重點


1、當頁面圖片以圖片為主時,使用純文字或者純圖標的能夠降低底部圖標對用戶造成的干擾;

2、文字+圖標的搭配屬于最穩妥的方式,適用于大部分的產品底部圖標設計。

3、圖標是由有識別度的特征線索組成的,而面性圖標的識別度速度更快;

4、線性圖標的內部間距比較寬的時候,更容易識別,內部間距比較窄的時候,使用面性圖標會更好;

5、圖標的特征線索在邊緣的地方,使用線性的圖標識別度更高。

藍藍設計paul-jarrel.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、網站建設 平面設計服務

日歷

鏈接

個人資料

藍藍設計的小編 http://paul-jarrel.com

存檔