体验提升设计清单：加载、刷新和缺省页

产品中某些模块，不用于满足业务或功能，但因为触发场景多、操作高频、性能相关，是每个产品必须有设计。基本业务需求满足之后，优化这些模块，可提升体验，增加操作效率。以下总结加载、刷新、缺省页的常用设计模式，亦可作为自检清单。

刷新

刷新场景

• 用户主动试探是否新内容
• 确定有新内容（比如微博顶部提示），按引导操作获取
• 网络异常，按引导操作刷新

是否提示内容更新

• 无更新提示：产品打开频率高，内容会经常更新、不按时间顺序浏览内容、或不依靠feed流更新推送，比如新闻类产品
• 有更新提示：产品打开频率低，无法预知是否有新内容、重视feed流更新推送；比如FM类产品

控件触发位置

• 页面下拉时顶端触发
• 空数据页面点击按钮或轻触屏幕
• hud或浮层提示点击
• 自动刷新，比如微信朋友圈，先读取缓存内容，自动请求服务器，左上角七彩转盘加载动效

不同类型UI，分别适用哪种触发刷新的方式？刷新控件展示在UI上，UI决定刷新位置，位置决定触发方式

• 列表、栅格列表、卡片、内容流、瀑布流：下拉或上滑刷新
• 系统插件、地图应用：因为没有排序方向、新内容生成位置不明确，用户无法凭直觉做出手势触发刷新；适合自动刷新
• 个人中心、设置：内容并不经常更新，无需主动操作；自动更新
• 更新频率高的内容：股票、财经类，最好实时自动更新
• 网络异常缺省页：引导用户主动做出手势，操作刷新

刷新样式

• 导航栏：列表存在本地数据、内容页不为空，用户注意力集中在已有内容，无需突出刷新过程，所以loading控件放在顶部导航栏，比如钉钉、微信
• 进度条：页面包裹H5时刷新，内置浏览器标准加载方式
• toast：常见于屏幕中间转圈，因为某些页面有其他操作项，防止继续操作导致数据丢失，所以使用toast提示，防止误操作
• 下拉刷新：往往在顶部下拉出的空间加上动效，往往和刷新成功后提示一起使用，保证了用户保持注意本地数据，也充分感知有新内容加载好
• 整屏动效刷新：整屏为空，中央加载动效，一般取产品主色为背景。可以从三个方向考虑UI动效
  • 品牌，产品的宗旨或目标或口号
  • 引起共鸣占位图和文案
  • 直接告诉用户正在发生什么

加载

和刷新类似的是加载，在此定义为首次进入某个页面或触发控件，请求服务器的状态。加载样式有以下几种：

• 导航栏：同刷新样式中的导航栏
• 进度条：同刷新样式中的进度条
• toast：同刷新样式中的toast
• 整屏动效加载：同刷新样式的整屏动效

除了和刷新一样的样式，加载状态还有两种样式可用：

• Skeleton: 如facebook，先加载出页面框架，再展示数据内容。
  • 有研究发现Skeleton让人感觉加载速度更快，即使加载时间没有变化
  • 不是每个页面都要这种效果，如果打开频度不高，或不请求网络数据，不需要此加载效果
• Shimmer：翻译成微光，动效和Skeleton类似，只是整屏闪烁，更重口味

根据不同界面，加载机制和样式可以不同，比如个人中心页面可以自动刷新甚至不刷新，列表页面可以下拉刷新，并且在下拉出的屏幕空间添加占位图/动效，有很多发挥空间，以突出品牌形象。

1. 无本地框架的页面，整个页面需要请求数据：适合整屏动效加载、比如白屏中间转圈或占位动画
2. 有本地框架或数据缓存，如个人中心、聊天列表：适合导航栏加载方式，因为只有部分数据需要请求网络，所以优先展示框架或本地数据，加载占位的面积小，退居次要关注点，不覆盖已有页面
3. 当前整屏数据已加载，新操作请求服务器，但新数据还未覆盖原有页面：适合toast加载，让用户感知页面正在切换

同一个页面，加载和刷新可以用两种样式；比如微信聊天列表，加载控件在导航栏，刷新控件是实时自动；简书加载用Skeleton，刷新用下拉方式。

加载的后台增强设计。为了减少等待时间，提升体验，往往不会一次加载完所有数据才展示

• 分步加载：比如先文字再图片、先框架/预设图再框架内数据
• 预加载：先加载最先要看到的内容，再根据用户行为习惯预判后续想看内容，提前加载好；比如阅读App，阅读当前页时自动加载后几页
• 异步加载：比如某App网络不好时点赞，本地提示用户点赞成功，网络好时再请求到服务器，完成点赞数据交互

加载的最大时间。加载状态，不管是动效、hud、toast，不宜过久。再好看的动画也不意味着可以无限等待，应该控制在5-10s以内。加载时后台重连几次、每次加载多久timeout，和性能有关，与开发商定一个合适解决方案。

缺省页

缺省页有三种，空数据、网络异常、页面报错。后两者为异常情况处理。

空数据

空数据页面，没太多后续操作，一般是搜索结果列表为空、无数据交互页面状态，可以做以下设计

• 摆放活泼友好的空数据占位图和文案
• 展示运营推荐元素，比如推荐商品和文章，引导浏览更多
• 留有call to action的入口或按钮，告诉用户，你想要这个页面有数据，该怎么做
• 页面有框架，需展示数字时，比如股票、钱包，如果是实际数额为0，可用 ‘-’ 代替

网络异常

请求服务器失败，常见于断网、网络不稳定。这个场景若发生，在某些主路径页面，提升体验最好方案是事先预防：预先缓存内容到本地，对于内容不常变化的页面，写死UI框架到本地。网络异常发生时，可采取的补救机制：

页面有本地缓存，顶部hud提示，不占据内容空间，可以在浏览缓存内容同时，知道网络异常。从Hud可点击进入“指导检查网络页面”，该页面为静态页面，用文案指导如何检查wifi或移动网络。另外一种方案为，从hud点击直接进入手机“系统设置”页面，期待熟练用户自己检查WIFI或移动网络。微信、京东用静态页面的文案指导检查网络，而非直接跳转系统设置，因为直接跳转到系统设置，会让很多小白茫然无措，加之不同手机系统，可跳转的权限不同。用静态页面指导，是更简洁通用、覆盖更多人群的方案。

页面无本地缓存，使用网络异常占位符，与空数据页面类似，摆放活泼友好的网络异常占位图和文案。此类页面又分两种情况来布局：

• 页面有下拉刷新：文案提示用下拉手势刷新 + 指导检查网络状态入口
• 页面无下拉刷新：文案提示轻触屏幕或点击按钮刷新 + 刷新按钮 + 指导检查网络状态入口

另外，还需考虑网络异常提示的时机。如果网络状态经常不稳定，一监听到断网就提示异常，反反复复太频繁，可以考虑延时反馈，比如监听到网络异常5s之后，给出提示；5s内如果链接上了，不提示。

页面报错

在PC网页，浏览器提示404、或页面不存在，可操作浏览器刷新按钮重新请求或返回上一层。在App中，页面定制化程度更高，加之报错不是刷新或检查网络可以解决，像浏览器默认那般提示404之类错误码，不如突出友好活泼的占位图，并引导用户主动反馈或探索更多其他内容。