数极客首页

浅谈app加载页面设计

都说好的交互设计的评判规范

之一是“别让我等”,但互联网产品总是受制于理论

的网络问题。移动

端产品则更为显然
,2G、3G环境下加载不够给力,wifi环境也一定
每次都是那么顺利。因而

“别让我等”更像是种奢望,我们倒应该思索

的是“怎样
文雅
而不令人焦躁

的等”。与之最直接关联的就是app加载页面的设计。

一个app加载页面,大致分为3类:

(一)启动加载页

启动加载是我们翻开
app的第一眼所看到界面。会给用户留下该产品的第一印象。
通常启动加载页设计有几种:

1、固定的加载页

Logo、slogan、产品主色、版本号、出品团队,这是初级启动页面的基本

构成元素,设计者的目的就是最直接快速的向用户传达产品形象,这也是让用户最直接了解

产品的伎俩

之一。但也由于
完成
本钱
低,且样式

固定简单,一朝一夕
容易审美疲倦
。于是加载页开端
升级

浅谈app加载页面设计

这里要提到让加载页不那么孤立、突兀的办法

视觉的持续

。例如weiconote的加载页背景和它的主界面背景分歧
,视觉上抵达

了调和
的过度。

动效的运用

。经过
淡出或开门等转场效果,让加载页面和内容页圆满
的过渡。例如豆瓣电影和天猫客户端。

2、会变的加载页

当一尘不变的加载页开端
寻求出路,结果会是什么?对,会变的加载页。但是任何变化总得有迹可循,让用户得以了解

。目前有2种维度:

1.节假日定制加载页

在不同的节日,启动加载页都会盘绕
节日&产品中止

设计。在突出产品形象的同时,传达节日信息,是情感化设计的一个范例。例如掌上百度symbian。

浅谈app加载页面设计

另外一个有趣的例子是有些应用的启动页面,在用户华诞
时埋下的彩蛋:这种都是转移用户留意
力的伎俩

,让用户不再沉浸在等候
中,而是经过
这段等候
时间传达其他有效信息,让用户不再焦躁

2.不同版本定制加载页

当app版本升级

后,启动加载页也随之升级

,可依据

当前版本的主题、特性或新增功用
,设计契合
该版本的加载页面。也增强

了用户对新版本、新功用
的认知度。

浅谈app加载页面设计

(上左新浪微博夏日版上右新浪微博新年版下左zaker嵌入游戏动漫版块广告)

3.同主界面的启动页

用app的内容页作为启动页面的内容,从启动加载页到加载完成的首页,版式内容简直

看不出差别

。这样的启动页,让用户提早
进入主要界面,强化用户对主界面的印象。也不容易构成

很大的视觉腾跃
感。但也存在问题,长得像主界面的加载页会给用户构成

可用的假象,但假定

加载的时间过长,点击伪主页假定

无响应,或许
会让用户恼火。

浅谈app加载页面设计

(pull time)


4.运用
动画的启动页

在游戏app中,这种方式较为常见,在loading的过程中,用户看到是一段动态的flash。有时也有可能配以相关的游戏音乐。例如游戏subway surf。这种方式固然
最有富媒体效果,但同时却也由于
比较

耗费

资源。有时分
由于
加载担负
太重,致使

会构成

画面不流利
。因而

需谨慎

选择。

浅谈app加载页面设计

(二)内容加载页

目前较常见的内容加载页会用加载模态框去表示当前正在加载中,真实
是不怎样
美观,且加载前和加载后的页面关联性很弱。这种体验真实
是很令人头痛和不悦。

浅谈app加载页面设计

(zaker)



那有没有内容加载的好体验?
几种优化伎俩

1.增加加载页面间的关联性,避免

运用
模态框

例如line的通知加载。加载进程在加载的通知项上中止

,这时分
不障碍

用户阅读
上下的内容。

浅谈app加载页面设计

2.加载时就显现
加载后的页面样式

,最大化坚持
视觉衔接

这种手法也就是为了尽可能多的在加载过程中告知用户有效信息,“你稍后行将
看到的页面会是什么样”“会有哪些内容”,让用户提早
有个预期,也让用户有了等候
的愿望

浅谈app加载页面设计

(flipboard)


3.加载时,预填充内容

这里的内容有2种。能够

是提早
预设好的,例如next day里的头图,再没加载出来前都用不时

心爱
的兔子图替代。另一种是,显现
上次阅读
留下的内容,像最近更新后的path,加载时,用户能够

查看上次加载胜利

的内容,而且很巧妙的把加载中的图片黑白虚化处置

浅谈app加载页面设计

 

(三)下载、应用的加载页

另一个常见的加载是下载/应用时的加载页面。下载和应用的过程能够

看做是一个衔接

的过程。而不要想象成两个独立的模态框。
在cardmon这个应用中,下载和应用的过程就被包装成了一个连续而精致的过程。
设计者找到了card和下载之间的联络
,运用云端向信封连续不时
发送卡片的动效,再加上下载进度条,让原本

单调
无味的下载等候
过程展示

出了那么一丝生气。在下载完成之后,进度条顺理成章的过渡成装置

过程。动画效果依旧

盘绕
着之前的卡片logo中止

。同样的装置

进度条依旧

能够

提示用户剩余的时间。

浅谈app加载页面设计

这一包装手法的要点即是,找到产品与下载之间的某种关联,合理运用动效、进度条、连续的处置
下载装置

过程。
另一种,是weico主题下载的方式
,将下载和装置

看做独立的两个过程。下载和装置

分别

的运用
场景通常是,用户或许
希望阅读
、下载多个主题,再肯定
运用
哪个。因而

,下载被处置
成取代下载按钮的进度条会比较

合适

,而非模态框。由于
这样的加载方式不影响用户再阅读
其他内容,不会让下载模态中缀
用户原本

的阅读
行为。

浅谈app加载页面设计

以上就是app加载的几种方式
和设计办法

。看似不起眼的加载页面其实恰是整个app能否
用心和精致的点睛之笔。这一点点的等候
时间或许
会改动
整个用户体验。第三
总结,以上倡导的几个准绳

1.合理应用
启动页面,赋予等候
时间更多的意义

2.避免

运用
模态打断用户

3.加载页面,为用户提供预期,和更多有意义的信息

4.留意
坚持
视觉的衔接

来源:百度MUX

给大家举荐

我国新一代大数据用户行为剖析

与数据智能平台:数极客(https://www.shujike.com),是支持无埋点、前端埋点、后端埋点、API导入四种混合数据采集方式,整合剖析

用户行为数据和业务数据,能够

自动监测网站、APP、小程序等多种渠道推行
效果剖析

,是增长黑客们必备的互联网数据剖析

软件。数极客支持实时多维剖析

、漏斗剖析

、留存剖析

、途径
剖析

等十大数据剖析

办法

以及APP数据剖析

网站统计网站剖析

小程序数据统计用户画像等应用场景,业内首创了六种提升转化率的数据剖析

模型,是用户行为剖析

范畴
首款应用定量剖析

与定性剖析

办法

数据剖析

产品

发表评论

评论已关闭。

相关文章