Tab bar

一、什么是标签栏
标签栏（Tab Bar）是用于组织APP结构，以扁平层级，只用于导航的基础控件。

二、作用：

1）定位导航
一般情况下，标签栏常驻于各一级页面底部。选中标签明确提示用户当前所处位置，当用户想要前往其他一级页面时，只需切换底部标签即可。

2）凸显品牌
首页是产品给用户留下第一印象的关键一步，标签栏中的视觉元素，包括选中标签的颜色、图标形式、组合样式等等无不体现了产品气质。

三、分类：顶侧底

从导航体系的层级来说，底部栏属于一级导航，顶部栏属于二级导航，而侧边栏属于三级导航。这种划分标准的其实是跟用户的拇指活动范围来决定的，或者说是拇指法则。

（1）底部
         ①分类：

  1. 位置维度
常见的标签栏一般是吸附于屏幕底部，不随用户手势滑动而发生位置变化；然而也有一些产品为了切合用户的使用场景，做了一些位置上的调整，可能呈现悬浮状态或者会随着用户手势改变而发生位移。

     常规吸底的标签栏：
优势：更加符合用户心智，用户的认知和操作成本最低。可以随时方便地切换页面。
劣势：页面底部大部分（刘海机型）高度的部分被遮挡，内容层展示效率进行了一定程度的让渡。

    悬浮类的标签栏：
优势：屏幕遮挡区域小，为用户争取了更多的视觉空间浏览信息。
劣势：用户第一时间会感到陌生，同时操作成本有所上升。尤其是唯品会案例，左侧三个标签比较拥挤，且在单手握持的情况下，很容易误操作。
有道词典和马蜂窝给出了一个折中两全的解决方案：根据用户的操作手势推测用户意图，决定是否展示/隐藏标签栏。
   当用户向上滑动屏幕时，我们认为，用户的意图是浏览下方更多信息，此时就将标签栏隐藏，直到用户出现向下滑动屏幕的手势时，显示标签栏，给用户提供便利的跳转操作。

2.功能维度

并列，同层级；

顶部舵式：突出主要功能，如发布按钮悬空。

3. 标签组合方式维度
组成标签栏的元素有：文字、图标、底板等。将不同元素排列组合，可以形成许多不同的组合结果，不同的组合对应不同的标签栏样式。

①纯icon

 图标很有可能只是起辅助识别的效果。所以需要使用指向意思明显的icon。 用户不需要通过阅读文字就能理解标签的含义，

用户更有可能是通过位置记忆来定位，老年人不友好。

️②纯文字
  纯文字的样式在视觉上对用户注意力影响最小（众所周知，图像比文字天然更具视觉吸引力），用户可以更加集中地将注意力放在内容视图，专注于信息本身。
  更多的用于沉浸体验感强如短视频类和功能性强的。，标签存在感不要求很强。视频流产品需要打造沉浸感，以便用户能连贯自然地看尽可能多的内容。因此收敛标签栏视觉占比十分合理科学。
 
③icon+字

最常见，很难出错，想不到多特别的就用最常规的。

（2）侧面

抽屉式导航

1. 一般用来放置对用户而言不太常用或者对于产品而言不太核心的功能，或者不那么需要频繁切换内容的应用，例如对设置、关于、个人信息等内容的隐藏；
2. 更多的被应用于信息流产品设计中，这类产品注重核心内容的展示，用户的任务路径较为单一，几乎都是用于浏览产品的核心内容；至于其他比较低频的模块入口则会隐藏在当前界面后方，避免冗余的模块抢夺用户的眼球；
3. 在不同的地方可能被称为：扩展菜单、侧边导航、汉堡导航；
4. “2/8”法则告诉我们，80%的用户只用那些20%功能，这20%功能就是信息流里面的核心功能；如果那80%不常用的功能也占用着最重要的位置，那么用户就会被打扰，产生臃肿感，甚至会放弃使用产品。

常与底部标签式导航组合使用，将一级页面内的信息再细分，给人以清晰的呈现方式。通过把非核心功能的低频操作都放到一个抽屉里，使得用户获得沉浸式的体验，而且能够集中用户的注意力，让用户去更好地完成核心功能，不被打扰。

优点：用户可以将注意力放在首页，减少其他类型的导航带来分散用户注意力的情况，给用户更沉浸式的操作感和阅读感，同时可以最大限度利用屏幕空间。

缺点：侧边导航属于二级导航，用户使用的频率会降低，不利于产品页面流量的最大化，越放在下面的功能点击率越低，如果产品框架比较大，有很多功能需要推广时，一般不用此类导航。

1、分类:左边和右边

左边：用户的操作习惯为右手，将tab bar放在左边不易遮挡视线

右边：如qq空间的日期查看。右边的标签只是提供一个可以到达的捷径，左边的内容也包含着右边tab bar的信息。

（3）顶部

优点：

1. 扩展性好：标签的个数没有上限，不过太多的话，越是后面的页面渗透率会越低；
2. 占据空间小：相比于底部Tab，顶部Tab一般占据的空间更小（因为不需要考虑手指点击，所以可以把区域缩小，只选用图标或者文字即可），可以把更多的空间安排给内容展示。
3. 手势操作非常方便。

缺点：

  可见性略逊：这是空间占据的区域变小之后的后果。

 四、图标风格维度
1、根据图标的造型将图标分为：线性图标、面性图标、线面结合图标三大类。

 ①线性图标：选中状图和未选中状态均是线性图标。
优势：造型耐看、有质感。
劣势：只能用颜色或者透明度进行不同状态之间的区分，选中状态与未选中状态之间的差异相对较小（尤其在暗色模式下），可能会造成用户定位当前位置时发生偏差。

 ②面性图标：选中状态和未选中状态均是面性图标。
优势：造型内收紧凑、色块更加容易吸引用户注意。
劣势：只能用颜色或者透明度进行不同状态之间的区分。

 ③线面结合图标：选中状态是面性、未选中状态是线性图标。
不同状态之间差异度大，用户更容易快速定位所在位置；选中和未选中对应线性和面性两套图标，视觉发挥空间大，是当前最被广泛采用的设计策略。

2、根据图标的视觉风格可以分为：扁平、微立体、双色、毛玻璃效果等等……

五、设计原则：
1、底部3～5个最合适，少了太空，多了拥挤，层级分配不明显。
️2、避免滚动，易误触
️3、图标要有辨识度，就是一看就大概知道这个页面是什么。
4️、避免过多颜色，要通过颜色造成视觉焦点
5️、文本标签要简洁
️6、大小要按照规范，防误触
7️、图标上的标签，比如说信息上的消息数量提示。
️8、标签的视觉一致，设计风格大体一致。
️9、是否随着页面的滚动藏起来

六、设计样式：
改变字色、放大色号、添加线条、增加背景色

1、添加线条：
具有贯通整体的作用，比较适合用于展示层级较高的导航。

     固定长度：
(1).小短线非常短，占一个字左右宽的尺寸。
当页面内容比较多，可能会伴有其他图标等，小短线太长会使整个导航看着太满太挤。也可能用在简洁页面，简洁到底。

(2).小短线稍长一些，一般会比两个字宽几个像素.用于简介页面，可以使页面更饱满、层级更清晰。

(3).根据屏幕等分，这种样式可用于内容比较简洁的页面。如携程订机票等。

    可变长度：
随着字数的增加而增长。感觉有点突出。

    粗细：
短—粗，增加存在感
长—细，削弱存在感

2、填色：

然后层级较低的导航为了区分会使用背景色。
因为色块的视觉权重比线条大一些，容易分散用户的注意力。

两级tab样式：
两级tab样式指有一个主导航，一个副导航。主导航一般会用线条样式，副导航会用色块样式。导航都是由上而下的，所以会优先考虑使用线条。然后层级较低的导航为了区分会使用背景色。而tab的作用是为了让用户更方便的找到自己想要使用的功能，所以没有必要做的太显眼。

六、ios的tab bar设计规范：

1、界面尺寸布局：满屏尺寸750x1334px；

2、电量条高度40px，导航栏高度88px，标签栏高度98px；

3、导航栏图标44px，标签栏图标50px；

4、电量条文字22px，导航栏-文字32px，标签栏字20px；

5、常用字号：32px，30px，28px，26px，24px，22px，20px；

6、常用色：背景浅灰色#f2f2f2；文字深黑色#323232；边框色深灰#CCCCCC；

7、常用可点击区域的高度：88px；

8、单行文字的背景框的高度：88px，双行为：176px，三行为：264px；

9、亲密距离(如所有元素距离手机屏幕最左边的距离)：20px;疏远距离(左边图标与右边文字之间的距离)：30px，其它距离：10px，44px等；

10、按钮和文本框，原型图做成直角的，圆角半径由Ui来设计；

界面尺寸规范

1、界面尺寸：750x1334px。

2、状态栏(status bar)：就是电量条高度：40px；

3、导航栏(navigation)：就是顶部条高度：88px；

4、主菜单栏(submenu，tab)：就是标签栏，底部条高度：98px；

5、内容区域(content)：就是屏幕中间的区域高度：1334px-40px-88px-98px=1108px

设置界面的图标高度和开关滑动按钮的高度：58px

可点击高度：在iPhone6的原型图上，统一为88px。

搜索栏高度：在iPhone6的原型图上，统一为58px。

七、安卓的规范：

 八、图标动效设计、点击反馈形式。

1.标签硬切

稳重可靠的感觉。

2.缩放类

稳定中带一点活力。

3.线条生长类

视觉体验感好。

4.填充生长类

视觉饱满。

5.填充飞入类

拉近产品与用户的距离。