用户交互_加载

这里所说的加载是指：启动app时文件、信息或数据的载入。

---

一、启动加载

在启动APP时需要一段时间来完成数据请求，通常我们会使用启动页来完成这一过程的过渡。

二、内容页加载

内容页加载氛围“当前页加载”和“新页面加载”两类；

0-1s，无需任何加载；

1-10s，需要明确的加载提示；加载动画、反馈提示语等手段进行提示，告知用户程序正在处理，安心使用；

10s+，需要含完成进度的加载提示，告知用户当前已完成进度和剩余内容。

1、当前页加载

即模态加载，通常适用于需要判断的情况，在当前页面通过toast请求并提示进行中状态，成功后进入到新页面；

2、新页面加载

不需要做任何处理和判断的情况下打开新页面，在完成这一页面内容的加载，体验更加流程；

注意：在此状态下需要区分原生、H5类型，调用不同的载入方式。

加载的同时可以使用分步加载形式，先加载模块和文字，后加载图片和视频等；需搭配加载动画完成；

在应用使用过程中，出现最多的就是页面之间的相互切换；切换页面后，通常有一个数据请求的过程，为降低这一过程中用户等待的混淆和沮丧感；需要进行加载页面的动态效果设计；以下我们针对原生应用及H5页面分别进行了区分。

2.1、原生载入方式

原生载入方式在数据请求较大（通常超过1s）或启动应用后首次载入各产品线时使用

2.2、H5载入方式

原生调用H5时，先打开H5页面在请求加载；通过进度条形式提示该页面内容正在加载中；

调用H5时，本流程之内的页面再此容器内加载；本流程之外的h5可继续打开新容器。

三、分页加载

页面不变，只在当前页面显示更多内容；

采用自动加载形式，优先加载20条数据，加载到第20条时自动加载接下来的20条；

---

用户交互_刷新

刷新机制也是设计师很容易忽略的问题，合理的刷新机制能让产品使用起来更流畅；通常我们使用最多的刷新分别为手势刷新、点击刷新和自动刷新。

一、下拉刷新

使用最多的是内容模块的下拉刷新；

刷新的步骤分为：

1、下拉刷新器至指定位置

2、到达指定位置后，提示释放可进行刷新

3、释放手势后提示当前正处于刷新状态

1.1、刷新类型

1.2、刷新过程

二、点击刷新

通过点击一个按钮达到刷新数据的目的，但是如今在移动端的设计过程中，刷新按钮的使用场景并不多见；使用较为普遍的是存在于一场页面当中，如出错、加载失败等搭配刷新按钮的使用会让异常的状态重新激活。

三、自动刷新

根据设定好的规则，如时间、事件规则自动向服务器获取新数据并替换旧数据。使用自动刷新需要根据场景来考虑是否合适

场景一   

对于频繁更新的内容、有时效性的内容，用户在一个设定的时间没有使用，则可考虑在下次使用时，自动刷新，把新的内容推送给用户

类似微博、新闻这种具有时效性的产品，用户在24小时内未打开产品，则在下次打开时帮用户自动更新Timeline

场景二   

对于一个相对稳定，数据不会经常变化的页面，可以考虑设定时间规则，在后台为用户默默更新数据并替换旧数据等

---

用户交互_反馈

反馈是产品设计中非常重要的一个环节，它的存在与否会极大的影响用户的体验，帮助用户随时感知系统的状态，满足用户的控制感，消减不确定性给用户带来的负面情绪；

反馈从涵盖范围上来说可以分为两种：操作反馈与用户反馈。

1.1、加载反馈

提示器反馈的主题是操作行为，即某一操作发起后，前台对表单的判断及提交后后台返回的结果；

针对操作场景的特性，我们提出2类反馈形式

toast反馈和对话框反馈

（1）异常，表单判断异常

表单判断信息异常，通过“！”的形式进行警告，提示用户出错位置；该toast出现3s后淡出，文案控制在4-16字之间，若文案文案大于该区间，则调用1阶基础对话框来完成该项报错。

（2）异常，服务器返回错误

服务器返回异常，通过“x”的形式进行通知，提示用户出错原因；该toast出现3s后淡出，文案控制在4-16字之间，若文案文案大于该区间，则调用1阶基础或2阶基础对话框来完成该项报错及解决方案。

（3）正常

正常状态的反馈需要结合实际使用场景来决定是否需要；

例1：我们在走一项独立流程时，在完成最后一步操作且无结果页时需要将当前结果状态通过toast形式告知用户后退出该页面。

例2：在同一流程中若非最终操作，加载完毕后进入下一页面时，则无需提示操作成功，直接进入下一级页面即可。

注：通常，成功状态文案表示当前操作任务成功即可，如支付成功，订阅成功等；

但需要注意的是逆向操作不可使用此方法，如“取消成功”可采用“操作成功”来描述。

1.2、刷新反馈

在刷新后，toast反馈会以另一种形式进行反馈；此类反馈针对正常/异常进行了微弱的区分，但整体操作方式一致；该toast出现3s后淡出，文案控制在4-16字之间，表示成功/失败状态或具体化的文案描述。

1.3、页面反馈

与提示器相比，页面反馈的主体是操作流程，更像是一个流程的终端站；我们在完成某一项任务达到最终状态时，进入到某一完成页面，如支付成功页、交易完成页等…

1.4、标签反馈

标签反馈常用于多字断的填写，主要用于表单，用户录入信息的过程可逐行进行校验提示；

标签反馈常用于pc端，此处不做过多说明。

1.5、动效反馈

动画也可以用来完成反馈，这里的动画特指的是功能性动画。动画的合理使用可以吸引用户的注意力，因为人类都是视觉动物，在app和网页中，小动画对我们来说像是眼睛的甜点一样，我们会不自觉的被它们吸引。

1.6、声音反馈

声音是经常受到设计师忽视的一个反馈方式，但是是我们接触最早的。我们之前打电话按键，每按一下就会发出“滴”的声响，告诉用户按键成功。

1.7、元件反馈

元件是我们使用应用中操作最多的项目，一个按钮、一行列表以及一个有效的触区，在我们进行操作时，通常需设计其默认、按下以及禁用三个状态；操作时与用户进行互动，表示其发出的反馈；

此处不做过多注释，后续元件中会专门列出各效果说明。

注：第二是用户反馈，暂不在此做解析...

---

总结

以上为本次针对“加载、刷新、反馈”做出的归类和总结；

在整理公司移动端交互规范指南时，突发奇想发篇文章与大家进行交流；如有不足，还请各位看官加以指正；

后续小编将持续更新关于交互设计指南用户交互章节的相关设计要点。

注：图片资源来源于网络，设计资料内容来自于个人的相关看法及一些相关资料的总结。