设计规范 | 组件控件结构体系—加载类

本文作者将加载划分为6种类型,分别适用于不同的场景,各有优缺点。设计师在设计时,可以根据用户的使用场景和环境设计适合的加载。


本文作者将加载划分为6种类型,分别适用于不同的场景,各有优缺点。设计师在设计时,可以根据用户的使用场景和环境设计适合的加载。

设计规范 | 组件控件结构体系—加载类

设计师在进行APP设计时,往往会更加专注于界面的布局、界面和界面之间怎么跳转、操作反馈,却往往忽略掉一个比较重要的环节,就是APP数据加载中的设计。那么我们怎么处理好界面交互中的加载设计,保证体验无缝衔接,保证用户没有漫长的等待感呢?

依旧附上一张脑图,组件控件分类(如果单纯通过组件控件,难以满足功能划分的需求,所以我将这个范围扩大,分类里面不仅仅含有组件和控件,所以请不要在意细节。)

设计规范 | 组件控件结构体系—加载类

什么是加载?

用户在客户端的界面上进行操作,客户端发送请求到服务器,服务器处理请求,返回数据给客户端,并显示给用户。这一过程成为加载。区别于缓存,缓存是主动的,加载为被动的。

全屏加载

这种加载比较简单,一般运用在页面内容比较单一的情况下,所以直接一次性加载完所有数据后再显示内容。

设计规范 | 组件控件结构体系—加载类

1、优点

能保证内容的整体性,全部加载完才能够系统化的阅读。

2、缺点

比较明显,就是有非常强烈的等待感,3s以上会产生焦躁情绪。所以,在地铁等信号不好的地方,使用手机网页获取内容实在是比较灾难的一件事情。

3、使用场景

常见的是从上一级界面进入下一级界面;或者H5中常使用。

一般这种情况会配合有明确进度标识的加载loading。

分步加载

当有文字和图片时,图片会比文字加载的慢,这个时候往往文字先加载出来,图片在加载过程中使用占位符,直到图片加载成功。当加载的页面内容有固定的框架时,可以先加载框架,再加载框架内的内容。通过先加载页面框架,设计占位符等形式可以提前让用户知道整个界面的架构,提高产品的体验感。

设计规范 | 组件控件结构体系—加载类

1、优点

可以帮助用户快速了解整个界面的信息布局。

2、缺点

开始瞬间会丢失掉重要的关键信息,用户初次感知会认为产品出问题了

3、使用场景

适用于多图片布局的界面。比较消耗流量的界面

下拉加载

用户下拉时,出现loading动画,对整个页面的重新加载刷新。现在很多的产品重新设计loading加载动画,使得加载过程更加具有情感化,人性化和品牌化。

设计规范 | 组件控件结构体系—加载类

1、优点

方便用户刷新当前界面,获取新数据。

2、缺点

非首屏时,无法进行该手势操作。

3、使用场景

界面信息可以刷新加载时使用。

上拉加载

用户在浏览界面的过程中,对于未加载的信息,上拉过程中自动加载。

设计规范 | 组件控件结构体系—加载类

1、优点

把用户代入无尽浏览模式,让用户一直向下滚动,不需要手动点击下一页。

2、缺点

没有尽头,容易迷失,不方便快速索引定位到某个内容。

3、使用场景

适用于瀑布流、长列表、商品列表等情况。

预加载

当用户在停留一个界面时候,将对应当前界面通向下一界面的所有信息都加载出来。使用这个加载方式会使得使用过程中很快减少时间等待。

设计规范 | 组件控件结构体系—加载类

1、优点

用户进入下一级页面无需加载过程,使用给用户流畅之感。

2、缺点

在非WiFi情况下,浪费用户流量。

3、使用场景

信息需要即时刷新,同时预加载后消耗流量较少的场景,例如IM或邮件。这种加载机制的好处就是进入下一页无需加载,使用流程。

智能加载

根据用户的网络情况,加载不同质量的图片内容。例如在WiFi情况下,加载出来的图片是高清,在非WiFi情况下加载出来的图片是标清的。

1、优点

是根据具体场景来控制流量和加载速度。

2、缺点

不一定是真实有效的命中用户需求。

3、使用场景

适用于有大量图片或视频的APP,如电商类或在线视频类APP。

上述一共将加载划分为6种类型。6种类型适用于不同的场景,各有优缺点。设计师在设计时,可以根据用户的使用场景和环境设计适合的加载。

相关阅读

设计规范 | 详解组件控件结构体系:导航类

#专栏作家#

UX,微信公众号:UEDC,人人都是产品经理专栏作家。华为ITUX交互组组长。

本文原创发布于人人都是产品经理。未经许可,禁止转载

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/20285/

(0)
CatherineCatherine
上一篇 2017-08-04 09:13
下一篇 2017-08-04 10:12

相关推荐

  • 【用户体验】健康家居生活就选择稚爱儿童水漆

    我心目中的家不需要非常大,只要整洁温馨就好。快过年了,身边很多邻居都在忙着给房子装修,白天楼上楼下总是叮叮咚咚地响个不停;我想到自己家里潮湿斑驳的墙面,心里总是有个疙瘩。不止一次想给自己家翻翻新——二十几年的老房子,墙面容易潮湿发霉,自打上次我结婚家里刷了一次墙,到现在有2年多时间了,墙面很多地方起了小泡泡:有的地方开始掉灰:严重的地方还长出了黑色的霉菌,真的是惨不忍睹:不但有碍美观,而且我宝宝刚刚学会走路老是扶着墙,一不小心就摸到发霉...

    2018-02-07
  • 怎样绘制用户体验地图

    内容来自梁宁老师的《产品思维30讲》,这里是第17讲的笔记。怎么画用户体验地图1.完整的用户角色:需要对「第一只羊」有完整地了解。 (「第一只羊」的话题留在下次介绍)2.清晰的目标和预期:清晰描述用户的目标和预期,他为什么来到你的草地上?他要什么?比如,用户买钻孔机,但是他的目标不是拥有钻孔机,而是需要在墙上打个洞。比如吃饭,用户目标是吃饱?还是想要营造气氛?还是想获得一次交流机会?搞清楚用户的目标和预期到底是什么。3.服务触点:用户从...

    2018-04-01
  • 升级篇:利用品牌基因法进行图标设计

    图标设计如何具有品牌性?这可能是设计师工作中经常会遇到的问题。但很多新人也许并不了解什么是品牌性,更不知道如何将品牌性融入到图标当中,不过没关系,看了这篇文章你就不会那么困惑了!

    2017-05-04
  • 如何利用数据可视化改善移动端的交互体验?来自华尔街日报、Bloomberg 等顶级新闻工作室的新媒体从业者们是这样思考的:

    手机地图  移动交互 数据可视化 移动大潮席卷了你我。 如何利用数据可视化改善移动端的交互体验?来自华尔街日报、Bloomberg 等顶级新闻工作室的新媒体从业者们是这样思考的。 本文的原 po 给几乎每个案例、工具都…

    2016-04-08
  • 为什么在App设计中,应该慎用左右横滑设计?

    移动端屏幕越来越大,但用户对内容量的要求也水涨船高。如何在有限的屏幕内透出更多的内容,是设计师们研究的重点。

    2017-05-21
  • AR场景下的交互设计研究——以中文输入为例 - UXPA中国2016行业文集

    增强现实场景下的交互设计研究         ——以中文输入为例1门文,百度时代总部,北京  2胡也畅, 邵颖,国际商业机器(中国)投资有限公司 摘要:随着近些年一系…

    2017-08-01
  • 全国高校“用户体验、视觉界面(UI) 设计、交互设计新技术实践教学与应用师资研修班

    商务合作联系QQ:3158521867 或加微信号:jujiao01一、会议背景近年来新技术、新趋势不断爆发,同时掀起了互联网的蜕变热潮,行业和用户更加成熟理性,随着网站和平台开发需求不断增多,智能手机广泛应用,用户体验、视觉界面(UI) 设计、交互设计对于网络产品来说是赢得用户的关键特性。苹果、google等顶级企业的成功案例已经深刻说明了这一点。打破传统界限,连接商业与技术,在新商业环境中实现更大的价值,把设计领域、设计概念向外延展...

    2018-03-30
  • 深度剖析|直播页面中的聊天区

    本文将从设计角度深度剖析聊天区。

    2017-05-20
  • 交互设计的知识体系架构 做好产品与人的“翻译官”

    面临毕业季想从事交互设计这个行业,但毫无头绪?交互设计是什么鬼?工作一段时间发现转业交互设计,一直找不到学习的途径。接到一个需求,兴奋地开始画图,提交后产品和开发向你提出一大堆问题,你不停自否定的改图陷入死循环。互联网交互行业越来越受到追捧,看似入门的门槛很低,会画线框图就可以了。事实上交互设计师大部分是输出抽象方面的东西,对象是行为。一位知名人士曾将人与系统交互的过程分为五个要素:用户、行为、目标、场景、媒介,这些你曾了解过吗?这次M...

    2018-02-09
  • 分身乏术?来学学交互设计的优先级判断与排期协同

    在被密集需求轰炸(需求本身都具备一定合理性,不包括那种应该拒掉不接的需求),同时自己还有一堆想自发驱动去做的事情时,交互设计师该如何进行合理的设计优先级判断,分解需求排期推进呢?来看今天的实战经验!

    2017-05-23