首页
大数据可视化设计
B端UI设计
系统UI设计
移动端UI设计
图标设计
软件开发
高端网站设计
logo设计
平面设计
关于我们
关于我们
公益活动
设计每日一帖
交互设计:如何做到惊喜?
2020-3-1
ui设计分享达人
保持好奇,巧妙融合,追求卓越,自然而然
上一篇,探讨了如何做到品质。这一篇,探讨下如何做到惊喜。
一家之言,未必全面,甚至未必正确。欢迎交流探讨。
01
交互设计的惊喜,是什么?
之前的文章,有简单定义过交互设计的“惊喜”,即为:超出用户预期,并让用户开心。
具体而言有两类,分别是:小惊喜、大惊喜。
1 小惊喜
所谓小惊喜,是指一些颇具
趣味性或人文属性
的交互设计小细节。
先说趣味性。常见的有两类,第一类是比较
好玩的动效
,第二类是一些
小功能
。第二类有时也会包含第一类。
动效这块,大家比较熟悉的,有 iPhone 上删除应用前图标的抖动,仿佛是吓的发抖,也可能是在摇头求饶;还有移动端登录 B 站、输入密码时,动画人物的捂眼捂脸动作。
(B 站登录页面)
小功能这块,也可以分成两类。一类是
隐藏的小功能
,一类是
有趣的小功能
。
很多隐藏功能,头几次用的时候,多少会有一些惊喜之感。
比如在订阅号消息列表页,某个公众号你已经几个月没看过,对它失去了兴趣和信任。这时,尝试长按这个公众号的头像或名称,会呼出一个包含“删除消息”和“取关”功能的弹窗。
(订阅号消息列表)
还有些隐藏功能,既能让用户觉得惊喜和方便,又能引发用户思考。这种思考,可能会让用户感叹设计之妙,也可能也会给用户一种猜对谜语的欣喜之感。
比如用墨刀的时候,尝试按数字键 1,会呼出“内置组件”这个使用频率非常高的功能,会让人觉得墨刀很聪明。
如果再仔细看一下,会发现,“内置组件”的缩略图标,和其他 4 个诸如“我的组件”、“图标”等功能的缩略图标,并成一列。这 5 个缩略图标的排列顺序(上到下),和它们快捷键("、"键和数字键1、2、3、4)的排列顺序(左到右),是完全一致的。不得不说,这是一个简单又巧妙的设计。
再比如朋友圈里,某个不熟的好友每天都发集赞的小广告,搞的我们不胜其烦。长按其头像,会呼出设置权限(屏蔽等)的功能。
有意思的是,长按好友名字,则不会呼出这个功能。要知道点击头像或名字是都能进入好友主页的;另外刚才那个例子,长按公众号头像或名字,也都能呼出取关的弹窗。
个人的理解,生活中,我们用力长按一个人,通常是表达强烈不满,比如打架时。比起长按名字,长按头像更像是长按真人,所以也更能表达我们的不满。
说完隐藏的小功能,再说下有趣的小功能。比如微信聊天里的扔骰子、石头剪刀布,微信给朋友发生日快乐后漫天飘落的蛋糕,拍照软件里的贴纸,等等。
最后说下带有人文属性的交互设计小细节。常见的有如下类型:
帮助弱势、关照情绪、表达情感、保护隐私。
帮助弱势这块,比如 iPhone 的辅助功能,里面有针对视力障碍的放大镜功能、有针对不识字群体的旁白功能。
关照情绪这块,很重要的一点,就是避免引起用户的负面情绪。比如微信的删好友是单方面删除,被删时我们很难察觉到,而且微信也不会通知我们。个人觉得,微信之所以不通知我们,其中一点,就是不给我们添堵。类似的还有,微信消息没有“已读”功能,这就大大减轻了接收者的回复压力。
表达情感这块,比较为人所知的例子,5 月 20 号这天,微信红包的限额,从 200 元升到了 520 元。还有一个例子,在微信聊天里发一个“ohh”,长按并点翻译,结果也是一个惊喜。
保护隐私这块,比如借助 iPhone 的“引导式访问”功能,可以让小朋友只能访问你的某个视频应用来看动画片。再比如别人用你电脑的时候,如果你不想让对方看到你的微信,就可以通过手机微信来锁定或退出电脑版微信。
2 大惊喜
所谓大惊喜,是指那些
系统性大创新,并且能够引领潮流、代表未来的交互设计
。通常而言,这些大惊喜,最开始给用户的感觉,就是酷。
iPhone 就是典型例子之一 。
2007 年的初代 iPhone,带来了当时的大屏幕:3.5 寸屏幕,以及纯触摸屏,和极为灵敏的触控体验。
2011 年,Siri 同 iPhone 4S 一起问世,为我们带来了语音交互。如今,在 100 元就能买到品牌类智能音响的情况下,依靠语音交互的智能音响也在慢慢走入寻常百姓家。
也许后乔布斯时代的 iPhone 创新不如以前,但不可否认的是,时至今日,iPhone 依然在引领潮流,在给我们大惊喜。比如这几年流行的手机无线充电和以 AirPods 为代表的极简的无线耳机。
以上是比较广为人知的交互设计,还有一些不太为人所知的设计。比如在家里网购一条床单,但是不知道床的尺寸,家里又没有尺子。这时,打开 iPhone 里的测距仪这款 App,就可以量出床的尺寸,会不会觉得有点酷。
(测距仪 App)
微信在引领潮流方面也有一些建树,比如极大的普及了二维码和扫一扫。小程序作为一种体验接近原生 App、同时又不用下载的产品,也正在引领新一轮的潮流。
还有一个比较酷的功能,就是以图搜图。笔者最早用过百度和谷歌的相关功能,主要是在电脑上搜索相似的图片,使用频率极低。
假设一个场景,比如在路上看到一个陌生人的外套很好看,但又不好意思上前问,就可以拿起手机,利用淘宝的拍立淘功能,拍张照就能马上看到相同或相似的商品。
如果淘宝上没有搜到类似商品,还可以用微信的扫一扫识物。和拍立淘相比,区别之处有两点。第一,不用拍,直接能识别,不过通常得等 1-3 秒;第二,识物结果里面,除了商品,可能还会有百科词条和资讯。
02
交互设计:
如何做到惊喜?
个人觉得,有 4 个要点:既要有好奇心,又要有卓越心;既要天马行空,又要保持自然。
听起来可能有点乱,且听笔者一一道来。
1 保持好奇心
笔者观察身边读小学的小孩,发现,当大人聊天时,特别是谈正事时,小孩特别喜欢坐在旁边听,而且听的很认真。小孩有时也会说两句,或是问问题,或是发表自己的看法。
看得出来,小孩对成年人的世界,怀有极大的好奇心。实际上,不止于成年人的世界,小孩对周遭世界都有比较强烈的好奇心。
整体而言,成年人对周遭世界的好奇心,远不如小孩。我们互联网从业者也不例外。
好奇心和交互设计,有什么关系?
交互设计,某种程度上,也是一种创作。好的创作,一定来自生活。这就需要我们去观察生活。
观察生活,非常重要的一点,就是好奇心,对周遭人、事、物要有足够的好奇心。
比如上文提到的例子,在 iPhone 上删除应用前,应用图标会抖。这种抖是一种趣味隐喻,既可以理解成吓的发抖,也可以理解成摇头求生。如果对生活没有足够的好奇心,是很难留意到这种生活细节,并把它们作为一种隐喻运用到交互设计中的。
以上是关于好奇心,还有一种特质,也是在小孩身上表现突出,同时也和本文主题有关,那就是:童趣。
还是上文的例子,在 B 站 App 上输入登录密码时,动画人物会捂眼睛。这个设计,可能不会打动所有用户,但至少一部分用户会觉得比较有趣。如果我们内心没有一点童趣,可能也会觉得,这个设计,没啥意思。
玩是人的天性。对于比较好玩的交互设计,大部分人是比较容易产生共鸣的。实际上,据笔者观察,我们大部分从业者是有童趣的。我们比较缺的,是好奇心。
那么,怎样判断自己是否拥有足够的好奇心,其标志是什么?
个人观点,有两个标志。第一,是对与个人利益无关的生活小事的关注,远多于对个人利益本身的关注。第二,观察和思考,远多于评价和自大;追本和溯源,远多于偏见和傲慢。
为什么会提到个人利益?
因为,通常而言,个人利益,尤其是短期利益(比如少花时间设计和修改原型),往往会和用户体验存在一个此消彼长的关系。
如果过于关注个人利益,不仅很难照顾到用户体验,甚至会伤害用户体验。至于给用户带来惊喜,就更无从谈起了。
回到现实当中。在时代洪流面前,好奇心的两个标志,显得很难,该如何实现?
关键在于找到背后的源动力。这个源动力,在笔者看来,有两点,分别是:求知若渴、淡泊宁静。
求知若渴,可以源源不断的驱动我们去观察、去思考万事万物的规律和联系。
淡泊宁静,正如诸葛亮在《诫子书》中所说,“非淡泊无以明志,非宁静无以致远”。人的心力和精力终归是有限的,如果我们沉迷名利、物欲、享乐,就难有兴趣和精力去琢磨万事万物了。
所以,只要找回自己童年的那种求知若渴,同时修身养性到淡泊宁静,这份好奇心,就会回来。
2 巧妙融合
某种程度上,很多带给我们惊喜的交互设计,都是一种巧妙融合。
笔者把这种巧妙融合,初步分成了三类,分别是:
简单融合、直接融合、委婉融合
。
简单融合,最常见的就是隐藏功能。
把一个较为简单的操作动作,比如长按、双击、下拉、左滑等,和一个合适的功能,融合在一起
。用电脑时我们常说的快捷键,也属于这一类。
通常而言,操作对应什么功能,讲究的是合适,并无固定章法束缚。比如在微信朋友圈,发表文字的功能可以靠长按(相机图标)唤起,设置权限的功能也可以靠长按(好友头像)唤起。所以,简单融合这块,可供我们发挥的空间很大。
另外,简单融合最常见的形式——隐藏功能,既实现了界面的简洁,又带来了一定惊喜。
简单融合,既简单,又实用。建议大家充分开发这一块。
直接融合,是指
将生活中的趣味性,直接搬到软件中,搬到交互设计中。
比如微信聊天中的扔骰子、石头剪刀布,以及漂流瓶、抽奖等。
这一类融合,有点像商场里的电玩城,虽然我们不会经常去玩,但确实比较好玩。
委婉融合,是指
用明喻或隐喻的手法,将生活中微不足道的一些细节,移植到交互设计中。
这种移植,有时是直白的。比如 Mac 上打开应用时,其图标会在 dock 栏里有规律的弹跳,这会让我们联想到皮球的弹跳。
这种移植,有时是隐晦的。比如 iPhone 上删除应用前,其图标会抖。这种抖,是害怕还是求饶,任凭我们想象。
这种移植,有时是无声的。比如在朋友圈,要想呼出隐藏的设置权限功能,只能长按头像,长按名字则不行。这个设计,不乏想象空间。如果不尝试长按名字,则不会发现这个细节。
委婉融合,有时会带一些趣味性。更为重要的是,它能够引发我们的思考和想象,所以是一种很出彩的融合。这种融合,也会赋予交互设计,一种禅的味道。
整体而言,笔者非常推荐委婉融合。
3 追求卓越
如果目标是小惊喜,则保持好奇心、并做到巧妙融合,基本足矣。
如果目标是大惊喜,则需要雄心壮志,需要舍我其谁,需要追求卓越。
日常工作中,可能会有这样的对话。“这个动效/功能,实现不了”。
大惊喜里的几个例子,比如初代 iPhone 的触控体验,iPhone 里的测距仪,微信的扫一扫识物。这种设计,意味着要修一条最好的长城,背后往往有很多技术难题要攻克,有很多脏活累活要做。
如果团队文化就是做出最优秀的交互设计,那么,“实现不了”这句话,估计就听不到了。取而代之的,可能是:“还在研究中”,“下个大版本能上”。
4 自然而然
提到惊喜,还有一款值得研究和学习的产品,那就是锤子手机的 Smartisan OS。
个人观点,在小惊喜方面,Smartisan OS 颇有建树。在大惊喜方面,Smartisan OS 也进行了一些值得学习的探索。
先说小惊喜,比如华丽而细腻的桌面翻页动画,比如四指横划桌面可以切换桌面背景。还有一些贴心的小功能,比如静音可以设置时间,比如方便的长截屏。
(静音可设置时间)
(长截屏)
再说大惊喜。2016 年 10 月发布的一步和大爆炸,是比较大比较系统的功能,在当时也很新。锤子公司也一直有宣传这两个功能。所以相对而言,这两个功能是 Smartisan OS 的大惊喜。
笔者的备用机是锤子手机,身边也有朋友在用锤子手机。以一步为例,这个功能,笔者体验过很多次。但平常很少用,身边朋友的情况也类似。
(一步)
根据使用情况和主观感受,个人觉得,一步这个大惊喜,还存在进步空间,主要有两个方面。
第一,宏观层面。一步作为新生事物,好比一颗新种子。种子破土而出时,是一颗嫩芽,而不是一棵大树。新生的一步功能繁多,犹如一棵破土而出的大树,一方面有违自然规律,另一面因为功能繁多,很多用户无法一下子看懂,看不懂可能就不想用了。
第二,微观层面。一步这棵新大树,结了很多不同的果子,比如拖拽图片到其他应用、切换后台应用、展示最近图片/文件等。这些果子,是用户真正需要的吗?这个是要存疑的。
比如拖拽图片到朋友圈就能发朋友圈这个设计。通常而言,我们发到朋友圈的图片都是精挑细选的,会占用一定量的时间,比如旅游或聚会结束后发的照片。一步解决的是效率问题。发朋友圈的时候,少点几下这种效率问题,优先级是比较靠后的,我们没那么在乎。
还有拖拽图片/文件这个交互动作,大家通常在电脑上用的比较多,在手机上是没有这个习惯的,实际上应用场景也少。在手机上,大家一般只习惯拖拽应用图标。
还有切换后台应用这块,大家第一个想到的,一定是系统自带的,已经用惯了。而且唤起速度比一步快,点击面积也比一步大。
总的来说,微观层面上,比较缺让大家能马上想到一步的功能点。
最后,总结一下。对于领先时代、引领潮流的交互设计,需要做到自然。
具体而言,就是,大惊喜是一种系统性的大功能,好比一棵大树。这棵大树,最好有一个从种子到果子的生长过程,这样最自然,生命力也会最旺盛。
因为,从破土而出的嫩芽阶段,就可以通过用户反馈和数据来检验,这种嫩芽,是不是真的对用户有价值。如果价值不大或没有价值,还可以再调整。如果长成大树结满果子,再去调整,就很难了。
结语
交互设计小细节,如果有一定的趣味性或人文属性,则是小惊喜。
系统性工程的交互设计,如果最初感觉很酷,而且能引领潮流、代表未来,则是大惊喜。
始终保持孩童身上那种非功利的好奇心,用心观察并思考生活中的小事;
将生活小事和交互设计巧妙融合起来;
以上两点,可以帮我们做出小惊喜类的交互设计。
追求卓越,独立思考,做最酷最好的交互设计;
酷是结果也好,是目标也好,都不是最重要的。最重要的是,避免刻意和心切。酝酿大惊喜,犹如培养一个新生的孩子,需要投入极大耐心和精力,需要让孩子自然成长。没有家长会教半岁的孩子唱歌、把 3 岁的孩子送到高中念书。
再加上以上两点,可以帮我们做出大惊喜类的交互设计。
最后,用爱因斯坦的一句话来共勉。
想象力比知识更重要。
转自:站酷-
SnowDesign
«
浅谈如何做产品的优化设计
汽车行业的UX启发-车载HMI的经验法则
»
分类
大数据可视化设计文章及欣赏(144)
B端ui设计文章及欣赏(598)
系统UI设计文章及欣赏(99)
移动端UI设计文章及欣赏(687)
图标设计文章及欣赏(120)
网站设计文章及欣赏(480)
平面设计(251)
行业趋势(463)
设计资源(872)
交互设计及用户体验(903)
前端及开发文章及欣赏(1031)
随笔的一些文章(63)
设计思维(1874)
用户研究(242)
设计管理与成长(345)
seo优化(498)
日历
链接
个人资料
蓝蓝设计的小编
http://www.lanlanwork.com
存档
2024年12月(50)
2024年11月(84)
2024年10月(168)
2024年9月(145)
2024年8月(165)
2024年7月(108)
2024年6月(65)
2024年5月(73)
2024年4月(44)
2024年3月(50)
2024年2月(58)
2024年1月(44)
2023年12月(47)
2023年11月(41)
2023年10月(14)
2023年9月(27)
2023年8月(88)
2023年7月(62)
2023年6月(58)
2023年5月(28)
2023年4月(47)
2023年3月(37)
2023年2月(90)
2023年1月(78)
2022年12月(45)
2022年11月(69)
2022年10月(51)
2022年9月(135)
2022年8月(60)
2022年7月(111)
2022年6月(162)
2022年5月(143)
2022年4月(86)
2022年3月(119)
2022年2月(53)
2022年1月(99)
2021年12月(105)
2021年11月(83)
2021年10月(101)
2021年9月(153)
2021年8月(147)
2021年7月(149)
2021年6月(157)
2021年5月(124)
2021年4月(185)
2021年3月(144)
2021年2月(35)
2021年1月(103)
2020年12月(95)
2020年11月(76)
2020年10月(31)
2020年9月(45)
2020年8月(50)
2020年7月(46)
2020年6月(33)
2020年5月(78)
2020年4月(69)
2020年3月(100)
2020年2月(59)
2020年1月(31)
2019年12月(50)
2019年11月(57)
2019年10月(48)
2019年9月(48)
2019年8月(57)
2019年7月(58)
2019年6月(58)
2019年5月(31)
2019年4月(37)
2019年3月(43)
2019年2月(25)
2019年1月(45)
2018年12月(41)
2018年11月(40)
2018年10月(29)
2018年9月(40)
2018年8月(87)
2018年7月(107)
2018年6月(86)
2018年5月(109)
2018年4月(40)
2018年3月(35)
2017年8月(35)
2017年7月(45)
2017年6月(7)
2017年5月(27)
2017年4月(51)
2017年3月(69)
2017年2月(65)
2017年1月(69)
2016年12月(55)
2016年11月(111)
2016年10月(92)
2016年9月(53)
2016年8月(9)
2016年7月(4)
2016年6月(9)
2016年3月(19)
2016年2月(26)
2016年1月(29)
2015年12月(34)
2015年11月(35)
2015年10月(46)
2015年9月(43)
2015年8月(40)
2015年7月(33)
2015年6月(46)
2015年5月(58)
2015年4月(70)
2015年3月(55)
2015年2月(17)
2015年1月(33)
2014年12月(21)
2014年11月(83)
2014年10月(94)
2014年9月(6)
2014年8月(1)
2014年7月(13)
2014年6月(66)
2014年5月(99)
2014年4月(88)
2014年3月(101)
2014年2月(67)
2014年1月(83)
2013年12月(106)
2013年11月(111)
2013年10月(61)
2013年9月(20)
2013年7月(13)
2013年6月(27)
2013年5月(48)
2013年4月(39)
2013年3月(8)
2013年2月(20)
2013年1月(31)
2012年12月(33)
2012年11月(31)
2012年10月(22)
2012年9月(8)
2012年7月(14)
2012年6月(15)
2012年5月(31)
2012年4月(24)
2012年2月(4)
2012年1月(8)
2011年12月(35)
2011年11月(32)
2011年10月(13)
2011年8月(1)
2011年6月(1)