浅谈app加载页面设计.pdf

浅谈app 加载页面设计 都说好的交互设计的评判标准之一是 别让我等“ ”，但互联网产品总是受制于实际的网络问题。移动 端产品则更为明显， 2G 、3G 环境下加载不够给力， wifi 环境也未必每次都是那么顺利。因此 别让“ 我等 ”更像是种奢望，我们倒应该思考的是 如何优雅而不令人烦躁的等“ ”。与之最直接关联的就 是app 加载页面的设计。 一个 app 加载页面，大致分为 3类： (一 )启动加载页 启动加载是我们打开 app 的第一眼所看到界面。会给用户留下该产品的第一印象。 通常启动加载页设计有几种： 1 、固定的加载页 Logo 、slogan 、产品主色、版本号、出品团队，这是初级启动页面的基本构成元素，设计者的目的 就是最直接快速的向用户传达产品形象，这也是让用户最直接了解产品的手段之一。但也因为实现 成本低，且样式固定简单，久而久之容易审美疲劳。于是加载页开始升级。 这里要提到让加载页不那么孤立、突兀的方法： 。例如 weiconote 的加载页背景和它的主界面背景一致，视觉上达到了和谐的过度。 。通过淡出或开门等转场效果，让加载页面和内容页完美的过渡。例如豆瓣电影和天猫客户端。 2 、会变的加载页 当一尘不变的加载页开始寻求出路，结果会是什么？对，会变的加载页。但是任何变化总得有迹 可循，让用户得以理解。目前有 2种维度： 在不同的节日，启动加载页都会围绕节日 产品进行设计。在突出产品形象的同时，传达节日信息 ，是情感化设计的一个范例。例如掌上百度 symbian 。 另外一个有趣的例子是有些应用的启动页面，在用户生日时埋下的彩蛋：这种都是转移用户注意力 的手段，让用户不再沉浸在等待中，而是通过这段等待时间传达其他有效信息，让用户不再烦躁。 当app 版本升级后，启动加载页也随之升级，可根据当前版本的主题、特性或新增功能，设计符合 该版本的加载页面。也增强了用户对新版本、新功能的认知度。 (上左新浪微博夏日版 上右新浪微博新年版 下左 zaker 嵌入游戏动漫版块广告 ) 用app 的内容页作为启动页面的内容，从启动加载页到加载完成的首页，版式内容几乎看不出差别。 这样的启动页，让用户提前进入主要界面，强化用户对主界面的印象。也不容易造成很大的视觉跳 跃感。但也存在问题，长得像主界面的加载页会给用户造成可用的假象，但如果加载的时间过长， 点击伪主页如果无响应，也许会让用户恼火。 在游戏 app 中，这种方式较为常见，在 loading 的过程中，用户看到是一段动态的 flash 。有时也有可 能配以相关的游戏音乐。例如游戏 subway surf 。这种方式虽然最有富媒体效果，但同时却也因为比 较消耗资源。有时候因为加载负担太重，甚至会造成画面不流畅。因此需谨慎选择。 (二 )内容加载页 目前较常见的内容加载页会用加载模态框去表示当前正在加载中，实在是不怎么美观，且加载前和 加载后的页面关联性很弱。这种体验实在是很令人头痛和不悦。 那有没有内容加载的好体验？ 几种优化手段： 例如 line 的通知加载。加载进程在加载的通知项上进行，这时候不妨碍用户浏览上下的内容。 这种手法也就是为了尽可能多的在加载过程中告知用户有效信息， 你稍后即将看到的页面会是什“ 么样 ”“会有哪些内容 ”，让用户提前有个预期，也让用户有了等待的欲望。 这里的内容有 2种。可以是提前预设好的，例如 next day 里的头图，再没加载出来前都用一直可爱的 兔子图替代。另一种是，显示上次浏览留下的内容，像最近更新后的 path ，加载时，用户可以查看 上次加载成功的内容，而且很巧妙的把加载中的图片黑白虚化处理。 (三 )下载、应用的加载页 另一个常见的加载是下载 /应用时的加载页面。下载和应用的过程可以看做是一个连贯的过程。而不 要想象成两个独立的模态框。 在cardmon 这个应用中，下载和应用的过程就被包装成了一个连续而精致的过程。 设计者找到了 card 和下载之间的联系，运用云端向信封连续不断发送卡片的动效，再加上下载