从app加载页面说开去

标签: 交互设计 | 发表时间:2012-12-10 11:54 | 作者:wangyi
出处:http://mux.baidu.com

都说好的交互设计的评判标准之一是“别让我等”,但互联网产品总是受制于实际的网络问题。移动端产品则更为明显,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.注意保持视觉的连贯性





转载请注明出自”百度MUX”

相关 [app 加载 页面] 推荐:

从app加载页面说开去

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

App加载(二) 当前窗口进入新窗口解析

- Draven - 所有文章 - UCD大社区
- 关于首次使用以及新开App载入默认页面查看 《App加载(一) App载入默认页面交互》. 这里我们聊聊App从当前页进入新页面交互(如列表页进入详情页面). 这种方式沿用了传统互联网的页面载入方式,也很常用. 适用:B页信息量大,如长篇图文混排信息页. 建议:1).进入B页时不要使用空白页面,采用预置的格式化信息(图片的占位符,信息分隔样式等);2).带入A页面已有的部分信息,3).对B页的信息进行分段载入.

Android 中通过 URI 实现 Web 页面调用本地 App

- - RincLiu.com
HTML 5 和本地 App 各有所长,现在公司的项目中也大量采用 HTML 5 做活动页面,这样本地代码和 HTML 5 的交互就是必须的. 说到 Android 端 Java 代码和 Web 端 HTML / JS 代码的交互,你可能最先想到的就是 WebView 的这两个方法:. 前者可以实现 native 代码直接执行 JS 代码,而后者可以将 native 代码实现的接口暴露给 Web 页面,这样 Web 页面可以像调用普通 JS function 一样调用这个 native 接口.

玩转HTML5移动APP页面(优化篇)

- - 设计达人
承接上文《 玩转HTML5移动APP页面(动效篇)》,上次说的是让页面动起来的一些小技巧. 而页面动起来的根基是功能可用的页面,因此有必要分享一些优化细节的技巧和方向,熟悉掌握一些方法论还是会对页面开发大大提高效率的,并且也能防止疏忽缺漏. 涉及的动画十分多,用的元素也十分多,请务必使用雪碧图(Sprite).

HTML5的页面资源预加载技术(Link prefetch)加速页面加载

- - HTML5资源教程
不管是浏览器的开发者还是普通web应用的开发者,他们都在做一个共同的努力:让Web浏览有更快的速度感觉. 有很多已知的技术都可以让你的网站速度变得更快:使用CSS sprites,使用图片优化工具,使用.htaccess设置页面头信息和缓存时间,JavaScript压缩,使用CDN等. 我曾经介绍过本站上使用的一些速度优化技术.

管理好页面图片,减少页面加载时http连接,优化页面

- - ITeye博客
浏览器渲染页面的时候,遇到图片标签或者css中的背景图片设置,先会到本地缓存中寻找是否已经下载了这张图片,如果已经下载过了就直接从缓存中加载;否则会到图片指定的路径下载到本地缓存. 而且这种下载是阻塞式的(部分浏览器内核已经实现异步加载图片. 也就是说在下载这些图片的时候,页面渲染处于暂停状态,必须等到图片下载完成了再继续渲染.

[转]浏览器的加载与页面性能优化

- Allen - linux大棚-roclinux.cn
本原创文章属于《Linux大棚》博客,博客地址为http://roclinux.cn. 为了防止某些网站的恶性转载,特在每篇文章前加入此信息,还望读者体谅. 文章部分转自“百度泛用户体验平台”,本文地址为:http://www.baiduux.com/blog/2011/02/15/browser-loading/.

浏览器的加载与页面性能优化

- 彦强 - 百度泛用户体验
本文将探讨浏览器渲染的loading过程,主要有2个目的:. 了解浏览器在loading过程中的实现细节,具体都做了什么. 研究如何根据浏览器的实现原理进行优化,提升页面响应速度. 由于loading和parsing是相互交织、错综复杂的,这里面有大量的知识点,为了避免过于发散本文将不会对每个细节都深入研究,而是将重点放在开发中容易控制的部分(Web前端和Web Server),同时由于浏览器种类繁多且不同版本间差距很大,本文将侧重一些较新的浏览器特性.

名站技术分析 — facebook奇特的页面加载技术

- Hui Hui - 视野
没事使用代理上了下facebook,注册进入个人首页后,习惯性的查看源代码,发现了1个很有意思的现象,首页内容不少,但源代码中HTML的代码却很少,但去多出了很多段的javascript代码,这些js代码都是用于动态生成html的,facebook为什么需要这样做了. 先看看首页查看的源代码,因为源代码比较大,所以把图片压缩了下,可能看不太清楚,只需要注意图中红色是html代码,其余黑压压一片的就全部是JS代码:.

浏览器的加载与页面性能优化

- - 可咔酷 | 网络杂货铺
本文将探讨浏览器渲染的loading过程,主要有2个目的:. 了解浏览器在loading过程中的实现细节,具体都做了什么. 研究如何根据浏览器的实现原理进行优化,提升页面响应速度. 由于loading和parsing是相互交织、错综复杂的,这里面有大量的知识点,为了避免过于发散本文将不会对每个细节都深入研究,而是将重点放在开发中容易控制的部分(Web前端和Web Server),同时由于浏览器种类繁多且不同版本间差距很大,本文将侧重一些较新的浏览器特性.