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整