• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 从这4个角度,做出情感化设计的产品

从这4个角度,做出情感化设计的产品

作者:融360-六环 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含产品设计,情感化设计,经验分享等相关知识,融360-六环希望在学习及工作中可以帮助到您

情感是我们生活中不可割舍的元素,UI设计师也开始在设计时添加「情感化元素」,但是我们忽略掉了一个最基本的问题,为什么要做情感化设计?产品能在情感化设计中得到什么?

解决问题之前,我们需要了解一下情感化设计的概念。

情感化设计是基于产品的功能性和易用性后,追求的更高层次的目标。我们只有先了解产品的逻辑,全面理解分析后,才能做出不影响产品功能下的情感化设计。

早在2002年,美国认知心理学家Donald Norman就提出了这一概念,他将产品特质划分为功能性、有用性、易用性和愉悦性四个层面,由低到高,而情感化设计则处于顶端位置。

好了,现在大家已经有了一个初步的认知,下面我来为大家解答刚才的问题。

一. 向用户传递情感心流

心流,也就是沉浸式体验。E Sherman在《Flow:the psychology of optimal experience》中提到了沉浸式体验,沉浸就是让人专注在当前的目标(由设计者营造)情境下感到愉悦和满足,产生共鸣,忘记真实世界的情境。

设计师会通过画面、氛围、图形、文案、动效和音乐等方式,以营造出符合当前环境的情景,帮助用户快速融入其中。

沉浸式体验最常见的方式是向用户讲故事。故事是处理信息的一种方式,将某些操作、信息通过故事的方法传递给用户,让用户产生相同的情感共鸣,进而被吸引,对它的印象更加深刻。

我们以Sortie En Mer为例。Sortie En Mer是一个模拟溺水的网站,是为Guy Gotton宣传航海服的,游戏宗旨是教育人们出海一定要穿救生衣。在交互上与其它同类网站不同,这一部分是以第一人称的角度来简述故事和经验。

故事很简单,主人公在航海的过程中从船上落下后挣扎到死亡的过程,加上音乐的烘托,会感到更加绝望。画面由明亮到暗沉,也暗喻来主人公体力不支。

同类主题的网站,大多只单纯的展示服装的特性和防水材料相关的技术数据。Sortie En Mer在普通的交互逻辑上进行了情感化设计,将一个海上发生意外的故事,通过诉说传递给用户,让用户有身临其境的参与感,营造融入其中的感觉。

二. 塑造友好的形象

通常我们认为产品是冷冰冰的,但是优秀的产品,并不是冷冰冰的毫无情感,它仿佛就是一个活生生的生命,具有个性,人们更愿意与有情感有温度的生命交朋友。

那怎样才能做有温度的朋友呢?我们可以通过下面两个案例来分析。

1. 融360

现在很多产品都有自己的吉祥物,通过吉祥物去提升产品温度。那么吉祥物是基于什么设计出来的呢?我们以融360的吉祥物设计为例。

首先,我们先分析一下其产品的构成:融360是一款移动金融智选平台(核心定位),用户大都为有贷款、办理信用卡需求的中青年群体(使用人群),交互和视觉偏向于简单,具有普适性。

在进行产品的情感化设计时,我们应该从产品特质和用户本身出发,在研究的过程中,这两者间有什么关系,是我们需要深入探讨的问题。这种情感化设计是产品特征的一个展现,需要与其「性格、气质、腔调」相符。

A. 吉祥物以人形宝宝的样子出现,将产品拟人化,消除了人机间的冰冷交互,帮助用户和产品间建立友好的联系;

B. 它为什么会是一只牛?因为金融总是与牛相伴,华尔街金融街靠牛守护,用户也会get到这点。

C. 牛大宝可靠、聪明,分别对应着产品的安全感和智能性,与产品性格相符。

那具体在App中是怎样应用的呢?

情绪是情感有意识的体验,它有目标性,通常也有原因,比如当用户在输入信息时,会产生烦躁心理,为了降低这种反感,我们用一个有情绪感的icon来缓解。或者当用户在退出时,用一个卖萌的表情去挽留用户。

情感化设计可以加强用户对产品气质的定位。就是由于牛大宝与产品极其相似,更能够被大众所接受,才一跃成为了「金融网红」。

2. same

Same是一款针对年轻人的、去中心化的社交平台,类似于豆瓣、微博等,但又不完全相同。因为用户人群的年轻化,所以整体以轻快、简洁为主。

我真的超级喜欢Same的小人icon,每一个icon都感觉「活了」。在加入情感化设计的同时,也考虑到了核心元素在每个环节的延展性,进一步加强了用户对产品性格的认知。

当然,same的情感化设计并不仅体现在icon上,还体现在各种地方。比如说话题、banner设计。

缺省页设计。

向用户数树立友好的形象,不单指icon多么精美、界面样式多么流行、配色多么好看。而是通过情感元素所传达出来的信息和气质,与整个视觉设计保持一致,且区别于竞品,可以帮助用户对产品有正面认知的设计。

所以,首先要想好进行情感化设计是想传达什么,产品的立场、强调、气质和形象分别是什么。简单的说,就是你希望用户怎样去认知你的产品。

三. 成为理解用户的朋友

从产品的细节出发,悉心观察,换位思考,满足各形各色的用户需求和偏好。为他们带来愉悦的体验,帮他们解决问题,帮他们提高效率,甚至帮了解他们的一切,成为他们最可靠的小伙伴。

隐藏的细节设计是营造惊喜,和体现产品设计逼格的地方。在产品某些点上进行微交互和动画设计,可以为用户带来较高的愉悦感。

大家有没有厌倦千篇一律的、点了只会傻乎乎变色的「赞」?而Twitter是怎么做的呢?在普通的赞的基础上添加了微交互,用户在点赞后会得到一个动态的情感反馈,愉悦感会成倍的增加。

情感化的细节设计是为了创造出一个有趣的瞬间,并可以把用户的注意力吸引到正确的位置,让用户在不知不觉间养成对产品的使用习惯,也可以培养用户粘性。用户在尝试过之后,对于这种交互会有「哎呦,不错哦」的感觉。

设计细节,并不是单纯的从UI角度去说它好不好看,而是从分析其是否可以在大的视觉体系下,将情感融入其中,辅助塑造产品的性格与定位。

将产品的细节融入情感,一是赋予了产品本身的调性和趣味;二是充分体现产品的定位和特点。它的发生并非让用户刻意的体会些什么,而是希望用户可以感知到它本来就是产品里的一部分,从而体现产品的价值。

总结

现在,产品类型趋近,情感化设计也在趋于相同。大家应该根据具体产品性质的不同,具体问题具体分析,避免随波逐流。

为了让产品功能与用户情感的承接,更好的满足人们情感的诉求,我们应该在情感化设计上持续探索与挖掘,并为之努力。

欢迎关注微信公众号

您可能想查找下面的文章:

  • 网站产品设计参考的几条原则
  • 该有的视觉元素全都有,设计不好到底差在哪里?
  • 为什么几个人的小团队更加高效更加靠谱?
  • 在做产品设计的时候,预期和现实到底有多大的差别?
  • 设计出了错?很有可能是你没有问对问题
  • 怎么做私单才能又快又赚钱?来看老司机的私藏流程!
  • 想成为互联网设计师?先来看这篇超全面的介绍!
  • 为什么不要再问用户「你们到底想要什么」?
  • 这10个不好用的微信设计,有哪些深层次的产品逻辑?
  • 基础小科普!浅谈「列表视图」与「网格视图」的用法

相关文章

  • 2017-08-06在新窗口打开的跳转菜单 window.open使用介绍
  • 2018-08-23新手科普文!每个设计师都该懂的栅格系统基础六要素
  • 2018-08-23想成为UX 设计师,该学习哪些很重要的技巧?
  • 2017-08-06怎么设计响应式WEB?响应式WEB设计的优缺点
  • 2018-08-23版式设计中的文字层级怎么学?来看高手的实例演练!
  • 2017-08-06使用Photoshop 制作网页线框图简单实用
  • 2018-08-23AI+PS教程!教你7步做出好看的渐变波纹元素
  • 2018-08-23想引导用户?来学习UX中的承诺和行为一致性原则
  • 2017-08-06Web前端开发中找错的基本思路
  • 2018-08-23涨姿势!全球顶尖的设计团队都有哪些设计原则?

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 超实用!比较重要的设计方法论大整理
    • 那些很熟悉但又叫不出名字的设计法则:诱饵效应
    • 刚刚过去的6月,网页设计师们特别青睐这3种设计趋势
    • 腾讯干货!虚拟To B支付设计研究之设计思考篇
    • 网站界面设计中为网站创建风格指南的方法(图文)
    • 超全面!如何做好应用程序中的反馈设计?
    • AI教程!教你临摹超酷炫的平构人像插画
    • 网站的视觉设计路径应顺应用户习惯
    • 个性化创意鲜明的网站设计实例(30个)
    • 评论回复弹出遮罩效果实现思路兼容ie 8/chrome/firefox

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有