控件集——Segmented Controls/选项卡

定义 

选项卡指一个长条形控件，有至少两个分段组成，每个分段互相独立、等宽。像按钮一样，选项卡可以承载文字或 icon，在同功能和布局，但不同类别的页面之间切换。例如在地图当中，选项卡可以实现视图在地图、交通图和卫星地图之间切换。

Tab 与 Segment一样，都是在同功能和布局，但不同类别的页面之间切换，在本质上二者没有区别，但 tab 是 segment 的延展，在本文中，笔者将二者统称为segmented controls/选项卡。

龙爪槐守望者在他的文章中指出了一些 tab 和 segment 的不同，笔者认为稍显牵强，原因：

1、对于控件的定义不取决于来源，而取决于控件本身的作用。

2、控件的交互形式有待优化，左右滑动可能会造成手势的冲突。目前而言点击是最精确的交互形式。

3、二者同为可见性更强的菜单，将菜单横向平铺更易于用户在不同类别间切换。

原文链接：http://www.ftium4.com/segment-controls.html

选项卡基础样式

使用规范

避免选项卡中出现过多分段以提升可用性。分段越宽越容易点击，一般来说分段最好不要超过5个，如果选项卡超过5个，请使用滚动选项卡。 

保证各个分段中的内容格式统一。因为所有的分段等宽，所以请保证其中的内容属性也一致。

避免图标和文字混合使用。虽然选项卡可以包含图标和文字，但将二者混合会弱化各个分段之间的并列关系，并使用户疑惑。 

选项卡的调性要与用户自定义色调统一。如果用户切换了白天/深夜模式、或者切换了应用程序的皮肤，请保证选项卡的调性与其统一。

 

延展

滚动选项卡

滚动选项卡为选项卡的延伸，出现位置一般在导航栏的下方。其特点在于可以通过手指滑动看到更多的分段，优势在于保证易用性的基础上容纳多个分段。

滚动选项卡样式

优先考虑使用选项卡，而不是滚动选项卡。在页面层级上，2-5个分段使页面逻辑更为清晰；在用户体验上，合理清晰的页面布局可以让用户对产品产生更强的掌控感。

徽标选项卡

允许在选项卡的各个分段上显示徽标，可以提示用户某个分段中内容的更新。使用规范请参考控件集——Badge/通知徽标/小红点/Notice point。

 

自定义选项卡

自定义选线卡有诸多使用场景，例如时间段，或活动的阶段。

何时使用？

当分段中的各个内容平级，且页面中显示内容布局一致时，可考虑使用选项卡。

使用选项卡的目的，是在同功能和布局，但不同类别的页面之间切换。区别于 Tab Bars的一点是，底部导航栏可以实现一个 app 中不同功能的快速切换。

底部导航栏可以实现一个 app 中不同功能的快速切换。

选项卡的目的，是在同功能和布局，但不同类别的页面之间切换

小结

在使用场景上选项卡提供了一级页面中各个平级页面之间的切换，而不是一级页面之间的切换。在使用时也应该保证严谨的使用逻辑，切记有太多的分段供用户选择而降低用户的期待与掌控感。