UI設(shè)計中頂部欄的設(shè)計要點

　　移動端頂部欄設(shè)計看似簡單，其實在做界面時還是有許多細節(jié)值得我們注意的。今天AAA教育郭老師就針對UI設(shè)計中頂部欄的設(shè)計要點進行簡單的說明，希望能更好地幫助大家理解這個組件。
 

　　一、移動端頂部欄樣式及設(shè)計要點
 

　　這里將移動端頂部欄分為三種樣式，下面我們來分析以下：
 

　　1、常規(guī)頂部欄 2、Tab/分段控件頂部欄 3、大標(biāo)題頂部欄
 

　　1.常規(guī)頂部欄
 

　　常規(guī)頂部欄固定在狀態(tài)欄下， 主要由操作圖標(biāo)、標(biāo)題、搜索框等組成，大致分成以下4種：
 

　　a. 簡單標(biāo)題頂部欄
 

　　主要由操作圖標(biāo)與標(biāo)題組成，如下圖：

 

　　該類型的頂部欄標(biāo)題大小一般是36px，操作圖標(biāo)的設(shè)計尺寸一般是40px左右，切圖尺寸一般是48px，背景色多采用白色或APP主題色。
 

　　b.搜索框頂部欄
 

　　是在簡單標(biāo)題頂部欄的基礎(chǔ)上，去除標(biāo)題文字增加一個搜索框。如下圖：

 

　　搜索框的寬度由頂部欄中操作圖標(biāo)的多少決定，搜索框高度多采用56~60px，搜索框里的圖標(biāo)設(shè)計尺寸多采用40px左右(為了減少切圖尺寸，同樣可采用48px的切圖尺寸)。在擺放圖標(biāo)時，距離搜索框的間距與邊距相等看起來會更舒適。如下圖所示：
 

　　c.去標(biāo)題化
 

　　一些產(chǎn)品中的一級界面刪除了頂部欄中的標(biāo)題。為什么刪除呢，因為標(biāo)題的功能就是告訴用戶當(dāng)前界面的名稱，而用戶從底部欄的選中狀態(tài)也能知道自己當(dāng)前在哪個界面。這個功能跟底部欄菜單有些重疊，當(dāng)我們想在有限的空間中展示更多的功能和內(nèi)容時，刪除標(biāo)題是一個不錯的方法。

 

　　d.可點擊下拉
 

　　閑魚和百度翻譯界面中頂部欄可點擊操作，一款產(chǎn)品隨著不斷迭代功能會越來越多，空間越來越緊張。在這個前提下，將裝飾性元素轉(zhuǎn)變成功能性元素是一個不錯的方法。

 

　　2.Tab/分段控件導(dǎo)航欄
 

　　Tab導(dǎo)航欄的可選項一般可以左右滑動切換，選中樣式也比較豐富，常見的有底部加上小短線、字體顏色變化、字號放大等(組合使用效果更突出)，分段控件頂部導(dǎo)航欄一般有2~5個可選項，不能左右滑動。如下圖：

 

　　3.大標(biāo)題導(dǎo)航欄
 

　　自ios11發(fā)布后，大標(biāo)題風(fēng)格的導(dǎo)航欄便開始流行起來，普通的頂部欄在二倍圖下高度只有88px，標(biāo)題字號一般為36px，而大標(biāo)題頂部欄高度足足有192px,標(biāo)題字號為68px。如下圖：

 

　　使用大標(biāo)題頂部欄，你需要考慮以下兩點：1.是否需要幫助用戶快速確認所處位置(多為產(chǎn)品頁面重復(fù)性多，或是功能單一的APP，以瀏覽頁面信息為主);2.APP整體風(fēng)格是否偏向簡約大氣。 適合使用大標(biāo)題頂部欄的產(chǎn)品:1.藝術(shù)相關(guān)或閱讀類APP，這類產(chǎn)品本身自帶藝術(shù)感或文藝氣息，當(dāng)大標(biāo)題結(jié)合特殊字體，或雜志風(fēng)版式，就能瞬間提高產(chǎn)品調(diào)性。2.現(xiàn)代簡約型APP，通過大標(biāo)題+留白表現(xiàn)現(xiàn)代感。
 

　　二、背景色
 

　　1白色使用白色頂部欄讓用戶的注意力聚焦于內(nèi)容本身，幫助用戶更快的挑選出自己感興趣的內(nèi)容。
 

　　2品牌色用品牌色做背景的一大好處就是對頂部欄進行了品牌化處理，用戶一看到就知道這是什么產(chǎn)品。
 

　　3透明透明背景常用在電商、旅游等需要烘托氛圍的界面中，有些也會放在頂部通欄Banner上，節(jié)省空間的同時減少割裂感，在視覺上看起來更為統(tǒng)一。

 

　　好了，以上就是今天分享的內(nèi)容， 因此，您現(xiàn)在已經(jīng)了解了與UI設(shè)計師的工作相關(guān)的主要技能。如果您想了解更多信息，請訪問AAA教育，包含有關(guān)在該領(lǐng)域工作的更多相關(guān)文章。