超全面的移動端頂部欄設計分析 - 優設網 - UISDC

超全面的移動端頂部欄設計分析

2018/02/04 9820評論區

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

頂部欄樣式

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

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

去題目化

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

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

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

可點擊

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

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

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

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

配景色

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

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

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

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

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

頂部導航欄

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

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

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

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

隱藏

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

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

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

云南体彩网這種「下拉隱藏,上滑涌現」的設置我發現在簡書和知乎都存在,不過簡書里展示的是作者專欄,而知乎里展示的是文章題目。

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

總結

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

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

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

================明星欄目推薦云南体彩网================

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

設計導航:國內人氣最高的設計云南體彩網,設計師必備: http://hao.7daer.cn

非特殊說明,本文版權歸原作者所有,轉載請注明出處
本文地址:http://www.7daer.cn/top-bar-design-analysis

發表評論 加載中....

評論加載中....

uisdc

評論區都快餓癟了,看看我期盼的小眼神...

您還沒有登錄

優設啟用更平安省心的 微信掃碼登錄

微信掃碼

300萬設計師聚集地!優設網是極具人氣的設計師平臺
云南体彩网 2012年成立至今,一直專注于設計師的學習成長交流

把好文章收藏到微信

打開微信,掃碼分享
學設計 優設網 在這里