app的标签栏,app底部图标的规范( 二 )


另外 , 当用户左右滑动标签栏时,前面已选的标签可能会消失,影响使用体验 。

app的标签栏,app底部图标的规范

文章插图
5)不要截断标签底部标签栏的空间本身就很小,因此在导航中使用文字时,每个字符都显得很重要 。
不要截断标签 , 这样会造成用户不清楚标签的含义,可以尝试使用更简练的文字来清楚地传达选项含义 。
app的标签栏,app底部图标的规范

文章插图
6)不要使用太复杂的切换动画花哨复杂的切换动画对于初次使用的用户来说可能看起来很酷,但是一旦用户熟悉了产品并频繁使用导航时,这些复杂的切换动画就会变得很烦人 。
这些切换动画虽然看起来很复杂,但却没有为产品或用户带来任何有用的价值或信息,因此这些动画就会变成一种负担,让用户感到沮丧 。
app的标签栏,app底部图标的规范

文章插图
底部标签栏的切换动画应该干脆利落,可以使用简单的微动效作为辅助,切莫太复杂 。
03 最后以上是APP底部标签栏需要注意的6个设计点,希望通过这些内容能帮助你对Bottom Tab Bar有进一步的理解 。
慢慢来比较快 , 希望对你有帮助!
参考:babch.biz/bottom-tab-bar-design
专栏作家
作者:Clippp,微信公众号:Clip设计夹 。每周精选设计文章,专注分享关于产品、交互、UI视觉上的设计思考 。
本文原创发布于人人都是产品经理 , 未经作者许可 , 禁止转载 。
题图来自 Pixabay,基于CC0协议 。
该文观点仅代表作者本人 , 人人都是产品经理平台仅提供信息存储空间服务 。
app的标签栏,app底部图标的规范

文章插图
移动开发中导航栏和搜索栏在设计中应该注意哪些问题?一、导航栏位置
在iOS上,导航栏是指显示在应用程序顶部,位于状态栏下方的容器区域,层级应高于当前页面内容 。在安卓上 , Google公司在Material Design中也赋予了它同样的定义 , 但是却给了它另一个名称,顶部应用栏( Top App Bar) 。
导航栏是用于构架当前屏幕的内容 , 阐述当前屏幕的状态,并且起到连接父子级页面层次结构的作用 。很多人疑惑,为什么标签栏不能叫做底部导航?因为标签栏是构架了多个屏幕之间平级页面的内容切换,和导航的定义没有任何关联 。
二、导航栏UI设计规范与实际项目的应用
基本的导航栏容器一般承载的信息可能会有:标题;导航按钮;内容控件按钮;其他控件(比如搜索栏、分页标签或分页控件等);千万别忘了还有分割线 。
1、导航栏标题设计规范
2017年以前的移动端规范下的导航栏还是循规蹈矩的 , 样式单一 。但随着iPhone X等一系列全面屏手机相继问世后,移动设备在屏幕高度上有了进一步的扩展,界面设计在一屏内的发挥空间也随之增加 。iOS11发布后,大标题导航栏设计风格兴起,随后被引入平台规范 。
于是现在iOS与Material Design在导航栏上也都定义了两种导航栏标题规范:常规标题与大标题 。
常规标题是指在高度为88px(iOS@2x下)的导航容器中,居中放置一个当前页面的标题 。标题字号一般为34px-38px(34px为iOS标准规范,但实际项目中可以在尽量在不小于34px标准的情况下根据设计需求确定) 。
大标题是将导航栏栏高增加到192px(iOS@2x),保留高度为88px的导航容器来承载内容控件按钮 , 将标题下坠居左 。iOS的标准规范定义大标题的字号为68px 。但由于英文有大小写区分,在视觉上有一定的层次表现 , 而中文因为缺少一定的层次结构,并且相同字号的中文视觉大小大于英文 , 所以大多数时候我们在进行大标题设计时 , 会适当缩小,一般为56px-64px居多 。