本文写于2018年6月27日,首发于简书。
如果你从来没见过这个奇怪的像外星人一样的东西,看到右边的用法之后,应该会拍着大腿说:哎呀这个设计真棒!
“三支像章鱼脚一样的东西支起了整个身体,留出了放杯子的空间。上面的大头正好贴合橘子或者柠檬的表皮形状,下面的尖嘴可以很好的汇聚果汁,自然的滴在下面的容器里。”
一个简单的“挤”的行为,可以被解决的如此有趣。
这就是好设计给人们带来的最直接的感觉,好的产品不仅质量上乘,颜值高,而且能很巧妙的解决功能需求。总结起来就是三点,也是我在学习和实践设计过程中不断重复验证的准则:
1. Functional, (满足功能需求)
2. Intuitive, (满足直觉操作)
3. Playful.(有趣)
其实这几点设计准则可以反过来在很多的设计产品上去印证,无论是电子产品,工业产品,还是互联网产品。
Youtube和优酷的交互界面
世界著名的流媒体网站Youtube虽然已经被Google收购很久,但是成功的独立经营已经超过10年,并且几乎没有可以挑战其地位的同类产品。Facebook在尝试做流媒体,instagram也在尝试,至少目前来看,youtube的产品很完整,使用起来非常顺畅。至少从国内一众流媒体网站来看,还没有做的接近于Youtube的产品。
几个月前,youtube的移动终端(手机)做了新的产品迭代,增加了一些非常酷的功能。当然,这里不是要去分析youtube如何更新自己的产品,而是通过一个小的交互功能的例子去分析什么是好的设计,以及印证我们前面提到的,好设计的几个准则。
就是上面这幅图,注意看这是一个手机全屏幕的视频播放过程中的快进提醒,快进的手势是double tap,也就是点击两下。再让我们对比下国内做的比较好的视频产品,优酷视频(其实大部分产品的操作手势是一样的)的手势操作。
注意,Youtube在手机端的指令只有:停止/快进快退两种。操作手势分别是点击屏幕一下,和点击屏幕两下。(快进点右半边屏幕,快退点左半边屏幕)
而优酷的操作指令,就丰富的多了:屏幕左边可以调整亮度,右边调整音量,下端调整进度。操作手势分别是:上下滑动和左右滑动。
交互设计分析
回到我们之前说的好的设计准则里,按照顺序分析和对比一下这两种产品的优劣。
1. Functional, (满足功能需求)
Youtube:停止;快进快退
优酷:屏幕亮度;音量;快进快退
对于用户在全屏观看内容的时候,屏幕亮度的调节是不需要被拿到与快进快退同样级别和频次的。音量的调节也可以很快通过物理按键来调节到位,通过屏幕调节反而会造成误操作。这是从性质上来讲两个功能都有其鸡肋的地方,可以说是可有可无,甚至为了更好的操作需要被操作的指令,这两样功能是完全可以被藏在其他界面去操作的。
相反,Youtube在全屏的时候,只保留了停止,快进(快退)两个指令,不多,但是已经足够,而且不会造成功能叠加导致的误操作。
有的时候,或者说大部分时候,想要做太多是会导致想做的没有被足够强调和重视的直接原因。
在是否满足功能需求的打分项里,Youtube:是;优酷:否。
2. Intuitive, (满足直觉操作)
Youtube:单击屏幕/双击屏幕
优酷:屏幕手指滑动
首先对操作指令来说,简单,准确,容易识别是很重要的。Youtube只用了点击屏幕的操作,而没有任何其他的手势指令。这样一来误操作的几率几乎可以忽略不计,因为没人会把点击屏幕跟滑动,或者其他手势混在一起。
说到混在一起,优酷的操作就比较灾难了。滑动的方向和滑动的屏幕区域指代着不同的功能,而无论是手指滑动本身,还是屏幕区域,甚至是人为使用时的误操作,都会让我们的指令和结果相互混淆。甚至,我会在全屏的时候锁住屏幕,来减少误操作。
重点来了,滑动手指来指令快进快退最灾难的一点是,你根本没法控制快进快退的精确时间……我不知道滑动快进为什么没有在Youtube里出现过,但是从使用体验来说,滑动和快进几乎是没法一对一进行精确指令操作的。首先,快进我们需要的是精确到秒的操作体验,要不然滑动屏幕跟滑动进度条来控制没有任何区别。其次,对于不同时常的内容来说,滑动每一下的进度比例也是非常难控制的。没有对比没有伤害,跟Youtube的每双击一下快进10秒来说,滑动控制进度简直是失控。
在是否满足直觉操作需求的打分项里,Youtube:是;优酷:否。
3. Playful.(有趣)
对于设计产品是否有趣的定义,我觉得可以从两个方面来看:
1. 你的每个操作是否对应着明确的信息反馈?
2. 你接收到的信息反馈是否足够精确,是否足够有趣?
举个例子,Muji的设计总监深泽直人设计的这款CD播放器,就可以通过很明确,又以一种很Nostalgia(怀旧的)的行为反馈设计了播放器的开关。他移植了传统风扇和灯的老式拉线开关,来控制播放器的启动和停止。
通过直觉的拉线行为来控制开关,在每次开关的时候又会有物理的咔咔声音来反馈行为。这种简单的开关操作,就是不仅有精确反馈,同时又足够有趣。
说完Muji播放器的例子,再说回这两个视频产品。因为是在触摸屏上的操作,物理反馈几乎是没有技术方法可以办到的。但是你看到Youtube 界面上每次双击快进时候会涟漪般淡淡出现在屏幕一边的圆形轮廓了么?如果可以放慢这个过程的话,随着用户每次双击屏幕,从屏幕右边(或者左边)的中心会随之逐渐扩散开一圈淡淡的白色的涟漪,就好像每次双击都在向平静的水面丢了一颗小石子,水面就会泛起波纹。
多么精确又浪漫的反馈,这波操作体验简直可以打满分!
优酷的操作反馈呢?额……似乎是没有的。没 有 的……就是说,你的手指在屏幕上滑动多少距离,会相应的快进多少时间,以及最后让你知道快进到哪里,是凭手感,凭运气的……
嗯,凭手感,凭运气……
毫无疑问,在设计是否足够有趣的打分项里,Youtube:是;优酷:否。
好设计与坏设计
记得在《设计心理学》这套书里作者也说过:不好的设计其实会让操作的人显得很笨。
当你面对一个不知道是该推还是该拉的门的时候;当你拿着一把遥控器不知道该怎样打开电视的时候;当你买回来的智能音箱却不知道该如何让他放音乐的时候,其实不是我们显得笨了,而是这些产品里面没有考虑到如何与用户交流,最终导致整个过程不仅不足够美好和浪漫,连基本的功能目的都没法达到。
坏的设计不是罪人,但是坏的设计用多了,你是否也会变得不够浪漫,不够美好?你是否也会变得脾气暴躁,不易交流?
多观察,多接触好的设计,因为产品和用户之间的关系,是相互的。我们不仅需要好的产品来满足我们的需求,我们也需要好的产品,来滋养出更好的自己。