交互丨是时候聊聊具有直觉性的UI和交互设计了

UI和交互设计中常常会强调某项设计需要足够的“直觉性”，但是直觉性的设计说来容易，实现却往往差强人意。但是不得不承认，它是目前交互和UI设计的刚需。

仔细想想，符合用户直觉的设计往往能够更快地获得用户信任。符合用户直觉的UI和交互逻辑会在用户初次操作的时候不断地进行匹配，而用户在这个过程汇总，主观感受会从操作前的“应该是这样吧？”变为完成之后的“果然就是这样！”，如此一来，用户会在使用过程中不断地“验证”自己的直觉，即使操作中有若干设计不是那么顺畅，这个APP或者网页也能在总体上获得用户的信任。

实际上，从上世纪七八十年代开始，各大科技企业都在鼓吹直觉式的界面，然而，用户看到的大都是这样的界面：

这样的界面：

以及这样的界面：

在个人电脑还没走入家庭的时代，恐怕也就只有按钮这种交互控件看起来足够“直觉”吧？

不得不承认的是，直到今天，我们的父辈当中，还有许多人还在“学习使用”手机和软件。

我们的UI与交互依然不够直觉。

了解直觉

首先得明白什么是直觉。直觉（intuition）是一种不受人类意志控制的一种特殊的思维方式，它是不经过逻辑思考和分析推理而的出来的观点，这是一个无意识的过程，它类似于本能，是复杂情境下无意识、合乎目的的领悟。另外一方面，直觉也是基于人的经验、职业、阅历、知识和本能的，脑中的记忆、体验和经验与五感所接受到的信息结合到一起，跳过逻辑思维，将信息结果直接呈现出来，可以说它是人类的本能知觉之一。

人类的直觉式思维是如此的典型，设计师可以合理地运用其中的的特性来构建可用的UI模式、交互方式，甚至成熟可用的产品。从直觉的定义当中

·直接快速：“下意识”的行为，无需分析而获得整体认知
·跳跃性：摆脱常规束缚，疾速飞跃的认知过程
·个特性：与用户的知识、经验、思维方式紧密关联，拥有明显的个体特征
·主观性：用户直觉是主观认知，不一定符合客观的对错，同时对于直觉有本能的信念

虽然直觉本身看起来“非逻辑”，但是直觉式的UI和交互还是以符合逻辑的方式构建起来，因为直觉同样是基于用户的经验和习惯。

直觉式的交互

曾为苹果设计第一款鼠标的设计师 David Kelley 目前供职于IDEO，在交互设计领域有着丰富的经验。在为苹果公司设计鼠标的时候，他曾想过使用轨迹球来替代鼠标。

“想象一下，如果桌面上反过来一颗球让你去转动控制，感觉应该比鼠标运作顺畅些。我们原本认为这是个好点子……可是我以前从未观潮这种触感的细节。”

之后Dived和他的团队终于有机会研发轨迹球了，当时需要替3~5岁的小用户设计一个建议的操作装置，合作方是著名的芝麻街美语，过程十分有意思。

“当孩子们操作鼠标和遥控杆的时候，会不自觉地低头看输入装置……后来有人想到，如果操作时运动肌肉群范围较大，也许他们可以不必低头。我们做了一个大型轨迹球装置，让他们可以用手臂甚至肩膀牵动来操作，这样就把问题解决了。”

产品并不复杂，过程称得上有意思，这个儿童轨迹球从头至尾都称得上是一个相当直觉的产品。值得注意的是，这个轨迹球从最早的构思到后期的产品之间，横亘着十多年的观察和沉淀。

“我们先是观察什么样的操作方式比较合乎自然，然后提出想法，再进行测试。”

结合直觉的概念，我们不难从基本的概念中引伸出直觉式交互的一些关键点：

·基于现实与经验：直觉是经验积累和感官触发之后的“灵光一现”
·符合预期：“第六感”直接给出的“结果”就是用户的预期
·低学习成本：虽是近乎本能地上手操作，但是依然需要一个学习和适应的过程，这个过程通常非常短
·一定的适用性：由于它是基于经验，所以它的适用范畴通常是有过类似体验或者经验的用户

行为模式与心智模型

我们常说的行为模式，是一群人执行某种任务行为的抽象画概括，是用来衡量和分析的基础。直觉下的行为是无意识的行为，它本身也是人类在长期生活过程中所逐渐积累下一套有效率的行为模式，是无意识信息的重新组织的结果。

这也是为何在进行产品的交互设计的过程中需要用到心智模型。1986年 Susan Carey 在她的论文《Cognitive Science and Science Education》是这样界定心智模型的：

“心智模型指一个人对于事物运作的思维过程，即一个人对于周遭世界的理解。心智模型的基础是不完整的显示、过去的经验甚至直觉感知。它有助于形成人的动作和行为，影响人在复杂情况下的关注点，并确定人们如何着手解决问题。”

直觉是心智模型中不可忽视的重要组成部分，它是可预期且是可控的，自然也是设计过程中可用的。以目前最著名的邮箱服务Gmail为例：

邮箱中所承载的邮件类型多样，牵涉到的事务庞杂多样，从中筛选出重要的事件并给用户以日程提醒，这是一种相当直觉、非常自然的需求延伸，在这个心智模型中就体现出来了。借由第三方的服务的连接，它以Business Diary 的形式呈现出来。

当然，这只是一个实例，在UI设计和交互设计过程中，心智模型基本也是设计过程中难以回避的环节。

直觉式的交互

我们对于现实世界的认知、了解和习惯是构成直觉的基础，同样的，直觉式的交互的基础同样源自于现实世界。

如今的我们已经步入数字化的时代，我们每天面对着各式各样的屏幕，多种多样的界面，而我们最初接触也是最早产生认知的应该就是按钮这种控件了。

虽然图形化界面（GUI）在70年代中期就已经出现，但是真正富有现实质感的拟物化的按钮设计大概直到1984年 Macintosh 发布才勉强看到影子（更早的按钮就是个方框）：

初代Macintosh 系统中的计算器

而家用电脑操作系统霸主Windows 甚至是到1990年的Windows 3.0 时代，才拥有了让用户一眼就认出来的按钮设计：

在个人电脑开始广泛普及的98年，两家大厂在按钮和窗口的设计上，开始越来越贴近用户的直觉认知：

为了更加贴近现实，让界面更加真实，MacOSX率先迈出了拟物化的步伐，推出了Aqua的概念，并在第三个开发版发布的时候，应用到界面的每个角落：

（如果你仔细观察，会发现这个时候的设计师将纸的纹理运用到窗口上，此处的设计和Material Design 中纸的隐喻不谋而合，这又何尝不是一种潜意识的引导呢？）

随后微软在Windows Vista 中运用了名为Aero 的设计风格，让按钮和窗口充满了光影细节，至少按钮的设计更加突出了：

桌面端交互基本还是依赖鼠标键盘来操作，而移动端则截然不同。从90年代初手持掌上设备开始，各路设计师就没在移动端设备上少花费心思。Palm的“四大天王”按键和GTD，黑莓那充满欧美血统的快捷键交互，Sony 的Clie系列的Jog Dial 滚轮所带来的单手交互，前四代亚马逊Kindle 两侧的翻页按键交互，这些都是比较典型的借助硬件来完成软件交互的范例。按钮和滚轮是绝大多数的用户所熟知的交互媒介，合理的设计这些硬件赋予了移动端设备更强的易用性。

iPhone 问世之后，电容屏逐渐成了标准配置，触摸屏让交互设计拥有了更多的可能性和更多值得探究的纵深。这个时候，隔着屏幕借助按钮和触控笔间接交互的时代一去不复返，手指作为一种更为本能的媒介，在一块扁平的触摸屏上，使用我们自出生以来就习得的方式，与虚拟的控件进行交互。交互距离直觉更近了。

点按

从有触摸屏开始，手指点按就不再需要长期借助其他的硬件来完成了。虽然早期的按钮，受限于屏幕尺寸并不会设计的太大，但是有诸如电脑这样的硬件设备在前面铺垫，绝大多数的用户至少能够直觉地区分开小屏幕上的按钮和其他内容。

而早期iOS的拟物化设计让按钮拥有了更强的质感，更加贴近用户认知，用户、设计师、产品人对于拟物化设计的追捧以及之后的依依不舍并不是毫无道理的。扁平化之后的按钮和其他组件的设计，经历了好几年的混乱时期，直到Flat 2.0 和 Material Design 的兴起和后期iOS的设计调整，扁平化的风潮这才基本站稳了脚跟。（Metro 一直都是这个领域的反面典型）

目前能够称得上是直觉的交互并不算太多，但是它们的内在逻辑倒是相当值得学习和探究。

滑动与滑动解锁

滑动也是相当直觉的交互，人类惯于使用滑动触摸的方式来认知和了解这个世界。在硬质的电容屏幕上，有的用户无需引导就能直接开始通过手指滑动来滚动Android 1.5 的APP列表界面。而此时更加值得一提的，应该是iOS上的滑动解锁的经典设计。

iOS 7 之前的滑动解锁界面采用的典型的拟物化设计，控件包含一个看起来凹下去的滑动槽和其中凸起的按钮，按钮中向内凹陷的箭头指引着用户滑动方向，槽中的文字“slide to unlock”还通过向右流动的光线给予用户强化滑动方向的暗示，绝大部分的用户会在这种视觉引导下直觉地完成这个交互。解锁完成之后，解锁的音效则让用户对于解锁的预期和结果达成一致，这个交互会很快在用户的大脑勾回成留下痕迹，越发的本能。

双指缩放

同滑动解锁略有不同，双指缩放很容易理解，但是大多需要界面进行初次引导之后，用户才会学会。不过这种交互的学习成本非常低，双指缩放的手势本身也符合用户对于大小缩放的认知。

托拽

在家用电脑还处于普及阶段的时候，使用鼠标托拽图标是许多初学者学习得并不那么愉悦的一种操作，毕竟隔着鼠标和屏幕。与之相反的是，在触摸屏上用户可以很快的明白托拽的精髓，按住，划动即可。这种交互在现实生活中并不少见，在屏幕上操作也得心应手。如果你仔细观察会发现，如今即使是专业的工具，也越来越多地开始拿托拽式交互作为卖点，因为它确实切实地降低了用户的前期学习成本。

下拉刷新

和滑动解锁略有不同，下拉刷新并没有那么明显的视觉线索，但是借助动效和前期引导，下拉刷新会让用户极快地上手，并且乐此不疲地使用这种交互方式。下拉刷新这种交互方式很有意思，下拉是一种直觉式的操作，刷新出来的内容则是这种交互带给用户的结果，这种结果可以预期也是用户所期待的，介于两者之间的动效则缩小了用户等待的主观感受上的时长，甚至某些动效让用户深陷其中爱不释手，比如iOS 6时代的Podcasts 的下拉刷新的动效。

双击

正如前文所述，直觉并非一成不变，它是发展和渐进演变的。对于现在的用户而言，许多在之前都使用过鼠标，或者看过长辈使用鼠标，双击这种操作虽然始于规则，但已经是近乎习惯的存在了。双击操作脱胎于硬件操作，所以它在移动端设备上也常常同实体按键连接到一起，比如双击Home键之类的。

双击耳机上的按键切换下一首歌这种操作，应该和双击操作一本同源。有意思的是，许多系统和硬件都设定了连按3下切换上一首歌的操作，但是知道的人并不算多，惯于如此操作的人则更少。这就是有意思的地方：双击交互已经因其前期的普及性，已经成为许多用户的“直觉”，而连按3下则是在双击基础上发展出的一种操作规则，它缺少直觉性，相应的普及度则少的多。

卡片式UI

卡片式UI 最大的特色是源自于现实生活的卡片的“隐喻”，多种多样的卡片和内容投射到界面，让卡片控件作为不同内容的载体，成了用户极容易接受的一种设定。Material Design 是卡片式UI中的一个重要分支，不过Material Design 更为规整而系统，它所采用的隐喻更偏向于“纸”。卡片式UI 作为框架，将UI设计中不同的功能和不同的内容格式化到一套整饬的卡片体系当中，降低UI和不同交互的学习成本，而卡片也常常作为不同层次内容的沟通媒介，形同桌面端界面中的“窗口”，甚至更加强大。

汉堡图标与界面模式

这个时候不得不提一下汉堡图标。五年前探讨汉堡图标的时候，可以说它和直觉交互毫无关联，但是随着时间的推移，在数字时代的“栖居者”越来越多的今天，汉堡图标无处不在，它逐步成为按钮中广泛被认知的存在，就像扳手和齿轮的图标意味着“设置”、“设定”一样，汉堡图标已经成为界面模式中的一个基础设施了，以前它代表“菜单”，现在它就是“菜单”。

正如同刚刚探讨双击操作一样，时间和大众认知的改变让一个事物从非直觉化的存在，逐步变为一种无需思考过程就能明白含义的东西。

这也是我们学习界面模式、使用界面模式的一个重要依据。随着时间的推移，越来越多的界面设计模式和交互模式开始成为一种固定的搭配、用户所习惯的存在，一些更为基础的控件和交互已经成为许多用户“直觉”的一部分。

遵循自然逻辑的交互模式

就像我们所知道的一样，交互设计是一门还很年轻的学科，它一直高速地向前发展，并且不断的将新的技术、知识纳入其中，融会贯通，创造新的可能性。技术的发展让直觉式的交互了有了新的转机。

的确，在很长的一段时间里面，我们的数字设备始终遵循着有序的、树状的结构，将内容和功能呈现在用户面前，但是人类的认知并非是这样的结构，这也是新用户最初面对数字设备的主要学习成本来源之一。传统的界面用起来还不够“自然”，还不够“人性”。

而现在有了新的契机，大数据、机器学习、人工智能（AI）、语音交互、虚拟现实（VR）和现实增强（AR）等新的技术让交互技术可以向着自然逻辑的方向走得更远。

毫无疑问，我们之前聊的“界面模式”是过去40年间若干次技术革面在图形化界面这个基础上搭建起来的交互的大楼，而语音，手势，虚拟现实和现实世界正在新技术的催化下，逐步耦合到一起。

基于某些众所周知的原因，Google Now 是大家安卓手机上极为鸡肋的一个存在，但是仔细想想，它可能是目前在交互上走的最远的一项服务。大数据和机器学习让Google Now 每天都更加了解你，在特定的时间特定的地点，你拿起手机它就会知道要给你提供什么，它就是你的直觉。它遵循你的习惯、你的操作、你的生活起居，它明白你的目的、明白你的需求、明白你可能需要什么，它就是你的“直觉”。

实际上，Apple也在让Siri更加强大，它和Google Now 一样正在试图成为更懂你的人工智能，成为你日常交互的组成部分，成为你生命中的“基础设施”。

当然，如果说有什么需要担心的，大概就是这俩AI什么时候拥有了自己的之后开始搭建属于自己的“天网”吧。（笑）

结语

强调直觉设计的重要，实际上是因为直觉设计的缺失。我们常常“满脑子的骚操作”，但是很少回过头去仔细审视那些最基本的东西。在如今的UI界面交互设计中，真正带来革命性影响的，绝大多数的来说源自于苹果、谷歌以及后期Palm webOS团队的那些人，而后者大多数也基本源于苹果等几家顶级设计公司（Matias Duarte除外）。而我们所仰慕的（或者常常被吐槽的）公司，作为先行者一直在思考一些最原始、最初级的问题。

交互的未来还有很远的路要走，直觉式的设计从来都是交互的最基本问题，做好准备吧。

【设计史有意思】

1. 互联网变迁史：《翻天覆地！带你总结互联网设计圈这十年的巨大变迁》
2. Photoshop发展史：《生日快乐！ADOBE PHOTOSHOP喜迎25岁生日！》
3. IE浏览器小传：《终于等到你！聊聊那些年我们用过的IE浏览器》
4. Apple Watch 诞生记：《传奇再现！设计师不得不读的APPLE WATCH 秘史》

优设作者：@陈子木

本文由优设网原创，请尊重版权和作者成果，转摘请附上优设链接，违者必究。谢谢各位编辑同仁配合。

【优设网 原创文章 投稿邮箱：yuan@uisdc.com】

================关于优设网================
"优设网uisdc.com"是国内人气最高的网页设计师学习平台，专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书：史上最全的设计师图书导航：http://hao.uisdc.com/book/。
设计微博：拥有粉丝量180万的人气微博@优秀网页设计 ，欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航：全球顶尖设计网站推荐，设计师必备导航：http://hao.uisdc.com