网站首页 > 界面表现> 文章内容

浅谈app加载页面设计

※发布时间:2018-4-27 22:44:29   ※发布作者:habao   ※出自何处: 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  人人都是产品经理(是以产品经理、运营为核心的学习、交流、分享平台,集、培训、招聘、社群为一体,全方位服务产品人和运营人,成立8年举办在线+期,线+场,产品经理大会、运营大会20+场,覆盖北上海广深杭成都等15个城市,在行业有较高的影响力和知名度。平台聚集了众多BAT美团京东滴滴360小米网易等知名互联网公司产品总监和运营总监,他们在这里分享知识、招聘人才,与你一起成长。

  

相关阅读
  • 没有资料
重庆学习网zslpsh,0755深圳房产人才招聘网,拾年网90后,anedc股票,最新电影下载淘娱淘乐,重庆中学生网高考,重庆中学生网高考,学习重庆方言网,重庆中学生学习方法,重庆俗语网,中学生网zslpsh,0755深圳交友网,重庆初中生,贵州重庆方言网,025新闻网,西南重庆方言歌曲,025南京交友网,重庆农家乐美女,观赏蟹种类zadull,云南重庆方言网,重庆中学学习网,028成都交友网,推广taoyutaol,西南四川方言网,观赏龟论坛zadull,四川重庆方言网,022天津交友网,重庆中学生网家长,鹦鹉鱼zadull,重庆俗语,电影淘娱淘乐,taoyutaole娱乐,华夏视讯网,0755深圳旅游招聘,昆明重庆方言网,淘娱淘乐影视,www.00game.net,观赏鱼zadul,重庆高考zslpsh,重庆中学生网高考,027房产招聘网,坝坝舞wagcw,西南重庆方言网,贵州重庆方言网,重庆言子儿网,热带鱼zadull,重庆高考zslpsh,0755深圳旅游招聘网,淘娱淘乐影视网,0571.361.cm,重庆方言学习网,028成都新闻,异形观赏鱼种类,影视网淘娱淘乐,最新电影下载淘娱淘乐,0773桂林论坛,拾年网80后动画片,观赏蟹论坛zadull,观赏龟繁殖教程,重庆一中zslpsh,重庆俗语网,广场舞wagcw,观赏虾的种类zadull,观赏鱼观赏虾观赏龟,西南方言网,观赏鱼之家论坛zadull,战争前线辅助00game,西南重庆方言小说,重庆中小学zslpsh,推广taoyutaol,战争前线论坛00game,0871交友网,025南京新闻网,重庆言子儿网站,娱乐taoyutaole,022天津交友网,025新闻网,重庆中学生网学习,022天津交友网,重庆方言歌网,www.120.cm健康网,anedc股票,重庆初中生