组件控件结构体系：加载、引导、网络异常、空数据、提示、操作、单元控件
一、加载
1、定义：用户在客户端界面上进行操作，客户端发送请求到服务器，服务器处理请求，返回数据给客户端并显示给用户，这个过程成为加载，是被动的。
2、分类：全屏加载，分步加载，上拉加载，下拉加载，预加载，智能加载。
3、详解
（1）全屏加载：一次性加载完所有数据后再显示内容。一般配合明确进度标识的加载loading，一般在上一级进入下一级界面或者h5中使用。
优点：保证内容的完整性；缺点：时间较长。
（2）分布加载：先加载文字后图片，图片用占位符表示。当加载页面有固定框架时就先加载框架，再加载内容，多用于多图片耗流量的界面。
优点：帮助用户了解整个界面的信息布局；缺点：开始会丢失重要的关键信息。
（3）上拉加载：优点：不需要点击下一页，提供沉浸式浏览； 缺点：没有尽头容易迷失。
（4）下拉加载：下拉出现loading动画，重新加载整个页面。
优点：获取新数据；缺点：非首屏，无法进行该手势操作。
（5）预加载：用户停留在一个界面时，将对应当前界面通向下一界面的所有信息加载出来，减少用户等待时间。
优点：用户无需等待，更流畅的体验；缺点：非Wi-Fi情况下浪费用户流量。
（6）智能加载：根据用户网络情况，加载不同质量的图片/视频内容。
缺点：不一定是真实的用户需求。
二、引导
1、定义：带领用户快速愉快地到达目标的过程。
2、分类：引导页（幻灯片）式引导，浮层式引导，嵌入式引导
3、详解
（1）引导页（幻灯片）式引导：宣传、解说、帮助等页面组合。
用途：1⃣️产品角度：希望用户了解产品的特性，新功能，主要功能，重要功能或者重大改变；2⃣️用户角度：好的引导页留好印象。
3⃣️分页符2～5个，文案简单易懂；4⃣️提供“跳过”按钮。
使用场景：一般出现在APP首次启动。
（2）浮层式引导：轻量级但目标性强的引导方式，一般是浮层结合文案，类似气泡的引导方式。
用途：1⃣️提示用户新增功能或页面调整，或如何使用该功能；2⃣️提示一些隐藏的操作或者重要功能。
建议：非模态浮层，显示3秒自动消失，文案简洁。
（3）嵌入式引导：将引导内容直接嵌入到界面中，或者嵌入到状态栏、导航栏、工具栏。
使用场景：异常状态、初始状态。
三、网络异常设计形式
1、分类：网络切换、断网、弱网
2、详解：
（1）网络切换：Wi-Fi切换到移动数据网络环境
设计形式：警示框、界面内嵌。
（2）断网：完全没有网络
设计形式：整页提示、占位符、toast提示、警示框、界面内嵌、tips提示
（3）弱网：2g无法加载或者无法上传数据
设计形式：整页提示、占位符、界面内嵌、tips提示
设计形式详解：
（1）tips提示：一般出现在导航栏或者搜索栏之下。可以一直存在，也可以出现数秒后消失，也可以点击跳转到网络设置界面。
（2）整页提示：包括icon或插画+网络异常文案+重新连接刷新网络的按钮。
（3）toast提示：用户操作时才会出现。
（4）占位符：进入界面未加载出来信息的占位符。
（5）警示框：标题+按钮+描述信息（可选）+输入框（可选）
四、空数据类型
1、分类：初始状态、清空状态、出错状态
2、详解：
（1）初始状态：无任何内容，需要用户进行一定操作才能产生内容。比如空购物车。
（2）清空状态：用户删除等操作产生空界面，需要提示用户空数据的原因。
（3）出错状态：由于网络、服务器或无结果等原因导致无法加载内容产生空界面，需要提示用户空数据的原因。
五、消息提示
引导用户点击，达到传达信息的作用。
1、分类：红点提示、数字提示、系统推送提示、弹框提示
2、详解
（1）系统推送提示：前提是用户打开了系统推送权限，属于强提示。
（2）弹框提示：
六、操作类
1、分类：底部动作条（底部操作列表、底部浮层视图）、编辑菜单、底部工具栏、按钮、选择器、下拉菜单、文本框
2、详解
（1）底部操作列表：用户激发一个操作时出现的浮层，点击选项开始新任务。
（2）编辑菜单：用户长按或者点击会呼出的编辑菜单，用来完成诸如网页中的复制粘贴等操作。
（3）底部工具栏：在底部的工具栏里放置用户在当前情景下最常用的操作功能。
（4）选择器：通过滑动滑轮来选择时间地点人物等，例如锤子闹钟。
（5）下拉菜单：点击一个按钮，出现下拉菜单，由箭头、浮层列表组成。
（6）文本框：单行文本框、多行文本框、带滚动条。
1⃣️点击后显示光标，并自动显示键盘。除了输入，还可以复制粘贴等。
2⃣️文本框可以有不同的输入类型。
（3）单行文本框：光标到达输入区域的最右边，内容会自动滚动到左边。
（4）多行文本框：光标到达最下缘，会自动换行或垂直滚动。可以出现滚动条。
七、单元控件
1、分类：搜索、开关、页面控制器、图标、滑块、进度、选框
2、详解
（1）页面控制器：告诉用户当前的试图数量以及用户所处位置，比如banner 图的圆点和滚动条。
（2）选框：：单选框、复选框
复选框：如果只有一个on/off选择，应该使用开关代替。
网友评论