从APP加载页面设计要点


  都说好的交互设计的评判标准之一是"别让我等",但互联网产品总是受制于实际的网络问题。移动端产品则更为明显,2G、3G环境下加载不够给力,wifi环境也未必每次都是那么顺利。因此"别让我等"更像是种奢望,我们倒应该思考的是"如何优雅而不令人烦躁的等"。与之最直接关联的就是app 加载页面的设计。

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

  (一)启动加载页

  启动加载是我们打开app的第一眼所看到界面。会给用户留下该产品的第一印象。

  通常启动加载页设计有几种:

  1、固定的加载页

  Logo、slogan、产品主色、版本号、出品团队,这是初级启动页面的基本构成元素,设计者的目的就是最直接快速的向用户传达产品形象,这也是让用户最直接了解产品的手段之一。但也因为实现成本低,且样式固定简单,久而久之容易审美疲劳。于是加载页开始升级。


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

  视觉的延续性

  。例如weiconote的加载页背景和它的主界面背景一致,视觉上达到了和谐的过度。

  动效的使用

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

  2、会变的加载页

  当一尘不变的加载页开始寻求出路,结果会是什么?对,会变的加载页。但是任何变化总得有迹可循,让用户得以理解。目前有2种维度:

  1.节假日定制加载页

  在不同的节日,启动加载页都会围绕节日&产品进行设计。在突出产品形象的同时,传达节日信息,是情感化设计的一个范例。例如掌上百度symbian。

性能测试">
  另外一个有趣的例子是有些应用的启动页面,在用户生日时埋下的彩蛋:这种都是转移用户注意力的手段,让用户不再沉浸在等待中,而是通过这段等待时间传达其他有效信息,让用户不再烦躁。

  2.不同版本定制加载页

  当app版本升级后,启动加载页也随之升级,可根据当前版本的主题、特性或新增功能,设计符合该版本的加载页面。也增强了用户对新版本、新功能的认知度。


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

  3.同主界面的启动页

  用app的内容页作为启动页面的内容,从启动加载页到加载完成的首页,版式内容几乎看不出差别。这样的启动页,让用户提前进入主要界面,强化用户对主界面的印象。也不容易造成很大的视觉跳跃感。但也存在问题,长得像主界面的加载页会给用户造成可用的假象,但如果加载的时间过长,点击伪主页如果无响应,也许会让用户恼火。


  (pull time)

  4.使用动画的启动页

  在游戏app中,这种方式较为常见,在loading的过程中,用户看到是一段动态的flash。有时也有可能配以相关的游戏音乐。例如游戏 subway surf。这种方式虽然最有富媒体效果,但同时却也因为比较消耗资源。有时候因为加载负担太重,甚至会造成画面不流畅。因此需谨慎选择。


  (二)内容加载页

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


  (zaker)那有没有内容加载的好体验?

  几种优化手段:

  1.增加加载页面间的关联性,避免使用模态框

  例如line的通知加载。加载进程在加载的通知项上进行,这时候不妨碍用户浏览上下的内容。


  2.加载时就显示加载后的页面样式,最大化保持视觉连贯性

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


  (flipboard)

  3.加载时,预填充内容

  这里的内容有2种。可以是提前预设好的,例如next day里的头图,再没加载出来前都用一直可爱的兔子图替代。另一种是,显示上次浏览留下的内容,像最近更新后的path,加载时,用户可以查看上次加载成功的内容,而且很巧妙的把加载中的图片黑白虚化处理。


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

  另一个常见的加载是下载/应用时的加载页面。下载和应用的过程可以看做是一个连贯的过程。而不要想象成两个独立的模态框。

  在cardmon这个应用中,下载和应用的过程就被包装成了一个连续而精致的过程。

  设计者找到了card和下载之间的联系,运用云端向信封连续不断发送卡片的动效,再加上下载进度条,让原本枯燥无味的下载等待过程展现出了那么一丝生气。在下载完成之后,进度条顺理成章的过渡成安装过程。动画效果依旧围绕着之前的卡片logo进行。同样的安装进度条依旧可以提示用户剩余的时间。


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

  另一种,是weico主题下载的形式,将下载和安装看做独立的两个过程。下载和安装分离的使用场景通常是,用户也许希望浏览、下载多个主题,再确定使用哪个。因此,下载被处理成取代下载按钮的进度条会比较合适,而非模态框。因为这样的加载方式不影响用户再浏览其他内容,不会让下载模态中断用户原本的浏览行为。


  以上就是app加载的几种形式和设计方法。看似不起眼的加载页面其实恰是整个app是否用心和精致的点睛之笔。这一点点的等待时间也许会改变整个用户体验。再次总结,以上倡导的几个原则:

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

  2.避免使用模态打断用户

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

  4.注意保持视觉的连贯性

时间: 2024-09-22 10:44:59

从APP加载页面设计要点的相关文章

从app加载页面说开去

都说好的交互设计的评判标准之一是"别让我等",但互联网产品总是受制于实际的网络问题.移动端产品则更为明显,2G.3G环境下加载不够给力,wifi环境也未必每次都是 那么顺利.因此"别让我等"更像是种奢望,我们倒应该思考的是"如何优雅而不令人烦躁的等".与之最直接关联的就是app加载页面的设计. 一个app加载页面,大致分为3类: (一)启动加载页 启动加载是我们打开app的第一眼所看到界面.会给用户留下该产品的第一印象.通常启动加载页设计有几种:

用户体验:从App的加载页面说开去

本文有@百度MUX 团队所撰.都说好的交互设计的评判标准之一是"别让我等",但互联网产品总是受制于实际的网络问题.移动端产品则更为明显,2G.3G环境下加载不够给力,wifi环境也未必每次都是那么顺利.因此"别让我等"更像是种奢望,我们倒应该思考的是"如何优雅而不令人烦躁的等".与之最直接关联的就是App加载页面的设计. 一个app加载页面,大致分为3类: 一.启动加载页 启动加载是我们打开App的第一眼所看到界面.会给用户留下该产品的第一印象.

[WebKit]WebCore之页面加载的设计与实现(二)

从上次学习WebKit加载已经过去了大半年了,终于又有时间理一次加载流程.期望逐步完善细节,最后能有一个系统的总结. 首先可以这样理解WebKit的加载逻辑,涉及三个主要的组件, 其中HTTP stack为各个平台下使用的HTTP协议模块,WebCore Loaders则依据页面加载及解析过程对加载不同HTML Element的控制,Loading Controller则具体实现了资源加载的行为控制: 虽然从WebKit整体结构上这样理解不太严谨的,但单纯站在加载的角度来看,却有利于理解加载流程

使用Yii整合的pjax(pushstate+ajax)实现无刷新加载页面_AJAX相关

Pjax是啥? Pjax = history.pushState + Ajax = history.pushState + Async JS + XML(xhr?) BOM对象history被增强了一波,主要是对历史栈的操作,以前只有 replace , go 之类的,都会跳转并刷新整个页面,现在有了 pushState , replaceState 等等单纯操作历史栈的方法,只是单纯修改历史栈里的内容,没有副作用(页面不会跳转刷新) PJAX效果 通过url可以跟踪ajax的动态加载内容.这种

nodejs实现bigpipe异步加载页面方案_node.js

Bigpipe介绍 Facebook首创的一种减少HTTP请求的,首屏快速加载的的异步加载页面方案.是前端性能优化的一个方向. BigPipe与AJAX的比较 AJAX主要是XMLHttpRequest,前端异步的向服务器请求,获取动态数据添加到网页上.这样的往返请求需要耗费时间,而BigPipe技术并不需要发送XMLHttpRequest请求,这样就节省时间损耗.减少请求带来的另一个好处就是直接减少服务器负载.还有一个不同点就是AJAX请求前服务器在等待.请求后页面在等待.BIGPIPE可以前

加载页面遮挡耗时操作任务页面--第三方开源之AndroidProgressLayout_Android

AndroidProgressLayout实现为界面添加圆形进度条.调用setprogress()方法显示和隐藏进度条 在Android的开发中,往往有这种需求,比如一个耗时的操作,联网获取网络图片.内容,数据库耗时读写等等,在此耗时操作过程中,开发者也许不希望用户再进行其他操作(其他操作可能会引起逻辑混乱),而此时需要给用户一个额外的加载页面遮挡住主逻辑代码的运行,待主页面的耗时操作完成后,自动消失这样加载过度页面,恢复出正常应该显示的页面. 举个实际的例子,如代码使用Android WebV

异步请求动态加载页面

最近现在在做的项目需要前后端分离,并且还有一些国际化的原因,需要动态替换页面上的一些元素,我简单的和前端同学说了一下我的思路,但是前端同学貌似没太明白,于是自己写了个demo. 大致思路是这样的:先从异步请求业务系统中取到业务数据,再将业务数据中相关的Code替换成对应的中英文.实现代码如下: 前台代码: <%@page pageEncoding="UTF-8" contentType="text/html;UTF-8" %> <html>

使用Yii整合的pjax(pushstate+ajax)实现无刷新加载页面

Pjax是啥? Pjax = history.pushState + Ajax = history.pushState + Async JS + XML(xhr?) BOM对象history被增强了一波,主要是对历史栈的操作,以前只有 replace , go 之类的,都会跳转并刷新整个页面,现在有了 pushState , replaceState 等等单纯操作历史栈的方法,只是单纯修改历史栈里的内容,没有副作用(页面不会跳转刷新) PJAX效果 通过url可以跟踪ajax的动态加载内容.这种

解决用jquery load加载页面到div时,不执行页面js的问题

 这篇文章主要介绍了解决用jquery load加载页面到div时,不执行页面js的问题.需要的朋友可以过来参考下,希望对大家有所帮助 jquery代码:    代码如下: $(function(){ $("#test").load("${contextPath}/notepad/toCreate.do"); }    加载 ${contextPath}/notepad/toCreate.do 页面到id为test的div中,加载完成之后,create页面中的js不