浅谈儿童设计移动应用界面的技巧

2016-02-16 23:39 10 1 收藏

给自己一点时间接受自己,爱自己,趁着下午茶的时间来学习图老师推荐的浅谈儿童设计移动应用界面的技巧,过去的都会过去,迎接崭新的开始,释放更美好的自己。

【 tulaoshi.com - 平面设计 】

本文是爱奇艺无线UED负责人晓生 在项目工作中学习到的知识,针对儿童的习惯,从 配色、线条、布局、声音等都作了图文分析,如果有设计师刚好在开发儿童类产品,这篇小结会是不错的学习经验唷。

最近处于项目需要,开始研究儿童产品的界面设计。在此之前,对儿童如何使用移动产品和如何设计知之甚少。优质的移动应用,为儿童带来乐趣的同时可以帮助儿童认知事物。越来越多的儿童使用移动设备,接触虚拟社区的时间甚至早于真实世界,如何设计儿童产品是一个非常值得深入研究的课题。

本文简单地从视觉、界面层级关系和交互等方面分析儿童与成人界面之间的差异性。

颜色

浅谈儿童设计移动应用界面的技巧,PS教程,图老师教程网

细心的朋友会发现儿童家具明显有别于其他家具,最明显的特征就是颜色,这是因为儿童视力到8岁才能发育完全,对色彩的认知也是从简单的三原色开始,儿童偏向于喜欢高纯度和高明度的原色。

浅谈儿童设计移动应用界面的技巧,PS教程,图老师教程网

iPad版奇艺动画片的启动界面以品牌绿为主,配合多种红蓝黄等颜色,整体写实蓝天绿草地的真实意境,营造轻松有趣的氛围。

浅谈儿童设计移动应用界面的技巧,PS教程,图老师教程网

线条

浅谈儿童设计移动应用界面的技巧,PS教程,图老师教程网

浅谈儿童设计移动应用界面的技巧,PS教程,图老师教程网

浅谈儿童设计移动应用界面的技巧,PS教程,图老师教程网

儿童家具一般有保护措施,避免儿童在缺乏自我保护意识的情况下被误伤,界面设计同样如此。避免繁杂的细节,边缘通常使用圆角处理。

字体

浅谈儿童设计移动应用界面的技巧,PS教程,图老师教程网

家长通常担心儿童使用电子设备影响视力,界面中很少使用小号字体,电子书字号通常比成人界面大2-4号。而奇艺动画片以图片和视频为主,儿童通过卡通形象可以轻松识别内容,相比较故事书而已,文字并不是那么重要。

声音

浅谈儿童设计移动应用界面的技巧,PS教程,图老师教程网

个别界面无法避免使用文字时,奇艺动画片增加了声音提示,巧妙地降低儿童的阅读难度。

浅谈儿童设计移动应用界面的技巧,PS教程,图老师教程网

故事书通常有阅读声音,一方面是儿童的识字并不多,另一方面是儿童注意力通常只能集中20分钟左右,有趣的界面辅以声音可以吸引儿童注意力。

随意点击

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/pmsj/)

浅谈儿童设计移动应用界面的技巧,PS教程,图老师教程网

儿童对于界面是否可以操作没有明确的概念,以探索性操作为主,在既定的任务中需要避免儿童随意点击导致界面跳出或者误触发其他操作。奇艺动画片在播放时可以锁屏,退出播放需要较高成本儿童不易学会的长按操作。

浅谈儿童设计移动应用界面的技巧,PS教程,图老师教程网

个别电子书在设计时不是有意地避免这个问题,而是利用儿童的探索性操作触发动画效果,鼓励儿童点击界面中的物体,增加的界面的趣味性,但这种设计的实现成本很高。

浅谈儿童设计移动应用界面的技巧,PS教程,图老师教程网

如不需要儿童点击操作也能正常执行的任务,比如电子书,界面中的按钮通常采用半透明设计,避免吸引儿童去点击。

浅谈儿童设计移动应用界面的技巧,PS教程,图老师教程网

如可能,操作尽量放置界面上方,有效地防止儿童的误点击操作。

布局

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/pmsj/)

浅谈儿童设计移动应用界面的技巧,PS教程,图老师教程网

浅谈儿童设计移动应用界面的技巧,PS教程,图老师教程网

儿童应用的界面设计比其他简单的很多,故事书是线性的按页码播放,奇艺动画片的主要界面只有播放器和选择动画片,层级关系简单。

小结

除了以上的内容,儿童界面设计还有很多细节值得细细推敲,比如:

强化点击反馈

增加进度条的趣味性

过于显眼吸引儿童点击但容易遭家长反感的广告

避免搜索

对于低年龄儿童避免界面的滚动操作

不再一一以界面案例举例说明,这些只是基础知识,最重要是掌握儿童的操作行为规律,更多内容请关注iPad版奇艺动画片的界面设计。

来源:http://www.tulaoshi.com/n/20160216/1576487.html

延伸阅读
标签: Web开发
表单,我相信这是前端开发者工作中最难处理的一个作业了.表单设计中几乎涉及了所有前端各方面的思想与技术.其用户注册页面即为最典型的代表,我要说设计本身没有对与错只有好与坏,就好像人的脸,只有漂亮与不漂亮,不能说某人的脸长错了.当然这其中就会有尺度去衡量,但难就难在这个尺度本身没有标准.好的,我已经为我将要阐述的观点铺好了下去的...
在移动互联网飞速发展的这几年,每年都会有一些新鲜的设计趋势涌现出来。2014年,又有哪些新的设计趋势脱颖而出呢? 百度MUX有一群关注趋势的小伙伴,从大量的APP中去发现设计范式,挖掘设计趋势,预测出2014年在移动产品中会被广泛应用的十大交互设计趋势。希望这些新颖的设计模式,为设计师们带来创新设计灵感,进而为用户带来新鲜有趣的体验...
标签: 网页设计 web
无事看到不错的外文,简单翻译了一下共享出来,希望对大家有用。 当今越来越多的应用程序迁移到web平台上。由于没有平台的限制和安装的要求,SAAS的模式看起来非常有吸引力。Web应用程序的界面设计,其核心就是网页设计,但它的重点主要是在功能方面。要超越桌面应用程序, Web应用程序必须提供简单、直观和即时响应的用户界面,让他...
本期特约:海外美术团队 Lyson 1.浏览器的差别跟用户分辨率差别是我们首先考虑的问题; 2.游戏页面设计,需贴主题、游戏背景等主线关系; 3.布局跟文案很重要; 一、浏览器的差别跟用户分辨率差别是我们首先考虑的问题; 首先在这里想要再次为新人提下,现在霸占互联网最小分辨率的还会是1024用户(特别是中国),加之IE、FF主流浏览器的比例...
在今天的移动APP界面设计中,你可以看到不同创意类型的视觉效果。特别是在Dribbble上面,有很多应用程序的UI概念设计让你惊叹。当然,他们大多只是作为一个概念设计,可能永远也不会成为一个真正的应用程序。 Unlock Concept Slide Concept Portfolio iPhone App App Concept – UI Dailypaper Fold to Refresh ...

经验教程

177

收藏

98
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部