UI設計中頂部欄的設計要點

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

　　一、移動端頂部欄樣式及設計要點
 

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

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

　　1.常規(guī)頂部欄
 

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

　　a. 簡單標題頂部欄
 

　　主要由操作圖標與標題組成，如下圖：

 

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

　　b.搜索框頂部欄
 

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

 

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

　　c.去標題化
 

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

 

　　d.可點擊下拉
 

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

 

　　2.Tab/分段控件導航欄
 

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

 

　　3.大標題導航欄
 

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

 

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

　　二、背景色
 

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

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

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

 

　　好了，以上就是今天分享的內容， 因此，您現在已經了解了與UI設計師的工作相關的主要技能。如果您想了解更多信息，請訪問AAA教育，包含有關在該領域工作的更多相關文章。