图解WWDC 设计分会：基础设计原理 – 映射与可供性

@C7210 ：继续上期主题，即 WWDC 「基础设计原理」设计分会，演讲是 Apple 设计布者团队 Mike Stern 师。在上期，我们了解了「心智模型」与「邻近性」，错过的友妨看。今天的话题聚焦于「映射」「可供性」。

映射-Mapping

在去餐厅用餐之前，我们还有时间一项基础设计原理。让我们回头看看在「邻近」原理当中提到的灯光明暗控开关。你能仅通最左个开关的样式看出它所控的灯光明暗度吗？

下图样又何？

我们之所以能从者当中进行判断，所依据的就是映射关系。所谓「映射」，即是指，将被控对象的行为规律现到控件自身的操方式中，譬开关把手的上升和下降，对应着灯光亮度的升高和降低。

映射同样现在个控件的局当中，它们的次序应该能够反映出个被控对象之间的相对位置关系。

我们假设这三关用于控制卧室天花板的三盏灯。依据映射关系设的关置应该能够帮人们速判断出它们各自控制哪一盏灯。映射原理于设师对控件的类型、置次序行决策。

映射关系不明确时，我们常需要依靠文本标签才能理解开关与灯应关系。这并完美解决案，为阅读和理解文需要花费时和精力，时们也难以依靠记忆进快速操作。

在界设计，映射关系也体现在控件类型选择上。例如过滑块（slider）控制文本距是很符合觉交互。而相比于滑块或是步进控件（stepper），旋钮则更适于旋转操作。

当然，最直接的映射才是最好的映射。为人们供直接操作目标对象的是最为简单、精准、符合直觉的解决方案。macOS 上的鼠标指针操作，或 iOS 当中的手势操作，都可为人们带来直接操作的体验。

可供性-Affordance

不知各位如何，是饿了，这就准备下楼去吃。在大堂见，然后一起去餐厅。

坐在桌前，你会看到面前摆放着一个空盘子。我们这个盘子做么？显然，放些食物在里面。除此之外呢？

盘子很光滑，可旋转或是滑来滑。

盘有一圈宽边，可以抓着拎起来。

对于如何这个盘进行互动的观点便是可供性的体现。换句话说，盘的外形征为提供了如何之进行互动的视觉及触觉线索，使识哪些交互行为可行，哪些不可行。会识要将食物放进去，或是将它滑其地方。但通常不会想要倒水进去，然后端起来喝。

可供性并非物体身所备的属性，它更多是在代表行为主体目标对象之间的互动关系。可供性会因行为主体的差异而有所不同。举个极端些的例，对而言，飞盘可以用来抓住或扔出去，而对的狗来说，飞盘就是用来叼的。不过另一方面，碟对和的狗来说都是用来盛放食物的。

由于可供性所有的主观性，一个人能知的交互性在另一个人来则未必如此。当可供性所传达的交互性人的常规行为有着高度关，人会更加容易知。

例如，我实可把碟子当作茶托，这会是个错的茶托。但我猜我们大日很真的这样做，因此我会更乐于将碟子视为放食物的容器，而非将水杯放在里面。

我们从我们互过的任何环境及事物当中感知到可达性。当我们走进厅时，门的大小及形状可传达供人穿过的特性，连续的地面使我们意识到可在上面稳地行走。

椅子的暗示我们可坐，桌子的构令我们明白可将物摆放在上面。

人物当中都包含有传达可供性的视觉线索，使人们明白哪些行为可行。清晰的、显而易见的视觉线索可帮助人们迅速了解如何与之进行互。

对于 app 界面设计而言是同样的道。滑控件由把手和滑轨构成，暗示着拖拽的特性。

旋钮的样式意味着可旋转。

按钮则一目了然地传达着可点击的特征。

在上每一个例子当中，可供性的传达效率都是极的。事实上，随着时间的推移，我们会越发适应于抽象断升的可供性传达形式。我们熟悉的界面当中的按钮，无非是现实世界里真实按钮的抽象版本；那个圆角足将虚拟与现实两个版本的同一种物体联起来。

同，滑把手周围那细微的投影效果足我们意识到独立于滑轨之上的操作特性。

而且，仅有的这一点点视觉线索可都是必需的，对于很多人来说，一条直线上的一个实心圆足矣传达滑操作的可供性了。

有时候，可供性可通过效进行传达。在天气 app 中点击体容，界面整体会稍稍上升，暗示着可通过滚屏来查看更多容。

无论你使用何种方法，都必须确保 app 界面能够清晰准确地传达其身的交互性，否则，人将困惑于如何之互动。可能会以错误的方式进行操作，然后发现无果，进而将控件理解成不可交互的素，app 的可用性也会因此而受损。

注作者的微信公众号：「Beforweb」