图解WWDC 设计分会：基础设计原理 – 心智模型与邻近性

@C7210 ：继续上期题，即 WWDC 之「基础设原理」设分会，演讲人 Apple 设布道者团队的 Mike Stern 老师。当中，我们了解了「可见性」与「一致性」，错过的朋友不妨回看。今天的话题聚焦于「心智模型」与「邻近性」。

心智模型-Mental Model

得益车辆设计的一致，我们得以安抵达酒店。旅途疲劳，大家不妨先到房间放下行李洗个脸，精神一下做打。

你进卫生间，拧开水龙头上的把手，让水流一阵子等着变热。几秒之，你设置特图像用手指试试水温，似乎还有冷，是你又把热水开大一。很快，水温变暖，你洗洗脸，感到精神焕，又来劲。

相比汽车而言，水龙头自简单易用很。但在有时，我们仍需要学习何使用水龙头，例尝试整个把手，观察它们各自的用。

如何得知哪个把用于控制热水？大体知道，因为多数候热水把位于左侧。

为什会持续探水温？因为知道在调整把之后，温度变化通常会有延迟。水的外观难以反馈温度息，需要亲身尝。

显然，我们不会在使用龙头时都思考所有这些问题，这些早已成为觉。我们个大脑都有个小小龙头模型，这个模型能将龙头体现为由系列部件、功能和为所组成系统。这些部件按照特定布局排列着，有着特定为规律。

这是我们所说「心智模型」。于个与进过互动事物，我们头脑都有着应心智模型。这些模型都是高度简化，不会完地体现出事物内部所有运作制。

不过，我们与个系统互动越多，相应模型会越发复杂。心智模型由个经验发展而出，所反映常是个视事实形态，此心智模型也是而异。

智模型可以分两种类型。

系统模：于系统如何作的模。例如我们会将水龙头解为冷、热两种水源组合而成的系统。该系统允许两种水源进行混合，从而创一个温区间，然而水温会立刻发生变，需要响应时间，特别是在打开热水久的时候。

互模：于如何与系统进行互的模。例如我们知道需要通过水龙头上的把手来控制水流的大小或是调整水温。

了解过名词和概念之后，你可会好奇这些和我们的设计有么联呢？简单来说，如果一个系统，譬如水龙头，符合我们已有的心智模，那么它就是符合预期的。我们会耗精感知和解，这个系统对我们而言是符合直觉的。相反，如果一个系统符合我们的心智模，那么我们的预期就会被打破，这个系统对我们而言就是符合直觉的。

于心智模，我们还要再多聊一聊，因为这确实是非重要的设计原。我来给各位讲一个小故事。有一位名叫 Mortimer 的水龙头设计师，和我们一样，他的头脑当中有着于水龙头的心智模。当然对于 Mortimer 而言，这套模更精密、专和复杂。

Mortimer 的工就是创造无与伦比、令人喜爱的水龙头。有一天，仿佛被灵感的闪电猛击中，他有个绝妙的想法：与其让两个把手分别控冷、热水，不让一个把手控温度，而另一个控水流大小。样就能避免人们在节水流时不小心改变温度。

而有个小问题：Mortimer 的设计完不符合人们关水龙头的心智模型。使用款水龙头时，人们现操结果并不符合预期，难以依靠直进行控。更糟的是，Mortimer 的设计在外观上和普通水龙头没什么区别，但行为模式却完不同，人们想要打开热水，却现并没有水流出来。

预期与结果之间的错位造成严重的用问题。或许以建议 Mortimer 为每个把手添加视化的说明？但只是治标不治的方案。诸文标签一类的视索很容易被人们忽视，尤其是当人们对眼前系统的运方式及操方法有着根深蒂固的经验时。

在 app 设计当中，同样是一个重要问题。试图改变人们的心智模型是极具风险的。人们越熟悉你的 app，种改变的风险就越大。人们通常很难适应一款老产品当中生的变化，而无论变化身是否正确或必要。在进行类设计决策之前，必须尽最大能去确认你所做的改变以为当前的使用者们带来最为正面的结果，切忌为改变而改变。

持谨慎，勤验证，让创新精神为产品设计带来客观意义上的改善。

邻近性-Proximity

洗脸，差不也到餐时间。你决定换上新买的夏威夷衬衫。是你关上灯并离开卫生间，打开门厅里的灯，走进卧室，又打开屋中的几盏灯。

一连串行为当中便现着我们接下来要讨论的设计原理，即「邻近」。

邻近所关注的是控件与被控对象之间的距离。两者的距离越近，它们之间的关联关系就越明显。卫生间墙壁上的开关自是控卫生间里的灯，门厅和卧室也是此。

良的邻近同样现着人工学原理。通常，我们距离一个物或兴趣区域越近，越有能与之进行互动。当人们走进卫生间时，希望首先把灯打开。因此，我们通常将开关安装在门的附近，持在一臂距离之内，使人们以轻松地触碰到。

邻近性同适用于表达多个控件之间的位置关系。譬如，如果你墙上有一组开关，同你还知道其中的某一个用于控制灯光，那你就有理由假其个同是灯的开关。

如果其中某一个开关是用于控制暗的，那在计，最好将它其个开关开放置，这人将更容易它各的作用。

这有必要指出，有一个名词通常用于指代右侧的布局模式。没错，「组」。组是计理当中的一个非常基础却极其重要的概念，它有助于人理解不同素之间的逻辑关系，是用于构建息结构的关键素。

组的概念容易理解，然而在界面计中却常被忽视。下来通过个简的例来如何在界面当中使用邻近性和组的概念来体现素之间的逻辑关系。

在 Keynote ，工具栏里功能控件与其所控制目标象或区域位关系都能体现出邻近性原理。例如「显示」、「缩放」、「添加幻灯片」位紧邻着幻灯片导航栏及画布区域，这可以使们意识到它们存在着控制与被控制逻辑关联。

理，「表格」、「图表」、「文本」等工具则位于画布正上，与其控制区域距离最近。

而「格」、「动画效」与「文稿」切换开关样位于其应板正上。

在 Sketch 也是如此。工具栏里分组相关操作，变形与旋转，合并操作，图层排序等等，都与其所控制目标象或区域有着邻近位应关系。

诚然，以上两个例子都是关于 macOS ，设计原理本身样适用于屏幕较小设备，例如 iPhone、iPad 甚至是 Apple Watch。

欢迎关注作者的微信公众：「Beforweb」