底部标签页的图标风格在一定程度上决定了界面的风格。看似相对简单，但还是有很多问题值得关注。本文通过对作者标签栏风格的分析，总结了底部标签栏的设计，以及导航栏中的六个注意事项，希望这些内容可以帮助你对底部标签栏有进一步的了解。
底部标签栏(也叫导航栏)是移动终端设计中必不可少的导航类型之一。最重要和最常操作的功能通常被安排在底部的标签栏上，以便用户可以随时快速访问它们。
虽然底部导航栏看起来比较简单，但是要做到精准设计，还是有很多问题值得注意。
通过这个标签栏风格分析和六个导航栏注意事项总结底部标签栏的设计~
01标签栏样式分析
底部标签栏可以是纯图标样式，也可以是图标与文本标签成对出现的样式。
选定的标签需要有不同的视觉样式。可以用按钮、文字、圆点等样式来表现所选效果，帮助用户一目了然地定位当前导航。
在苹果iOS的底部标签栏中，标签栏的宽度为390px，高度为49px。
常规标签栏的图标尺寸为25x25px，紧凑标签栏的图标尺寸为18x18px。
在iOS的底部标签栏，文字使用的字体是10px，粗细适中。
02标签栏设计的六个注意事项1)导航不超过五次。
底部的标签栏最适合放置3-5个导航选项。定位器屏幕相对较小，使用五个以上的选项会把导航挤在一起，影响可用性。
另外，由于导航选项太多，手指触摸的面积(红圈)会远大于目标触摸的面积(导航选项)，用户可能会不小心触发错误的选项。
设计分析:
①如果选项很少，只有两三个，可以考虑使用分段控件的设计风格，将分段控件放在页面顶部作为导航。
②如果选项很多，当超过五个时，我们需要评估这些导航的优先级，筛选出最重要的导航。如果你必须保持五个以上的导航选项，考虑使用类似汉堡包菜单的控件。
2)不要使用不熟悉的图标
底部的标签栏是用户使用非常频繁的导航之一，因此需要确保目标受众对标签栏中的图标非常清楚，以避免混淆用户。
在设计的时候，感觉一个图标的含义或者风格对用户来说不是特别清晰，所以需要把图标和文字标签一起使用，方便用户快速准确的理解。
3)图标/文字颜色不要太浅。
图标颜色对比差和导航标签字体小是底部标签栏设计中最常见的两个问题。
在底栏的设计过程中，不仅要区分选中标签的状态和未选中标签的状态，保证选中标签更加突出，还要观察图标和文字的颜色对比，图标和背景的颜色对比，保证未选中状态下的图标和文字可以清晰的阅读。
4)不要设计可滑动的标签栏。
可滑动的标签栏会影响导航的可见性。由于不是所有的导航选项一次都可见，用户可能很容易错过以下选项。
此外，当用户左右滑动标签栏时，之前选择的标签可能会消失，影响用户体验。
5)不要截断标签。
底栏的空空格很小，所以在导航中使用文字时，每个字符都很重要。
不要截断标签，这会让用户不清楚标签的意思。尽量用更简洁的词语来清晰地传达选项的意思。
6)不要用太复杂的切换动画。
花哨的切换动画对于初次使用的用户来说可能看起来很酷，但是一旦用户熟悉产品并频繁使用导航，这些复杂的切换动画就会变得令人讨厌。
这些切换动画虽然看起来很复杂，但并没有给产品或用户带来任何有用的价值或信息，所以这些动画会成为用户的负担和挫败感。
底部标签栏的切换动画要干脆利落，有简单的点动效果辅助，不要太复杂。
终于
这是APP底部标签栏需要注意的六个设计点。希望这些内容可以帮助你对底部标签栏有进一步的了解。
慢慢来比较快，希望对你有帮助！
参考:babch.biz/bottom-tab-bar-design
专栏作家
作者:clipp，微信微信官方账号:Clip design clip。精选每周设计文章，重点分享关于产品、交互、UI视觉的设计思想。
本文由人人作为产品经理原创发布，未经作者允许，禁止转载。
题目来自Pixabay，基于CC0协议。
此观点仅代表作者本人，大家都是产品经理。平台只提供信息存储空服务。
本文来自穷水尽更词穷投稿，不代表舒华文档立场，如若转载，请注明出处：https://www.chinashuhua.cn/24/629261.html
微信扫一扫 
