控件组件
二、引导类引导页（幻灯片）式引导
三、加载类
1. 全屏加载： 一次性加载完所有数据后再显示内容
优点：全部加载完才能阅读，保证内容的整体性
缺点：非常强烈的等待感（3s以上会产生焦躁情绪）
使用场景：一般从上一级界面进入下一级界面，或者H5中常使用；配有进度标识的加载loading
2. 分步加载：先加载文字，图片加载成功前使用占位符；先加载框架，再加载框架内的内容
优点：让用户快速了解整个界面的信息布局
缺点：开始瞬间会丢失掉重要的关键信息，用户初次感知会认为产品出问题了
使用场景：多图片布局、比较消耗流量的界面
3. 下拉加载：下拉时出现loading动画，对整个页面重新加载刷新
优点：方便刷新当前界面；增强情感化，人性化和品牌化
缺点：非首屏时，无法进行该手势操作
使用场景：界面信息可以刷新加载时使用
4. 上拉加载
优点：无需手动点击下一页，把用户代入无尽浏览模式
缺点：没有尽头，容易迷失，不方便快速索引定位到某个内容 使用场景：适用于瀑布流、长列表、商品列表等
5. 预加载： 用户停留一个界面时，加载对应当前界面通向下一界面的所有信息
优点：进入下一级页面无需加载过程，增加流畅度 缺点：非WiFi情况下，浪费用户流量 使用场景：信息需要即时刷新，同时预加载后消耗流量较少的场景（eg：IM或邮件）
6. 智能加载：根据网络情况，加载不同质量的图片内容
优点：根据具体场景来控制流量和加载速度。 缺点：不一定是真实有效的命中用户需求。 使用场景：适用于有大量图片或视频的APP（eg：电商类、在线视频）
五、空数据类型
1. 初始状态：初始化状态，需要用户进行操作才能产生内容的界面（eg：购物车、收件箱）
常规做法是简单的插画配合简洁的文案，必要的时候给出引导用户操作行为的按钮。现在流行的设计趋势是插画越轻量越简单越好，以免抢夺了文案信息用途：提示用户需要进行某种操作才会出现内容组成部分：相关插画/图片；解说文案；操作入口按钮或可点击文字（非必须）
2. 清空状态：通过删除或其他操作，清空当前的页面内容，产生了空界面
清空状态是对初始状态的进一步细化。清空状态的界面和初始状态设计很相似，唯一不同的是文案的提示。需要有明确的提示，且告知用户该如何处理。用途：提示用户该界面为空数据的原因是用户删除了内容。组成部分：相关插画/图片；宣传解说文案；操作入口按钮或可点击文字（非必须）有的产品设计直接把清空状态的界面按照初始状态来设计，这样也是可以的，缺点就是没有告知用户产生空状态原因是初始化还是清空所致
3. 出错状态：因网络、服务器或者没有找他其他结果等原因导致无法加载内容，产生空界面
注意：需要有明确的提示，且告知用户该如何处理。用户操作反馈的无结果界面也可用这样的思路来设计。用途：告知用户当前产生的空界面是由于某些原因出错所致。例如知乎在网络异常时，页面加载不出来，出现空数据页面，给出文案提示和点击重试按钮。微博国际版也给出文案提示，小插画和点击按钮。
六、提示类
1. 红点提示
用途：通过红点引导用户点击，从而达到要给用户传达的信息。使用场景： 1. 以产品的目标来说，新功能更新想让用户知道并去使用，从而使用红点提示用户。2. 新消息的提示，通过红点让用户直观的知道有信息。3. 因为业务需要，通过红点让用户去点击操作。（eg：微信读书，列表关注栏出现红点，点击进去，新增微信好友出现红点。这样的使用是为了让用户加微信读书好友从而增加微信读书的社交化和粘度。这个属于使用场景第三条。QQ日迹列表出现红点，在日迹界面，有新增动态，故通过红点提示。这个属入使用场景第二条。MIX商店有新的更新，通过红点引导用户点击消费，从而满足业务目标。这个属于使用场景第三条。）
2. 数字提示
用途：通过数字让用户知道新更新的信息数量，同时引导用户去点击，从而达到要给用户传达的信息。使用场景： 1. 通过数字来提示用户新功能的数量。2. 通过数字来提示用户收到信息的数量。3. 桌面图标的数量让用户在进去App之前就知道收到的信息数量。（eg：Messenger在tab 个人中心通过数字提示，让用户知道列表功能的数量。这属于使用场景的第一条。微信消息列表通过数字让用户知道，收到对方多少条消息。这属于使用场景的第二条。iOS 桌面图标的数量让用户在进去App之前就知道收到的信息数量。这属于使用场景的第三条。）
3. 系统推送提示
用途： 前提是iOS和安卓系统推送权限打开，通过系统推送让用户获取到APP要传达的信息，属于强提示类。用户通过推送消息进入App获取消息，提高产品的活跃度和使用粘性。使用场景： 1. 重要信息需要提示用户，例如邮件，IM。当用户收到新消息时，系统自动推送。2. 满足运营需求，通过系统推送消息给用户传达运营促销活动，吸引用户去消费。
4. 弹框提示
用途： 弹框可以让用户知道一些重要的消息，同时通过弹框为某些业务提供一个流量入口。使用场景: 1. 运营需求，通过弹框的提示语和入口，从而达到流量导入的效果。2. 重要功能重要信息的入口。3. 用于重要信息的提示，单纯的提示信息的作用。
七、操作类
1. 底部操作列表（当用户激发一个操作的时候，出现在底部的浮层）
用途：提供一系列在当前任务下的操作，而不会永久占用页面空间，使用操作列表让用户可以开始一个新任务或者对破坏性操作（例如：删除、退出登录等）进行二次确认特性: 由用户某个操作行为触发 / 包含两个或以上的按钮
2. 底部浮层视图（展示与用户触发的操作直接相关的一系列选项）
用途：多用于对当前界面的分享。特性：由用户某个操作行为触发 / 包含两个或以上的宫格
在Material Design设计规范中，把底部操作列表和我所说的底部浮层视图，都叫做底部动作条，里面可以是列表样式也可以是宫格样式。Material Design是以功能的维度来划分，而我是按照组件呈现样式来区分。所以才有了两种不同的结果。
3.编辑菜单（通过长按或者点击能呼出一个编辑菜单来完成剪贴、复制等选择操作）用途：操作隐藏，只能通过手势呼出，编辑菜单不占据当前展示界面的空间，适合非高频的使用场景特性：编辑菜单隐藏，只有通过单击或者长按呼出 / 以浮层形式存在。
在Material Design设计规范中，将我所说的编辑菜单定义为菜单，我觉得叫做编辑菜单更形象。
4.底部工具栏（底部工具栏上放置着用于操作当前屏幕中各对象的组件）
用途：在工具栏里放置用户在当前情景下最常见的操作功能，当键盘被唤起、用户上下滑动或者当前视图变为竖屏的情况下，工具栏可以被隐藏。使用场景：例如iOS 原生邮箱，需要对该封邮件进行转发、回复、删除、标记等一系列操作，同时该操作都是高频操作。不需要隐藏，所以这时候就需要使用底部工具栏了。 特性：工具栏始终位于屏幕底部 / 工具栏操作可以是文字或图标，也可以是文字加图标 / 工具栏操作数量建议不超过5个。
5. 按钮
主要的按钮有三种：悬浮响应按钮 / 浮动按钮 / 文字按钮悬浮响应按钮：是促进动作里的特殊类型。 是一个圆形的漂浮在界面之上的、拥有一系列特殊动作的按钮，这些动作通常和变换、启动、以及它本身的转换锚点相关。
浮动按钮(Raised button)，常见的方形纸片按钮，和悬浮响应按钮相反。非悬浮，固定于一个位置。 点击后会产生墨水扩散效果。浮动按钮看起来像一张放在页面上的纸片，点击后会浮起来并表现出色彩。 浮动按钮使按钮在比较拥挤的界面上更清晰可见，能给大多数扁平的布局带来层次感。
文字按钮是点击后产生墨水扩散效果，和浮动按钮的区别是没有浮起的效果。尽量避免把他们作为纯粹装饰用的元素。按钮的设计应当和应用的颜色主题保持一致。 按钮使用规则：按钮类型应该基于主按钮、屏幕上容器的数量以及整体布局来进行选择。
- 如果是非常重要而且应用广泛需要用上悬浮响应按钮。
- 基于放置按钮的容器以及屏幕上层次堆叠的数量来选择使用浮动按钮还是扁平按钮，避免过多的层叠。
- 一个容器应该只使用一种类型的按钮。 只在比较特殊的情况下（比如需要强调一个浮起的效果）才应该混合使用多种类型的按钮。
6.选择器
定义：通过滑动滑轮来选择时间、地点、人物等。滑轮的承载信息很大，可以承载很多的选项。用途：在滑轮中可以来回选择，如果选择错误可以调整。使用场景：例如iOS 原生日历，用户选定时间时，在点击结束的列表时，出现选择器，通过滑动滑轮，选择所需要的时间。特性：
- 选择器一般位于底部，或者位于选项列表的下面（如iOS 原生日历）。
- 同一个滑轮间的选项属性相同。
7.下拉菜单
定义：通过点击一个操作按钮，下拉出一个菜单，菜单由箭头、浮层列表组成。用途：
- 为其他功能提供一个快捷入口。
- 功能入口。
使用场景：例如微信，收付款、扫一扫等层级较深。下拉菜单可提供快捷入口的作用。
8.文本框
定义：可以让用户输入文本。它们可以是单行的，带或不带滚动条，也可以是多行的，并且带有一个图标。点击文本框后显示光标，并自动显示键盘。除了输入，文本框可以进行其他任务操作，如文本选择（剪切，复制，粘贴）以及数据的自动查找功能。文本框有两类：单行文本框、多行文本框。文本框可以有不同的输入类型。输入类型决定文本框内允许输入什么样的字符，有的可能会提示虚拟键盘并调整其布局来显示最常用的字符。常见的类型包括数字，文本，电子邮件地址，电话号码，个人姓名，用户名，URL，街道地址，信用卡号码，PIN码，以及搜索查询。单行文本框：当文本输入光标到达输入区域的最右边，单行文本框中的内容会自动滚动到左边。 多行文本框：当光标到达最下缘，多行文本框会自动让溢出的的文字断开并形成新的行，使文本可以换行和垂直滚动。 对于多行文本框，用户在输入前N行时，文本框的高度自适应，超过N行时，高度不变，出现滑条，例如微信N=5。