頂部導(dǎo)航欄作為我們使用APP時(shí)每天都要遇到的組件,出鏡頻率極高,看似簡(jiǎn)單,其實(shí)我們?cè)诶L制界面的時(shí)候還是有許多細(xì)節(jié)需要注意的。本篇文章主要匯總了常見的四種頂部導(dǎo)航欄設(shè)計(jì)樣式,希望能幫助大家更好地理解導(dǎo)航欄這個(gè)組件。
一、常規(guī)導(dǎo)航欄
所謂常規(guī)導(dǎo)航欄,主要是指固定在狀態(tài)欄下,能清晰分辨出的一行導(dǎo)航欄,主要由操作圖標(biāo)、標(biāo)題、搜索框、背景等組成,大致分成三種,分別是簡(jiǎn)單標(biāo)題導(dǎo)航欄、搜索框?qū)Ш綑谝约癟ab/分段控件導(dǎo)航欄。
1.簡(jiǎn)單標(biāo)題導(dǎo)航欄
簡(jiǎn)單標(biāo)題導(dǎo)航欄常見于二級(jí)詳情界面或?qū)Ш胶?jiǎn)單的一級(jí)界面,主要由操作圖標(biāo)與標(biāo)題組成,如下圖:
(以下涉及的尺寸大小都是二倍圖下的設(shè)計(jì)大小)
該類型的導(dǎo)航標(biāo)題的大小一般是36px,操作圖標(biāo)的設(shè)計(jì)大小一般是40px,切圖大小一般是48px,背景色多采用白色或APP主題色。并且很多APP為了保證整體界面的簡(jiǎn)潔,還會(huì)去除導(dǎo)航欄底部分割線,僅采用白色作為背景。
2.搜索框?qū)Ш綑?/strong>
常規(guī)搜索框?qū)Ш綑谑窃诤?jiǎn)單標(biāo)題導(dǎo)航欄的基礎(chǔ)上,增加了一個(gè)搜索框,一般去除了導(dǎo)航標(biāo)題。如下圖:
搜索框的寬度隨導(dǎo)航欄中操作圖標(biāo)的多少?zèng)Q定,搜索框高度多采用56~60px,搜索框中的圖標(biāo)設(shè)計(jì)尺寸多采用32px(為了減少切圖尺寸,也可采用48px的切圖大小)。
在擺放圖標(biāo)時(shí),采用左右間距等分,距離搜索框的間距與邊距相等,看起來會(huì)更舒適。如下圖所示:
3.Tab/分段控件導(dǎo)航欄
Tab左右切換頂部導(dǎo)航欄與分段控件頂部導(dǎo)航欄,都是頂部有多個(gè)標(biāo)題切換的導(dǎo)航欄樣式,分為選中標(biāo)題與未選中標(biāo)題,如下圖:
分段控件頂部導(dǎo)航欄一般有2~5個(gè)可選項(xiàng),且不能左右滑動(dòng)。Tab左右切換頂部導(dǎo)航欄的可選項(xiàng)可以擴(kuò)展很多(如愛奇藝的首頁(yè)頂部Tab切換有24個(gè)可選項(xiàng)),并且可以左右滑動(dòng)切換,選中樣式也比較豐富,常見的有底部加上小短線、字體顏色變化、字號(hào)放大等(多個(gè)合并使用更能突出選中標(biāo)題),如下圖:
二、通欄導(dǎo)航欄
通欄導(dǎo)航欄與常規(guī)導(dǎo)航欄的構(gòu)成基本沒有區(qū)別,最大的不同是,通欄導(dǎo)航欄的背景層一般與下方的模塊打通了,在視覺上看起來更為統(tǒng)一,還能一定程度上節(jié)約界面空間。如下圖:
通欄導(dǎo)航欄常用在電商、旅游等界面復(fù)雜或是需要烘托氛圍的界面中(多伴隨著背景處理),有些也會(huì)放在頂部通欄Banner上,節(jié)省空間的同時(shí)減少割裂感。
通欄導(dǎo)航欄的背景處理方式一般有三種
1.特殊背景處理:與下方模塊整體風(fēng)格保持一致,多采用與下方一致的圖片背景;
2.顏色、漸變背景:采用純色或是漸變背景,常見于卡片風(fēng)格的界面;
3.黑色透明漸變蒙層:采用一層漸變蒙層,常見于圖片Banner上,保證導(dǎo)航欄文字的可識(shí)別性。
三、大標(biāo)題導(dǎo)航欄
自ios11發(fā)布后,大標(biāo)題風(fēng)格的導(dǎo)航欄便開始流行起來,尤其是飛機(jī)稿總能看見大標(biāo)題導(dǎo)航欄的影子。普通的導(dǎo)航欄在二倍圖下高度只有88px,標(biāo)題字號(hào)為36px,而大標(biāo)題導(dǎo)航欄在二倍圖下高度足足有192px,標(biāo)題字號(hào)為68px。
但并不是所有APP都適合使用大標(biāo)題導(dǎo)航欄,并且即便使用大標(biāo)題導(dǎo)航欄,整個(gè)APP中也不會(huì)全部使用,使用中界面向上滑動(dòng)也會(huì)切換成正常狀態(tài)的導(dǎo)航欄或直接隱去導(dǎo)航欄,便于內(nèi)容的查看。
有些APP也會(huì)折中使用,在常規(guī)88PX(二倍圖)導(dǎo)航欄高度下,放大字號(hào),隱去分割線,使標(biāo)題看起來更大。
使用大標(biāo)題導(dǎo)航欄,你需要考慮以下兩點(diǎn):
1.是否需要幫助用戶快速確認(rèn)所處位置(多為產(chǎn)品頁(yè)面重復(fù)性多,或是功能單一的APP);
2.APP整體風(fēng)格是否偏向簡(jiǎn)約大氣。
大標(biāo)題導(dǎo)航欄總給人一種高逼格的感覺,這也是為什么飛機(jī)稿喜歡使用大標(biāo)題,但卻沒見國(guó)內(nèi)的電商APP使用。
四、小程序?qū)Ш綑?/span>
微信的小程序?qū)Ш綑?,在頂部右上方有一個(gè)不可去除也無法編輯的Titlebar按鈕,微信配置了一深一淺兩種風(fēng)格。
從APP轉(zhuǎn)換到小程序時(shí),要注意調(diào)整APP的頂部導(dǎo)航欄的位置以及搜索框的大小,避免被Titlebar遮擋,如下圖:
上圖中,豌豆公主的頂部導(dǎo)航欄整體下移,并且減小了搜索框的高度,提高屏幕的利用率。
五、劃重點(diǎn)
·常規(guī)導(dǎo)航欄主要包括簡(jiǎn)單標(biāo)題導(dǎo)航欄、搜索框?qū)Ш綑谝约癟ab/分段控件導(dǎo)航欄通欄導(dǎo)航欄
·通欄導(dǎo)航欄要注意導(dǎo)航背景的處理,常用的有特殊背景處理、顏色漸變背景、黑色透明漸變蒙層
·大標(biāo)題導(dǎo)航欄使界面整體更有逼格,但不是所有APP都適合的,要根據(jù)情況合理使用
·微信小程序?qū)Ш綑谠陧敳坑疑戏接幸粋€(gè)不可去除也無法編輯的Titlebar按鈕,從APP換到小程序時(shí)要注意重新調(diào)整導(dǎo)航欄
藍(lán)藍(lán)設(shè)計(jì)( www.88yangsc.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。