APP底部标签栏设计需要留心哪些问题？我总结了这6点

底部标签栏（也称导航栏）是移动端设计中必备的导航类型之一。

虽然底部导航栏看起来相对大略，但要做到精准设计，仍旧有很多问题值得把稳。

本次通过标签栏样式剖析、六个导航栏把稳事变来总结底部标签栏的设计～

01 标签栏样式剖析

底部标签栏可以是纯图标样式，或者图标与文本标签搭配的样式。

选中的标签须要有不同的视觉风格，可以利用按钮、笔墨、圆点等样式来表示选中效果，帮助用户一览无余地定位当前导航。

在Apple iOS底部标签栏中，标签栏的宽为390px，高为49px。

常规标签栏的图标大小为25x25px，紧凑型的标签栏图标为18x18px。

在iOS的底部标签栏中，笔墨利用的字体为10px，中等粗细。

02 标签栏设计6个把稳事变1）导航数量不超过5个

底部标签栏最适宜放置3-5个导航选项。
移动端屏幕相对较小，利用五个以上的选项会让导航挤在一起，并影响可用性。

其余导航选项太多，手指的触摸面积(赤色圆圈)会比触摸目标(导航选项)的面历年夜很多，用户有可能会意外触发缺点的选项。

设计解析：

①如果选项很少，只有两或三个时，可以考虑利用分段控件的设计样式，将分段控件放在页面上方作为导航。

②如果选项很多，超过五个时，我们须要评估这些导航的优先级，筛选出最主要的导航。
如果必须要保留五个以上的导航选项，可以考虑利用类似汉堡菜单这样的控件。

2）不要利用不熟习的图标

底部标签栏是用户利用频率非常高的导航之一，这就须要确保目标受众该当对标签栏中的图标非常清晰，避免让用户产生迷惑。

如果在设计的时候，以为某个图标的含义或者样式对用户来说不是特殊明确，那么就须要将图标与笔墨标签一起利用，方便用户快速准确地理解。

3）图标/笔墨的颜色不能太浅

图标的颜色比拟度差、导航标签的字体小是在底部标签栏设计中两个最常见问题。

在底部栏设计过程中，我们不仅要区分已选标签和未选标签的状态，担保已选标签更突出，还要把稳不雅观察图标与笔墨之间、图标与背景之间的颜色比拟度，确保未选状态的图标和笔墨也能够清晰易读。

4）不要设计可滑动的标签栏

可滑动的标签栏会对导航可见性产生影响，由于并非所有的导航选项都是一次可见，用户可能很随意马虎错过后面的选项。

其余，当用户旁边滑动标签栏时，前面已选的标签可能会消逝，影相应用体验。

5）不要截断标签

底部标签栏的空间本身就很小，因此在导航中利用笔墨时，每个字符都显得很主要。

不要截断标签，这样会造成用户不清楚标签的含义，可以考试测验利用更简练的笔墨来清楚地传达选项含义。

6）不要利用太繁芜的切换动画

花哨繁芜的切换动画对付初次利用的用户来说可能看起来很酷，但是一旦用户熟习了产品并频繁利用导航时，这些繁芜的切换动画就会变得很烦人。

这些切换动画虽然看起来很繁芜，但却没有为产品或用户带来任何有用的代价或信息，因此这些动画就会变成一种包袱，让用户感到沮丧。

底部标签栏的切换动画该当干脆利落，可以利用大略的微动效作为赞助，切莫太繁芜。

03 末了

以上是APP底部标签栏须要把稳的6个设计点，希望通过这些内容能帮助你对Bottom Tab Bar有进一步的理解。

逐步来比较快，希望对你有帮助！

参考：babch.biz/bottom-tab-bar-design

专栏作家

作者：Clippp，微信公众年夜众号：Clip设计夹。
每周精选设计文章，专注分享关于产品、交互、UI视觉上的设计思考。

本文原创发布于大家都是产品经理，未经作者容许，禁止转载。

题图来自 Pixabay，基于CC0协议。

该文不雅观点仅代表作者本人，大家都是产品经理平台仅供应信息存储空间做事。