超全面的移动端顶部栏设计分析

　　我近来正在做改版设想，以是很少工夫出有更文了。时期逢到了许多成绩，此中一个便是顶部栏配色，厥后我干脆便针对挪动端顶部栏设想做一个总结，正在那里分享给各人。

　　顶部栏款式

　　下图是我们最多见的顶部栏款式。上里是形态栏status bar，中心是界里题目，阁下能够会有icon，代表着返回，动静提醒，设置等操纵。

　　可是我看了一动手机上的使用，其实不是每款产物皆接纳了那种款式。我选择了几个「同类」，逐一停止阐发。

　　来题目化

　　一些产物中的一级界里删除顶部栏中的题目。要晓得为何被删除，尾先要晓得为何而存正在。很简朴，题目的功用便是报告用户当前界里的称号。可是那个功用跟底部栏菜单有些堆叠，果为用户从底部栏的选中形态也能晓得本人当前正在哪一个界里。那末我方才也夸大了，是一级界里，假如进进了两级界里，一旦出有了底部栏菜单，题目借是要拿返来的。

　　上里论述的是一级界里删题目的前提，接下去我们去道道删题目的念头。一个产物的一级界里普通最多只要5个，我们必需正在有限的空间中展现充足多的功用战内容，而删题目便是一个没有错的办法。下图便是我对付出宝尾页做的一个修正，假如减了题目，我们会发明尾页展现的内容便会削减一些。

　　而一级界里也有劣先级之分，「尾页」的用户面击率最下，以是我们能够看到许多产物的尾页题目皆删除，可是其他一级界里的题目照旧保存。便以上里提到的两款产物为例，b站「尾页」战「我的」删除题目，而付出宝只要「尾页」删除题目。

　　可面击

　　正在我们一样平常印象中，顶部栏除icon其他皆是不成面击的。可是我近来逢到一些惯例，以登录/注册界里为多，那里的顶部栏我们能够算作是登录/注册按钮。

　　One界里中顶部栏做成下推框款式，用户能够面击挑选。

　　另外一个比力常睹的例子便是iPhone面击形态栏会快速返回界里顶部。

　　那种改变我以为当前会愈来愈多的，果为一款产物跟着不竭迭代，功用会愈来愈多，空间愈来愈慌张。正在那个条件下，粉饰性元素改变胜利能性元素是一个一定的趋向。极简化设想一个主要理念便是删加取用户使命无闭的非功用性元素大概把粉饰性元素改变胜利能性元素。

　　布景色

　　闭于顶部栏的另外一个趋向是通明布景。通明布景的利用跟第一个来除题目的目标是一样的，皆是为了节流界里空间。

　　既然提到布景，我们去道一下顶部栏的布景配色。常睹的顶部栏布景色有四种：企业色，红色，深灰色战通明。

　　企业色布景的一年夜益处便是对顶部栏停止了品牌化处置，用户一看到便晓得那是甚么产物。虎扑的顶部栏间接企业色布景减logo，我不克不及评判那种设想黑白取可，可是我一看到顶部栏便晓得那是虎扑，从品牌化处置那个角度去道是很胜利的。

　　道到品牌化处置，前段工夫有个伴侣问我，付出宝里的icon正在配色上为何没有同一利用蓝色，那样多调和同一啊。他借给我收了一张其他产物的例子，我以为离开产物定位来道设想皆是耍地痞。付出宝是一个别量十分年夜的产物，每一个模块单拎出去便是一个app，皆有其独有的标记色，比方网商银止的青绿色。不克不及自觉停止品牌化处置，下图我们发明icon配色换成蓝色以后，界里完整损失了条理感。

　　除节流界里空间战品牌化处置，影响布景色的另外一个果素是用户目的。其实不是每个用户利用您的产物皆带有明白的目标性，比方我翻开京东，能够我其实不晓得本人要购甚么，只是纯真的出去看一下。大概我翻开喜马推俗fm大概蜻蜓fm，我本人皆没有晓得本人念要听甚么节目。正在那种用户目的没有明白的状况下，我们要让用户的留意力散焦于内容自己，协助用户尽快天选择出本人感爱好的内容。以是正在设想上我们要对顶部栏停止强化，利用红色大概间接通明布景，制止对用户形成滋扰。

　　顶部导航栏

　　我借发明了一些产物出有利用底部导航栏，转而把顶部栏做成一级导航栏。常睹的产物有QQ音乐、酷狗音乐战酷我音乐。那三款产物的界里规划十分类似，皆舍弃了底部栏菜单。

　　那样的益处正在于用户能够不断看到播放条款式，能够间接停止久停、播放、切歌等操纵。而正在网易云音乐中，用户假如念停止相似操纵则需求面击左上角的icon进进播放界里，便多了一个步调。

　　而且QQ音乐其顶部栏设想包罗了搜刮框那个主要功用，一样用户能够随时随天来搜刮歌直。而网易云音乐则需求面击回到「发明音乐」，也是多了一步。看到那里，能够会有人道，既然顶部栏导航有那么多益处，那末我们干吗借用底部栏导航，网易设想师怎样那末愚。

　　网易年夜佬们出那末愚，从导航系统去阐发，网易云音乐的一级导航是经由过程底部栏菜单去完成的，其劣势正在于用户操纵便利。其他三款产物一级导航皆是顶部栏，假如是年夜屏脚机的话，用户拇指很易触摸获得，那是网易云音乐比其他三家做得更好的处所。

　　躲藏

　　当我翻开one里的一篇文章时，发明顶部栏是躲藏起去的，我持续往下浏览，一旦我往上滑动那末顶部栏便会呈现。

　　我们无妨来阐发其背后的本果，用户下推代表了用户正正在浏览，那末为了删减浏览地区，我们挑选躲藏顶部栏。并且用户上滑那个脚势阐明他中断了当前的浏览流程。呈现那种状况有两个本果：

　　写的太次了，没有感爱好，我要返回到上一级。

　　写的太好了，我要晓得文章题目大概做者疑息。

　　那种「下推躲藏，上滑呈现」的设置我发明正在简书战知乎皆存正在，不外简书里展现的是做者专栏，而知乎里展现的是文章题目。

　　另外一款同类产物「大家皆是产物司理」便比力挺拔独止了，齐程皆躲藏了顶部栏，也能了解，果为其返回按钮是放正在底部栏的。

　　总结

　　以上便是我对挪动端顶部栏设想做的一个简朴的阐发战总结，期望能够帮到各人。