本文從標題欄的組件介紹、設(shè)計要點、使用場景、樣式拓展四個方面，幫你掌握UI組件中的標題欄設(shè)計。

一、組件介紹

頂部標題欄，是幾乎所有 APP 頁面設(shè)計中的第一個組件，用來展示頁面的名稱和放置一些層級較高的操作選項。

iOS 官方組件庫提供了一些頂部標題欄的樣式，但因為大標題的設(shè)計并不符合中文市場，所以只要簡單認識它們的構(gòu)造即可。

而市面上應(yīng)用的標題欄五花八門，樣式各不相同，但它們包含的元素卻始終圍繞在幾個固定的模塊中。所以，掌握頭部標題欄的設(shè)計，只要先熟悉幾種常見的樣式，就可以在實際項目中根據(jù)需要進行自定義組合和創(chuàng)新。

二、設(shè)計要點

1. 框架布局

做標題欄第一步要做的，是確定欄的數(shù)量。

除去固定的狀態(tài)欄以外，標題欄還可以另外加入一到兩個欄，最多三個。每個欄至少高 44pt，它本身的背景是透明的，它們的背景即是標題欄的背景。

有了欄，接下來需要整理需求中放入標題欄的功能。

我整理了標題欄中頻繁出現(xiàn)的功能點，并分成三個展示類型，你們在做自己界面的時候可以考慮從以下內(nèi)容中選取。

以欄的形式存在的功能：頁面標題、產(chǎn)品 logo、搜索、分頁器、日期、用戶昵稱/歡迎語/slogan

這些元素可以占據(jù)頁面一整行的寬度，不一定要占滿，但它可以作為獨立的一行；有些長度較長的文字類產(chǎn)品 logo 則可以等同于標題使用。

以圖標形式存在的功能：搜索、通知、用戶中心、產(chǎn)品 logo、返回、側(cè)邊欄、其他……

這些元素以圖標的形式與第一類相結(jié)合，置于欄的左右；圖形形式 logo 則作為圖標使用。

以背景形式存在的功能：Banner、插畫。

有些 Banner 可以作為整個標題欄的背景。

有了欄，也有了功能，最后我們只需要把功能置入欄中，這樣就基本完成了一個標題欄的布局。

2. 分頁器排版

分頁器在標題欄中如何排版也是一個比較復(fù)雜的問題，因為分頁器的樣式、位置都有極大的自定義空間。我這里不會詳細去講分頁器該如何設(shè)計，那是分頁器組件會專門講的事情，我這里只歸納分頁器在標題欄中的擺法。`

首先我們需要知道，分頁器的每一個標簽，都有一個透明的背景，當我們考慮分頁器該如何排版時，本質(zhì)是在考慮這些一個個單元格該如何排版。

這些單元格只存在兩種排版形式，一種是定寬，一種是等分。

定寬，即固定每個單元格的寬度，將它們肩并肩排布好之后，再在欄中進行做對齊或居中對齊。一般適合少于四個或大于六個標簽的情況。

等分，即先確定整個分頁器的寬度，再根據(jù)分頁器的數(shù)量對這個寬度進行均分的方法。適合五到六個標簽的情況 (太少會顯得疏，太多會擺不下)。

三、使用場景

標題欄會應(yīng)用在幾乎所有頁面，但根據(jù)頁面需求會有不同的呈現(xiàn)方式。

首頁或者一級頁面的標題欄應(yīng)該是相對最復(fù)雜、功能最多的，下級頁面則使用較簡單的布局。常見的類型有下面幾種。

1. 基礎(chǔ)樣式

只包含一個標題/logo 欄或再加一個搜索欄的樣式。

例如，微信的標題欄是一個基礎(chǔ)且標準的樣式，第一欄頁面標題居中，該標題字號為 17pt，蘋方中粗體，右側(cè)一枚功能按鈕；第二欄就只有一條搜索欄。

如果搜索欄兩側(cè)有圖標，則搜索欄的寬度可以用 390 減去（兩個邊距+兩個圖標寬度+兩個間距）。

2. 包含 1 級分頁

只包含一個分頁器的樣式?？梢耘c搜索或其他圖標合并成一欄，也可以置于搜索欄的上側(cè)或下側(cè)。

只包含一個分頁器的樣式。可以與搜索或其他圖標合并成一欄，也可以置于搜索欄的上側(cè)或下側(cè)。

字體的大小根據(jù)展示內(nèi)容重要性和頁面設(shè)計風格相關(guān)，如果要切換的選項少，可以和圖標混合成一欄，如果切換的選項多，則獨立占一欄的位置。

3. 包含 2 級分頁

指包含兩級分頁器的情況，上方切換不同類型的頁面，下方切換該頁面下的不同分類內(nèi)容，這種樣式往往應(yīng)用在一些比較復(fù)雜的場景中。

4. 包含背景樣式

包含背景的設(shè)計是在頂欄背后增加主色、漸變、圖片的類型，可以和分頁控件并存。

這類設(shè)計主要目標是強化空間頂部的視覺重心，用于渲染品牌特征或活動氛圍。主要的設(shè)計要點是確保頭部和下方元素的銜接是合理的。

主流的做法包含下方直接截斷和漸變過渡兩種，為了讓過度更順滑，往往會在過渡區(qū)域上方疊加一個卡片元素，用來強化前后景的對比。

5. 混合輪播圖

和包含背景的形式類型，只是有的設(shè)計會更進一步，直接將背景做成輪播圖，更好的利用空間。

該類型的設(shè)計主要注意的事項就是要確保頂部的內(nèi)容可見，不能在顏色上和背景融為一體。

同時，要確保 Banner 本身的布局頂部有留白空間，不會讓 Banner 的內(nèi)容、文字信息和標題欄內(nèi)容疊加到一起，造成視覺錯誤。

四、樣式拓展

1. 極有家（每平每屋又雙叕改名了）

極有家給搜索欄做了一定程度的縮小，縮到不足半寬，與右側(cè)的圖標兩端對齊地排列到同一個欄內(nèi)，這也是一種安排元素的思路。其次圖片背景采用不規(guī)則的形狀，盡管我非常不建議你們這么做——因為這非常怪異——但市面上確實有APP是這么頭鐵的。

2. 去哪兒

上滾的樣式可以與第一屏的樣式有所不同，把不重要的欄或者元素移出，不過此種變化需要一定程度的動效去表達動向，不能直接消失。例如去哪兒的旅行攻略頁面當頁面上滾時，搜索欄會逐漸以半欄的形式出現(xiàn)在右上角，而原本的三個功能圖標將會右滑移出。

3. 即刻

標題欄也可以根據(jù)頁面的場景需要，做成卡片化的形式，將四周鏤空出來。這種做法可以模糊內(nèi)容和框架的界線，讓場景在觀感上更整體。比如即刻的即刻鎮(zhèn)頁面，它的歡迎語/副文本和頭像并沒有跳出標題欄的框架，但它一旦將標題欄做成卡片，就會讓人覺得它是內(nèi)容和場景的一部分而非頁面框架的一部分。

4. 其他案例展示

歡迎關(guān)注作者的微信公眾號：「超人的電話亭