王M爭：我最近在做改版設計，所以很長時間沒有更文了。期間遇到了很多問題，其中一個就是頂部欄配色，后來我索性就針對移動端頂部欄設計做一個總結，在這里分享給大家。

頂部欄樣式

下圖是我們最常見的頂部欄樣式。上面是狀態欄status bar，中間是界面標題，左右可能會有icon，代表著返回，消息提示，設置等操作。

但是我看了一下手機上的應用，并不是每款產品都采用了這種樣式。我挑選了幾個「異類」，逐個進行分析。

去標題化

一些產品中的一級界面刪除了頂部欄中的標題。要知道為什么被刪除，首先要知道為什么而存在。很簡單，標題的功能就是告訴用戶當前界面的名稱。但是這個功能跟底部欄菜單有些重疊，因為用戶從底部欄的選中狀態也能知道自己當前在哪個界面。那么我剛才也強調了，是一級界面，如果進入了二級界面，一旦沒有了底部欄菜單，標題還是要拿回來的。

上面闡述的是一級界面刪標題的條件，接下來我們來說說刪標題的動機。一個產品的一級界面一般最多只有5個，我們必須在有限的空間中展示足夠多的功能和內容，而刪標題就是一個不錯的方法。下圖就是我對支付寶首頁做的一個修改，如果加了標題，我們會發現首頁展示的內容就會減少一些。

而一級界面也有優先級之分，「首頁」的用戶點擊率最高，所以我們可以看到很多產品的首頁標題都刪除了，但是其余一級界面的標題依舊保留。就以上面提到的兩款產品為例，b站「首頁」和「我的」刪除了標題，而支付寶只有「首頁」刪除了標題。

可點擊

在我們日常印象中，頂部欄除了icon其余都是不可點擊的。但是我最近遇到一些特例，以登錄/注冊界面為多，這里的頂部欄我們可以看成是登錄/注冊按鈕。

One界面中頂部欄做成下拉框樣式，用戶可以點擊篩選。

另一個比較常見的例子就是iPhone點擊狀態欄會快速返回界面頂部。

這種轉變我覺得以后會越來越多的，因為一款產品隨著不斷迭代，功能會越來越多，空間越來越緊張。在這個前提下，裝飾性元素轉變成功能性元素是一個必然的趨勢。極簡化設計一個重要理念就是刪減與用戶任務無關的非功能性元素或者把裝飾性元素轉變成功能性元素。

背景色

關于頂部欄的另一個趨勢是透明背景。透明背景的使用跟第一個去除標題的目的是一樣的，都是為了節省界面空間。

既然提到背景，我們來說一下頂部欄的背景配色。常見的頂部欄背景色有四種：企業色，白色，深灰色和透明。

企業色背景的一大好處就是對頂部欄進行了品牌化處理，用戶一看到就知道這是什么產品?；涞捻敳繖谥苯悠髽I色背景加logo，我不能評判這種設計好壞與否，但是我一看到頂部欄就知道這是虎撲，從品牌化處理這個角度來說是很成功的。

說到品牌化處理，前段時間有個朋友問我，支付寶里的icon在配色上為什么不統一使用藍色，這樣多和諧統一啊。他還給我發了一張其他產品的例子，我覺得脫離產品定位去談設計都是耍流氓。支付寶是一個體量非常大的產品，每個模塊單拎出來就是一個app，都有其特有的標志色，例如網商銀行的青綠色。不能盲目進行品牌化處理，下圖我們發現icon配色換成藍色之后，界面完全喪失了層次感。

除了節省界面空間和品牌化處理，影響背景色的另一個因素是用戶目標。并不是每一個用戶使用你的產品都帶有明確的目的性，例如我打開京東，可能我并不知道自己要買什么，只是單純的進來看一下?；蛘呶掖蜷_喜馬拉雅fm或者蜻蜓fm，我自己都不知道自己想要聽什么節目。在這種用戶目標不明確的情況下，我們要讓用戶的注意力聚焦于內容本身，幫助用戶盡快地挑選出自己感興趣的內容。所以在設計上我們要對頂部欄進行弱化，使用白色或者直接透明背景，避免對用戶造成干擾。

頂部導航欄

我還發現了一些產品沒有使用底部導航欄，轉而把頂部欄做成一級導航欄。常見的產品有QQ音樂、酷狗音樂和酷我音樂。這三款產品的界面布局非常相似，都舍棄了底部欄菜單。

這樣的好處在于用戶可以一直看到播放條樣式，可以直接進行暫停、播放、切歌等操作。而在網易云音樂中，用戶如果想進行類似操作則需要點擊右上角的icon進入播放界面，就多了一個步驟。

并且QQ音樂其頂部欄設計包含了搜索框這個重要功能，同樣用戶可以隨時隨地去搜索歌曲。而網易云音樂則需要點擊回到「發現音樂」，也是多了一步?？吹竭@里，可能會有人說，既然頂部欄導航有這么多好處，那么我們干嘛還用底部欄導航，網易設計師怎么那么傻。

網易大佬們沒那么傻，從導航體系來分析，網易云音樂的一級導航是通過底部欄菜單來完成的，其優勢在于用戶操作方便。其余三款產品一級導航都是頂部欄，如果是大屏手機的話，用戶拇指很難觸摸得到，這是網易云音樂比其他三家做得更好的地方。

隱藏

當我打開one里的一篇文章時，發現頂部欄是隱藏起來的，我繼續往下閱讀，一旦我往上滑動那么頂部欄就會出現。

我們不妨去分析其背后的原因，用戶下拉代表了用戶正在閱讀，那么為了增加閱讀區域，我們選擇隱藏頂部欄。而且用戶上滑這個手勢說明他中止了當前的閱讀流程。出現這種情況有兩個原因：

• 寫的太次了，不感興趣，我要返回到上一級。
• 寫的太好了，我要知道文章標題或者作者信息。

這種「下拉隱藏，上滑出現」的設置我發現在簡書和知乎都存在，不過簡書里展示的是作者專欄，而知乎里展示的是文章標題。

另一款同類產品「人人都是產品經理」就比較特立獨行了，全程都隱藏了頂部欄，也能理解，因為其返回按鈕是放在底部欄的。

總結

以上就是我對移動端頂部欄設計做的一個簡單的分析和總結，希望可以幫到大家。

歡迎關注作者的微信公眾號：「王M爭」

「UI設計師必看的知識總結」

• 《進階知識！超全面的標記系統設計總結》
• 《想設計按鈕？先來看這份超全面的按鈕使用場景總結》
• 《最常見的Tab該怎么設計？來看這篇超全的總結》
• 《如何做出用戶不反感的錯誤提示？來看這篇總結！》

================明星欄目推薦================

優優教程網： UiiiUiii.com 是優設旗下優質中文教程網站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎設計愛好者也準備了貼心的知識樹專欄。開啟免費自學新篇章，按照我們的專欄一步步學習，一定可以迅速上手并制作出酷炫的視覺效果。

設計導航：國內人氣最高的設計網址導航，設計師必備： http://hao.uisdc.com