怎么做好底部導(dǎo)航欄圖標(biāo)設(shè)計(jì)?
發(fā)布時(shí)間:2022-01-21 11:05 [ 我要自學(xué)網(wǎng)原創(chuàng) ] 發(fā)布人: 小劉2175 閱讀: 3250

圖標(biāo)在產(chǎn)品中的應(yīng)用非常重要,不同位置的圖標(biāo)有不同的設(shè)計(jì)思路。本文將從產(chǎn)品和設(shè)計(jì)兩個(gè)角度對底部導(dǎo)航欄的圖標(biāo)進(jìn)行分析。閱讀之前,請先瀏覽文章的大綱。

01 底部導(dǎo)航欄圖標(biāo)重要性及維度

  • 重要性
  • 三個(gè)重要評估維度

02 底部導(dǎo)航入口的數(shù)量

  • 認(rèn)知心理學(xué)決定最高數(shù)值
  • 產(chǎn)品框架決定具體數(shù)值

03 底部導(dǎo)航欄的模式

  • 權(quán)重平分
  • 強(qiáng)調(diào)信息
  • 引導(dǎo)操作

04 底部導(dǎo)航欄的表現(xiàn)形式

  • 線性圖標(biāo)的優(yōu)勢
  • 其它圖標(biāo)趨勢

05 圖標(biāo)設(shè)計(jì)思路與創(chuàng)意

  • 權(quán)重平分模式示例
  • 強(qiáng)調(diào)信息模式示例
  • 引導(dǎo)操作模式示例


底部導(dǎo)航欄圖標(biāo)重要性及維度


1. 重要性

底部導(dǎo)航欄的圖標(biāo)是路牌,承擔(dān)著指路的作用,給用戶指明進(jìn)入產(chǎn)品后可以分別通往什么頁面。早期的底部導(dǎo)航欄是單一的指路功能,經(jīng)過多年的交互設(shè)計(jì)迭代后,附加了「信息展示」和「引導(dǎo)操作」的作用,這點(diǎn)會在下文中詳細(xì)闡述。

2. 三個(gè)重要評估維度

品牌調(diào)性

品牌調(diào)性決定了圖標(biāo)的體量感、差異化和創(chuàng)意延展。怎樣評估圖標(biāo)設(shè)計(jì)能夠體現(xiàn)出品牌調(diào)性呢?最簡單直接的方法:截屏首頁,不看頂部欄,僅從底部導(dǎo)航欄能看出來這是什么產(chǎn)品,就算成功體現(xiàn)了品牌調(diào)性。

如何做好底部導(dǎo)航欄圖標(biāo)設(shè)計(jì)?來看高級設(shè)計(jì)師的全面總結(jié)!

識別度

識別度決定了用戶辨識其它頁面功能的速度。高識別度的圖標(biāo)能協(xié)助用戶辨識,低識別度的圖標(biāo)會阻礙用戶辨識。在選擇做這部分圖標(biāo)的時(shí)候,一定要考慮識別度的問題,進(jìn)行創(chuàng)新要建立在高識別度的基礎(chǔ)上。

美觀

導(dǎo)航欄圖標(biāo)美觀的要義是:統(tǒng)一、精致。統(tǒng)一不代表絕對統(tǒng)一,精致不代表過于精細(xì)。要做到美觀,可以遵循以下幾點(diǎn):大小統(tǒng)一和諧、線條粗細(xì)一致、圓角視覺統(tǒng)一、內(nèi)容繁簡平衡。

將三個(gè)維度按重要程度來排序,是品牌調(diào)性>識別度>美觀。有的設(shè)計(jì)師會選擇以美觀度作為優(yōu)先標(biāo)準(zhǔn)。但站在產(chǎn)品的角度來說,應(yīng)該以體現(xiàn)品牌調(diào)性和識別度為重要標(biāo)準(zhǔn),在這基礎(chǔ)上再進(jìn)行美觀設(shè)計(jì)。下圖中,新華書店APP的底部導(dǎo)航欄圖標(biāo)略顯年代感,圖標(biāo)細(xì)節(jié)表現(xiàn)不一顯得不夠統(tǒng)一和精致,然而用戶還是能夠根據(jù)圖標(biāo)一眼區(qū)分各個(gè)導(dǎo)航入口的功能。它們可能不是設(shè)計(jì)師眼中好看的圖標(biāo),但它們是用戶眼中好用的圖標(biāo)。

如何做好底部導(dǎo)航欄圖標(biāo)設(shè)計(jì)?來看高級設(shè)計(jì)師的全面總結(jié)!


底部導(dǎo)航入口的數(shù)量


底部導(dǎo)航入口一般在3-5個(gè),最常見的是4-5個(gè)。這個(gè)數(shù)量由什么決定呢?

1. 最高數(shù)值由認(rèn)知心理學(xué)決定

在認(rèn)知心理學(xué)理論中,人的記憶系統(tǒng)由三個(gè)儲存器組成:感覺寄存器,短時(shí)記憶和長時(shí)記憶。來自環(huán)境的刺激經(jīng)過過濾首先進(jìn)入感覺寄存器,通過選擇性直覺,信息被臨時(shí)傳入短時(shí)記憶(STM)。它是一個(gè)過渡性的記憶緩沖期,容量有限,只能記錄7+-2個(gè)信息組塊,且只能保持大約15-30秒。

在使用APP的時(shí)候,底部導(dǎo)航欄使用到的是人記憶系統(tǒng)中的感覺寄存器和短時(shí)記憶??紤]到APP面對的人群非常廣,短時(shí)記憶容量不一,選擇了7-2(也就是5)作為底部導(dǎo)航入口的最高數(shù)值。

2. 具體數(shù)值由產(chǎn)品的框架決定

產(chǎn)品經(jīng)理會通過項(xiàng)目背景和用戶調(diào)研,決定產(chǎn)品的功能結(jié)構(gòu)。而功能結(jié)構(gòu)圖劃分的類別決定了底部導(dǎo)航入口數(shù)量。有的產(chǎn)品功能非常單一,結(jié)構(gòu)也單一,三個(gè)導(dǎo)航入口已經(jīng)能夠滿足需求;有的產(chǎn)品功能復(fù)雜,則需要更多的導(dǎo)航入口,用以劃分APP功能,幫助用戶快速識別。

如何做好底部導(dǎo)航欄圖標(biāo)設(shè)計(jì)?來看高級設(shè)計(jì)師的全面總結(jié)!


底部導(dǎo)航欄模式


底部導(dǎo)航欄有權(quán)重平分、強(qiáng)調(diào)信息、引導(dǎo)操作這三種模式。本次深度分析采用了30個(gè)產(chǎn)品作為對象進(jìn)行研究,其中大部分為知名社交電商類產(chǎn)品。因?yàn)檫@類型的產(chǎn)品比較多,迭代完善,可參考性強(qiáng)。

1. 權(quán)重平分

當(dāng)產(chǎn)品的功能結(jié)構(gòu)權(quán)重比較平均,不希望突出其中某個(gè)結(jié)構(gòu)時(shí),一般采用權(quán)重平分的模式,即每個(gè)底部入口的分量都是平均的。常規(guī)產(chǎn)品會采用這樣的形式。

如何做好底部導(dǎo)航欄圖標(biāo)設(shè)計(jì)?來看高級設(shè)計(jì)師的全面總結(jié)!

2. 強(qiáng)調(diào)信息

當(dāng)產(chǎn)品需要強(qiáng)調(diào)某些信息引起用戶注意或同一個(gè)按鈕承擔(dān)兩個(gè)功能時(shí),設(shè)計(jì)便可以選擇在某個(gè)入口添加明顯的信息指示或功能。增加功能的底部導(dǎo)航入口不一定是首頁,也可以是其它入口。

嚴(yán)選的首頁按鈕承擔(dān)著「回到頂部/快速定位推薦模塊/品牌展示」的功能;淘寶、飛豬的首頁按鈕承擔(dān)著「回到頂部/品牌展示」的功能;微博的視頻按鈕承擔(dān)著「視頻/關(guān)注的人更新內(nèi)容提示」的功能。

如何做好底部導(dǎo)航欄圖標(biāo)設(shè)計(jì)?來看高級設(shè)計(jì)師的全面總結(jié)!

3. 引導(dǎo)操作

當(dāng)產(chǎn)品希望用戶能夠進(jìn)行某個(gè)操作,需要進(jìn)行強(qiáng)操作提醒時(shí),可以選擇引導(dǎo)操作的導(dǎo)航欄模式,在中心突出操作按鈕。大眾點(diǎn)評、百果園、轉(zhuǎn)轉(zhuǎn)、星巴克、閑魚等都是采用這種模式。

如何做好底部導(dǎo)航欄圖標(biāo)設(shè)計(jì)?來看高級設(shè)計(jì)師的全面總結(jié)!


底部導(dǎo)航欄圖標(biāo)表現(xiàn)形式


1. 線性圖標(biāo)的優(yōu)勢

從大多數(shù)APP設(shè)計(jì)來看,未選中狀態(tài)下,線性圖標(biāo)占有優(yōu)勢。相對面性圖標(biāo)來說,線性圖標(biāo)有更多可能性,且選中與未選中的區(qū)分落差較大,對比明顯。

如何做好底部導(dǎo)航欄圖標(biāo)設(shè)計(jì)?來看高級設(shè)計(jì)師的全面總結(jié)!

2. 其它圖標(biāo)趨勢

未選中狀態(tài)的圖標(biāo)常用線性方式,目前的主要趨勢還是在圖標(biāo)表意上下功夫;選中狀態(tài)的圖標(biāo)常用面性、微質(zhì)感、立體、插畫等方式。


圖標(biāo)設(shè)計(jì)思路與創(chuàng)意


為了直觀表現(xiàn)圖標(biāo)設(shè)計(jì)的思路,我為權(quán)重平分模式、強(qiáng)調(diào)信息模式、引導(dǎo)操作模式分別設(shè)定不同的產(chǎn)品背景,把圖標(biāo)設(shè)計(jì)的過程寫下來供大家參考。

1. 權(quán)重平分模式示例

如何做好底部導(dǎo)航欄圖標(biāo)設(shè)計(jì)?來看高級設(shè)計(jì)師的全面總結(jié)!

2. 強(qiáng)調(diào)信息模式示例

如何做好底部導(dǎo)航欄圖標(biāo)設(shè)計(jì)?來看高級設(shè)計(jì)師的全面總結(jié)!

3. 引導(dǎo)操作模式示例

如何做好底部導(dǎo)航欄圖標(biāo)設(shè)計(jì)?來看高級設(shè)計(jì)師的全面總結(jié)!


結(jié)語


圖標(biāo)對我而言最有趣的地方在于,它是由不同的變量組合出來的結(jié)果,每一次的設(shè)計(jì)都會有驚喜。不同的品牌、不同的產(chǎn)品背景、不同的產(chǎn)品框架…這些千變?nèi)f化,讓圖標(biāo)有了生命,也讓每一次的設(shè)計(jì)都有意義。也歡迎你使用這樣的方式,組合變量,做更多突破性的設(shè)計(jì)。

Illustrator2021從入門至精通教程
我要自學(xué)網(wǎng)商城 ¥150 元
進(jìn)入購買
文章評論
添加表情
遵守中華人民共和國的各項(xiàng)道德法規(guī),
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任,
本站有權(quán)保留或刪除有爭議評論。
參與本評論即表明您已經(jīng)閱讀并接受
上述條款。
V
特惠充值
聯(lián)系客服
APP下載
官方微信
返回頂部
分類選擇:
電腦辦公 平面設(shè)計(jì) 室內(nèi)設(shè)計(jì) 室外設(shè)計(jì) 機(jī)械設(shè)計(jì) 工業(yè)自動(dòng)化 影視動(dòng)畫 程序開發(fā) 網(wǎng)頁設(shè)計(jì) 會計(jì)課程 興趣成長 AIGC