UI设计中加载设计的技巧
UI设计中加载设计的技巧 UI设计师在进行APP设计时,往往会更加专注于界面的布局、界面和界面之间怎么跳转、操 作反馈,却往往忽略掉一个比较重要的环节,就是APP数据加载中的设计。那么我们怎么处 理好界面交互中的加载设计,保证体验无缝衔接,保证用户没有漫长的等待感呢? 依旧附上一张脑图,组件控件分类(如果单纯通过组件控件,难以满足功能划分的需求,所以 我将这个范围扩大,分类里面不仅仅含有组件和控件,所以请不要在意细节。) OH MA net** ■■■ ”UM ••••aaxac M an 什么是加载? 用户在客户端的界面上进行操作,客户端发送请求到服务器,服务器处理请求,返回数据给客 户端,并显示给用户。这一过程成为加载。区别于缓存,缓存是主动的,加载为被动的。 全屏加载 这种加载比较简单,一般运用在页面内容比较单一的情况下,所以直接一次性加载完所有数据 后再显示内容。 *•I SM ;2“ • t 30HI • 99我的音乐ih| /a本地e乐 ® ■近n放 命我的电台. 席我的收萱 我喜玖的窗乐 【环球n江】牛宙乐坛一人一首绝对. SkullcarKllyJBffi® 机硕 DrunkfiSII^ 的音乐 •••毕0BII场▼八20 59 收件H 2 > • t 31X1 > Q + 金鼻3 • Facebook F 机wu.你1 个 • Facebook 「 怖wu. fit*i个网H友儡次 • Facebook F YbWU.1 个 Facebook %wu.坏01 个 人人中彩累 fi®s 网易云督乐 Is优点 方便用户刷新当前界面,获取新数据。 2、缺点 非首屏时,无法进行该手势操作。 3、使用场景 界面信息可以刷新加载时使用。 上拉加载 用户在浏览界面的过程中,对于未加载的信息,上拉过程中自动加载。 什么(1得买 1、优点 把用户代入无尽浏览模式,让用户一直向下滚动,不需要手动点击下一页。 2、缺点 没有尽头,容易迷失,不方便快速索引定位到某个内容。 3、使用场景 适用于瀑布流、长列表、商品列表等情况。 预加载 当用户在停留一个界面时候,将对应当前界面通向下一界面的所有信息都加载出来。使用这个 加载方式会使得使用过程中很快减少时间等待。 FM^oek • F«c«booli wwu. •viTiiwa** . FM«bOOll v. «««titwae* ♦n,,• • m・ M ■ MidttMit oCMidttMfiC HK2■■域 XAltn^ofw ux小分(K • so . FAMbOOll ,WW. Facebook ■MH KMrgtQ 一 二nf由 jf. 5生■#.方用户停・在列it hRmBniime«»ti±«T.waeitott.岩果了款■取月.■信tut・ ttURH.可以■•■件伟情.tUmo“R¥20■机*为fllintl息加■了.就■期尸♦啊状5.& BJIUfl«HRIBr)A8么・侮 samaa) 1、优点 用户进入下一级页面无需加载过程,使用给用户流畅之感。 2、缺点 在非WiFi情况下,浪费用户流量。 3、使用场景 信息需要即时刷新,同时预加载后消耗流量较少的场景,例如IM或邮件。这种加载机制的好 处就是进入下一页无需加载,使用流程。 智能加载 根据用户的网络情况,加载不同质量的图片内容。例如在WiFi情况下,加载出来的图片是高 清,在非WiFi情况下加载出来的图片是标清的。 1、优点 是根据具体场景来控制流量和加载速度。 2、缺点 不一定是真实有效的命中用户需求。 3、使用场景 适用于有大量图片或视频的APP ,如电商类或在线视频类APP。 上述一共将加载划分为6种类型。6种类型适用于不同的场景,各有优缺点。设计师在设计时, 可以根据用户的使用场景和环境设计适合的加载。