赞助商
立即赞助

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

UI设计3年前 (2021)更新 流光
2.3K 0 0

王M争:我最近在做改版设计,所以很长时没有更文了。期遇到了很多问题,其个是顶部栏,来我索就针对移动端顶部栏设计做一个总结,在里分享给大家。

顶部栏样
下图我们常见的顶部栏样式。面状态栏status bar,中间界面标题,左右可能会icon,表返回,消息提示,设置操作。

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

是我看了下手上应用,并不是款品都采用了这样。我挑选了几个「异类」,逐个进分析。

标题
一产品中的一级界面删除顶部栏中的标题。要道为什么被删除,首先要道为什么而存在。很简单,标题的功能就是告诉用户当前界面的名称。但是个功能跟底部栏菜单有重叠,因为用户从底部栏的选中状态也能道自己当前在哪个界面。么我刚才也强,是一级界面,果进二级界面,一旦没有底部栏菜单,标题还是要拿回来的。

全移动端顶部栏设计分析

上面阐述的是一级界面删标题的条件,接来我们来说说删标题的机。一个产的一级界面一般最多只有5个,我们必须在有限的空间中展示足够多的功和容,而删标题就是一个错的方法。图就是我对支付宝首页做的一个修改,如果了标题,我们会发现首页展示的容就会减一些。

超全面的移动端顶部栏计析

一级界面也优先级之分,「首页」的用户点击率高,所以我们可以看到很多产品的首页标题都删除了,但其余一级界面的标题依旧保留。就以面提到的两款产品例,b站「首页」「我的」删除了标题,支付宝只「首页」删除了标题。

点击
在日常印象中,顶部栏除了icon其余都是不可点击的。但是最近遇一些例,以登录/注册界面为多,这的顶部栏可以成是登录/注册按钮。

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

One界面中顶部栏做成下拉框样式,用户以点击筛选。

全移动端顶部栏设计分析

另一个较见的例子就是iPhone点击状态栏会快速返界面顶。

这种转变觉得以后会越来越多的,因为一款产品随着不断迭代,功能会越来越多,空间越来越紧张。在这个前提下,装饰性素转变成功能性素是一个必然的趋势。极简化计一个重要理念就是删减用户任无关的非功能性素或者把装饰性素转变成功能性素。

背景色
于顶栏的另一个趋势是透明背景。透明背景的使跟第一个除标题的目的是一样的,都是为了节省界面空间。

超全面的移动端顶部栏计析

既然提到背景,我们一下顶部栏的背景配色。常见的顶部栏背景色四种:企业色,白色,深灰色透明。

企业背的一大处就是对顶部栏进行品牌化处理,用户一看到就道是什么产品。虎扑的顶部栏直接企业背加logo,我不能评判种设计坏与否,但是我一看到顶部栏就道是虎扑,从品牌化处理个角度来说是很成功的。

全移动端顶部栏设计分析

说到牌处,前时间有个友问我,支付宝里的icon在配色上为么统一使蓝色,这样多和谐统一。他还给我发了一张他产的例子,我觉得脱离产定位谈设计都是耍流氓。支付宝是一个体量非大的产,每个模单拎来就是一个app,都有特有的标志色,例如商行的青绿色。盲目进行牌处,图我们发现icon配色换成蓝色之后,界面全丧失了层次感。

超全面的移动端顶部栏计析

除了节省界面空间品牌化处理,影响背景色的另一因素用户目标。并不每一用户使用的产品都明确的目的性,例如我打京东,可能我并不知道自己买什么,只单纯的看一下。或者我打喜马拉fm或者蜻蜓fm,我自己都不知道自己听什么节目。这种用户目标不明确的况下,我们让用户的注意力聚焦于内本身,帮用户尽挑选出自己感趣的内。所以设我们对顶部栏行弱化,使用白色或者直接透明背景,避免对用户造扰。

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

顶部导航栏
我还发了一些产品使用底部导航栏,转把顶部栏一级导航栏。常见的产品QQ音乐、酷狗音乐酷我音乐。这三款产品的界面布局非常相似,都舍弃了底部栏单。

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

这样好处在于用户可以看到播放条样,可以接进暂、播放、切歌等操作。而在网易云音乐,用户如想进类似操作则需要击右上icon进入播放界,多了个步骤。

超全面的移端顶栏设计分析

并且QQ音其顶部栏计包含了搜索框这个重要功能,同用户可以随随地去搜索歌曲。而网易云音则需要点击回「发现音」,也是多了一步。这,可能会有人说,既然顶部栏导航有这多好,那干嘛还用底部栏导航,网易计怎那傻。

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

网易大佬们没么傻,从导航系来分析,网易云音乐的一级导航是通底部栏菜单来完成的,其优势在用户操方便。其余三款产品一级导航是顶部栏,果是大屏手机的,用户拇指很难触摸得到,是网易云音乐比其他三家做得更的地方。

隐藏
当我打one里的一篇文章时,发顶部栏隐藏起的,我继续往下阅读,一旦我往滑动那么顶部栏就会出。

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

我们不妨去分析其背后原,用户下代表了用户正在阅读,那么为了增加阅读区域,我们选择隐藏顶部栏。而用户上滑这个手势说明他止了前阅读流程。出现这情况有两个原:

写的太次了,感兴趣,我要返到上一级。
写的太,我要道文章标题或者者信息。
这种「下拉隐藏,上滑出现」的置发现在简书和知乎都存在,不过简书展示的是作者专栏,而知乎展示的是文章标题。

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

另一款同类产品「人人是产品经理」就比特立独行,程隐藏顶部栏,也能理,因为其返回按钮是放在底部栏的。

全移动端顶部栏设计分析

总结
以上就是我对移动端顶部栏设计做的一个简单的分析和总结,希望以帮到大家。

欢迎关注作者微信公众号:「王M争」

超全面的移端顶栏设计分析

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

王镇雷:这几天帮朋友看作品集,很高兴地看到大家在阐述设计思路时把竞品分析纳入进来,竞品分析是设计师或产品经理在工作前...
产品分析
提问:以下水果中哪一种给你印象深刻呢?老规矩,读完这篇文章你就知道了。 苹果、桃子、香蕉、柿子、梨、橘子、橙子、西瓜...
经验分享
经常听到有人说,自己刚做设计,又身在小公司,不懂得正确的设计流程,也接触不到大公司设计的迭代过程,总觉得自己设计流程...
可用性测试
编者按:这篇来自产品设计师 Eugen Eşanu 的文章解开了我长久以来的一个疑惑,其中的思考和经验值得我们共勉。结尾的 One mor...
Eugen Eşanu
画过不少图标,也总结了很多大神的方法,在此归纳一下简单的图标画法,希望对大家有帮助。作为一名 UI 设计师,必须要重视 ic...
ICON
动画效果如今已经深入到 UI界面的每个角落。屏与屏之间的切换因为动效而显得更加连贯,交互的上下文逻辑也因为动效的加持而更...
动效设计
工作中我们常常会听到或在撰写交互说明时提到“从底部向上出现弹层”、“出现浮层”、展示“对话框”、弹出“弹框”、“出现对话框”诸...
ui设计
按钮是 UI 和交互设计的基本元素,它们是用户交互的时候,和系统进行沟通交流的核心组件,也是图形化界面当中,最早出现,也...
CTA按钮