首页

交互设计:如何做到惊喜?

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 

看懂设计(一):菲兹定律在UI设计中的实际应用

ui设计分享达人

菲兹定律在交互设计中的应用是很普遍和广泛的,有时候在我们设计界面之时,不知不觉就应用了菲兹定律,但是我们却未察觉。

关于菲兹定律的具体内容,可以说是大家耳熟能详,甚至在学生时代就有所了解:从一个起始位置移动到最终目标点所需的时间由两个参数来决定,到目标的距离(D)和目标的大小(W),可以用数学公式表达为:

 

在当今互联网背景下简单来解释说,就是大而近的目标区域意味着用户用需要耗费太大的精力即可轻易点击或者关注到目标,反之,小而远的目标区域则意味着用户将耗费一些时间和动作才能触及到目标。在一般情况下,让用户耗费时间和动作的操作,会使人产生负面的用户体验。

 

以上说的,其实是对菲兹定律表象的解释,每个人在网上也会搜到很多类似的解释。当你搜索时会发现,关于对菲兹定律的应用,网上绝大多数的资料都是在以PC端界面作为定律的解释,但移动界面却少之又少,这里面的一部分原因是菲兹定律提出的时间,一部分也是因为在移动端的设计中,菲兹定律会变得很零散和琐碎,很难真正用几句话来总结,这篇文章也是我第一次试着在移动端的交互设计的范畴内对菲兹定律的应用进行简单的总结。

 

1. 让按钮更大一些

我在这一部分分了几种情况,分别进行讨论,其一呢,就是fab button。在现有的fab button中,大家会发现,虽然按照正常iOS的设计规范,一般按钮的大小都会被设计为88px,但是在设计fab button时,我们一般都会选择大一些的尺寸,例如100px、110px、120px。

 

 

其二就是页面内功能按钮的大小,我们在做界面设计的时候,都知道做到统一性,但很少去深入地想,界面统一的背后是在像用户传达一个什么意思。

举个例子,这是【洋葱数学】和【360家庭防火墙】的登录界面,市面上的登录界面大多大同小异,基本组成就是账号+密码+按钮(或手机号+按钮等)的组合。

 

那我们来思考一个问题:为什么在手机号只有11位已经确定的情况下,输入框和【下一步】按钮还要做这么长,接近通栏的一个样式。

我试着来找到这个问题的答案,第一个,是对于品牌设计规范的执行,对边距是有一定要求的,也就是我们常说的保持页面元素的统一性;第二个,即是对菲兹定律的应用,在这个页面中,最核心的两个功能【输入】和【下一步】给予他们一个足够的大小,会让用户的注意力更加集中,避免被分散精力。

 

2. 让相关联的信息内容距离更近

这也和设计原则中的亲密性相一致。依旧可以用我们常见的信息输入界面来加以印证。这两个界面是我随手做的,对比一下即可看出优劣。

  

在相关性比较强的功能中,拉近彼此距离,既能够给信息一个清晰的层级,更能够减少用户的操作成本。

 

3. 界面的边界会让用户操作更加精准和容易

 

在研究交互界面的时候,我们总听到一个说法,“界面的边界是无限的”,它当然不是在说界面是无限大的,对于一块屏幕来说,在进行操作的时候,无论是PC的鼠标光标,还是移动屏幕的手指,在操作到界面边缘时,因为无法延伸,所以最精准。

 

这也是我们看绝大多数fab button弹出的菜单是在界面边缘,而不是在界面中央的原因。

除此之外,还有在很多安卓手机中,卸载app时会让用户把要卸载的app拖拽到屏幕上边缘的区域进行卸载,这样相比给一个【X】按钮,会更加精准,而且拖拽的操作也会给用户更多思考的空间和时间,减少误操作的概率。

 

 

但是,这个但是很重要,不要把所有既定的法则都奉为圭臬,所有事物都要辩证着看,在没有限定条件的情况下,菲兹定律的应用不会有任何问题,但是如果加以条件的限定,就不是这么简单了。

简单举个例子:在进行删除等负向操作时,很多app会把确认删除等操作做得离你的上一步操作区域更远,或者让确认按钮更加不明显,这是在帮助用户,或者说希望用户在做负向操作时,有更多的思考空间和时间,规避误操作的影响。

 

在《看懂设计》这个系列里,我会选择性地对在交互设计中常常被应用的设计心理学、方法论等进行简洁有案例的解析,例如大家耳熟能详的交互设计7大定律、斯金纳箱理论、边际效应、锚定效应、格式塔理论等等让大家尽可能地在实际案例中找到它们的应用,而不是让这些方法论成为我们脑海中的空中楼阁,知道、听说过,但是不会应用。

转自:站酷-鹿爷不是咸鱼 


交互设计:如何做到惊喜?

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 岁的孩子送到高中念书。

再加上以上两点,可以帮我们做出大惊喜类的交互设计。

最后,用爱因斯坦的一句话来共勉。

想象力比知识更重要。


iPhone如何改变我们的交互方式

资深UI设计者

当我们回顾近20年的手机发展历程,可以发现2007年iPhone的横空出世真正改变了手机这个行业。乔布斯在发布会上展示初代iPhone给行业带来的冲击力是前所未有的,对人机交互领域也带来了了深远的影响。



从外观上来看,iPhone与那个时代手机最大的区别在于它舍弃了笨重的键盘,3.5英寸的全触控屏幕在当时来说可谓石破天惊。对于现在的手机来说,全触控屏幕可谓是标配。但是在当时来说面临着巨大的争议和风险。当时的微软CEO鲍尔默,也就是现在NBA快船队的老板就持反对意见,甚至苹果内部的高管都不看好全触控屏幕,因为他们觉得: “每个人都会对没有触摸感的东西感到不适”。

这个理由现在看起来很无厘头,但是如果我们看待问题总是以现在的眼光和立场,那么就会产生“我上我也行”的错觉。这样的复盘,除了满足自己的YY欲,不会给我们的认知带来任何提升。


我们来系统的分析一下,全触控屏幕究竟是怎么淘汰键盘的呢?首先最直观的一点就是,因为去掉了实体按键,那么手机的屏幕面积得到了提升。 此外,键盘交互的时代,条目的移动速度取决于手指点按键盘的速度。 而在触控交互的时代,移动条目只要手指滑动一下就可以了。 交互效率得到了指数级别的提升。



信息限制


而这里我想从可供性的角度来思考触控交互带来的体验提升。 可供性,通俗点说,就是功能隐喻。优秀的产品设计可以有效的利用功能隐喻让用户快速的明白如何操作。


而隐喻不能太多,太多的隐喻等于没有隐喻。早期的战机有十几个姿态显示仪表和100多个操作按钮,这样的操作界面毫无隐喻而言,飞行员很难同时处理这么多信息。后来从三代机开始,战机舱普遍使用显示屏,化繁为简,限制了操作选项,降低了驾驶成本。

在实体键盘时代,要限制操作选项是非常困难的。因为用户与手机进行交互是依赖键盘这个媒介,而键盘无法针对特定的场景提供定制化服务,例如我打电话拨号需要数字键,发短信需要26位字母键。那个时代音乐手机(诺基亚5300)甚至要将音乐按键放置在机身。


一款产品可以给用户提供很多功能,但并不是每一个功能都是用户全程需要的。 只有判断在某个场景下,用户对特定功能的诉求很高,才展示相关的信息。 如果诉求很低,可以隐藏相关信息,避免给用户造成干扰。

例如,在知乎中,你想搜索跟叶问相关的内容。在搜索结果页滑动了大概3屏左右,在界面底部会出现“向知友提问”的按钮。因为滑动了3屏,那么极有可能对当前的搜索结果不满意,这时引导用户去提问。如果从一开始就给用户展示去提问的按钮,那么对于不想提问的用户来说,其实是一种干扰,并且减少了阅读区域。


在微博中停留3秒左右,就会提醒你去评论。在用户不断刷微博的状态下,一旦出现了停留,说明你被这条内容给吸引住了。与其每条微博下放一个评论框,还不如提醒你去评论感兴趣的内容。


不同的场景,用户对功能的需求是不一样的,因此交互方案需要做出相应的调整。在有网的状态下,启动网易云音乐进入的是首页;无网情况下,启动网易云音乐进入的是我的音乐。因为用户在无网情况下进入网易云音乐,最大的可能性就是听之前下载好的歌曲。


我们再来思考一个问题,为什么QQ的对讲功能是长按,而录音功能却是点击?录音与对讲最大的区别在于,录音完成后不会直接发送给对方。你可以听一下录音效果,感觉不错后再发送给对方。而对讲是说完之后直接就发送对方的。


因此对讲功能更加看重效率,而且录音功能追求的是严谨。因为追求效率,用户对讲完成手指松开就可以直接发送了。如果使用点击,用户需要点击“发送”按钮才能发送,增加了操作步骤。


目前很多电商平台支持语音搜索,用户可以直接说出商品名称进行搜索。京东采用长按的交互方式,长按说话,说完松开。而淘宝用的却是点击开始说话,说完自动发送。


为什么淘宝这里做了差异化?这是因为,语音搜索商品,更多是短字符。用户在这里不太可能会说很长一段话,因此一旦用户的语音出现了中断,就可以判断已经完成了语音录入。交互流程就简化为点击开始录音,说完自动发送。

操作与反馈


我在前面提到了,全触控屏幕可以节省屏幕面积。这时可能会有人存在疑问,翻盖和滑盖手机不也能节省屏幕面积吗?

所有的人机交互流程我们都可以简化为两个步骤: 操作与反馈。 按键手机,用户与手机进行交互都必须依赖键盘这个媒介,而反馈区在屏幕,你的视线需要不断的来回移动。全触控屏幕,用户可以跟屏幕中元素直接进行互动。视线可以集中在一点。


即使在全触控屏幕,产品设计中操作区与反馈区的关系一样值得我们思考。以拍摄视频这个场景为例:

目前抖音、快手和微博都支持用户分段拍摄视频,一个长视频可以由几段短视频拼接而成。这个就产生了一个新的场景,如果我对上一段视频不满意怎么办?


我们先来看微博的处理方式,用户可以点击左边的关闭按钮,这时顶部的视频进度条开始闪烁。表明需要用户确定是否要删除这段视频?这种 通过闪烁和摇摆等不稳定状态来提醒用户进行决策的交互方式很常见,例如我们长按iPhone桌面图标,图标就会不断的抖动来询问是否要卸载该应用。

这里存在一个问题, 触发区和反馈区距离太远,而且闪烁的样式不明显,首次使用的用户可能无法在短时间内快速的理解闪烁的进度条是在询问用户是否要删除该段视频。

相比较而言,抖音的提醒方式更加直接,直接出现一个对话框。简单明了的询问用户是否要删除上一段视频,降低了用户的理解成本。当然抖音的交互方式也有缺点,对话框的出现增加了用户的操作成本。


如果用户不想删除视频,抖音需要首先点击“取消”,关闭对话框,才可以进行后续流程。而微博用户取消删除,不需要任何操作,可以直接进行后续流程。


如果用户“确定”要删除视频,抖音和微博用户的操作动作都是点击。但是微博用户手指不需要进行任何移动,等于是原地重复点击两次。所以我们无法判断双方孰好孰坏,只能说抖音的交互方式对新用户来说更加的友好。

总结


在做这期视频的时候,适逢微信新版本发布。其中一个改动点是,视频和图片查看界面的按钮都统一移到界面的底部。因为考虑到用户在单手握持手机的情况下,拇指很难直接够得着界面顶部。这样的改动可以方便用户操作。我看了一下反馈,发现持反对意见的较大,原因很简单:不习惯。


做一款好产品,我们需要秉持着一颗尊重用户的态度。但是我不赞成把“用户当成上帝”的观点,大多数用户都是偏爱旧有模式的。即使你的改动从长期上来看,对他们来说是有益的,用户也会抗拒。因为他们看的永远都是当下的利益,因为你的改动我要离开我的舒适区,我要重新学习并适应新的交互模式了。人民创造了历史,但是人民本身也是创造历史的最大阻力。

任何一个新事物的出现,人们总是倾向于从现有的知识体系中寻找类似的事物进行描述与概括,以寻求情感上的归属和理性上的辨识。但是过于超前的创新,往往是现有的知识体系无法解释的。无法解释,自然无法接受。


文章来源:站酷

UI设计的10条黄金法则

资深UI设计者

在我们设计UI有所疑惑时,可以参照以下标准做法。

这些做法并非一成不变—我只是列举出这些方法,相信它们可以对你的日常UI设计工作有所帮助。

我们需要记住一点,设计其实就是跳出框框思考,这意味着,有些时候我们要打破陈规。所以,对我的建议也不要全盘接受。

 

1. 设计时使用密度像素(dp),而非像素(pixel)

图中的像素值是密度像素值的三四倍

密度像素是屏幕上每一英寸所包含的像素个数,简称PPI(Pixels Per Inch)。dp(density-independent pixel)是密度独立像素,也写作dip(也有device-independent pixel之说,设备独立像素)。

设计界面时,建议大家基于设备的密度像素,而不是像素。这样可以保证我们设计出的图标素材比例适当,适应不同尺寸的设备。

举个例子,假如我们以密度独立像素dp为单位,设计了一个 200 x 50的按键,那么这个按键在160ppi的屏幕上的尺寸是200 x 50像素,在320ppi的屏幕上的尺寸则为400 x 100像素,即原尺寸的两倍。

因为有些屏幕的单位英寸的像素数量要比其他屏幕多,即ppi分辨率大,为了保证设计的图标在不同分辨率的屏幕上都一样大,设计师通常只是设计一个尺寸,导出2x、3x、4x的尺寸。

iPhone XS Max的屏幕尺寸是414 x 896。但这里的单位并不是像素,而是点的个数。论像素,则是1242 x 2688 px。知道了这些,给iPhone XS Max做设计时,我会以414 x 896个点为尺寸做设计,而后导出3x的图标素材。

 

2. 间距使用8的倍数(8dp)

为什么UI设计的间距都是8的倍数而不是5的倍数呢?这里有一个简单的解释—如果一个设备是1.5x的分辨率,我们就没法导出一个奇数。

另外,现代主流的屏幕尺寸都是以8为单位,以8的倍数做设计可以很好地适应这些屏幕。

以8的倍数设计可以保证设计的一致性。基于这种惯例,大家在进行设计工作时不用再猜测间距的数值,每个图标都可以完美地与其他图标对齐。

有关这个话题的更全面探讨,请参考Bryn Jackson的文章《八像素网格设计》

 

3. 删减元素容器的线框

我们在设计的过程中应该时常将自己抽离出来,审视界面中这些作为元素“容器”的线和框是否让界面显得过于杂乱,是否应该予以保留。通常这些用以区隔界面内容的线和框可以被边界留白代替。

我们设计的大部分元素都存在于线框里,简单清除掉这些“容器”可以让界面看起来不那么拥挤—给元素更多呼吸的空间。

 

4. 无障碍设计—重视对比度

善用对比度不仅仅是为了让用户的注意力集中于重要的信息,更是为了使产品更容易访问/使用。

设计产品就好比建设像图书馆、学校一类的公共场所,它的适用对象需要涵盖每一个人,包括失明、色盲和视障用户。

Web内容无障碍指南(WCAG)要求文本或文本图像的对比度至少为4.5:1。

为了保证设计达到该标准,我们可以下载Stark这款插件来检查设计是否是无障碍的。

 

5. 基于用户习惯,设计用户体验

为什么有些图标元素会被公认为标准?原因有多种。

假如你把一个按钮设计成圆形,那么当我们需要一个(字数较多的)“Start Free Trial”按钮时,它就会不必要地占用界面中竖直方向上的空间。

另外,用户期待的是与其他产品相似的体验。如果你设计的网站、APP或软件与用户的既有习惯相悖,那么这样的体验是不直观的,用户很可能会因此受挫。

故而,在我们发挥创造力的时候,最好以现有的设计规范为基准和前提。不要重新设计轮子。

 

6. 善用颜色重量(color weight),建立视觉层次

每一种颜色都有自己的视觉重量,我们可以通过借助颜色的视觉重量来建立内容的视觉层次,用颜色的深浅来呈现内容的重要性的层级。

善用颜色视觉重量的秘诀是,一个更为重要的元素,应该有更重的视觉颜色,以便用户快速浏览网页,区分重要和不重要的信息。

大字号、粗体的信息会首先被用户注意到,而后他们会关注其下的辅助性信息。

 

7. 避免使用超过两种字体

通常,设计界面会控制使用的字体数目,两种不同的字体就应足够—这不是说你不能使用更多字体,只是你需要充分的理由。通常来讲,仅用两种字体会更好。

设计界面时要善用字体家族。

使用字体家族意味着我们可以使用同一字体的不同变体。字体家族的存在就是为了字体的不同变体可以更和谐地被放在一起,让设计在保持多变性的同时兼顾一致性。

选择字体时,尽量选择那些有多种重量(如标准、适中、粗体、特粗)和样式的(如长体、宽体、斜体)的字体家族(译者注:作者此处所述选字体经验的适用对象主要为英文字体。)。这样既会给设计留出可探索的空间,也不会增加额外的字体种类。

 

8. 让用户认知,而非记住

让用户去认知产品是产品设计中所推崇的,因为,我们为什么要让用户在使用的过程中去思考呢?

结账页面、电子邮箱、搜索历史、返回按钮等都是很好的建立了用户认知的例子。

在好的设计中,结账页面是不需要让用户记住他们所要购买的物品的。用户应该可以清楚地从界面中确认他要购买的物品,而非通过回忆来想起。

在Gmail邮箱中,我瞟一眼就可以知道哪些是已读邮件,哪些是未读邮件,这个过程不需要过脑子。同理,我登录到自己的亚马逊账户后,可以迅速地从上次购物时中断的地方继续开始购物—因为它显示了我最近浏览过的物品。

设计时,应让元素、功能、选项明显可见,最小化用户的记忆负荷。用户无需自己在操作的步骤中记住信息。系统的操作说明应该在需要时很容易看到或查到。
—Nielson Norman Group(尼尔森诺曼集团,人机交互和用户体验咨询公司,唐·诺曼是创始人之一)

 

9. 切忌拖慢用户体验  

作为用户,速度和效率是最重要的。用户使用一个应用程序,是为了解决某个特定的问题。

我要速度。
— Ricky Bobby(电影《塔拉迪加之夜:瑞奇鲍比的民谣》主角、赛车手)

如果将一张支票通过手机存入银行账户这个体验是非常让人享受的,那固然很好,但作为设计师,千万不要让你的创造力阻碍用户实现他们的目标。

关于动画和微交互的一条经验就是,如果某个体验只是无谓地增加了时间,那么这不是在改善用户体验。

如果加入的动画带有目的性,则可以改善用户体验;但是如果增加的只是不必要的分散注意力的元素或用户操作,那么用户体验不会变得更好。

Dribble上有很多着陆页的设计—当用户向下滚动鼠标时,动画随之展开。通常,这些设计展现出过火的动画效果,每个元素都在淡入淡出,动来动去,而几乎不关注体验本身。当太多事情同时在界面上发生时,用户很难知道到底哪些信息是应该关注的,这等同于浪费用户宝贵的时间。

这位Dribble用户,非常抱歉把你揪了出来:/

无数研究表明,界面中动画的最佳时间在200到500毫秒之间,这个数字是由大脑的特征决定的。任何短于100毫秒的动画都是一晃而过,人眼根本无法识别;而超过一秒的动画会带给人无聊和延迟的感觉。
《UX微动画设计指南》

所以,如果你要在界面中使用动画,那么给它一个明确的目的,并且不要让用户等待超过500毫秒。在2019年的今天,惹恼你的用户只需要1毫秒。

 

10. 大道至简

每次我们想要增加额外的信息到界面中时,例如按钮、文字、照片、动画、插图等等,它们就会跟相关的信息进行竞争。如果一页上有太多东西,那么某些元素的重要程度就会被削减。

谷歌搜索首页就是典范。这个设计将全部的注意力放在了搜索这个主要功能上,没有把用户淹没在不必要的信息海洋里。

对不起了雅虎,在这必须把你当做不好的案例展示

最后,分享给大家一句我最爱的设计箴言:

臻于完美之时,不是加无可加,而是减无可减。

文章来源:UXRen

4个要素,读懂一款产品的会员体系

资深UI设计者

作者通过从会员体系构成的4个核心要素对“京东、亚朵、支付宝、腾讯理财通”的会员体系进行拆解,发现不同类产品中的设计会员体系需要注意的问题。

一款产品要想持续获取用户价值,前端增长和后端活跃、留存与转化缺一不可。随着流量越来越贵拉新成本越来越高,多数互联网公司开始将用户活跃与留存视为产品核心指标,而会员体系一直以来都是最有效的活跃留存与转化的运营手段之一。

本文对比4款目前付费类产品中比较典型的“京东、亚朵、支付宝、腾讯理财通”的等级会员体系,分别代表4种不同的等级会员体系类型。从会员体系构成的4个核心元素:命名、层数、成长值计算、会员权益,来快速了解一款产品的会员体系。

希望通过这篇文章给在做会员体系抓耳挠腮的你一点启发。

一、会员命名和层数

会员命名是品牌文化、用户群体特征的体现,而会员层数的多少则反映了产品转化路径的长短。

1. 四个产品的会员命名和层数概况

京东会员分为非付费会员(下称等级会员)和付费会员两个体系。为了凸显付费会员,2019.9.15日起,取消了等级会员原有的铜银金钻制会员体系,以京享值代替

至此,从会员命名的角度,京东的会员只有付费会员和等级会员两种名称,等级会员会员之间以京享值的大小进行区分,共分为5层。

亚朵会员在命名方面充分体现了“舒心微笑”的品牌特征,等级会员共分为5级,分别为注册会员(初遇)、银会员(识君)、金会员(知己)、铂金会员(执手)、黑金会员(逍遥)。括号内的短称分别来对应着两句诗词,详见官网的会员介绍。

支付宝等级会员共分为4级,分别为大众会员、黄金会员、铂金会员、钻石会员。从级别数量来说,支付宝会员级别相比于前者少了1级,会员升级的难度也加大了。

腾讯理财通等级会员共分为4级,分别为普通会员、白银会员、黄金会员与铂金会员。颜色区分上,级别从低到高颜色分别为蓝灰色、银灰、金色、黑色,通过灰色调营造理财产品的严肃和专业感。

【注:等级会员是指,会员级别不能直接购买得到,而是要通过完成产品任务升级达到。付费会员是指,用户通过付费购买产品会员特权,购买的会员独立于非付费会员,不是非付费会员的某一级】

2. 会员命名和层数分析

通常会员命名会以金属作为主线,其中金、银、钻石等最为常见。

这是用户已经熟知的命名方式,遵循以上规则有助于用户更快的接受会员身份。但如果产品有特殊的品牌文化和目标用户,可以考虑在命名上加入品牌元素,如亚朵。

付费会员与等级会员之间具有重叠性。

高阶的等级会员分散了用户对付费会员的注意力,因此京东最终不得不对等级会员体系采取“除名”做法。

付费会员必然会导致原等级会员体系影响力的削弱,在初始设计时需要综合考虑付费会员和等级会员体系在维系用户、营销行为等方面的价值,做好取舍。

此外,还可以参考亚朵酒店的做法,将等级会员的某一级作为付费对象来售卖,如下图,亚朵酒店将会员体系中的第三级【金会员】单独售卖。

不同产品的会员层数不同。

电商等付费类产品会员普遍采用4-5级的分层、资讯类产品的会员体系可多达10级,如趣头条等;社交、游戏类产品更是根据玩法的不同,设置几十级的会员等级。

会员定级层数主要取决于产品的转化路径长短:

付费类产品转化路径短,用户使用产品就一定会付费,因此只需要根据用户实际消费能力进行用户分层,4-5层即可覆盖用户的全部消费能力。

但社交类产品转化路径长,需要用户长期活跃在产品内才有机会转化付费用户,会员级别需要足够多,才能保证用户有动力持续的活跃和留存。

此外,从成本的角度考虑,付费类产品的会员权益通常为商家的折扣和返利,会员级别越高企业付出成本越高,

级别过多会导致企业难以承担成本,而社交、游戏类产品的会员权益通常为虚拟的勋章、身份象征等,即使会员级别高达几十级,也不会产生过多的成本。

下图是趣头条10级会员的权益,可以看到权益大多数为荣誉勋章类虚拟奖励,企业几乎不需要付出成本。

二、成长值计算

成长值是用于衡量会员级别的刻度,用户通过获取成长值来达到升级、保级的目的。成长值的获取方式体现了产品主要的运营动作,而计算公式也根据业务变动速度和产品特点有所不同。

1. 京东会员的成长值计算涵盖的要素

  • 计算周期:30天;
  • 涵盖产品:京东商城和京东金融
  • 行为:消费、活跃、信誉等方面,详见下图,已将需要消费的行为进行了特殊标记;
  • 计算方式:黑盒,并未对外展示成长值计算的详细公式。

分析如下:

京东的主要运营动作包括以下几方面:提高用户消费,促进用户活跃、收集用户信息、建立信用评分体系等。

京东成长值的具体计算公式并未明确给出,因此可以推断其业务调整快,变动幅度大。不公布具体计算公式可以灵活的调整成长值计算公式,但也牺牲了用户的确定性体验。

2. 亚朵会员的成长值计算涵盖的要素

  • 计算周期:最近12个月;
  • 涵盖产品:亚朵;
  • 预订渠道:亚朵APP、微信小程序、客服热线、企业号等渠道预定;
  • 行为:消费、任务(完善信息、完成订单);
  • 计算方式:白盒,成长值包括支付金额、入住间夜、完成任务三个部分,计算公式明确。

分析如下:

亚朵对用户的主要运营方向为消费和互动,运营动作主要是围绕着订房和相关服务展开。

成长值计算兼容地区差异:酒店业务通常分布在多个城市,每个城市的消费水平差异很大。若仅仅以消费金额来衡量会员级别,会导致大多数的高级会员都集中在高消费城市,无法实现对二三线城市的用户激励。因此,酒店行业会员的成长值通常结合间夜和消费金额综合计算。

酒店预定更加依赖于用户渠道,包括OTA(美团/携程等平台)、自营渠道、分销商等。不同的渠道企业付出的成本不同,会员体系通常只给自营渠道的用户计算成长值。如亚朵。

3. 支付宝会员的成长值计算涵盖以下几个要素:

  • 时间:最近12个月;
  • 产品:支付宝;
  • 行为:消费购物、生活缴费、金融理财;
  • 计算方式:白盒,所有行为可获得的成长值均明确规定,详见下图梳理。

分析如下:

支付宝主要的运营动作包括促进用户消费购物、完成生活缴费和增加金融理财。生活缴费任务的成长值奖励较高,可以推测占据用户生活支付场景是主要运营方向

支付宝的成长值计算公式为白盒,这与理财类产品性质相关,由于涉及到用户的金钱投入,更需要获取用户的信任,明确的计算方式能够带给用户确定感。

4. 腾讯理财通会员的成长值计算涵盖以下几个要素:

  • 时间:最近30天;
  • 产品:理财通平台
  • 行为:购买理财、会员任务(完善个人信息和达成理财目标)
  • 计算方式:白盒,详见下图拆解。

分析如下:

腾讯理财通的主要运营动作包括促进用户购买理财、激励用户完善个人信息。腾讯理财通的会员任务多达27个,收集用户信息的任务占到1/3,可见完善用户画像为产品的主要战略。

理财通会员成长值的计算公式同样为白盒,清晰的展示用户完成任务能获得的成长值。

三、会员权益

  • 从用户角度来说,会员权益是用户持续在产品内活跃和留存的动力,好的会员体系应当有突出的核心权益,且核心权益能够满足用户使用产品的核心诉求。
  • 从企业角度来说,会员体系权益应当形成一个好的业务闭环,权益能够促进用户的再次消费,尽可能的挖掘用户的剩余价值。

1. 京东会员权益构成

  • 从核心权益角度看:京东的会员以售后服务为核心特权,会员的级别越高,享受的售后服务越全面。这说明京东等级会员体系的目标用户更加注重售后服务,是用户长期留存的主要原因。
  • 从业务闭环角度看:京东会员体系特权强化了其售后能力的优势,为用户的购买提供保障,提高用户满意度。结合京东的付费会员,共同形成业务闭环,促进用户的复购。

2. 亚朵会员权益构成

(注:数字标记表示用户级别,其中高级会员拥有低级会员的全部权益)

  • 从核心权益角度看:亚朵的会员权益基本围绕住宿需求,其核心权益是消费优惠返利,涵盖1-5级全部会员。可见酒店类产品的用户的核心诉求还是在于更高的性价比。
  • 从业务闭环角度看:亚朵酒店的会员权利累计20项,包括优惠返利、住宿体验、饮食、服务和身份彰显等,几乎覆盖了用户住宿的全部场景。以优惠返利为核心的会员权益和多种服务提升用户体验的业务闭环,可以有效的促进用户的二次下单行为。

3. 支付宝会员权益构成

  • 从核心权益角度看:支付宝会员体系的权益覆盖用户的衣食住行多种场景,核心特权是在支付宝内的商家小程序可以享受会员特权。满足了用户在支付宝以会员身份完成衣食住行的需求。
  • 从业务闭环角度看:支付宝会员权益形成了对商家小程序的引流,促进支付宝小程序的发展,进而实现用户在衣食住行各个场景下都在支付宝小程序内消费,实现了支付宝的支付业务闭环。

4. 腾讯理财通会员权益构成

腾讯理财通会员等级礼遇如下图所示:

  • 从核心权益角度看:腾讯理财通会员权益基本围绕用户的理财行为,核心权益为资金流转特权。包括周转、还款、存取等。用户在产品内的核心需求是更加顺畅的完成资金流转。
  • 从业务闭环角度看:腾讯理财通会员权益为用户提供了流畅的资金流转权益,用户就可以更加放心的在产品内投资理财。同时理财通的等级礼遇主要围绕白金以上会员提供高端服务类权益,与会员权益形成业务闭环,促进用户的活跃和留存。

结语

通过分析会员体系的4个核心元素:命名、层数、成长值计算、会员权益,可以迅速读懂一个产品的会员体系。

一个好的会员体系能够通过选择合适的会员命名、设置符合产品转化路径的会员层数、设计涵盖主要运营动作并能灵活调整的成长值计算体系、提供满足用户核心需求的会员权益。最终形成业务闭环,引导用户价值逐步提升,实现用户价值的最大化。

文章来源:人人都是产品经理

用超多案例,总结了 10 个让登录体验更好的小技巧!

资深UI设计者

看似简单的登录框,暗藏了多少值得推敲的用户体验?这10个细节,就是你和设计高手的区别。

技巧1:更明显

你不应该让你的用户到处寻找登录区域。他们找的时间越长,就会越沮丧。他们越沮丧,最终登录的可能性就越小。

一个很好的例子就是 Gmail 的登录页面。

你可以确切地知道你需要在何处登录,以及要在输入区域输入什么内容,上面的例子,如果你没有 Gmail 帐户,它允许你通过单击「创建帐户」来轻松地创建一个帐户。

好的用户体验是使你的登录区域明显,使你的用户尽可能容易地进行登录操作。

技巧2:使用第三方登录

第三方登录正迅速成为用户登录账户的方式,理由很充分。为不同的产品创建多个账户既耗时又令人困惑。很难记住一堆不同的密码和用户名。

通过允许用户使用用户的第三方账户中的信息来创建一个账户,可以解决所有关于这些问题。

让我们来看看下面的石墨文档和MONO登录时的选择方式:

甚至还有更方便的注册登录方式,手机短信验证码在注册的同时登录:

一些产品在用户点击第三方注册登录时还需要用手机号进行短信登录,从用户的角度看,这很明显是一个不好的体验,但是产品的角度去思考就不一样了,产品为了获取用户更多的信息,则需要这样来设计流程。

这种设计流程该不该用,这需要在产品和用户之间进行权衡,第三方与手机短信验证码登录,在提高用户体验的同时,可以提高用户的效率,使界面更加直观。

技巧3:更简单

因为环境不同,在中国很多网页端的网站,第三方登录很的产品很少。

例如,如果你的 QQ 没有在电脑端登录,因为即使选择第三方 QQ 登录,你也要拿出手机—打开 QQ —打开扫一扫,进行扫码登录等一些列的操作。

又或者,当你想要登录 behance,只要浏览器有记录之前的第三登录,点击第三方登录即可直接进入该网站,甚至不用注册。

可以看下面的腾讯网与 behance 的网页登录:

好的登录体验应该只有账号、密码两个输入字段,或者手机号码、短信验证码两个字段,以及使用第三方登录的选项。在简单、的同时,并为用户提供了很好的体验。

技巧4:区分注册与登录

如果一个用户来到你的网站进行注册,或者想他们返回登录界面,这就需要让用户清楚的知道他在何处,下一步应该去哪里。

我们通过使用登录字段与注册字段的区别来帮助他们,让我们看看下面的 dribbble 注册界面:

创建账户的按钮已 dribbble 的主题能很快突出在用户面前。新用户可以直接在页面上注册,而返回的用户可以使用最上面右上角的登录两字。看到上面「sign in 」字段了吗?

dribbble 使用了不同的颜色、布局去区分注册按钮与登录的入口,这样更加清晰明了。

同时可以看看 dribbble 的主页面,他们会把 sign in 与 sign up 的进行区分,在 sign up 加上微边框,让用户能更快区分两者的不同。

技巧5:跳过用户名

让用户用他们的用户名来进行登录真的不是一和很明智的做法,为用户省去记录你产品的用户名的麻烦,应该让他们使用他们的电子邮件地址或电话号码注册来进行代替用户名。

ins 让用户有机会用他们的电话号码或电子邮件地址登录。

反例:

尽可能让用户同时用手机号码或邮件地址来登录,因为用户可能会忘记他们用来登录你的产品的电子邮件地址,所以这时,用户能使用手机号码进行登录。

技巧6:密码可显示

给用户提供可显示密码的按钮,减少用户输错密码的操作,当输错的同时,可进行对错的字段进行纠正,不用全部删掉重新来。

让我们来下面的脉脉和片刻:

技巧7:记住用户信息

还有什么比再次到你之前登录的网站或 app,却发现你需要再次输入账户密码登录更令人沮丧的事情吗?

当你的用户返回到你的网站时,请确保他们已经登录了,或者为了方便登录,提前为他们预先填充账户和密码等字段。

谷歌在这方面做得很棒。每当用户需要重新登录到 YouTube、Gmail 或任何其他谷歌品牌时,他们的登录信息都会被记住,使登录过程更加简单。

盟友银行允许用户勾选 「保存用户名」 复选框,允许网站在用户到达网站时默认记住用户名。这是记住用户信息的另一个好方法,展示形式可以多样化,可根据自己产品与用户需求来进行把控。

技巧8:轻松恢复密码

有时你的用户会忘记他们的登录信息。当这种情况发生时,尽量让恢复过程尽可能的轻松。

公众号的账户密码输入栏有记住密码复选框,以防用户忘记他们的用户名和密码,不用每次进来都输入账户密码进行登录。

印象笔记对他们的密码做了一些巧妙的处理,让用户知道他们多久以前更改了密码。

这个小小的提示可以唤起用户的记忆,帮助他们记起密码。

如果用户忘记了他们的登录信息,要让他们清楚应该去哪里。如果你将使令人沮丧的情况变得不那么令人沮丧,你的用户将因此会喜欢上你的产品。

技巧9:让用户知道大写锁定已开启

我们都有过这样的经历:令人沮丧地输入和重新输入你的密码都无济于事,结果却发现你一直开着大写锁定键。

可以通过警告你的用户,防止这种情况发生。微软的 Edge 浏览器还使用户可以选择在键入时打开大写锁定时打开通知。

技巧10:无密码登录

让你的移动用户使用无密码登录,现在很多特别是金融类 app,都可以让用户进行指纹登录,因为不像其他 app 一样可以一直保持用户已登录状态,在保障安全的同时能更便捷。

以上的设计技巧与案例希望能帮助各位读者提高产品的用户体验。

欢迎关注作者的微信公众号:「设计探」

体验设计师要懂的七大交互心理学

ui设计分享达人


如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

心理学在我们生活中涉及的面很广,是每个行业都要了解的,对于设计师来说,更要了解用户的心理,因为我们的设计是面向用户的 



阅读时间:大约9分钟


目录


  • 前言

  • 7±2法则

  • 费茨定律

  • 希克定律

  • 格式塔原则

  • 色彩心理学

  • 冯·雷斯托夫效应

  • 奥卡姆剃刀原理

  • 总结




前言


最近正好在学习用户体验方面的知识,也查阅了相关的资料和文章,输出是最好的输入,所以把整理的相关文档写下了,也是将所学的知识再巩固下,欢迎大家一起探讨。




7±2法则的定义


7±2法则出于美国心理学家George A. Miller1956年发布的论文《神奇的数字7加减2:我们加工信息能力的某些限制》。Miller最早对短时记忆能力进行了定量研究,他发现人的短时记忆能力的广度为7±2个信息块。

这说明人的大脑短时记忆的容量大约为“7”,并在7+2与7-2之间浮动,因此,心理学家把这个神奇的记忆容量规律称为“7±2法则”。由7±2法则我们可以得出,一般人接受新事物的记忆容量大约是7,最多不会超过9。


心理学家Alan Baddeley质疑7加减2规则。Baddeley(1994)翻出Miller的文章,发现那并不是真正的研究报告,只是一次专业会议的讲稿。Miller基本上是自言自语,猜想人能够同时处理的信息量有没有固有的限制。

此外,Nelson Cowan(2001)等研究者也追随了他的脚步。现在研究表明,那个“神奇的数字”其实是4。(无论是7±2还是4,便于我们记忆同时也协助我们工作提升效率就是最好的数字)


George Mandler(1969)指出,人们能分门别类地记住信息,并且如果每个记忆类别里只有1~3条信息,那么人们能够出色地回忆起来。当每类超过3条信息时,记忆效果就会相应下降,每类有4~6条信息时,人能记住80%;储存信息条数越多,记住的比例就越低,当每类有80条信息时,人只能记住20%(如下图所示)。



举个直观的例子,以下随机给出10个词语,你看一遍能记住几个?

桌子   电脑   椅子  水杯   铅笔   地图   绿植   键盘   鼠标   文件


7±2法则的运用


1、组块记忆


为了改善不稳定的工作记忆,人们会采取一些有趣的策略。其中之一就是将信息“组块记忆”。

也就是把数字分为3-4-4来记忆,抖音的登录账号、美团的Dialog弹窗都是遵循的这一原则。

包括现在在生活中,我给别人发手机号码或者是身份证号的时候都会选择这个原则,自己看着也清晰,也便于对方将信息分类。



2、优化选项


网易新闻和今日头条的导航都遵循了7±2法则,更多的信息左侧滑动即可。



3、页面布局


7±2法则还可以帮我们将页面分组,将内容按照属性分类,使页面更有条理性和层次感,用户能的完成自己的操作,例如:饿了么




费茨定律的定义


任意一点移动到目标中心位置所需时间与该点到目标的距离和大小有关,距离越大时间越长,目标越大时间越短。

用数学公式表达为时间 T = a + b log2(D/W+1)。

T=移动设备所需时长;a,b是经验常量,D=设备起始位置和目标位置的距离;W=目标的宽度大小。



费茨定律的理解


1、设备当前位置和目标位置的距离D越长,所用时间越长;

2、目标的大小W越大,所用时间越短。


费茨定律的应用


1、按钮放大,点击更容易


闲鱼和印象笔记,一个是直接发布闲置,另一个是直接创建笔记,都属于核心功能,将用户最想要或最直接想点击的按钮外漏、放大;增加可点击区域来满足用户的需求。



2、让相关的内容更接近


淘宝、京东的加入购物车和立即购买,在视觉上让用户增加了他们相关性的认知,也减少了两个按钮操作之间的距离和时间。



3、页面的边和脚适合放一些按钮和菜单


安卓手机删除应用时的操作、Potoshop软件顶部菜单等、Mac操作系统的底部应用等,无论我们怎么操作,鼠标都不会超过这些区域。







希克定律的定义


希克定律 — 原称希克海曼定律(Hick Hymalrs 1aw),是一种心理物理学定律。

一个人所面临的选择越多,做出选择所花的时间就越多,当面临选择的数量增加,做出决定的时间也会跟着增加。


希克定律的应用


希克定律的应用很广泛,不仅是在产品上,在生活中也随处可用。


和同事每天都会遇到的问题,一到中午,同事就会问,吃什么?每日一问,看着商场众多美食,真是发愁,但如果她换种问法:我们今天中午吃海底捞还是和府捞面,这样的询问是不是就节省思考和作出选择的时间?


遥控器的设计也是,看到下面两个遥控器的样式,你会感觉哪个好用,很明显是右边小米的遥控器,老人再不用教的情况下就可以自己操作,左边的拿起来我们要花很多时间是研究如何使用,可能刚学会,想进行下一个操作的时候又要去花时间研究,是不是很闹心?



猿辅导APP中,导航默认的是所有的课程,对于学员来说选择自己想要学习的课程,比较浪费时间,右侧的设计就是将我们不感兴趣的课程关闭推荐,剩下的课程大大缩短了我们选择和寻找的时间




格式塔的定义


格式塔(德式造型)是20世纪20年代由德国心理学家提出的一组视觉知觉原理。它建立在“一个有组织的整体,被认为大于其各部分之和”的理论基础上。


格式塔的应用


在我们做设计的过程中,常用的是原则有:简单性、接近性、相似性、连续性、闭合性等



1、简单性原则


简单原理适用于设计中的三角形构图,均衡构图,对称构图,向心构图,摄影中的对角线,X型构图等。这些构图方式都是为了把复杂的信息元素通过简单的方式让观者易于理解。


58同城和爱奇艺首页都是均衡和对称的构图



2、接近性原则


一个页面中,如果两个元素是接近的,给用户的感觉他们之间就有相关性


在支付宝我的页面中,个人信息都是有相关性的,所以放一起遵循了接近性原则



3、相似性原则


我们的眼睛很容易关注那些复杂环境中外表相似的东西,可以利用相似原则组织好界面中的信息和层级关系。


相似性原则在UI设计中也很常见,网易邮箱、腾讯视频都采用了相似性原则



4、连续性原则


人的视觉有追随一个方向上的连续性,以便把不关联的元素联系到一起。


我们在APP中常看到列表也是连续性原则的应用




色彩心理学定义


在自然欣赏、社会活动方面,色彩在客观上是对人们的一种刺激和象征;在主观上又是一种反应与行为。色彩心理透过视觉开始,从知觉、感情而到记忆、思想、意志、象征等,其反应与变化是极为复杂的。色彩的应用,很重视这种因果关系,即由对色彩的经验积累而变成对色彩的心理规范,当受到什么刺激后能产生什么反应,都是色彩心理所要探讨的内容。


色彩心理学应用


  • 黑色:精致和力量

  • 白色:干净、精致、纯洁

  • 红色:勇气、激励、力量;也能激发欲望

  • 蓝色:冷静、安定、信任、安全

  • 黄色:乐观、欢乐

  • 绿色:平衡、可持续的增长

  • 紫色:皇权、精神意识、奢华

  • 橙色:友谊、舒适、食物

  • 粉色:平静、女性化、性


一说到美食,我们能想到的颜色就是橘色,暖色系,因为这个颜色会增加食欲

插播一个知识点:美团外卖选择的橘色,跟美食相关的颜色,我们可以理解,但饿了么平台为什么会选择蓝色而不是暖色系呢?饿了么是以科技为主导的,核心并不是美食,所以选用了科技蓝



在一些电商类网站都会将加入购物车、立即购买颜色设置为红色,因为红色可以刺激人的眼球,来增加点击的欲望,还有微信群和朋友圈的未读,都设置成红色



颜色也是影响人们的情绪,比如长时间在橘色的环境下呆着,会使人焦虑不安,所以一些餐厅在颜色、灯光选择上都会选择用一些暖色系,蓝色和褐色,会使人平静,适合一些酒吧;


但色彩也不能滥用,它是具有联系和含义的,例如:红色代表赤字,即经济困难;也可以代表警告、危险等;绿色代表环保、通行,所以在选用颜色上也要考虑它的含义和意义,要谨慎。




冯·雷斯托夫效应定义


冯·雷斯托夫效应告诉我们,某个元素越是违反常理,就越引人注目、令人难忘。

Hedwig von Restorff在1933年检验了这个理论。她让实验对象观看一系列相似的物品。如果其中某个很特殊,比如说有聚光灯照射,那么相比其他物品,受试者就更容易回忆起这件物品。


比如,下面这个红西红柿


如果你想要让某物引人们的注目,就要使它特殊化,可以通过色彩、尺寸、留白等方式来引起注意


例如:小红色的红色按钮、苏宁易购一套节日气氛的首页





奥卡姆剃刀定律定义


奥卡姆剃刀定律(Occam's Razor, Ockham's Razor)又称“奥康的剃刀”,它是由14世纪英格兰的逻辑学家、圣方济各会修

士奥卡姆的威廉(William of Occam,约1285年至1349年)提出。这个原理称为“如无必要,勿增实体”,即“简单有效原理”。正如他在《箴言书注》2卷15题说“切勿浪费较多东西去做,用较少的东西,同样可以做好的事情。”


奥卡姆剃刀定律的应用


我们在进行页面设计的时候并不是内容越多越好,信息飞速发展的时代,大家都讲究快、效率,我只要通过这个APP尽快达到目的为好,繁冗的功能对用户来说只会降低用户体验感,抖音APP底部的导航开始是文字加icon,后来发现图标会影响整体的效果,因为当视频播放的时候,下面的Tab识别度会降低,经过改版,将icon去掉,文字放大,CTR也上去了,之后小红书就开始参考抖音的改版:我不管你去掉的原因是什么,CTR上去就行



总结


一句话在回顾下文章的定律


7±2法则:一般人接受新事物的记忆容量大约是7,最多不会超过9

费茨定律:A和目标B的距离越长,所用时间越长;A大小越大,所用时间越短。

希克定律:选择越多,花的时间就越多,选择的数量增加,做出决定的时间也会跟着增加。

格式塔原则:常用的是原则有:简单性、接近性、相似性、连续性、闭合性

色彩心理学:颜色也是影响人们的情绪,选用上要谨慎

冯·雷斯托夫效应:某个元素越是违反常理,就越引人注目、令人难忘

奥卡姆剃刀原理:简单有效原理,去繁从简

转自:站酷-麦小兜Sarah 

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务


交互设计师如何梳理业务需求?

资深UI设计者

需求整理的现状

写这篇文章的初衷,是在实际工作中遇到 PRD & DRD 文档,对于一些交互设计图,会产生不理解,或者说在实际落地画图的时候会发现一些前后不一致的问题,解释过于冗余,不清晰。在接触新的业务时,很难把新理解的内容从上至下的消化完整。所以希望通过这篇文章帮助刚接触交互的同学更好地开展交互设计工作。

在传统瀑布式需求分析流程中,我们设计师往往拿到的是已成型的信息架构图&产品结构图&关键业务流程图,只是了解一下大概是什么类型的产品,很难发现企业产品中真正关键的流程价值点在哪里,或者说也不清楚后续发展的走向,只能卯足了劲去做图做说明,整理完整。时间紧迫压力大,又要照顾整个项目。往往决定产品成功与否的,是产品 20% 的主要功能(二八原则)。所以在面临初期产品设计中,应该将主要精力放在重要功能流程中。

目前,在互联网产品中,敏捷开发是所有产品设计者最推崇的。原因在于,能够对业务、设计、开发更有前瞻性&敏捷性。

理解业务需求,是做好交互的首要条件

产品交互的成功一定是建立在业务需求提炼清晰的基础上。业务需求的价值提炼,也是设计师需要参与完成的。业务需求是一个比较大的任务,来源可能是老板的要求,可能是产品提出的,也可能是用户的反馈。通过业务需求,我们要分析出相关的业务目标。有个偶然的机会,了解到彩色 UML 的设计方法,在具体实践中,感觉这个方法能够快速适应任何业务流程,简单方便,易懂,并能快速发现业务流程中的问题,加以修正完善。

彩色UML建模

有幸认识王海鹏老师,他推荐了早年他翻译的彩色 UML 建模一书,作者 Peter Coad,是将彩色和企业组件集成到建模技术之中的第一本书的主要作者,是世界上经验丰富的建模人员之一,他所创建的模型几乎涉及到所有行业。

此书是第一本介绍用彩色来表达软件设计的著作。作者用 4 种颜色来代表 4 种架构型,给定一种颜色,你就知道这个类可能具有哪些属性、链接、方法和交互。得到的彩色构建块能创建更好的模型,并获得应有的认可。彩色和架构型仅仅是开始。作者更进一步将这些架构型发展为 12 个类的领域无关组件。作者在过去 10 年中创建的每个模型,都遵循这个组件所表达的基本形状和职责。

笔者利用彩色 UML 建模的设计方法,用于业务梳理工作,达到了意想不到的效果。以下为彩色 UML 建模基本概念(截取彩色 UML 建模书中的介绍)。

△ 《彩色UML建模书》第9页

△ 《彩色UML建模书》第10页

△ 事例会员注册

交互设计中常用图

1. 实体关系图(又称ER图)

定义:ER 图是用来描述现实世界中的实体关系模型,所谓实体是指客观上或者逻辑上存在并且可以区分的人事物。

作用:促使你以最适合技术理解实现的方法,来规范的描述功能模块的核心要素,其实就是数据库的物理结构。而这种描述是无二义的,最清晰传达 PM 的设计思想。

2. 功能结构图

功能结构图就是按照功能的从属关系画成的图表,在该图表中的每一个框都称为一个功能模块。功能模块可以根据具体情况分得大一点或小一点,分解得最小功能模块可以是一个程序中的每个处理过程,而较大的功能模块则可能是完成某一个任务的一组程序。用通俗的话来说,功能结构图就是以功能模块为类别,介绍模块下各功能组成的图表。

作用

  • 梳理需求,以鸟瞰的方式对整个产品页面中的功能结构形成一个直观的认识。
  • 思考并明确产品的功能模块及其功能组成。
3. 信息结构图

信息架构属于用户体验的结构层,是产品的骨架。一般是由产品经理或者更高层的管理人员给出大框架。除非是大的产品迭代,否则不会大改。

作用

  • 帮助 PM 梳理复杂内容的信息组成,避免信息内容在展示过程中出现遗漏、混乱、重复;
  • 作为开发工程师建立数据库的参考依据。

信息结构图构成要素

  • 导航:网页访问者的访问途径。
  • 频道:某一个同性质的功能或内容的共同载体,也可称为功能或内容的类别。
  • 子频道:某频道下细分的另一类别。
  • 页面:单个或附属某个频道或分类下的界面。
  • 模块:页面中多个元素组成的一个区域内容,可以有一个或多个,也可以循环出现,如:文章列表。
  • 模块元素:模块中的元素内容,以文章列表举例,文章标题、文章摘要、文章发布时间,这些都是元素,都是组成模块的内容,同时他们也是可以循环出现的。元素的类型可以是:文字、图片、链接等等。
4. 产品结构图

定义:产品结构图是综合展示产品信息和功能逻辑的图表,简单说产品结构图就是产品原型的简化表达。

作用:它能够在前期的需求评审中或其他类似场景中作为产品原型的替代,因为产品结构图相较于产品原型,其实现成本低,能够快速对产品功能结构进行增、删、改操作,减少 PM 在这个过程中的实现成本。

5. 业务流程图(泳道图)

业务流程图,不是操作流程图也不是页面流程图。它是产品的整体业务流程,直接和业务挂钩,可以说是产品的核心流程。

作用

通过业务流程图,钻研关键事件的流程,分析为什么要这么做,探索出更深层次的问题,从而对现有不合理的业务流程进行重组优化,进而制定优化方案,改进现有流程;阐述在项目中各个角色是如何产生相关联系的。

绘制规范/建议

  • 让涉众参与,不要闭门造车:与业务流程图包含的各个参与角色代表适时确认事情的原本流程。
  • 恰当的层次分解,不要将所有的环节都铺到一张图上。
  • 逐渐深入,先抓枝干:切忌一开始就陷入细节。
  • 流程一定有开始和结束:切忌交出来的流程图,让读者问:流程的开始点是什么?用清晰的代表开始和结束的符号来完成第一步和最后一 步。
  • 流程图符号绘制排列顺序:由上至下,由左至右。
  • 同一流程图符号大小宜相对一致。
  • 编号:这是让沟通效率更高的优化措施。当你有了编号系统,相当于对你的流程图都赋予了唯一识别身份证号。负责流程规则审核和优化的部门能够清楚在邮件里传达 H5.1 流程优化,大家就更明确指的是什么。
  • 路径符号应避免互相交叉。
6. 任务流程图

任务流程图就是通过图形化的表达形式,阐述产品在功能层面的逻辑和信息。它能够更清晰、直观地展示用户在使用某个功能时,会产生的一系列操作和反馈的图标。

作用:基于业务流程,进行任务流程梳理,阐述角色和程序发生交互的流程,你如何进行操作,系统如何进行反馈。

任务流程与需求文档中的业务流程并不一样。虽然它们都是流程图,但业务流程更偏向于业务限制、后台逻辑等,并不过分注重用户的操作逻辑。而任务流程则需要关注用户如何操作、界面如何反馈等,从而引导用户完成用户目标。

7. 页面流程图

定义:指电子产品具体所呈现的页面跳转流程图。其承载了业务流程图所包含的业务流转信息。

作用:

  • 交互设计/原型设计的底子,基本依据。
  • 站在用户视角,代表用户所有可能的操作过程,页面流程能快速发现体验问题。
  • 突出页面元素与逻辑关系,提升原型设计的效率。

8. 线框图/原型图

定义:页面的模块、元素、人机交互的形式,利用线框描述的方法,将产品脱离皮肤状态下更加具体跟生动的进行表达。

作用:用例阐释者,用来了解用例的用户界面;系统分析员,用来了解用户界面如何影响系统分析;设计员,用来了解用户界面如何施加影响及它对系统「内部」的要求;类测试人员,用来制定测试计划活动。

构成要素

  • 页面标题:即每一个页面的对应标题,一般就是导航栏标题。
  • 页面内容:以黑白为主,保证信息规整易读。
  • 交互说明:用标签将其对应起来,包括交互逻辑、操作流程及反馈、元素状态、字符限制、异常/特殊状态、相关规则等等。
  • 主流程线:只需要画出主流程线即可,千万不可太多太杂,时刻考虑读者的感受。
9. 线框图/原型图交互说明的几种类型

限制

包含范围值、极限值等。

范围值主要指数据的取值范围。比如,当你的界面上出现了下拉菜单、筛选按钮、滑块等控件时,你必须标注清楚它们的选择范围,否则开发人员就不清楚该如何设定,如图所示。

极限值主要指数据的显示限制。比如,最多应该显示多少字数,过时如何显示,是否折行等,如图所示。

状态

包含默认状态、常见状态、特殊状态等。

「默认状态」主要指默认显示的文字、数据、选项等。这些内容需要注明,否则开发人员可能难以意识到这是用户填完的效果,还是默认就有的。

「常见状态」主要指针对某一个模块,经常遇到的一些状态。这些状态都需要在原型上表述出来。比如一个普通的积分模块,一般会出现 3 种状态:未登录状态、登录后未签到状态、登录后已签到状态,如图所示。

「特殊状态」一般指非正常情况下的样式、文案、说明等,如图所示:

操作

包含常见操作、特殊操作、误操作、手势操作等。

「常见操作」主要指正常操作时得到的反馈状态。比如一个普通的翻页控件,在经过不同操作后会立即出现如下的状态。

「特殊操作」主要指一些极端情况下的操作。一般,用户不会这么操作,但是一旦遇到极端情况,还是要想好应对措施,因为对于开发人员来说,不管是正常的还是极端的操作情况,他们都要去编写对应的代码。如下图,是填写用户信息的例子,当不写交互说明时,开放往往会遇到很多问题:如果已经勾选了 2 个人,再勾选第 3 个人,怎么办?如果勾选了「张XX」,下面区块中会相应地出现张XX的信息,那么这时候允许修改张XX的身份证信息吗?假如允许的话,修改后「张XX」还保持勾选状态吗?表单提交后要新增一个被保险人信息吗?若修改的是除身份证号码以外的信息,「张XX」 还保持勾选状态吗?提交表单时是覆盖原存储信息吗?若修改后出生日期、性别与身份证号码不吻合怎么办?等等。

面对各种复杂的情况,一方面要和开发人员积极探讨,看看有没有其他的解决方法可以简化各种逻辑判断;另一方面,在得出结论后,要把交互说明写清楚,避免出现让开发人员感到棘手的情况。

「误操作」主要指当用户操作错误时的情况。不过我们在设计时要尽量避免有用户犯错的机会。如图所示,提示中已告诉用户「库存5件」,如果这个时候用户在「数量」一栏中输入「6」会怎么样呢?系统会自动帮用户将其改为「5」省去用户手动修正的操作。

「手势操作」主要指用户使用移动产品时的操作方式。常见的有点击双击、长按、捏、伸、滑动等等。

反馈

用户操作后得到的反馈动作,包含提示、跳转、动画等。

「提示」主要指操作后,系统反馈给用户的文字说明等,如图所示。

「跳转」主要指点击某个链接后,页面跳转到哪里。设计师需要在原型上注明跳转时是「原页面刷新」还是「新页面打开」。如果是做手机应用的话,需要注明跳转时的转场方式,如图所示。

「动画」主要指用户操作后,系统通过动画的方式反馈给用户。动画给人的感觉比较友好、趣味性较强,是非常常见的一种反馈形式。比如删除某条信息,该信息以渐变消失的形式告诉用户:这条信息已经被删除了。在移动应用中,动画反馈的形式更为常见。因此设计师一定要在原型上表述清楚动画的形式,必要时可以制作 domo 动画演示效果给开发人员。

文章来源:站酷

交互基础_页面加载方式

ui设计分享达人

作为UI设计师,我相信大家都是专注于界面设计的好不好看,至于界面与界面之间如何交互,点击之后如何反馈,是一个比较容易被忽略的重要环节。

那么我们怎么处理好界面交互中的加载设计,减少用户因等待产生的焦虑情绪,保证整个体验无缝衔接,今天这篇文章就来总结下APP中数据加载模式设计。



一、为什么要加载?

1、用户在进行某些操作时,都要从后台请求数据,这个过程都需要时间,系统应该始终在合理的时间内做出适当的反馈,让用户了解正在发生的事情,让用户知道此时的操作是有反应,减缓用户因等待而产生的焦虑感。同时加载方式也可以做的有趣,吸引用户注意力,增加沉浸式体验,让用户轻松自在的享受等待;


2、体验无缝衔接,减少用户跳失,正常的等待加载时间是0.3秒以内,同时不同场景对应有不同的加载方式。



二、常见的加载场景及方式

a.加载场景:

不同场景有不同的加载方式,常见的加载场景一般有以下几种:下拉刷新、上拉加载、切换新页面的数据加载、页面局部模块的加载、启动页加载、操作按钮加载。实际工作中,要根据不同的场景搭配不同的加载样式,才能更好的做到缓解用户等待焦虑,降低用户的跳失率。


b.加载方式:

1、全屏加载

主要出现在手机H5页面,例如微信的文章详情页。一般会有进度条或有趣的动画设计,减轻用户等待时的焦虑感。加载失败后,页面通常为空白页,且有重新刷新操作按钮。



优点:将整个页面的内容都加载出来才展现给用户,能保证内容的整体性,全部加载完才能够系统化的阅读。

缺点:一般等待的时间较长,容易产生焦躁情绪,尤其是遇到网络不好的情况


2、下拉刷新加载

主要出现在页面内容为推荐类、或者信息更新频次高的产品,通过刷新加载新数据,加载的loading样式可以结合产品logo或IP形象进行设计,增加趣味性,吸引用户注意力。



3.占位图加载

如果页面布局样式比较固定,可以采用占位图加载机制,先加载页面布局和占位图,先给用户展示页面框架,后加载页面图片细节部分,这种加载方式相对于直接展示白屏来说,呈现给用户无缝衔接的感觉,体验更加流畅。


4.分布加载

当页面中有文字和图片时,优先加载占网络资源较小的元素,如先加载文字,后加载图片,图片加载完成前使用占位符显示,保证用户可以顺畅阅读,缩短用户的等待时间,提高产品体验。


优点:可以帮助用户快速阅读内容,了解信息。

这种加载形式更加适用于内容阅读型的APP或图片、视频类资源比较多的页面。


5.自动加载(懒加载

当浏览信息时,不停的向上滑动,新的内容会不停的从底部出现,这种方式称为自动加载。对于自动加载,要注意每次加载多少条内容,或者多少屏的内容。一般会在距下面内容一定距离时开始加载,当网速非常快的时候,用户并不能感知懒加载的动作,这样可以营造一种无极限浏览的错觉,很容易的把用户吸引住。



优点:无需用户操作,自动加载后续内容,营造沉浸式体验。

应用:适合feed流、瀑布流、算法推荐类的内容。

6.预加载

提前加载好页面信息内容,这样当网络不好的时候,可直接从本地缓存中渲染,就不用再加载了。

比如用户在看A页面的时候,App在后台加载完B页,等用户打开B页的时候就不需要等待加载了,因为App已经帮用户提前加载好了,给用户提供无缝链接的感觉,弊端就是服务器压力很大,就是要预测用户行为,加载其他数据,这样会消耗不少流量,所以建议在WiFi网络环境下采取这种预加载机制,而在蜂窝网络状态下则不采用预加载机制。



7.渐进式加载

一般出现在图片类产品,比如pinterest、unsplash等,当浏览图片的时候,经常是先看到一张模糊图或与图片较为相似的色彩值图片,然后再渐渐的变得清晰,这种效果就叫做渐进式加载。渐进式加载能够大大的提升体验感。



8.后台加载(异步处理)

用户在前端执行操作后,客户端立即给予操作成功反馈提示,然后把请求放到后台与服务器交互,这一过程用户是看不到的,也不需要等待,体验是非常棒的。

例如在用微信发朋友圈时,会觉得特别流畅,即使在网络不好的情况下,会看到你的动态立即展示在朋友圈列表,并不会提示你网络不好,操作失败,全部以操作成功来显示,其实它只是将你发布的操作记录了下来,等网络一好就将动态上传到服务器,从而完成发布行为,微信的点赞也是同样的操作,你给好友点了赞,并不会提示你网络不好,操作失败,而是提示你点赞成功了,其实它只是将你点赞的操作记录了下来,等网络一好就将点赞的行为上传到服务器,从而完成点赞行为会,给用户带来体验流畅的感觉。

所以这种加载方式是需要根据具体使用场景来权衡使用的,对于一些重要的操作,建议还是使用模态的方式加载,对于一些小操作,如点赞、订阅、关注,可采用后台加载的方式。



9.模态加载

以上几种方式都是采用非模态加载,不会对用户造成干扰,用户可以做别的事情,不需要等待加载完成,大大降低了等待的焦躁感。

模态加载对用户干扰比较大,需要中断用户的其他操作,用户只能等待加载结束,因为如果用户执行了其他操作就会打断正在进行的加载过程,实现不了用户的目标。



应用:用户执行的操作本身不能和其他操作同时进行,例如登录,退出,应用启动,手机支付等场景。



三、具体实施方法小结

1、能用非模态加载的尽量不要去用模态加载,如果非得用模态加载,也尽量给一个能取消的按钮,方便用户在不愿意等待的情况下取消操作。


2、如果加载的时间比较长,最好能告知用户加载进度,让用户心理有个预期,这样用户更愿意等待,不会因为等待产生焦虑感,分分钟卸载你的产品。科学的实验证实,先慢后快的进度条是让用户心理感受上最快的设计,这是因为用户最容易记住最后一瞬间的感觉,如果最后一瞬间,感知到了快,就觉得很顺畅了。


3、数据加载本身就是很考验用户心态感受,所以尽量通过一些有趣的动画来转移用户的注意力,营造沉浸式体验,同时增加了趣味性,给予了产品人性化的设计。

 


总结

作为产品设计人员,尽量给用户好的体验,我们应该让产品自己去解决问题,而不是把问题抛给用户。在考虑人与客户端交互的同时也要把客户端和服务端之间的数据传输考虑进来,站在用户、客户端和服务器闭环的角度去思考产品,才能设计出体验更好的数据加载方案。


转自-站酷


蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务


日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档