移动用户体验设计-底部导航

每个应用程序都应该有自己的导航设计，因为它是指导用户与产品互动的指南针。如果用户无法快速确认到操作入口，那么将会在您设计的产品中迷路，甚至无法使用您的产品。

为什么导航如此重要？

Steven Hoober在他的移动设备使用研究中发现，49%的人依靠一只手指来完成手机上的工作。在下图，其中的颜色指示用户可以通过拇指与屏幕交互的区域。绿色表示用户可以轻松到达的区域；黄色需要拉伸的区域；而红色，这个区域用户单手操作是很难触及就会改变他们拿手机的方式。所以，一般的移动应用程序设计中，都会把重要的入口区域放置在手机的底部区域，这将会提高用户的操作体验。下图中，代表一个人在智能手机上的单手触及舒适度：

标签栏（底部导航）

标签栏是应用程序中的最重要的组成部分，一个好的标签栏设计应该是让用户在没有任何操作指引下，就能快速的知道如何操作。它能快速切换程序中的功能模块。

标签栏分类栏目数量布局

标签栏的分类栏目数量应该设计在3-5个之类，栏目分类太多那么每个元素之间的距离将会更近，不利于操作点击。

常见的布局方式

1.屏幕等分布局

此方法：单个列宽=屏幕宽度/分类栏目个数。如：250=750/3。只需要按照屏幕宽度按照相等的方式排列出来即可。这是很常见的方式，也是技术人员最容易实现的方式。

2.减去左右间距等分布局

此方法在于把左右的间距减去一部分，单个列宽=总屏幕宽度-左右间距/剩下屏幕宽度/分类栏目个数。这种方法栏目内容会更加居中显示，更为紧凑。但是个数过多不建议使用，因为距离太近，点击触碰区域过小，容易点错。建议使用3或者4个栏目分类时使用。

3.图标左右间距相等

这种方法是只固定图标左右的距离，而不采用等分处理。这样可以使图标内容更加集中。而这样的布局建议使用3个的标签栏目分类。

超过5个的布局

底部标签栏我们建议使用不超过5个栏目分类，但是如果特殊项目会超过5个我们应该怎么办呢？或者当遇到更小屏幕的时候，5个栏目分类都无法排版在小屏幕内的时候我们应该如何解决？

我们可以隐藏后面无法显示的栏目，采用x轴方式滚动，这样不受屏幕宽度限制，但是这样的方法有利有弊，用户无法第一时间查看到我们全部的分类导航，执行效率很低。如图所示的底部导航滑动，这样的设计方式适合很多小功能的集合展示，不适用于主功能。如我们很常见的美图秀秀的人像美容功能。

标签栏的设计展现方式

展示方式的设计多种多样，需要结合当前的产品理念和定位来综合考虑。

1.图标+文字

这类设计方式是90%的产品都会使用，它的好处在于突出标签栏类目。

2.纯图标

这类设计方式比较少见，我们常用的大众产品不会使用，因为没有文字说明，只有纯图标的展示，一般不熟悉本产品的用户很难快速知道类目。所以这样的设计方式适用于个性独特、产品功能单一的小众产品。

不过设计此类产品标签栏时，需要对图标的可识别性大大提高，最好是在没有文字说明的情况下用户也可以准确知道分类栏目的定位。尽量使用简化易认的图标设计。

3.纯文字

纯文字的设计方式也是比较常见的，它的主要作用在于便于对产品分类快速确认，更加直观，一般适用于做内容的产品。比如直播产品、新闻资讯类:

4.舵式设计

“舵式设计”是底部导航的一种扩展形式，是一种变体。因为它的样式很像轮船上用来指挥的船舵，两侧是其他操作按钮。而这个中间的舵式图标又是操作频繁的一个功能入口，也是区别于其他栏目的一种独立式的快捷性的入口。在设计时需要突出显示它的位置和样式。它适用于社交性的产品：

显示当前位置

无法告诉用户当前的位置，是我们最常见的错误，这个会让用户发狂。“我在哪里？”当用户操作时我们需要明确的告诉用户他们从a到b之间的交互变化。我们在视觉设计时应该给予提示，比如图标颜色，字体颜色的使用变化。

在标签设计中我们必须明确的告诉用户当前所选择的栏目，我们可以给图标加以颜色的填充，字体加色的方式来区别于未选择的栏目，一般我们以产品主色来区别。

为了增加特色趣味，我们还可以将标签栏目的选择交互之间过渡方式加上动画效果。电商类的产品带有促销性质，为了彰显氛围，很多平台在节日期间也会把标签栏改成和节日相关的设计，以烘托氛围。

标签栏类目通知

有很多标签栏目会带有通知样式的设计，像小圆点（适用于产品信息更新）、消息角标（系统、信息通知）。这种适用于社交、电商居多。其实很多产品都将“消息通知”单独列出来放到标签栏里面，这时的小圆点就是常用表现形式了:

总结：

1.清晰的标签分类，使用3-5个的标签栏目；

2.选中时要区别与未选中的栏目，突出显示当前栏目，告诉用户“我在哪里”

3.标签栏目的图标设计和文本名称应该简洁易于识别，特别是图标的识别度要高。即使脱离文本也最好能快速确定栏目功能；