恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
拟人形法则在设计中的运用
0.0°
2021-07-28 原创文章 教程 举报 16527 90 224 3

很早之前测试过性格色彩,我是蓝绿性格,大胆随心猜测一下海盐社的其他小伙伴,红黄&红绿&黄蓝&红黄,具体说的是谁可以自己认领哈...@风筝@小溜Epik@海边来的设计师。感谢他们对我的理解、包容、鞭策。

Image title



拟人形法则指的是把事物人格化,赋予事物和人一样的特性,和我们人一样有感情、有声音、有动作。拟人能更加生动的表达出事物的特点,让人感同身受。


而现在拟人在设计上的运用也日益广泛,把抽象的、用户不熟悉的元素拟人化,能让用户第一眼就知道你这个产品是什么,引起他们的关注,从而建立对产品的情感共鸣。



模拟人的形态


最基础的拟人化就是模拟人的外在形态——高矮胖瘦等,把自己的产品和人的外在形态建立联系。


在 UI 界面中,我们经常会用拟人化的卡通形象来增加页面的氛围,胖胖圆圆的圆润造型可以营造轻松、活泼的联想。

Image title


模拟人的动作


肢体语言往往比外在形态更生动,而且通用性更强。如下图 bilibili 的登录页,当用户输入密码的时候,页面上方两个卡通人物会用手捂住自己的脸。

Image title

其实这来源于生活中的场景,当你在银行取款的时候,输入密码的时候自己会用手挡住,别人也会自觉回避。当界面中运用到这一点的时候,用户看到的时候也会觉得很熟悉,会心一笑,对你的产品的好感度瞬间倍增。





模拟人的声音


人的声音和动作一样,都能在短时间内引起用户的共鸣。在自己的产品中植入一段有特点的音频,也是一个不错的选择。


这种在游戏类 app 里面最常见了,小孩子玩的益智类游戏也会经常出现,比如翻牌消消乐,错误的时候配合着抖动会发出 “啊哦” 的声音,有一种惋惜的意思,鼓励小孩子再接再厉。


Image title


加入音频后会让反馈信息更加明确,因为音频本身就带有情感,正确、错误、开心与否都能通过声音体现出来。



模拟人的行为


人是一个很奇怪的物种,大多数人都认为自己做一个决定的时候,是完全出于内心的选择、绝对不会受他人影响的。但其实人作为一个社会性物种,一言一行都会受到周围环境以及习惯的影响。


行为会受环境的影响


① 从众

社会心理学里讲过一个现象:从众心理,指的是个人的行为会受到外界人群行为的影响,而在自己的知觉、判断、认识上表现出符合于公众舆论或大多数人的行为方式。从众心理是部分个体普遍所有的心理现象。


Image title



其实在很多产品的设计上,都有在利用用户的从众心理,比如把产品的销量、评价数外漏展示的特别明显,仿佛在告诉用户我这个东西很受欢迎,很多人都买了,好评也很高,那么自然而然用户就会对这个产品多看一眼,而且最后很有可能也会购买。


回想自己在淘宝购物的时候,是不是总是会选择销量最高、好评最高,这其实就是一种从众心理——大家都买的应该差不到哪里去。

Image title


② 攀比

攀比也会激励人去做一件事情,各种 app 里都会有榜单排行榜,也是利用的用户的这一心理。

Image title


③ 奖励

奖励算是影响人的行为的最快的一种方式了,新手注册、邀请好友、每日签到...各种奖励方式,都在激励用户。

Image title

各个奖励方式按照目的可划分为:拉新和留存,不同的目的所采取的奖励方式也不一样。


当用户不熟悉你的产品的时候,通用奖励是一种很好的方式,通用奖励指的是你所奖励的东西不仅仅局限你的平台使用,而最常见、最能被用户接受的就是现金了,这也是拉新最常用的一种方式。

Image title


行为会受习惯的影响


俗话说三天能养成一个习惯,而且习惯养成后很难改变,每个人都会有自己的一点小癖好。一个吃素的人,你跟他宣传你的肉食多么多么的好吃,那也是徒劳无功,而一个天天吃肉的人你让他改吃素,这别人轻易也接受不了。


虽说每个人的习惯各有不同,但其中还是有些共性的,比如:按钮、卡片、头像给人感觉就是可点的、而置灰的就不可点了;点击弹窗旁边的蒙层可关闭弹窗;

Image title


所以在做设计的时候,我们可以去找找自己的目标人群有没有一些共有的行为习惯,针对这个共有的习惯去做一些针对性的设计。




拟人形法则并不仅仅只是模拟人的外在形态、动作、语言等,更深层次的是模拟人的情感。人的形态、动作、语言只是一种我们对他的认知。


比如看到全身都是妖魔鬼怪纹身的人会不由自主的害怕、经常笑的人会给人面善的感觉、同一句话不同的语气表达的意思可以截然相反... 

Image title


这些认知都是我们主观上所认为的,拟人形模拟的其实是一种内在情感,一种人们对他的主观认知,是人对现实世界的看法,而拟人的“人”只是起到一个媒介作用。



模拟人的情感


我们这个时代的人在精神的诉求上比祖辈高太多了,这就要求设计师除了满足功能需求,也要去关注人们的情感需求。


人性化的设计已经成为这个时代的主流了,想用户所想,为他们提供他们想要的服务,或者说让我们想推的服务被他们所喜欢。


把人们对现实世界的看法嫁接到产品设计上,投其所好,就能让自己的产品更容易被大众所接受,这里说的 “好” 指的是认知习惯,是每个人对这个世界存在的一些看法,有客观存在的、也有主观的,而且这个看法也会随着时间的变化而变化。


约定俗成的


有一些认知习惯,是这个社会自然而然形成的,红橙色系的颜色能够给人带来食欲,因为生活中的食物大多都是这个色系的,人们就形成了固有的认知。



当我们在实际工作中运用拟人形法则的时候,要千万注意这一点,不要盲目去做跟大众认知相悖的设计,而是要去做跟大众认知相符的。

Image title


而把大众固有的认知习惯和产品相结合的一个最常用、最快捷的方式就是使用动物形象,自然界中绝大多数动物在人们的心里都有固有的印象,加上动物大多和我们人一样,有手有脚,在延展的时候更好延展。


比如印象笔记的大象,印象笔记作为一款多功能笔记类应用,对人们来说最重要的就是存储功能,所有记录的内容都不会丢失。


而正好大象在人们的眼里属于记忆力绝佳,永远不会忘记事情的动物,与云笔记想要传达出的理念完美契合;

Image title


再比如美团外卖的袋鼠,袋鼠在哺乳动物里是跑的最快的,而美团想向用户传递 “美团外卖,送啥都快” 的品牌理念,那么袋鼠就是最好不过的方式了。

Image title

现实世界有的


当找不到约定俗成的习惯与自己的产品结合的较好的时候,我们也可以从现实世界中找灵感,模拟现实世界的场景,让用户对自己的界面有一种天然的熟悉感。


① 引导性界面

模拟现实世界超市、图书馆、机场等的指示牌。在现实世界我们到达一个陌生的地方首先会去看的就是指示信息,每一层有什么,要去的地方在哪里。



而在UI界面中也是一样,用户第一次进入,对于页面功能的放置不是很清楚,这就需要一些提示信息,特别是你的交互比较特殊,用户没有习惯的时候。

Image title


目前常用的滑动删除、长按复制、点击跳转页面都是前人为用户养成的习惯,所以不需要给予指引,相反这些已经成了用户习惯,最好也不要去改变它。


② 界面与用户互动,即时给予反馈

在现实世界里,我们和别人交谈的时候都希望是一问一答式的,更好的是我问一句别人能把我想知道的都告诉我。


而在 app 中,我们也需要营造这样一种氛围,在用户进行一个操作的时候,即时给予反馈,比如支付订单的时候,即时告诉他支付的结果,成功或者失败;

Image title


在他做下一步操作的时候,提前设想他可能要做的事情,比如客服中心页面,会把一些用户常问的问题诺列出来。

Image title


当然不是所有的互动都要是一本正经的,适当的时候来点不一样的回馈会有意外惊喜,比如当我们给自己发的内容点赞的时候,会显示一个坏笑的表情

Image title


③ 空白页插画、走心文案

人是群居物种,内心都是害怕孤独,渴望有人关爱的,所以我们可以为产品里那些平淡无奇的地方配上一点人文关怀,比如走心的文案、可爱的插画,减轻用户的烦躁心里,让用户能够感受到亲切。而这些细节能够成为产品与用户之间情感传递的桥梁,不仅能够增加用户对产品的好感度,还可以让产品更加深入人心。

Image title

举例实操


写到最后我们来举一个例子,来具体说明一下实际工作中可以怎么运用拟人形法则。


如下图,当你想要用户知道对图1的区域进行操作的时候,会出现2、3、4的功能,那么怎么样能够让用户清楚明白的知道这一点呢?

Image title


首先我们可以从我们日常生活中找这种例子,比如降国旗、卷纸、抽屉等等,都能让人知道这一区域是可操作的,操作后会出现新的内容,所以我们就可以将这一认知结合到界面中


比如:

1. 在页面放置一个小的拉绳(降国旗);

2. 将图1区域图形的边缘做成卷纸的形式;

3. 将下方2、3、4的边缘露出一点,让人知道下方有内容(抽屉)

......


将现实中用户熟悉的场景转移嫁接到产品中,这样的交互方式在第一眼就知道怎么操作

Image title

而微信理财通用的就是第一个方法,降国旗,用户看到这个小标志,不用任何引导他都知道下方会有内容


总结

运用拟人形的方法能够快速引起用户的注意,建立积极正面的互动

拟人形不仅仅指的是模拟人的外形、动作、声音、行为,还可以模拟人的情感,人对现实世界的感受

在遇到产品交互难题的时候,可以从生活中找例子,然后把它合理嫁接到产品设计上



参考文献

http://www.uisdc.com/emotion-design-in-product-detail   于细微处动真情!聊聊产品细节中的情感化设计

https://weibo.com/ttarticle/p/show?id=2309404046739794459001  设计法则第九招:拟人形

http://www.uisdc.com/prejudice-improve-design  这些深藏于人性的偏见,都是设计师手中的利器

书籍:通用设计法则



Powered by Froala Editor

更新:2021-07-28

收藏

90人已收藏

  • 19

    作品

  • 2448

    粉丝

  • 38

    关注

  • 10分钟教你做组件,效率翻倍
  • 如何用 OKR 工作法激励自我成长
  • Windows 10 设计指南之UWP
  • 设计师必须要学会的自查技巧

    猜你喜欢

      2021-07-28 原创文章 教程 举报 16527 90 224 3

      拟人形法则在设计中的运用

      0.0°

      你确定要举报拟人形法则在设计中的运用

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2018年07月10日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      224
      90
      3

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录