UI设计中加载设计的技巧.docx

UI设计中加载设计的技巧 UI设计师在进行APP设计时，往往会更加专注于界面的布局、界面和界面之间怎么跳转、操 作反馈,却往往忽略掉一个比较重要的环节,就是APP数据加载中的设计。那么我们怎么处 理好界面交互中的加载设计，保证体验无缝衔接，保证用户没有漫长的等待感呢? ■?e? ?? BBS”. ■■■ 卜 aoxM M M ” aa 依旧附上一张脑图，组件控件分类（如果单纯通过组件控件，难以满足功能划分的需求，所以 我将这个范围扩大,分类里面不仅仅含有组件和控件z所以请不要在意细节。） ??? ?” ■■■ ■?■■ 。 會cam ?- ??■? 、 ― I ? MU— — exx?? tMWie ■K ■■■ UBA* 什么是加载? 用户在客户端的界面上进行操作，客户端发送请求到服务器，服务器处理请求，返回数据给客 户端，并显示给用户。这一过程成为加载。区别于缓存，缓存是主动的，加载为被动的。 全屏加载 这种加载比较简单，一般运用在页面内容比较单一的情况下，所以直接一次性加载完所有数据 后再显示内容。 小米5?? ? 41% ■ 小米5 ?? ? 41% ■ (3 ???■ - ■ https 2002 ? ? www.google.co Q : Chrome所以,在地铁等信号不好的 Chrome 所以,在地铁等信号不好的 手机淘宝 1、 优点 能保证内容的整体性,全部加载完才能够系统化的阅读。 2、 缺点 比较明显，就是有非常强烈的等待感,3s以上会产生焦躁情绪 地方”使用手机网页获取内容实在是比较灾难的一件事情。 3、使用场景 常见的是从上一级界面进入下一级界面；或者H5中常使用。 —般这种情况会配合有明确进度标识的加载loading. 分步加载 当有文字和图片时”图片会比文字加载的慢,这个时候往往文字先加载岀来,图片在加载过程 中使用占位符,直到图片加载成功。当加载的页面内容有固定的框架时，可以先加载框架，再 加载框架内的内容。通过先加载页面框架，设计占位符等形式可以提前让用户知道整个界面的 架构，提高产品的体验感。 ??MX 中QD移动 E Kffl 20：07 @ O 46% ■ E3 Q 荣?magic 天Si天貓3）际外卖充值中心飞痛廉行分尖1BIOS更新就绪！ AMD Ryzen再爆发: 小屏超旗ttiPhoneSE2突然曝光！内存兼容口 天Si 天貓3）际 外卖 充值中心 飞痛廉行 分尖 1 BIOS更新就绪！ AMD Ryzen再爆发: 小屏超旗ttiPhoneSE2突然曝光！ 内存兼容 口 间大家 匕 ? ?购栩车 粒的洵宝 lx优点 可以帮助用户快速了解整个界面的信息布局。 2、缺点 开始瞬间会丢失掉重要的关键信息，用户初次感知会认为产品出问题了 3、使用场景 适用于多图片布局的界面。比较消耗流量的界面 下拉加载 用户下拉时,出现loading动画z对整个页面的重新加载刷新。现在很多的产品重新设计 loading加载动画使得加载过程更加具有情感化”人性化和品牌化。 ?? ▼ E 2100 更多 我的音扳 更新中. 用本地音乐 ?最近權放 劎我的电台? 広我的收盜 |||| 的音乐 【环球皿透】缁话乐坛一人一舖绝对… Q SOB ty Ril KII 巳￥034 Skullcandy Ifi 级 JS 机 il DrunkKI*^的咅条 ???啊加? VN、 20 ?? F 收件H ? S ? * 31% ■ J Q + 1 全 Ata ? Facebook F Vbwu. ficm 个JOH■■事 ? Facebook r yswu.你in 个mhxoi^ ? Facebook F Ykwu. 个 Facebook F vbwu.存m 个ttHAUIIt 人人中彩* 8 9 1、优点 方便用户刷新当前界面，获取新数据。 2、 缺点 非首屏时,无法进行该手势操作。 使用场景 界面信息可以刷新加载时使用。 上拉加载 用户在浏览界面的过程中，对于未加载的信息，上拉过程中自动加载。 5?11月航期：■赢加勒比洋洋? 子号上洵出发日本航线阳台4人房1499元屆/人 5?11月航期：■赢加勒比洋洋? 子号上洵出发日本航线 阳台4人房1499元屆/人 《文＜0说》第36期：较垃K现届 身携帝.精选笔袋推荐 上期互励荻奖公布 徐禍记洵fli沙WW526g 15.5元.可99-50 Q OR 好价 H栩 好文 枚的 什么值俺买 1、优点 把用户代入无尽浏览模式，让用户 直向下滚动，不需要手动点击下一页。 2、缺点 没有尽头，容易迷失，不方便快速索引定位到某个内容。 使用场景 适用于瀑布流、长列表、商品列表等情况。 预加载 当用户在停留一个界面时候，将对应当前界面通向下一界面的所有信息都加载岀来。