【解构ui】导航设计（4） 分段控件
分段控件是UI组件中最常见的控件之一， 在ios上分段控件的英文是Segmented Control，而在Material Design中分段控件被称为Tabs（选项卡），两者均放置在界面上端，最初在Material Design中，选项卡起到的是顶级导航作用，但是在Material Design中加入底部导航栏（Bottom Navigation）之后，我们可以看到Tabs主要给到的是同一页面上的子级做分类。功能上同iOS上的Segmented Control 靠拢。 本文统称选项卡。
来源
我们先来可以下Tabs的来源，其实在生活中分段控件就有着较好的运用，用于分类。 因此当用户在虚拟世界中看到选项卡之后就会自然映射显示世界的选项卡，便于用户操作理解。
分段控件的作用：
- 做导航。良好的选项卡设计能够清晰的告诉用户他们的位置， 可以通过视觉元素将他同其他选项卡区分开来。
- 提高内容组织，选项卡可以将内容分割成几个有一一的部分。
- 提供视觉连贯性。良好的设计应该帮助用户快速到达重要内容，
iOS & Material Design上的分段控件
iOS上分段控件的使用规定：
分段空间是一组分段的线性控件，每一个分段的控件类似于按钮，点击后将切换到相应的视图。分段控件常常用来展示不同的视图。比如子地图中，分段控件允许你在地图，交通以及卫星地图直接切换。
- 控制分段控件的数量来提高可用性。分段控件如较拥挤，点击起来就较为麻烦。在手机端，分段控件至多5个。
- 确保分段控件大小一致。
- 不要在一个分段控件中图片和文字混用。避免在一些分段里用图片，另一些用文字，这样会让用户混淆。
- 将内容合适的放在分段空间中。如果你要改变分段控件的背景，确保内容是对齐的。
Material Design 上的使用规定：
其实Material Design的选项卡形式我们也常常可以在iOS的手机端看到。比如“即刻”
通常来说Material Design上的选项卡上的内容都是父级内容的子级。内容之间有着一定的相关性。
- 选项卡上全部都是文本或者图标或者图标+文字，不要一会儿图标一会儿文字的混用
- 将所有的选项卡横排展开
- 不要在选项卡下再包含选项卡
- 当选中其中一项选项卡的时候，该选项高亮
- 确保选项卡同当前页面的内容有关联。
iOS vs. Material Design
可以看到两者都严格规定了分段控件上的内容展示方式，出现图标和文字混到的形式是严重不被允许的，但是在Material Design上一个分段控件上可以同时标注图标和文字说明。
而两者在手势操作上也有着一定的区别，在Material Design上只需左右滑动既能切换视图，但是在iOS上就必须得点击分段控件，才能切换，这一点个人感觉不是很方便。
并且在Material Design中，当上下滑动的时候，选项卡可以被隐藏起来，因为毕竟在寸土寸金的手机屏幕上，又是app bar又是底部导航栏 的会相当占用空间。
分段控件的其他表现形式
在iOS端，我们可以看到以下几张常见的分段控件的使用方式：
App Store
采用了标准的iOS分段控件，点击后才能跳到下一页面，分段控件在此起到一个分类作用。
Medium
Medium的分段控件，将内容进行分类，只需要左右滑动就能切换。由于内容分类较多，因此最右边的分类只露出一般，以暗示用户还未结束，这样用户自然就会向右拉动。
豆瓣
豆瓣同Medium一样，将内容进行分类，只需左右滑动就能切换视图，由于正好有五个分类因此不用担心用户看不到其他的。 只是我个人比较好奇为什么音乐是放在最后的，这个分类的父级被称为“书影音”，因此是否应该按照读书，电影，音乐来分类比较合适。
即刻
即刻也是一样，只需左右滑动就可看到不同试图，与之前不同的是，其在分段控件上只放置了图标，而不是文字，一般来说光用图标不是很推荐，但是若你使用的图标是认知度较高的，则没有大问题，而且即刻这边GIF图标上写的就是GIF。
微博
微博的实时热搜分类，才用了图标+文字的结合方式，比较容易排除异议。但是这个分段控件看上去似乎可以通过左右滑动来控制，其实不然，必须点击，而且用户体验不大好，因为每次点击新的分类都会刷新页面，新页面从左进入，给人感觉不是在一个页面上的切换，而事实证明其的确是创建了好几个新页面，因为当我点击返回的时候，它会跳转到上一分类的试图。
Uber
Uber的使用分段控件的方式比较新式，将分段控件移到了下方，使得用户能更加方便的在各个界面之间切换视图。
