移動端頂部欄設計總結(轉)

看到一位前輩總結的很好,所以轉載下來,也方便大家查閱!
原文轉自http://www.ui.cn/detail/355868.html
我最近在做改版設計,所以很長時間沒有更文了。期間遇到了很多問題,其中一個就是頂部欄配色,后來我索性就針對移動端頂部欄設計做一個總結,在這里分享給大家。

頂部欄樣式

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

Image title

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

去標題化

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

Image title

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

Image title

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

可點擊

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

Image title

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

Image title

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

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

背景色

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

Image title

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

企業色背景的一大好處就是對頂部欄進行了品牌化處理,用戶一看到就知道這是什么產品。虎撲的頂部欄直接企業色背景加logo,我不能評判這種設計好壞與否,但是我一看到頂部欄就知道這是虎撲,從品牌化處理這個角度來說是很成功的。

Image title

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

Image title

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

Image title

頂部導航欄

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

Image title

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

Image title

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

Image title

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

隱藏

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

Image title

我們不妨去分析其背后的原因,用戶下拉代表了用戶正在閱讀,那么為了增加閱讀區域,我們選擇隱藏頂部欄。而且用戶上滑這個手勢說明他中止了當前的閱讀流程。出現這種情況有兩個原因:1,寫的太次了,不感興趣,我要返回到上一級。 2,寫的太好了,我要知道文章標題或者作者信息。這種“下拉隱藏,上滑出現”的設置我發現在簡書和知乎都存在,不過簡書里展示的是作者專欄,而知乎里展示的文章標題。

Image title

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

Image title

總結

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

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 230,825評論 6 546
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,814評論 3 429
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 178,980評論 0 384
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 64,064評論 1 319
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,779評論 6 414
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 56,109評論 1 330
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 44,099評論 3 450
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 43,287評論 0 291
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,799評論 1 338
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,515評論 3 361
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,750評論 1 375
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 39,221評論 5 365
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,933評論 3 351
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,327評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,667評論 1 296
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,492評論 3 400
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,703評論 2 380

推薦閱讀更多精彩內容