浅谈用户交互“加载、刷新与反馈”的常见使用类型和方法
发布网友
发布时间：2022-11-20 12:20
共1个回答
热心网友
时间：2024-12-06 14:08
在启动APP时需要一段时间来完成数据请求，通常我们会使用启动页来完成这一过程的过渡。
内容页加载氛围“当前页加载”和“新页面加载”两类；
0-1s，无需任何加载；
1-10s，需要明确的加载提示；加载动画、反馈提示语等手段进行提示，告知用户程序正在处理，安心使用；
10s+，需要含完成进度的加载提示，告知用户当前已完成进度和剩余内容。
即模态加载，通常适用于需要判断的情况，在当前页面通过toast请求并提示进行中状态，成功后进入到新页面；
不需要做任何处理和判断的情况下打开新页面，在完成这一页面内容的加载，体验更加流程；
注意：在此状态下需要区分原生、H5类型，调用不同的载入方式。
加载的同时可以使用分步加载形式，先加载模块和文字，后加载图片和视频等；需搭配加载动画完成；
在应用使用过程中，出现最多的就是页面之间的相互切换；切换页面后，通常有一个数据请求的过程，为降低这一过程中用户等待的混淆和沮丧感；需要进行加载页面的动态效果设计；以下我们针对原生应用及H5页面分别进行了区分。
原生载入方式在数据请求较大（通常超过1s）或启动应用后首次载入各产品线时使用
原生调用H5时，先打开H5页面在请求加载；通过进度条形式提示该页面内容正在加载中；
调用H5时，本流程之内的页面再此容器内加载；本流程之外的h5可继续打开新容器。
页面不变，只在当前页面显示更多内容；
采用自动加载形式，优先加载20条数据，加载到第20条时自动加载接下来的20条；
刷新机制也是设计师很容易忽略的问题，合理的刷新机制能让产品使用起来更流畅；通常我们使用最多的刷新分别为手势刷新、点击刷新和自动刷新。
使用最多的是内容模块的下拉刷新；
刷新的步骤分为：
1、下拉刷新器至指定位置
2、到达指定位置后，提示释放可进行刷新
3、释放手势后提示当前正处于刷新状态
通过点击一个按钮达到刷新数据的目的，但是如今在移动端的设计过程中，刷新按钮的使用场景并不多见；使用较为普遍的是存在于一场页面当中，如出错、加载失败等搭配刷新按钮的使用会让异常的状态重新激活。
根据设定好的规则，如时间、事件规则自动向服务器获取新数据并替换旧数据。使用自动刷新需要根据场景来考虑是否合适
场景一
对于频繁更新的内容、有时效性的内容，用户在一个设定的时间没有使用，则可考虑在下次使用时，自动刷新，把新的内容推送给用户
类似微博、新闻这种具有时效性的产品，用户在24小时内未打开产品，则在下次打开时帮用户自动更新Timeline
场景二
对于一个相对稳定，数据不会经常变化的页面，可以考虑设定时间规则，在后台为用户默默更新数据并替换旧数据等
反馈是产品设计中非常重要的一个环节，它的存在与否会极大的影响用户的体验，帮助用户随时感知系统的状态，满足用户的控制感，消减不确定性给用户带来的负面情绪；
反馈从涵盖范围上来说可以分为两种：操作反馈与用户反馈。
提示器反馈的主题是操作行为，即某一操作发起后，前台对表单的判断及提交后后台返回的结果；
针对操作场景的特性，我们提出2类反馈形式
toast反馈和对话框反馈
表单判断信息异常，通过“！”的形式进行警告，提示用户出错位置；该toast出现3s后淡出，文案控制在4-16字之间，若文案文案大于该区间，则调用1阶基础对话框来完成该项报错。
服务器返回异常，通过“x”的形式进行通知，提示用户出错原因；该toast出现3s后淡出，文案控制在4-16字之间，若文案文案大于该区间，则调用1阶基础或2阶基础对话框来完成该项报错及解决方案。
正常状态的反馈需要结合实际使用场景来决定是否需要；
例1：我们在走一项独立流程时，在完成最后一步操作且无结果页时需要将当前结果状态通过toast形式告知用户后退出该页面。
例2：在同一流程中若非最终操作，加载完毕后进入下一页面时，则无需提示操作成功，直接进入下一级页面即可。
注：通常，成功状态文案表示当前操作任务成功即可，如支付成功，订阅成功等；
但需要注意的是逆向操作不可使用此方法，如“取消成功”可采用“操作成功”来描述。
在刷新后，toast反馈会以另一种形式进行反馈；此类反馈针对正常/异常进行了微弱的区分，但整体操作方式一致；该toast出现3s后淡出，文案控制在4-16字之间，表示成功/失败状态或具体化的文案描述。
与提示器相比，页面反馈的主体是操作流程，更像是一个流程的终端站；我们在完成某一项任务达到最终状态时，进入到某一完成页面，如支付成功页、交易完成页等…
标签反馈常用于多字断的填写，主要用于表单，用户录入信息的过程可逐行进行校验提示；
标签反馈常用于pc端，此处不做过多说明。
动画也可以用来完成反馈，这里的动画特指的是功能性动画。动画的合理使用可以吸引用户的注意力，因为人类都是视觉动物，在app和网页中，小动画对我们来说像是眼睛的甜点一样，我们会不自觉的被它们吸引。
声音是经常受到设计师忽视的一个反馈方式，但是是我们接触最早的。我们之前打电话按键，每按一下就会发出“滴”的声响，告诉用户按键成功。
元件是我们使用应用中操作最多的项目，一个按钮、一行列表以及一个有效的触区，在我们进行操作时，通常需设计其默认、按下以及禁用三个状态；操作时与用户进行互动，表示其发出的反馈；
此处不做过多注释，后续元件中会专门列出各效果说明。
注：第二是用户反馈，暂不在此做解析...
以上为本次针对“加载、刷新、反馈”做出的归类和总结；
在整理公司移动端交互规范指南时，突发奇想发篇文章与大家进行交流；如有不足，还请各位看官加以指正；
后续我将持续更新关于交互设计指南用户交互章节的相关设计要点。
注：图片资源来源于网络，设计资料内容来自于个人的相关看法及一些相关资料的总结。
