浅谈app加载页面设计.pdfVIP

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