| 交互基础之页面加载方式（一） | |
| 【返回本版】 【发表帖子】 【回复帖子】 | 浏览量 1404 回帖数 0 |
 |
lanlan123 等级 ☆ 0 楼 发表于 2019/9/25 14:50:16 编 辑 |
|
|
作为UI设计师，我相信大家都是专注于界面设计的好不好看，至于界面与界面之间如何交互，点击之后如何反馈，是一个比较容易被忽略的重要环节。 那么我们怎么处理好界面交互中的加载设计，减少用户因等待产生的焦虑情绪，保证整个体验无缝衔接，今天这篇文章就来总结下APP中数据加载模式设计。 一、为什么要加载？ 1、用户在进行某些操作时，都要从后台请求数据，这个过程都需要时间，系统应该始终在合理的时间内做出适当的反馈，让用户了解正在发生的事情，让用户知道此时的操作是有反应，减缓用户因等待而产生的焦虑感。同时加载方式也可以做的有趣，吸引用户注意力，增加沉浸式体验，让用户轻松自在的享受等待； 2、体验无缝衔接，减少用户跳失，正常的等待加载时间是0.3秒以内，同时不同场景对应有不同的加载方式。 二、常见的加载场景及方式 a.加载场景： 不同场景有不同的加载方式，常见的加载场景一般有以下几种：下拉刷新、上拉加载、切换新页面的数据加载、页面局部模块的加载、启动页加载、操作按钮加载。实际工作中，要根据不同的场景搭配不同的加载样式，才能更好的做到缓解用户等待焦虑，降低用户的跳失率。 b.加载方式： 1、全屏加载 主要出现在手机H5页面，例如微信的文章详情页。一般会有进度条或有趣的动画设计，减轻用户等待时的焦虑感。加载失败后，页面通常为空白页，且有重新刷新操作按钮。 优点：将整个页面的内容都加载出来才展现给用户，能保证内容的整体性，全部加载完才能够系统化的阅读。 缺点：一般等待的时间较长，容易产生焦躁情绪，尤其是遇到网络不好的情况 2、下拉刷新加载 主要出现在页面内容为推荐类、或者信息更新频次高的产品，通过刷新加载新数据，加载的loading样式可以结合产品logo或IP形象进行设计，增加趣味性，吸引用户注意力。 3.占位图加载 如果页面布局样式比较固定，可以采用占位图加载机制，先加载页面布局和占位图，先给用户展示页面框架，后加载页面图片细节部分，这种加载方式相对于直接展示白屏来说，呈现给用户无缝衔接的感觉，体验更加流畅。 4.分布加载 当页面中有文字和图片时，优先加载占网络资源较小的元素，如先加载文字，后加载图片，图片加载完成前使用占位符显示，保证用户可以顺畅阅读，缩短用户的等待时间，提高产品体验。 优点：可以帮助用户快速阅读内容，了解信息。 这种加载形式更加适用于内容阅读型的APP或图片、视频类资源比较多的页面。 5.自动加载（懒加载） 当浏览信息时，不停的向上滑动，新的内容会不停的从底部出现，这种方式称为自动加载。对于自动加载，要注意每次加载多少条内容，或者多少屏的内容。一般会在距下面内容一定距离时开始加载，当网速非常快的时候，用户并不能感知懒加载的动作，这样可以营造一种无极限浏览的错觉，很容易的把用户吸引住。 优点：无需用户操作，自动加载后续内容，营造沉浸式体验。 应用：适合feed流、瀑布流、算法推荐类的内容。 更多文章就在蓝蓝设计每日一贴。欢迎访问，开始愉快的合作! 网站：www.lanlanwork.com 全国统一客服热线：400-608-6026 公司邮箱:weibaobei@163.com  |
||
| 1 |