当前内容位置:写给新手的情感化UI设计指南

写给新手的情感化UI设计指南

发布时间:2022-03-07|点击:0

  今天来聊一下情感化的UI设计

  在用户和UI之间建立情感联系是构建用户信任和依赖关系的关键因素,情绪是广泛的、复杂的,它容易受到影响,也很难改变,然而这也是我们今天要思考的事情。

  什么是情感化的UI设计?如何创建一个能够唤起用户情感波动,构建情感纽带的UI界面?这应该就是你的下一个设计项目中应该仔细考虑的事情。

  情感化UI设计

  

情感化UI设计指南


  其实,从电子邮件、短信和社交媒体帐号当中,我们可以窥见情感化UI设计的影子。我们日常交流中,每天发出去的那么多表情符号,可以让别人清楚的了解我们的感受,而这就是情感化UI的一种呈现形式。

  情感化UI是网页设计领域的新圣杯。它是高度可用的界面和内化情感联系的结合,无论是快乐还是悲伤,是愤怒还是愉悦,当用户同一个设计精妙的情感化UI界面交互的时候,就能第一时刻感受到。

  让用户从界面中感受到情感和情绪,总好过什么都感受不到的设计。

  用户在同界面进行连续交互的过程中,逐步的变化可能会牵涉到一系列不同的情感情绪,而这些是你需要考量的。当然,其中最重要的事情在于,真正触发情感的是你的内容与相应的设计,它们也是你所讲述的故事的核心部件。用户所产生的情绪最好不要来源于你的网站或者APP本身——比如不要用户因为糟糕的体验和不可用的模块而感到沮丧。

  正如你所知,人是一种颇为复杂的生物,用户很少能够清晰地判断自己的感受并准确的表达出来,不过好在还有一些理论和方法能够帮你完成这项工作。

  正确的情感

  Huge的用户体验主管SherineKazim曾经设计了一个基于emoji表情符的情感轮,它将我们所熟知的色轮和情绪、emoji表情结合到了一起,并加入了相应的关联。

  如果你想知道色彩是如何影响设计,不妨从这个色轮开始着手了解。

  

情感化UI设计指南


  不过随着时代的变迁,Kazim的这个图中的emoji表情符似乎比色彩更能阐明UI的情感化设计。

  对于Kazim所创造的这个情感化色轮,她是这样说的:

  “仔细看这个情感色轮,你会发现,距离中心越远,情感的强度越弱,但是在进行色彩的设计之时,几乎没人探讨这个问题。我们在做设计的时候,常常会探讨如何传递或者影响基本的情绪,但是我们从未探讨过用户的情绪是否会被强化或者逐步减淡。”

  那么她到底要表达什么呢?很简单,情绪是复杂的,它并不是我们日常所面对的非此即彼的设计模式。许多设计师试图使用红色来营造愤怒和躁动的情绪,但是实际的情况并非如此。

  能够让人产生情感关联的不仅仅是色彩,它和其他的因素、设计元素都有关联,单纯的色彩做不到这一点。

  设计情感

  再仔细看看这个情感化设计的色轮,你会发现它并不单纯是一个设计漂亮的信息图。它帮你梳理出了情感化的UI设计应当遵循的三个过程,而这些过程则指明了你应该给予用户的感受。

  作为情感化UI设计中最引人注意的部分,色彩、图像、表情和正确的语言文字是关键。

  

情感化UI设计指南


  1.色彩搭配

  一直以来,色彩都是大家都已经熟知的情感化UI设计的关键元素。不同的色彩代表不同的情感。给用户带来不一样的心情。这个也是情感化设计当中重要的一个元素。

  同时,色彩是构建一套完整情感关联体系的良好框架。如上图当中的色块区分就是我们分析出的舒服的色彩搭配模型。

  让APP设计师值得注意的是,设计师对于色彩的认知和用户同色彩之间的情感联系是有所差异的。需要特别注意的一点。

  

情感化UI设计指南


  比如:当你看到上面的图片的时候,你是怎样的感受?明亮的色彩能否触发出你的某些情绪么?又或者你刚刚看到色彩的时候,并没有明确的情感变化,直到看到其他的部分?等等。

  所以,要想学会情感化设计,色彩搭配是第一道关卡。

  2.图像与表情

  如今的手机APP设计大部分都有一些卡通,萌系的表情元素或者是APP吉祥物一样的图像。

  比如产品图像的选取:

  

情感化UI设计指南


  比如APP设计当中卡通形象表情的使用:

  

情感化UI设计指南


  比如最近很火的MBE风格的非常形象的表达:

  

情感化UI设计指南


  综合上面三个不同的图像和视觉UI设计,从视觉上来看,使用面部表情来创造你所需要的情感是最好的方法。人的面部所能承载的情绪和情感但对于用户而言更容易判断也更容易被接受,所以这样的图片也有着更为明显的效力。

  

情感化UI设计指南


  这是一个相当有效的情感化UI设计,尤其是当你需要在此基础上进行下一步设计的时候。

  所以,给APP设计师设计的时候,一定要确保设计风格的一致性。但是也有一些特殊情况,来个大反转等等。

  3.文案和内容

  最能打动人心的还是文字。文案和内容在情感化设计当中也是很重要的。

  比如现在比较火的网络词,走心的文案。

  走心的文案背后,一定有一个牛逼的洞察。洞察,这个词就很精妙,就像隔洞窥视,发现消费者心底的秘密。要想成为走心的设计师,就要多读书,就是多阅读相关的书籍和思考总结。

  

情感化UI设计指南


  为什么说文案也是情感化设计的最强的一部分?

  因为用户可以从你的文本内容选取到字体的选择,最终都会对访客产生情感上的影响。

  文案和字体会作为最终的线索,让色彩和图片向着特定的方向,最终固化成为确定的含义,传递出明确的情绪。是的,你需要明确地“阐述”出来。

  语言是柔和是直接,是兴奋还是焦躁,这些情绪都能够为用户所感受到。借助这些文案,你可以同用户进行沟通,结合行为召唤按钮和辅助性的叙述,最终将情绪传递给用户。你能否营造出场景,达到你想要的目标?

  结语

  情感化的UI设计并不是新鲜的内容,但是由于技术的发展,不断有新的技巧和思路涌现,虚拟现实和现实增强以及人工智能的出现,让情感化UI设计的未来有了更多的可能性和疑问,用户可能会越来越追逐“真实”的情感体验,那么作为设计师的你,能做的事情会更多,而所需的思考也必须越来越深入。


【提交需求】让培训机构主动为您解答! 想学: 姓名: 手机: 微信: 城市:
【UI设计】相关培训课程展示
  • 游戏UI进阶培训班
    2022-04-29 课程简介:就业方向本套游戏UI提高课程您学会之后,可以在北京、上海、深圳、广州等大城市谋得一份很好的薪酬,也可以自己创业做游戏UI类项目。课程简介丝路游戏UI创作提高课程...
  • uid高级界面培训班
    2022-03-07 课程简介:uid是什么意思?uid英文名称:user interface designer 中文名称:UI设计师UI设计师从事对软件的人际交互、操作逻辑、界面美观的整体设...
  • UID超级就业培训班【vip班】
    2022-03-07 课程简介:课程简介提供“互动式课堂教学+名师亲自辅导+综合能力培养+推荐工作”学习方案,掌握交互、图标创意、界面设计、适配和包装,了解 Axure交互思维、用户体验知识,...
  • 入门UI设计培训班
    2022-03-07 课程简介:今天给大家分享一个PS制作金属字效果的案例教程,主要是运用图层样式来实现,在PS中,图层样式一个非常强大的功能,这个功能不仅能够制作图标,还可以对文字添加各种不...
  • UI设计师全能培训班
    2022-02-28 课程简介:UI设计是一个广义的称呼,UI设计包含广告设计、界面设计、网站设计、交互设计、动效设计等多个就业方向,丝路教育UI设计培训课程根据的学院的职业规划,为学员定制了...
  • UI设计培训班
    2021-12-28 课程简介:课程简介提供“互动式课堂教学+名师亲自辅导+综合能力培养+推荐工作”学习方案,掌握交互、图标创意、界面设计、适配和包装,了解 Axure交互思维、用户体验知识,...
  • UI设计能力进阶培训班
    2021-12-13 课程简介:丝路独创:以就业为导向企业实训教学丝路企业实训教学,归根到底是“以就业为导向”,打造的从技能培养、职业素质训练、项目实训到人才输送的一体化服务体系。丝路自成立以...
  • UI设计零基础培训
    2021-12-13 课程简介:近年来全国UI设计师平均薪酬9584元,年薪10万以上的UI设计师占比59.6%。轻松步入白领行列,拉勾网,智联招聘等其他招聘网站。同时,国家信息产业部颁布的调...
  • 提交报名
    想学:
    姓名:
    手机:
    微信:
    城市: