哈嘍各位小伙伴，本期和各位聊聊「頂部欄」的設計。我們可能認為App頂部欄的組成很簡單不需要太多精力，實際上要設計一個精確、美觀、和用戶目標相匹配的頂部欄并不容易。

為了試圖分析App頂部欄設計的某些模式和規則，本文帶大家一起了解App頂部欄的組成、變化，以及如何設計頂部欄的交互。

01 頂部欄的常見樣式

頂部欄是什么樣子，它由什么組成？

常規頂部欄 

通常，頂部欄提供有關此頁面總體的信息，以及用戶可能對該頁面進行的潛在操作。常見的頂部欄如下所示：

頂部欄中常見的組件包括：標題、容器、操作項、導航圖標等，接下來為大家逐一介紹各個組件的使用。

頂部標題通常與底部導航一起使用，共同解釋頁面的信息。

如果一個頁面中底部導航只有圖標沒有文字解釋，用戶有可能不了解圖標的意思，那么解釋頁面信息的重任就落在了頂部欄的標題上。

大多數情況下，標題位于頂部欄的中間，有時也會在左上角有一個很大的標題作為導航（IOS應用中）。除了解釋頁面的目的，大標題還可以用于品牌推廣。

標題也可以解釋用戶在這個頁面上執行的操作。例如，當用戶想修改個人資料時，標題會顯示“edit profile”，用來解釋操作。

有時，在頂部欄主標題的下方會有補充文本，這樣方便為用戶提供更多的信息。

容器的趨勢越來越不明顯。容器通常是灰色或者不飽和的顏色，有時容器也會使用品牌主題色，起到宣傳和推廣品牌的作用。

操作項通常以圖標和文本按鈕的形式出現在頂欄上 ，當需要時可以在頂欄上顯示0-4個圖標或文本按鈕。

在不同的頁面中操作項可能代表不同的含義，但一些常見的圖標/操作遵循著一定的規則：

1、返回：當用戶進入第二/第三層級頁面時，“返回”通常出現在左上角。單擊“返回”圖標可引導用戶回到原始頁面。

2、關閉或取消的位置不固定，可以在左側也可以在右側，具體取決于是否有其他操作。