app的标签栏,app底部图标的规范 _APP底部标签栏设计需要注意哪

【app的标签栏,app底部图标的规范】底部标签栏的图标风格在一定程度上决定了界面的风格。看起来相对简单，但仍然有很多问题值得注意。作者通过标签栏样式分析、6个导航栏注意事项来总结底部标签栏的设计，希望通过这些内容能帮助你对底部标签栏有进一步的理解。

文章插图
底部标签栏（也称导航栏）是移动端设计中必备的导航类型之一。底部标签栏上通常会安排最重要且频繁操作的功能，方便用户随时都能快速访问。

文章插图
虽然底部导航栏看起来相对简单，但要做到精准设计，仍然有很多问题值得注意。
本次通过标签栏样式分析、六个导航栏注意事项来总结底部标签栏的设计～
01 标签栏样式分析底部标签栏可以是纯图标样式，或者图标与文本标签搭配的样式。

文章插图
选中的标签需要有不同的视觉风格，可以使用按钮、文字、圆点等样式来表示选中效果，帮助用户一目了然地定位当前导航。
在Apple iOS底部标签栏中，标签栏的宽为390px，高为49px 。

文章插图
常规标签栏的图标大小为25x25px，紧凑型的标签栏图标为18x18px 。
在iOS的底部标签栏中，文字使用的字体为10px，中等粗细。
02 标签栏设计6个注意事项1）导航数量不超过5个底部标签栏最适合放置3-5个导航选项。移动端屏幕相对较?。褂梦甯鲆陨系难∠罨崛玫己郊吩谝黄? ，并影响可用性。
另外导航选项太多，手指的触摸面积(红色圆圈)会比触摸目标(导航选项)的面积大很多，用户有可能会意外触发错误的选项。

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

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

文章插图
2）不要使用不熟悉的图标底部标签栏是用户使用频率非常高的导航之一，这就需要确保目标受众应该对标签栏中的图标非常清晰，避免让用户产生疑惑。

文章插图
如果在设计的时候，觉得某个图标的含义或者样式对用户来说不是特别明确，那么就需要将图标与文字标签一起使用，方便用户快速准确地理解。
3）图标/文字的颜色不能太浅图标的颜色对比度差、导航标签的字体小是在底部标签栏设计中两个最常见问题。
在底部栏设计过程中，我们不仅要区分已选标签和未选标签的状态，保证已选标签更突出，还要注意观察图标与文字之间、图标与背景之间的颜色对比度，确保未选状态的图标和文字也能够清晰易读。

文章插图
4）不要设计可滑动的标签栏可滑动的标签栏会对导航可见性产生影响，由于并非所有的导航选项都是一次可见，用户可能很容易错过后面的选项。