甜过初恋的感觉！搞定游戏视觉包装中的"情感化设计"

编者按：一见钟情可以靠脸，但想暖到人心窝里头还是得用心，今天腾讯的同学抛开表面的视觉功夫，聊聊如何利用情感化设计真正打动用户，这也是今年非常火的设计趋势，强烈推荐同学们学起来。

在目前的互联网设计中，情感化设计越来越多被人所提及。随着科学技术的发展,使得用户对产品满足人的心理需求方面提出了更高的要求，在目前的社会发展环境下，设计师也已经不能仅仅只是沉醉在酷炫的视觉效果，更多的要去思考怎样通过设计来拉近产品与人们的距离，让产品触及到用户的内心，使他产生情感的变化，从而增强用户对产品的粘性。

本文多为优秀案例剖析，具体的方法还得看：

• 基础知识补充：《推荐：浅谈情感化设计》
• 色彩帮你忙：《用户对设计没印象？教你如何创建情感联系》

首先我们来看几个例子：

这个是我们访问页面时，时常会见到的404页面。

设计师通过情感化的图形设计以及充满人文关怀和社会责任的设计让原本冷冰冰的服务器反馈变得充满人情味。

看了两个还没有灵感的同学，来这儿汲到饱：《想要不闹心的404界面？这组优秀范例能帮到你》

另外一个比较有代表性的案例应该就是淘宝时光机和易迅独家记忆了。它们从用户长期使用过程中沉淀的历史数据中，发掘出触动用户内心的故事。

下面再看看情感化设计在游戏游戏视觉包装领域中的尝试；

QQ游戏品牌站：

设计师在QQ游戏十年品牌站的设计中，以在这十年的沉淀中，玩家的数据资源，以一种轻松、幽默的方式进行展示，通过插画的视觉表现手段，触发用户的情感共鸣。在无形中传递了QQ游戏“无处不在的快乐”的品牌理念。

通过上面的案例我们可以看出情感化设计的价值，那何为情感化设计呢？

情感化的设计只是一种创意工具，表达和发挥设计师的思想和设计目的,在《情感化设计》（PDF 微盘下载，喜欢的同学请购买正版呦）一书中从知觉心理学的角度揭示了人的本性3个特征层次：即本能的、行为的、反思的，提出了情感和情绪对于日常生活做决策的重要性。

编者注：能在不同的场景下引导用户的情绪是一门非常了不起的学问，来自大众点评的顶尖案例：《重磅推荐！如何设计传单才不会被人随手扔掉？》

笔者在这次的御龙在天的周年庆的设计中也进行了情感化设计的尝试：从本能的设计，行为设计，反思设计3个层面出发，帮助玩家拾御龙在天中的点滴。回忆在游戏中的成就与失败，欢乐与泪水，促发用户的情感反思以及加深对游戏产品的粘性。

1\本能的设计关注于外形的视觉效果。可以结合游戏中熟悉的场景，角色，道具等图形所呈现的视觉效果来引起玩家的共鸣。

通过插画重现御龙玩家每日要完成的一些任务以及事件。例如每日出征国战和斩杀敌军，以及偷取经书等任务和事件。

2、行为的设计。

即通过网站体验的优化设计。让玩家可以在体验获得乐趣。

网站整体设计成一条路连接着各种场景和事件。在经过某个场景会触发其中的互动效果。

例如：

3、反思的设计。通过把整个网站把玩家从游戏中经历的事件一一通过数据和图形表现。呼起玩家的回忆。引发玩家共鸣。

玩家在游戏中驰骋沙场。

在游戏中结交兄弟和获得爱情。

以及在游戏中成就大业。

总结：

在平常的设计中，设计师所承担并不是单单把信息被动冷冰冰的展现给玩家。更应该用好“情感化”这张牌。让玩家在“情”与“景”的双重冲击下。完成对玩家的情感植入。增强对产品的粘性。

情感化设计可以广泛运用到各个方面，QQ新出的小红点就是一个成功案例，非常推荐同学们学习：《让创意落地！QQ手机版5.0“一键下班”设计小结》

【优设本月最受欢迎好文人气榜】

Top 1：食色性也。何况.....还能涨姿势？！
《关起门来涨姿势！如何从AV封面中学习平面设计？》

Top 2：真正的干货，简直是配色版的浓缩高汤！
《色彩搭配速成！3个实用方法帮你全面搞定配色》

Top 3：一口气理解设计与营销，大牛实战案例！
《重磅推荐！如何设计传单才不会被人随手扔掉？》

原文地址：tgideas.qq
作者：阿斌

【优设网 原创文章 投稿邮箱：2650232288@qq.com】

================关于优设网================
"优设网uisdc.com"是国内人气最高的网页设计师学习平台，专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书：史上最全的设计师图书导航：http://hao.uisdc.com/book/。
设计微博：拥有粉丝量87万的人气微博@优秀网页设计 ，欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航：全球顶尖设计网站推荐，设计师必备导航：http://hao.uisdc.com
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的"福利"吗？
添加 优秀网页设计 微信号：【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加：