UI设计中的插画与情感化设计

UI设计中的插画与情感化设计 说到情感化设计相信大家或多或少都有些了解了。 那么我们该怎么将它运用到UI设计中来呢 要了解上面的问题首先我们得清楚什么是情感 心理学大辞典中认为“情感是人对客观事物是否满足自己的需 要而产生的态度体验”。情感在人类的日常生活中扮演着极其重要的角色， 它能帮助评价处 境的好坏，安全或危险。 那么什么是情感化设计呢 唐纳德诺曼在设计心理学3-情感化设计中将他分为三个层次， 以及其区产品之间的关联 本能层次是先于意识与思维的，它是外观要素和第一印象形成的基础, 更多强调的是产品给人的初步印象，着重与产品的外观、触感 行为层次与产品的使用及体验相关，包括功能、性能及可用性。 反思层次则是意识和更高级的感觉、情绪及知觉；也只有这个层次才 能体验思想和情感的完全交融。在更低的本能层次和行为层次，仅仅包含 感情，没有诠释或意识。诠释、理解和推理来自反思层次。而在这三个层 次里，反思层次最容易随着文化、经验、教育和个体差异的不同而变化， 并且超越了其他层次。 因此对于同一件事有的人喜欢有的人却讨厌。 本次文章重点介绍的其实是情感化设计中的一小部分一一插画设计 在情感化设计中的作用，但是为了便与理解，这里还是简单的解释一下 这三个行 为层次， 以及在app产品中的对应关系 本能设计和第一反应有关 其最好的情况是，当人们第一眼看到设计，就禁不住叫道“我想要”。 你是否有因为看到一款关于app截图的结束，就立马跑去appstore下载 你是否因为一款app的视觉设计非常美观，即使不用也没有卸载呢。就是 这个道理啦 唐纳德说具备视觉和平面艺术家以及工艺工程师的技能，才能进行 有效的本 能层次设计。（这里指的是工业产品设计） 那么作为ui设计师呢 当然也需要视觉和平面艺术家的技能，不过说的通俗一点即icon绘 制、界面 排版、插画绘制、颜色搭配、动效等等 行为设计和使用有关 这时候外观就不那么重要了，唯一重要的是功能的实现。如果这个功 能不吸引 人，那么谁会在意他多棒呢 这是那些注重使用性的实践主义者所保持的设计观点。 优秀的行为设计有四个要素功能、易理解性、易用性和感受。也就 是说了除了产品的功能痛点之外，其界面展示、交互方式、用户体验也是 十分重要的。 良好的行为层次设计的第一步，就是了解顾客如何使用产品。 而产品设计的真正挑战在于“最终了解用户那些未被满足和未明述的 需求” 不过小黄车的开锁和还车体验实在是有点糟糕 反思层次设计涵盖诸多领域，他与信息、文化以及 产品的含义和用途息息相关 你有时候会不会因为自己的喜好而选择某一款 app或者因为某些事情卸载不再使用某款app这些都是属于反思 型的决定。唐纳德说产品不仅是所有功能的集合，他们真正的价值可以 是满足人们的情感需求，而其中最重要的需求 就是建立自我形象与社会地位。 反思层次的活动常常决定着一个人对某件产品的整体印象。当你在该 层次上回想这件产品，思及它的所有魅力和使用经历时，许多因素将一起 作用；同时，它在某一方面的缺陷可能被另一面的有点所掩盖。在整体评 价中，一个小缺点 可能被忽略（或放大），完全打破它原本应占的比重。 目前app store上有大量的相近或者功能类似的app,那么我们最终选 择使用的是同类型中的哪种产品，反思层次气到了决定的作用，他包含并 超越了前 两个层次。 随着不停的迭（hu）代（chao）,支付宝和微信也可以说是越来越像， 最主要量大功能则是支付与社交；但是并不是他们给了我们什么功能，我 们就会去用。我们会去权衡利弊，哪个安全性高哪个适宜理财哪个方 便社交哪个 方便朋友间aa聚餐或者转账等等。 知乎与百度知道，表面上看同为问答社区，在百度巨头的压力之下， 为什么现 在知乎能够做的这么火真如前面所说“产品不仅是所有功能的集 合，他们真正的价值可以是满足人们的情感需求，而其中最重要的需求就 是建立自我形象与社会地位。”自从接触了知乎，我们发现原来世界上有 这么多我们不知道的事情、原来这部电影还能这么解读、我终于知道老婆 为什么那么爱生气了等等等；同时也给了一些大v答主们被崇拜被夸张的 虚荣心（人都会有虚荣心，此处非贬义）。当然并不是说“百度问答”就 完全不好，当我单纯的只想知道某个问题的答案时，我可能会选择百度知 道；可是当我还想知道一些延伸的内容时，“知 乎”无疑时更好的选择。这就是反思层次对我们的影响。 音乐市场的竞争也是十分激烈，我们可以看到无论是外观还是功能其 实大家都差不多，但是他们的用户量和用户群却又不同。例如我喜欢的 歌曲版权归属、整个平台的用户氛围、平台的逼格属性等等；用户通过选 择自己喜欢的产品建立自我形象，甚至用某一个产品的用户还是鄙视用其 他产品的用户，这些都是 反思层次所做的决定。 这边我们可以看到三个登录页在本能层次都很漂亮，可是行为层次上, 图 1则考虑的比较少，图二图三都加入了第三方登录及注册等功能，体 验更好；而图三更是加入了 “Skip”以及一张高清的背景图片，而这正是 在反思层次所做的决定，考虑到用户是否可以先浏览产品再决定是否注册, 已经一张优美的背景图 和slogan相结合给用户描述一个简单美丽的小场景，引起情感共鸣。 好了说了这么多我们正式进入主题，插画设计在情感化设计中的运用; 以下将会通过不同的场景来分析其意义及制作思路。 01引导页 图片来自老东家同事（马师傅） 现在几乎大部分app的启动页都会采取插画的形式，将产品的内容、 功能、或者是升级的亮点表现出来。人们对于接受陌生事物过程中会产生 紧张与不安，引导页的作用就是短时间内让用户对这款产品有一个大概的 了解，缓解用户的焦虑与不安，让用户更快的进入使用环境。而且人们都 是视觉动物，好看的插画更会获得用户本能的好感。所以我们在制作引导 页时应该紧扣产品功能的痛点，表达时需要易于理解、符合产品调性且风 格统一，可以通过一个个小场景、 小故事、或者元素等方向来绘制插画。 02启动页 一款成熟的产品，肯定少不了百变启动页啦。每当节假日或者一些特 殊的活动 时，都可以欣赏到各大厂赏心悦目的启动页。既是对外宣传，也是在 用户心中建立品牌形象，拉近与用户的距离。启动页只有短短的几秒钟， 所以需要画面能足够的吸引眼球以及获得用户情感上的共鸣。这时插画则 是一个绝佳的选择了，丰富的色彩、精致有趣的插画比真实的场景多了一 层想象的空间，勾起用户的某段回忆或者感受，且更加亲切易于接受。绘 制此类插画时需要考虑活动或节日面向的人群、产品调性、并且需要紧扣 主题元素，让人能够在短暂的世 界内理解其传单的含义。 03空态页面 当用户刚刚使用 app不久时，肯定会遇到很多还未涉及的功能。可是空空的页面对于 用户来说过于冷漠及不友好，这时候则需要去引导用户或者说明状况。而 用户对于图片的接受程度明显高于文字，通过简单的插画直接表达此页面 目前的状态，或者用户去使用某项功能，让用户易于接受和理解。此类插 画应该简单易懂，与页面内容和文案相对应，并且不能和app整