设计“简单直观”的产品，才是好产品

在产品设计中要做到“简单直观”，首先要让产品概念浅显易懂，其次是要打造最直观的交互方式，最后一点就是产品对于用户的操作要有反馈。只有设计“简单直观”的产品，才是好产品。

今天谈一谈产品设计中的一个原则——“简单直观”。
这个原则听起来也很“简单直观”，但是它既是一个最低、最基础的要求，也是做产品最高的境界。要真正做到这一点，其实并不容易。
所谓“简单直观”，就是：要让产品做到凭直觉就能理解并上手使用。
无论是日常生活用品、社会公共设施，还是高科技的软件、硬件产品，都应该符合这个原则。
下面，先从我们办公室里放置的一台普通的饮水机说起（如左图所示）。

这台饮水机看起来不错，但却有一个问题，那就是它不符合“简单直观”的设计原则。当你按下右侧的热水按钮，凭直觉用杯子在下面接水时，会被从左边流出的热水给吓到，一不小心就会被烫伤。
相比之下，右图的这台饮水机尽管看起来不够高端大气，但其设计却很“简单直观”。冷热水开关和相应的出水口连在一起，并且用红蓝两种”直观的“颜色来进行区分。
这样，一般情况下是不会搞错的。
在这个饮水机的例子中，体现出了一条让产品“简单直观”最基本的设计策略，就是 “让功能相关的元素，在位置上也相近” 。
这也是平面设计的基本原则之一。在罗宾·威廉姆斯的《写给大家看的设计书》中，他将优秀设计的秘诀归纳为“对比、重复、对齐和亲密性”四条基本原则。其中，“亲密性”就是在说这一点。
除了饮水机，我们经常能在日常生活当中看到，很多物品的设计都不符合“简单直观”的原则。
比如：很多门把手的设计就有问题——你每次都要想一下应该是推还是拉。一种好的设计就是推的那一面根本就没有把手，只有一个方块区域引导你去推，这样你就不会搞错了。
如此简单的设计问题司空见惯，唐纳德·A·诺曼博士在其著名的《设计心理学》一书中，就有过专门的论述。

再举个例子：如果让你设计车辆座椅的“头枕、靠背和坐垫”调节按钮，你该怎么做呢？

最“直观”的想法，恐怕就是挨个放上“头枕向前/向后、靠背向前/向后、坐垫向前/向后/上升/下降”等八个按钮吧？
这个没错，但太复杂了，一点都不够“简单直观”。而好的设计就类似下图这样，把按钮做成座椅的形状，那就容易理解、很好操作了。

除了生活当中的物品之外，在注重设计、强调用户体验的IT/互联网产品领域，“简单直观”这个设计原则也非常关键。
比如：在整个人机交互（HCI）技术的发展史中，就一直体现着不断趋向直观化的演进路线。
在最早期，输入方式是打孔纸带，后来出现键盘命令行输入（CLI）、图形化界面（GUI）+鼠标输入。可以看到，输入方式越来越直观。
近些年出现的触摸屏、语音、肢体动作识别等输入技术，则是到达了一个更高的阶段。
可以说，最简单直观的交互和输入方式，就是利用人类数万年前就进化出的机能（触摸、说话、动作）来进行输入，而不需要再借用任何中间设备，或者预先学习输入方法和指令才行。
直观的交互方式，就是当年iPad一问世就大获成功的原因之一。因为我们会惊奇地看到，对于从来没有摸过电脑的老人和小孩，给他一台iPad，他就会很直观地进行“滑动解锁、左右滑动屏幕、点击图标打开应用、用手指旋转和缩放照片”等一系列操作。
我儿子也是在两岁多的时候，就可以熟练操作各式智能手机了。当我使用笔记本电脑进行工作的时候，他还经常会下意识地用手指在屏幕指指点点，企图捣乱，尽管这并不是触控屏。
由此可见，“触摸”这样交互方式，是多么的简单和直观。
当然，越是直观的交互方式，需要更高的技术来实现。
这是因为，输入输出技术本质上是人与计算机之间的桥梁。然而，作为生物体的人，与计算机内在的二进制的、电子的装置差异很大。因此，要让计算机直接识别人类的“触摸、说话、动作”这些生物信号，难度就很大。于是，之前的种种交互技术，比如键盘、鼠标什么的，都是在中间做桥接。
再来说说手机软件，我们也能看到很多简单直观的设计。
比如：微信“摇一摇”就是一个很好的例子。
微信在几年前就引入了“摇一摇”，来让用户以挥动手机这种非常简单直观、非常有参与感的交互方式，寻找同一时刻摇一摇的有缘人，或者识别当前正在播放的歌曲和电视节目，并与之互动。
现在，很多产品和H5互动都效仿微信，用摇一摇的方式来参与抽奖、添加好友等。其实“摇一摇”这个触发产品功能的方法，换成点击某个按钮或菜单的话完全一样，这也是最常见交互方式。但由于“摇一摇”参与起来非常有喜感，特别是非常简单直观，不用做任何多余的解释大家都能懂，因而更受欢迎。
相比之下，支付宝的“咻一咻”就不够简单直观了。因为它完全是一个生造的交互方式，不像任何小孩和大人都能懂、都会做的“摇一摇”。用户大脑当中丝毫没有什么“咻一咻”的概念，无法联想到“咻一咻”是自然界哪种熟知的生物发出的声响、做出的动作。
最后，看看老罗的锤子手机。尽管这把锤子最终并没有砸碎其他竞争对手，但其产品中确实有不少简单直观的设计，值得研究和学习。
比如：手机附带的计时器工具，就很不错。拉出手环来设置时长（表盘的指针会随之转动），松开拉环就启动计时。在计时进行的过程中，随时可以拉动拉环来调整时长，以及关闭计时。工具虽小，但确实很好用。

再对主题做一下进一步的总结和延伸，要打造“简单、直观”的产品，需要从以下几个方面来考虑：

1. 概念要简单

概念简单，产品才能简单；概念复杂，产品必然复杂。
“摇一摇、扫一扫”，都是非常浅显易懂的概念，它把复杂的技术实现隐藏起来，让用户都能顾名思义、立刻理解。
其实，不光在设计某一个具体的产品功时要考虑概念上的简单，我们在做任何一个复杂产品的整体设计之前，都应该先把该产品的概念体系设计出来。
然而，在具体实践当中我们经常看到，产品经理一做起产品设计，首先想到的MRD、PRD，就去画具体的页面原型，跳入到种种细枝末节当中。
结果是：在产品评审时频频被挑战——要么是概念不一致，同一个东西一会儿叫这个名字一会儿叫那个；要么是体系结构不一致（把不同级别的功能并列在了一起）、流程不顺畅（出现断裂或者死循环）。
我推荐的做法是：先把这个产品里面的所有概念和功能模块列出来，从概念的命名和数量上，都确保极简。正所谓，如无必要，勿增实体。
其次，把所有的东西画一个完整脑图出来。按照产品功能的层级，一级一级列出来，然后不断去梳理，在脑海当中演练整个产品的所有功能和流程。这个脑图的结构，就对应产品的架构层级、导航层级，以及具体的页面和基本概念模块。
最后，把这个脑图翻译成页面原型即可。
先在大脑中构建，再在电脑上绘制。

2. 交互须直观

再解决了概念的问题之后，对于每一个页面模块，我们要确保交互是直观的——用户一眼看过去，基本上就知道该怎么做了。
要打造直观的交互方式，可以考虑如下的原则：

• 多采用“触摸（包括指纹）、语音”等直观的交互方式。
• 在交互设计上，让“功能相关的元素，在位置上也要相近”。
• 在色彩的选用上，也要遵循常理。比如：红色代表代表热、蓝色代表冷；红色代表停止、绿色代表启动；红色和黄色代表危险、警示等等。
• 按照操作对象本身的特点来设计相应的交互方式。例如：对于类似知识图谱实体关系这样网状的、结构化的数据，尽量用可视化的拖拖拽拽的交互来表达，而不是让用户通过填写复杂的表单来构建这样的对象。
• 避免用户误操作。比如：接口设计要能防插反。我们注意到，在内存、CPU插槽、SIM卡插槽等设计上，都有防止插反的设计——反了是插不进去的。但最好的设计是，根本就不区分正反。你看，安卓和苹果最新的手机充电线插头，都采用这样的设计，非常方便。

3. 状态有反馈

用户看到了直观的交互，他按照预想的、下意识的方式去操作了。
然后，我们要将系统的状态展示出来，对用户的操作要有相应的反馈。让用户知道我在哪里、我将要去哪里、我做了什么、系统处于什么状态。这样，用户才不会焦虑，才不会误操作。
这里，我们以电梯的设计来举例。
大家经常可以看到，有些电梯按钮按下去，并没有操作反馈或者给用户的反馈很微弱，其背景或者边框的亮光很不清楚。这样，用户就以为没有按下去，就再去按一遍。
有时候，我们按下按钮，在等电梯的时候还是感到很着急，这往往是因为电梯没有楼层指示，没有显示这部电梯运行到哪一层。这样，即使电梯距离本层并不远，但因为看不到状态，用户就很茫然、很焦虑，这个等待时长在心理上也会被放大。
总之，无论是面对何种产品，无论其结构和原理多么复杂，产品设计者都应该想方设法用最简单最直观的方式来进行设计。
简单、直观的产品，才是好产品。
作者
朱百宁，微信公众号：八点三十五。前百度品牌总监，著有《自传播》一书，现在专注于人工智能以及产品设计等领域。个人微信：izhubaining，欢迎添加进行交流。

关键字：简单直观

版权声明

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！