在产品设计中要做到"简单直观",首先要让产品概念浅显易懂,其次是要打造最直观的交互方式,最后一点就是产品对于用户的操作要有反馈。只有设计"简单直观"的产品,才是好产品。 今天谈一谈产品设计中的一个原则——"简单直观"。 这个原则听起来也很"简单直观",但是它既是一个最低、最基础的要求,也是做产品最高的境界。要真正做到这一点,其实并不容易。 所谓"简单直观",就是:要让产品做到凭直觉就能理解并上手使用。 无论是日常生活用品、社会公共设施,还是高科技的软件、硬件产品,都应该符合这个原则。 下面,先从我们办公室里放置的一台普通的饮水机说起(如左图所示)。 这台饮水机看起来不错,但却有一个问题,那就是它不符合"简单直观"的设计原则。当你按下右侧的热水按钮,凭直觉用杯子在下面接水时,会被从左边流出的热水给吓到,一不小心就会被烫伤。 相比之下,右图的这台饮水机尽管看起来不够高端大气,但其设计却很"简单直观"。冷热水开关和相应的出水口连在一起,并且用红蓝两种"直观的"颜色来进行区分。 这样,一般情况下是不会搞错的。 在这个饮水机的例子中,体现出了一条让产品"简单直观"最基本的设计策略,就是"让功能相关的元素,在位置上也相近"。 这也是平面设计的基本原则之一。在罗宾·威廉姆斯的《写给大家看的设计书》中,他将优秀设计的秘诀归纳为"对比、重复、对齐和亲密性"四条基本原则。其中,"亲密性"就是在说这一点。 除了饮水机,我们经常能在日常生活当中看到,很多物品的设计都不符合"简单直观"的原则。 比如:很多门把手的设计就有问题——你每次都要想一下应该是推还是拉。一种好的设计就是推的那一面根本就没有把手,只有一个方块区域引导你去推,这样你就不会搞错了。 如此简单的设计问题司空见惯,唐纳德·A·诺曼博士在其著名的《设计心理学》一书中,就有过专门的论述。 再举个例子:如果让你设计车辆座椅的"头枕、靠背和坐垫"调节按钮,你该怎么做呢? 最"直观"的想法,恐怕就是挨个放上"头枕向前/向后、靠背向前/向后、坐垫向前/向后/上升/下降"等八个按钮吧? 这个没错,但太复杂了,一点都不够"简单直观"。而好的设计就类似下图这样,把按钮做成座椅的形状,那就容易理解、很好操作了。 除了生活当中的物品之外,在注重设计、强调用户体验的IT/互联网产品领域,"简单直观"这个设计原则也非常关键。 比如:在整个人机交互(HCI)技术的发展史中,就一直体现着不断趋向直观化的演进路线。 在最早期,输入方式是打孔纸带,后来出现键盘命令行输入(CLI)、图形化界面(GUI)+鼠标输入。可以看到,输入方式越来越直观。 近些年出现的触摸屏、语音、肢体动作识别等输入技术,则是到达了一个更高的阶段。 可以说,最简单直观的交互和输入方式,就是利用人类数万年前就进化出的机能(触摸、说话、动作)来进行输入,而不需要再借用任何中间设备,或者预先学习输入方法和指令才行。 直观的交互方式,就是当年iPad一问世就大获成功的原因之一。因为我们会惊奇地看到,对于从来没有摸过电脑的老人和小孩,给他一台iPad,他就会很直观地进行"滑动解锁、左右滑动屏幕、点击图标打开应用、用手指旋转和缩放照片"等一系列操作。 我儿子也是在两岁多的时候,就可以熟练操作各式智能手机了。当我使用笔记本电脑进行工作的时候,他还经常会下意识地用手指在屏幕指指点点,企图捣乱,尽管这并不是触控屏。 由此可见,"触摸"这样交互方式,是多么的简单和直观。 当然,越是直观的交互方式,需要更高的技术来实现。 这是因为,输入输出技术本质上是人与计算机之间的桥梁。然而,作为生物体的人,与计算机内在的二进制的、电子的装置差异很大。因此,要让计算机直接识别人类的"触摸、说话、动作"这些生物信号,难度就很大。于是,之前的种种交互技术,比如键盘、鼠标什么的,都是在中间做桥接。 再来说说手机软件,我们也能看到很多简单直观的设计。 比如:微信"摇一摇"就是一个很好的例子。 微信在几年前就引入了"摇一摇",来让用户以挥动手机这种非常简单直观、非常有参与感的交互方式,寻找同一时刻摇一摇的有缘人,或者识别当前正在播放的歌曲和电视节目,并与之互动。 现在,很多产品和H5互动都效仿微信,用摇一摇的方式来参与抽奖、添加好友等。其实"摇一摇"这个触发产品功能的方法,换成点击某个按钮或菜单的话完全一样,这也是最常见交互方式。但由于"摇一摇"参与起来非常有喜感,特别是非常简单直观,不用做任何多余的解释大家都能懂,因而更受欢迎。 相比之下,支付宝的"咻一咻"就不够简单直观了。因为它完全是一个生造的交互方式,不像任何小孩和大人都能懂、都会做的"摇一摇"。用户大脑当中丝毫没有什么"咻一咻"的概念,无法联想到"咻一咻"是自然界哪种熟知的生物发出的声响、做出的动作。 最后,看看老罗的锤子手机。尽管这把锤子最终并没有砸碎其他竞争对手,但其产品中确实有不少简单直观的设计,值得研究和学习。 比如:手机附带的计时器工具,就很不错。拉出手环来设置时长(表盘的指针会随之转动),松开拉环就启动计时。在计时进行的过程中,随时可以拉动拉环来调整时长,以及关闭计时。工具虽小,但确实很好用。 再对主题做一下进一步的总结和延伸,要打造"简单、直观"的产品,需要从以下几个方面来考虑: 1. 概念要简单 概念简单,产品才能简单;概念复杂,产品必然复杂。 "摇一摇、扫一扫",都是非常浅显易懂的概念,它把复杂的技术实现隐藏起来,让用户都能顾名思义、立刻理解。 其实,不光在设计某一个具体的产品功时要考虑概念上的简单,我们在做任何一个复杂产品的整体设计之前,都应该先把该产品的概念体系设计出来。 然而,在具体实践当中我们经常看到,产品经理一做起产品设计,首先想到的MRD、PRD,就去画具体的页面原型,跳入到种种细枝末节当中。 结果是:在产品评审时频频被挑战——要么是概念不一致,同一个东西一会儿叫这个名字一会儿叫那个;要么是体系结构不一致(把不同级别的功能并列在了一起)、流程不顺畅(出现断裂或者死循环)。 我推荐的做法是:先把这个产品里面的所有概念和功能模块列出来,从概念的命名和数量上,都确保极简。正所谓,如无必要,勿增实体。 其次,把所有的东西画一个完整脑图出来。按照产品功能的层级,一级一级列出来,然后不断去梳理,在脑海当中演练整个产品的所有功能和流程。这个脑图的结构,就对应产品的架构层级、导航层级,以及具体的页面和基本概念模块。 最后,把这个脑图翻译成页面原型即可。 先在大脑中构建,再在电脑上绘制。 2. 交互须直观 再解决了概念的问题之后,对于每一个页面模块,我们要确保交互是直观的——用户一眼看过去,基本上就知道该怎么做了。 要打造直观的交互方式,可以考虑如下的原则: 多采用"触摸(包括指纹)、语音"等直观的交互方式。 在交互设计上,让"功能相关的元素,在位置上也要相近"。 在色彩的选用上,也要遵循常理。比如:红色代表代表热、蓝色代表冷;红色代表停止、绿色代表启动;红色和黄色代表危险、警示等等。 按照操作对象本身的特点来设计相应的交互方式。例如:对于类似知识图谱实体关系这样网状的、结构化的数据,尽量用可视化的拖拖拽拽的交互来表达,而不是让用户通过填写复杂的表单来构建这样的对象。 避免用户误操作。比如:接口设计要能防插反。我们注意到,在内存、CPU插槽、SIM卡插槽等设计上,都有防止插反的设计——反了是插不进去的。但最好的设计是,根本就不区分正反。你看,安卓和苹果最新的手机充电线插头,都采用这样的设计,非常方便。 3. 状态有反馈 用户看到了直观的交互,他按照预想的、下意识的方式去操作了。 然后,我们要将系统的状态展示出来,对用户的操作要有相应的反馈。让用户知道我在哪里、我将要去哪里、我做了什么、系统处于什么状态。这样,用户才不会焦虑,才不会误操作。 这里,我们以电梯的设计来举例。 大家经常可以看到,有些电梯按钮按下去,并没有操作反馈或者给用户的反馈很微弱,其背景或者边框的亮光很不清楚。这样,用户就以为没有按下去,就再去按一遍。 有时候,我们按下按钮,在等电梯的时候还是感到很着急,这往往是因为电梯没有楼层指示,没有显示这部电梯运行到哪一层。这样,即使电梯距离本层并不远,但因为看不到状态,用户就很茫然、很焦虑,这个等待时长在心理上也会被放大。 总之,无论是面对何种产品,无论其结构和原理多么复杂,产品设计者都应该想方设法用最简单最直观的方式来进行设计。 简单、直观的产品,才是好产品。