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

从这3个层面出发,让你的产品实现人格化

作者:Slim许洋 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含产品设计,情感化设计,用户体验,经验分享等相关知识,Slim许洋希望在学习及工作中可以帮助到您

开始正文前先分享几个生活细节:

  • 场景一,你正喝着饮料唱着歌,走着走着自己瞎了眼被桌角绊了一下,饮料撒一地,你恼羞成怒对着桌腿就是一顿踹,并问候了桌腿妈妈好。
  • 场景二,你下班回到家,家里的肥猫懒洋洋对着你「喵」了一声,意思可能是一句「***」,但你的心化了似的把它抱起来说「哎呀,知道宝宝想妈妈了,妈妈也想你」。

两个例子有个共同点:我们不自觉把故事对象拟人化了。这是为什么?

人类总是想把事物拟人化,把人类的情感和信仰投射到所有事物上。——唐纳德·诺曼《设计心理学》

原来这是源自人类自我倾向机制,往大了说,世界文学就是人学的研究,任何艺术都是反映人的思想品味。

无处不在的品牌人格化

所以在商业世界里也是利用这个心理机制,所以会有品牌logo,slogan,产品包装,形象代言人,吉祥物形象等,所有这些都一致的为自家品牌传达出一个富有个性的正面人格形象,并存在于用户心中(当然明星代言人还有着天然流量优势,在此就不展开讨论)。比如看到娃哈哈纯净水就想到王力宏,看到阿里巴巴就想到马云等等,马爸爸越发高端的商业教父形象某种意义上也提升了阿里品牌在用户心中的人格。

产品同样需要人格

品牌如此,产品亦如此,也就是产品人格化。为什么要赋予产品人格?当下以及未来,人类需求已然进入马斯洛需求第二层级:情感需求。人机交互即人机交流,冰冷机器没有情感,何来交流?所以需要情感化设计产品,也就是赋予产品人格(人工智能其实也是如此),这样才能和用户产生情感共鸣。

机器确实应该具备并且能够展现情感,让我们更好的与其互动。拟人化的回应可以给产品使用者带来极大的欢乐和喜悦。——唐纳德·诺曼《设计心理学》

让我们聚焦于当下几个互联网产品看看都呈现出哪种人格。

微信——非常得力个人助理,成熟稳重、办事高效,每天处理我的访客和信息事务,非常值得信赖和依靠。这些人格化印象从何而来的?成熟稳重体现在整体视觉风格,区别于QQ的跳跃活力,所以年轻人或许觉得略死板,这就是产品定位和品牌战略了。包括每次迭代更新都很细微,这都是成熟稳重值得信赖的人格体现,办事高效显然就是微信使用下来的感受,也就是交互体系。

淘宝——店小二,热情好客,每个人进门都主动热情推荐起来:「欢迎光临!老板来看看这个新到的,便宜又实惠!再看看那个喜欢么?」本来只是看看,最后还是被热闹氛围、新鲜好货和各种促销引诱下剁了手。

天猫——气质美女,高级洋气,又自带「猫」的小资调性,一颦一笑国际范儿,她可能不用说太多,一个眼神就已经把你征服。

另外阿里喜好直接用动物形象作为品牌名称,天猫、飞猪、闲鱼、盒马。也是利用了这一心理机制,动物人类本来同属生物,天生自带人格化属性,相比抽象事物更鲜活生动、富有个性,从而容易产生情感共鸣。

如何用设计赋予产品人格

说了这么多应该解释清楚人格化是怎么一回事儿了,接下来聊聊如何用设计赋予产品人格,算是给产品设计多一种思考的方式。

在人格化产品之前先弄清楚一个问题:应该赋予它怎样一个人格?这就需要从最初的产品战略、市场定位,以及使用场景和受众人群来分析,也就是五维分析法。得出一系列信息后从中发散提炼出产品应该具备并展现的人格词汇,进行产品人格画像(有别于用户画像,用户画像是对目标用户分析出的虚拟人物)。

今天主要拿我之前负责的一款企业福利产品来具体讨论,通过分析得出一些信息:这是一款集结企业福利健康关怀和协同办公的功能聚合型产品,供企业员工使用,大部分使用场景在公司,并且工作过程或间隙时使用。通过这些信息提炼出相关人格词汇:多职能,高效,关怀,专业,靠谱。这其实就是优秀office boy的形象写照,也很契合企业用户使用场景。

确定人格特征以后,以此为核心赋予产品人格化设计,也就是情感化设计,用设计手段从情感化设计的三个层面将人格特征映射到产品上。

1. 本能层

即产品的外观,用户接触产品时的第一印象。男人喜欢美女,女人喜欢帅哥,美食讲究色香味,摆盘就是第一层的「色」。喜欢好看的东西是人类与生俱来的本能,并且人类通常会觉得有吸引力的东西会更好用。因为好看的产品会给用户带来正面情绪,而正面情绪会让人忽略使用过程的一些瑕疵 。

吸引力激起了积极正面的情感,使得心理过程更富有创造性,更能容忍轻微的困难。——唐纳德·诺曼《设计心理学》

所以商家很「聪明」的把产品外观设计的符合用户内心需要的那种好看的形象。比如越野车设计通常都线条硬朗,直棱直角风格,造型语意模仿了硬汉肌肉男特征,健壮胸肌,硬朗线条,轮廓分明,以及这类人群直爽性格特征等等,赋予这样的人格会给予用户极大安全感,仿佛可以克服一切严苛的路况。

回到前面的企业福利产品设计,本能层也就是视觉风格,体现在颜色,页面质感,元素形态,配图风格,字体等等。每一个视觉元素都有自己的情感,不同元素的组合搭配也会传达出不同的情感。拿icon来举例子:

当然实色图标,线性图标,粗线形图标等等风格都有各自的人格情绪在此就不深入讨论。通过前面的核心词汇可以引申出相对具象的视觉语言(结合情绪板帮助联想)。

视觉语言一开始不必要太过细节,以免限制创意发挥。到此,一个打理干净、西装革履、低调稳健的office boy正面带微笑向我们走来。

2. 行为层

即产品的效用和交互体验,也就是通常说的功能和体验层面。行为层设计之于椅子要坐的舒服;之于剃须刀要刮的快速干净;之于雨伞要轻便坚固等,当然这些显性功能需求容易完善,难的是挖掘并满足用户隐性需求。这方面做的最好的莫过于苹果产品,iPhone能做到当今全球的影响力,主要靠的不是产品外观,而是iOS系统带来的完美体验,彻底告别功能机时代,也因为行为层的超凡表现直接影响了品牌在反思层的影响力。

可见创新体验给产品带来的巨大影响力。但创新不易,当下更多的是改进。设计师需要善于观察用户行为,发现行为痛点,挖掘潜在需求。常规说来一套流程就是用研访谈+观察行为——主次人物模型——分析使用场景+竞品分析——确定内容/功能需求——确定概念模型+信息架构+流程——交互原型。

回到前面的企业福利产品,原型基本采用了常规的tab标签式交互框架,首页采用了图标入口导航+卡片信息流样式。那么需要在现有常规的交互模式下去优化改进体验,尽可能赋予其人格特质给用户带来正面情绪。

文案风格。这是产品和用户交流最基本层面,见文如见人,说话风格直接体现人格特征。所以企业产品的文案力求言简意赅,但要符合口语习惯,避免过于机械冷漠。

操作前可预知,操作时有反馈,操作后可撤销。这些即是交互原则,同样符合人格特征。比如人与人之间沟通,尤其是专业的,他会一开始清楚的告诉你这件事大概分哪几步、找哪些人等,这就是可预知原则,比如淘宝分步注册表单页就是利用这一原则。

我们通常都不喜欢那种对他说了半天没有半点反应的同事,随时积极给予语言、表情或者动作反馈的人比较受欢迎,这是尊重对方以及专注的表现。对于产品也是,用户任何操作都应给予反馈机制,代表时刻工作中,尊重用户。比如loading动画,虽然网络不好是个现实问题,但产品不可以毫无作为,时刻给予用户正面情绪,缓解焦虑,打发等待时间。以及表单页面输入信息及时验证反馈等都可提升用户满意度。

反馈形式不光视觉,充分利用人的感知,比如淘宝购物成功利用听觉反馈;敲击虚拟键盘利用震动触感反馈等。操作后可撤销原则在协同办公应用里很常见也很需要,不再赘述。

适当的转场动效。良好的沟通一定是流畅的,如水般流动,用在产品里就叫flow体验。那么在视觉上也要配合流感觉,任何操作和转场尽量用动画效果衔接,显得页面更生动,更有活力。但始终要明白动效的实质作用,配合提升流程体验和效率,切不可喧宾夺主。

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

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

相关文章

  • 2017-08-06如何解决IE6/7绝对定位元素神秘消失或被遮挡的方法
  • 2018-08-23如何构建Web端设计规范之反馈类组件
  • 2018-08-23Airbnb 用这个流程,大幅提高了开发和设计的协作效率
  • 2018-08-23秋风渐起,大咖们都跟随这些趋势做网页设计
  • 2018-08-23一个针对女性用户的照片编辑软件,要如何设计UI?
  • 2018-08-23腾讯干货!如何从用户体验设计角度提升产品的安全感?
  • 2017-08-06跨浏览器的本地存储 Ⅰ
  • 2017-08-06为什么css属性值 clear:right不起作用详细探讨
  • 2018-08-23PS教程!教你绘制优设吉祥物之獠麝鸡放鞭炮
  • 2017-08-06设置网页图片热点链接以及坐标值示例代码

文章分类

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

最近更新的内容

    • 超全面总结!移动端的AR交互设计探索
    • 这些年,让人眼前一亮的网红文案
    • 腾讯出品!你离高效制作动画只差这一篇文章的距离
    • 你知道url中的特殊符号含义么(比看篇)
    • 高手的平面课堂!版面太平了应该怎么破?
    • 写给设计师看的基础数据知识
    • 将像素点转化为全面的品牌体验的经验技巧
    • 快速上手!10分钟学会这招超好用的「九宫格」配色技巧
    • 为什么几个人的小团队更加高效更加靠谱?
    • css元素隐藏原理及display:none和visibility:hidden

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

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