设计规范｜详解组件控件结构体系：单元控件类
本篇文章是设计规范中的单元控件类，也是设计规范系列的最后一篇，继这个系列之后我会写一些超有意思的文章，敬请期待哦！
单元控件类一共含以下7类：
- 搜索
- 开关
- 页面控制
- 图标
- 滑块
- 进度
- 选框
依旧附上一张脑图，组件控件分类（如果单纯通过组件控件，难以满足功能划分的需求，所以我将这个范围扩大，分类里面不仅仅含有组件和控件，所以请不要在意细节。）
（1）定义
用户通过输入的关键词，搜索到用户想要的信息。
（2）用途
当应用内包含大量的信息的时候，用户通过搜索快速地定位到特定的内容。
（3）使用说明
微信两个版本的搜索，很好的遵循了两个平台的规范。对于搜索的规范，iOS 官方给出的是隐藏搜索栏，用户通过下拉展示搜索栏。Android是通过搜索图标控件引导用户点击出现搜索栏。
（1）定义
开关按钮展示了两个互斥的选项和状态。
（2）用途
仅在列表中用，在列表中使用开关按钮来让用户从某一项的两个互斥状态中指定一个，比如是/否、开/关。
特性：
- 含有开关的对象名称
- 开关按钮两种互斥状态
（1）定义
页面控件告诉用户当前共打开了几个视图（多长的视图），还有它们正处在其中的哪一个（进度）。
（2）用途
告诉用户当前有多少个视图（多长的视图），还有它们处在其中哪一个（进度）。
（3）使用场景
例如知乎在浏览器中打开，用户浏览页面时，通过滑条用户很容易知晓当前界面的视图有多长，以及所处在哪里。京东的首页轮播，通过页面控制器诉用户当前共打开了几个视图，还有它们正处在其中的哪一个。
特性：
- 包含一系列圆点，圆点的个数代表当前打开的视图数量（从左到右，这些圆点代表了视图打开的先后顺序）
- 避免显示太多点，建议不超过6个，一般超过6个很难让用户一目了然
PS：在iOS 规范中，把页面中的滑条（知乎移动网页端的举例）也当做页面控制器。
（1）定义
界面中的一种图形元素，用来执行应用程序中的定义的操作。
（2）用途
当单击它时，能执行指定的功能操作。
特性：
- 由图标和/或文字组成
- 文字及图标必须能让人轻易的识别为按钮并轻易地点击后展示的内容联系起来
定义：滑块控件(Sliders，简称滑块)可以让我们通过在连续或间断的区间内滑动锚点来选择一个合适的数值。区间最小值放在左边，对应的，最大值放在右边。
滑块可以在滑动条的左右两端设定图标来反映数值的强度。这种交互特性使得它在设置诸如音量、亮度、色彩饱和度等需要反映强度等级的选项时成为一种极好的选择。
连续滑块：在不要求精准、以主观感觉为主的设置中使用连续滑块，让使用者做出更有意义的调整。
带有可编辑数值的滑块：用于使用者需要设定精确数值的设置项，可以通过点触缩略图、文本框来进行编辑。
间续滑块：间续滑块会恰好咬合到在滑动条上平均分布的间续标记上。在要求精准、以客观设定为主的设置项中使用间续滑块，让使用者做出更有意义的调整。应当对每个间续标记(tick mark)设定一定的等级区间进行分割，使得其调整效果对于使用者来说显而易见。这些生成区间的值应当是预先设定好的，使用者不可对其进行编辑。
附带数值标签的滑块：用于使用者需要知晓精确数值的设置项。
定义：在刷新加载或者提交内容时，需要一个时间过度，在做这个过程中需要一个进度和动态的设计。
尽可能地减少视觉上的变化，尽量使应用加载过程令人愉快。每次操作只能由一个活动指示器呈现，例如，对于刷新操作，不能即用刷新条，又用动态圆圈来指示。
指示器的类型有两种：线形进度指示器和圆形进度指示器。可以使用其中任何一项来指示确定性和不确定性的操作。
在操作中，对于完成部分不确定的情况下，用户需要等待一定的时间，无需告知后用户台的情况以及所需时间，这时可以使用不确定的指示器。
线形进度条：应该放置在页眉或某块区域的边缘。线形进度指示器应始终从0％到100％显示，绝不能从高到低反着来。如果一个队列里有多个正在进行的操作，使用一个进度指示器来指示整体的所需要等待的时间。
圆形进度指示器：
定义：用户对单个/多个选项进行选择。
选框分为两类：单选框和复选框。
单选框：只允许用户从一组选项中选择一个。
复选框：允许用户从一组选项中选择多个。
如果需要在一个列表中出现多个 on/off 选项，复选框是一种节省空间的好方式。
如果只有一个 on/off 选择，不要使用复选框，而应该替换成开关。
界面框架与内容控件总结
来人人都是产品经理【起点学院】，BAT实战派产品总监手把手系统带你学产品、学运营。
UI设计中一项很基本的工作就是界面设计，但是，如果一开始就是从界面这个概念去入手的话，往往会觉得无从谈起。所以，我会一个界面拆分成几个模块：框架、导航和内容。然后根据每个模块的特征去选择适合的展示方式，然后再拼凑成一个完整的界面。
关于导航的部分，我之前已经总结过了，详情请见：《APP常用导航总结》。今天主要讲讲框架和内容控件的部分。
对于框架，其实比较简单。因为现在有种趋势是“以内容为中心”，所以，界面设计的重点并不在框架上。加之现在iOS和Android平台都有比较成型的规范，所以直接套用就行了。
对于Android而言，框架最主要就是工具栏，然后我们需要考虑的是工具栏上放置什么功能入口。工具栏一般有：顶部工具栏、悬浮工具栏和底部工具栏。
对于顶部工具栏而言，需要预留位置给标题，最左边的位置要预留给汉堡菜单或者返回按钮或者品牌logo。所以需要自定义的就是右边的区域，不过这里不建议摆放过多按钮（我见过最多的是4个），关于这里放置什么按钮，就没有一套成型的理论的，根据实际界面来规划即可。不过一般来说只会放置最常用的按钮，然后把剩下的按钮折叠起来。或者可以参考竞品的习惯，毕竟用户也是有使用惯性的。
对于悬浮工具栏和底部工具栏，限制没有顶部工具栏那么多，所以这里的设计大多就是八仙过海各显其能。需要注意的是，悬浮工具栏和底部工具栏都只是选用的，但是顶部工具栏是必须要有的。
顶部工具栏【1】
悬浮工具栏【1】
底部工具栏【1】
Android界面框架的第二个点是悬浮按钮，这个其实也是一个功能入口。这个入口要放置当前界面最最重要的功能，并且最好是正向操作的功能。关于悬浮按钮的介绍请见Material design设计指南之按钮：浮动操作按钮，这里不再重复累赘。悬浮按钮也是选用的，只有当页面有且只有一个非常重要的操作的时候，才需要考虑悬浮按钮。
悬浮按钮【2】
讲完了框架的部分，现在讲讲内容的部分。内容的空间选择主要有：列表、网格、和轮播图。
如果展示得信息以文字为主，列表是一种非常适合的形式。由于单个列表项占据的宽度刚好是手机屏幕的宽度，在阅读单个列表的时候，不容易受到其他列表项的干扰。其次，列表项的操作便利性较其他的控件来说会更好。什么意思呢？手机屏幕是一个二维的界面，当你需要点击一个位置的时候，你需要确定的是一个二维坐标，但是当你在点击一个列表时，由于列表的宽度就是屏幕的宽度，所以你只需要保证高度够得到列表即可。
列表项（网易新闻）
内容布局的第二种是网格，当内容是以图标或者图片为主的时候，网格是一种比列表更加适合的形式。网格有如下几种布局，一种是放功能图标的，比如常见的九宫格导航，这个时候，相同空间内，网格可以容纳更多的入口，但是容易造成视觉上的负担，所以，当图标过多的时候，需要进行分组展示；一种常见的网格是竖向的瀑布流，这种布局在图片应用中格外常见；还有一种比较少见，是一种横向的瀑布流，横向的瀑布流一般只有一列，但是可以横向拓展，可以“左拉”出更多内容。
网格分布的图标（美团）
竖向瀑布流（花瓣）
横向瀑布流（百度外卖）
不论是列表或是网格，不同的项之间是并列的。但是在轮播图中，一次只会展示一个项，其他项都是隐藏起来的。所以这也就意味着大片区域都用来展示一个内容，同时又没有其他内容的干扰，所以轮播图非常适合用来展示重要的信息。可以看到，在一个页面中，往往轮播图是最抢眼的地方，所以有时候，一些广告之类的推广消息也会选择放置在这里。需要注意的是，一个页面中一般只有一个轮播图。同时，轮播图中图片的个数也要有限制（我见过最多的是简书，竟然有8个，个人觉得太多了），不然数量太多的时候重要性就下降了。
轮播图（网易游戏）
变种轮播图（nice）
变种轮播图（chrome）
关于界面的框架和内容控件就说到这里，算是对界面设计的最后一部分总结。结合之前的导航总结，加上这部分的框架和内容总结，设计页面的时候就能有个依据和参考。
妖叶秋，一年级交互设计师，人人都是产品经理专栏作家。做过ToC产品的交互设计，现在在尝试ToB的业务。主攻交互，也懂点用研、视觉和产品的知识。爱生活、爱设计、爱读书、爱淘宝、爱总结、爱收工，欢迎志同道合者与我交流。
本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com
文章为作者独立观点不代本网立场，未经允许不得转载。
投诉举报&联系我们：
