加载状态是交互设计中不可回避的设计内容。好的加载设计可以抵消掉用户因等待而产生的负面情绪。下文会给你介绍 3 种方法,使加载设计可以更加人性化:
- 分层呈现信息:依照层次分步加载出全部内容;
- 结合品牌语言:加载的视觉设计中融入品牌元素;
- 保留操作权限:给用户可以返回或取消的操作权限。
1. 分层呈现信息
在加载的过程中,当内容信息由于尺寸和大小需要过长时间的加载时,可以先将页面的框架结构进行呈现,分层、依次加载出全部内容,有时也可以对接下来的内容做信息预告,缓解加载压力:
案例 1
大众点评 App 在内容没有加载出之前,会先将框架加载出来,接着是文字,最后是图片:
案例 2
京东 App 在加载内容时也有很层级感,并不会让用户觉得需要等待,甚至会以此来引导用户的视线:
案例 3
微信在刚登陆时,为了避免加载消息多导致的长时间等待,会将过去的对话记录呈现出来,但在顶部提示 “收取中……”。在与朋友的对话过程中,在顶部提示 “对方正在输入…” 也是一种加载过程的优化:
2. 结合品牌语言
在加载视觉设计中融入品牌性元素,既能保证用户体验的一致性,又可对品牌形象加以宣传推广。
案例 1
饿了么 App 的加载效果是品牌吉祥物在舔嘴,很呆萌:
案例 2
丁香医生 App 每刷新一次就有一个健康小知识,很巧妙的在用户等待刷新的时候提供了不少有价值的内容:
案例提供者:樛木_JM
案例 3
知乎 App 在加载内容的过程中,增加了 IP 狗子形象的动态效果,在图片和文字的占位符上也增加了光的移动效果,吸引用户注意力,减缓了用户等待时的无聊感:
案例 4
飞书 App 的云文档加载刷新动效,会显示当前文档的数量。当前有几篇文档,最终就显示“ n 篇文档”:
3. 保留操作权限
在加载的过程中,给用户保留一定的操作权限和提醒, 比如可以取消、返回、优化加载选项等等。
案例 1
在用户在 4G 环境下播放视频时,bilibili 会在加载的过程中给出提示,提醒用户当下所处的播放环境,可以切换操作:
案例 2
京东会在用户使用移动网络加载 “逛一逛” 页面时,提醒用户注意流量消耗:
案例 3
安卓端 Google Play 商店,当下载连接建立时,会出现左右滑动的绿色进度条。进度条右边明显的 “X” 取消图标,用户可以随时取消下载和安装过程:
案例 4
在 Adobe Illustrator 这款软件中,当设计文件过大,在保存时会出现停止的选项:
原文链接:长弓小子(公众号)
作者:元尧