UI设计可供性解析：巧用隐藏的设计力提升用户体验

以下内容由Mockplus团队翻译整理，仅供学习交流，Mockplus是更快更简单的原型设计工具。

在实际的Web或App界面设计中，设计师们在学习和实践各种专业知识和技能之外，也会不可避免的遇到到各种设计术语。在前面的文章中， 我们已经针对网页设计可用性，相关业务术语和缩写，页面导航元素以及色彩术语进行了分析和讲解。而本篇文章将延续心理学在用户体验设计方面的影响的主题， 解析新的UX设计术语 —— UI设计的可供性（即那些能够帮助用户轻松实现人机交互的隐藏提示）。

什么是界面设计的可供性？

一般而言，可供性是指事物能够提示其可以帮助人们做什么的一种属性或特征。简而言之，可供性是能够暗示人们该如何实现与之交互的线索，无论这些隐藏的线索是直观可见的，还是是数字虚拟的。例如，当看到一个门把手，它给予人们的暗示通常是：你可以用它来打开门。当看到一个接听图标，它给予人们的提示通常是：你可以点击它来拨打电话。所以，正是由于可供性能够帮助人们简单实现与外界以及虚拟物体的成功互动，它让人们的生活更加简洁便利。

如下图的浇水追踪应用的界面设计，简单几秒，用户就能知道所需的操作已经完成 —— 因为界面的绿色大勾图标已经清楚传达这一信息。而且界面标签栏中的图标也为用户提供了如何使用此款App的相关信息。比如，用户可以查看植物集（因为对应的这个标签有颜色，而其他标签却没有，所以它应该是可操作的），添加新的植物或者查看个人资料等等。所有这些都是此款软件涉及地可供性设计。

可供性演变史

“可供性”这个词，是由心理学家James Gibson在深入研究视觉感知之后最先提出。1966年，他首次在其书籍《The Senses Considered as Perceptual Systems》中使用这个词。1979年，他又在另一本书籍《The Ecological Approach to Visual Perception》中进一步阐述了可供性的详细定义：“环境可供性是指环境提供给动物的东西，及一切环境提供或给予的东西，无论好坏。然而，由于字典中只能找到动词‘afford’，而名词 ‘affordance’却根本不存在，且环境和动物方面也没有对应的现存术语，所以我创造了‘affordance’这个词。它暗示了环境与动物的互补性。” 根据Gibson的说法，人类更倾向于通过改变环境来让其生活更加舒适简便。而学习和掌握环境的可供性成为人类社会化的一个重要部分。

而应用到设计中，“可供性”这个术语仅指用户能够感知到的那些物理操作的可能性。就这一方面，1988年，Donald Norman又在其书籍《The Design of Everyday Things》进行了更近一步的解释：“可供性指的是事物可感知的真实属性，主要是那些决定如何使用该事物的一些基本属性。可供性提供了非常有利的线索来暗示事物的相关操作。比如，磁盘需要推动，按钮需要旋拧，插槽需要插入东西以及球可以投掷或拍打等等。当设计师进行Web或App设计时，充分考虑其可供性，用户一看界面就知道该怎么做，无需任何图片，标签或说明”。

随着各种Web或App界面的出现，界面可供性拥有了全新的开发载体。人们可以通过不同的动作，工具以及事物完成数百种操作。也可以简单敲击鼠标或屏幕实现批量操作。这样就能够让UX设计师拥有全新的设计方式来展现人们在数字交互中积累的真实生活模式和知识，呈现界面设计的可供性。当然，由于用户体验不同，实现的方式也会不同。

界面设计可供性分类

界面设计可供性可根据其性能和展现方式的不同划分为不同类型。当然， 无论哪种类型，其主要目的都是帮助人们落实必须简化交互流程的相关知识和经验。

显式（显而易见）和隐式(隐藏）可供性设计

根据其性能的不同，人们可以在UI中找到显式和隐式两种提示。

显式可供性设计是基于众所周知的典型的提示，引导用户完成特定操作的设计。例如，当人们看到按钮被设计成为非常明显的可点击部件，即视觉上更像是现实世界中的按钮时，人们就会自然的明白他们可以通过简单点击来实现与按钮的交互。如若该按钮同时结合适当文本或图标，其可供性就更加清楚明了了： 它将告诉用户来自系统的对应反馈。

如图，来自Gourmet网页的页面设计：其CTA按钮清晰可点击，微文案也指明了按钮用途。（点击了解更多CTA按钮设计秘诀）

隐式可供性设计并不明显。他们被巧妙的隐藏起来，并且可能只在特定的用户行为流中才得以显现。比如，当用户将鼠标悬停于某些界面布局元素，随之而出现的工具提示或解释说明，即为隐式可供性设计的一种。其它的例子，包括多层级导航元素设计，比如下拉菜单或可扩展按钮等。它们不会一直显示，也不会在交互发生的第一时间就显现出来，而是在某个用户进行了某个特定操作才会触发。而其中最具争议性的设计就是下图的汉堡菜单设计，它隐藏了按钮背后的无障碍功能。

图形化界面可供性设计

图形化界面可供性是通过对界面添加各种视觉设计， 来实现帮助用户快速扫描并了解界面功能的设计。相较于界面文字， 各种类型的图形更容易被用户快速感知并牢记。因此，其重要性不可低估。以下，大家就跟着小编的步伐，了解其中最具代表性的一些图形化界面可供性设计：

图片

主题图片，项目图片，用户头像以及标题图片为App或Web界面设计提供了视觉上的支持。比如，为界面使用信息（比如购买，沟通，显示，观看，学习，写作等）以及具体功能说明提供了视觉支持。比方说，如若一款App允许用户收藏和分享食谱，那么如下图所示这般，通过添加适当图片设置即时关联会更加炫酷。

品牌标志

Web或App标志， 公司标志和应用于Web或App的色彩呈现了界面与特定品牌之间的联系。这对于其忠实客户而言，是极其实用的设计。

如图，Jewellery Ecommerce app的启动页和界面顶端上展示的标志，将其与对应品牌联系起来

插画

主题插图和吉祥物能够非常直观有效地给予用户提示。如下图，Toonie 报警应用界面显示了一个弹出窗口， 通过使用众所周知的万圣节视觉提示 —— 万圣节南瓜，告知用户关于万圣节的相关信息。

图标

图标，应该是界面设计中最丰富且最常用的视觉可供性设计元素。这些图标具有极强的象征性，而且大多采用来自真实世界的常见暗示， 已便用户能够快速的理解它们。而且，更重要的是，即使某些图标已然失去与原有物理对象的联系，如若为大部分用户所熟知，任然能够实现其功能可供性。用于“存储”的软盘就是其中的一个典型实例，即使软盘不再拥有如图标显示的外在物理形象，用户任然能够通过此图标知道其指向的是应用的“存储”功能。比如，心型或星型图标通常引导用户跳转到收藏页面。而放大镜图标则暗示其搜索功能， 而相机图标则则指向拍照功能。（点击查看10个最佳图标资源）

图标也是界面内容板块划分的重要影响因素。界面分类和板块区域划分结合适当图形进行展示，对用户来说会更直观易用。

按钮

按钮， 作为最核心的UI交互设计元素之一，也是公认的Web或App界面元素。事实上，在GUI时代之前，按钮就已经被用到各种各样的物理事物，从简单的计算器到复杂的仪表盘。我们都知道如何更好的设计按钮。而最关键的一点就是要让其引人注目，被用户真正视作是UI中显而易见的按钮进行使用。而形状，对比，色彩以及文本的添加和设计能够极大的帮助我们实现这一点。（点击了解更多按钮体验设计秘诀）

字段

一般而言，字段呈现的是用户可以根据需要输入必要数据的区域。为了使其更加直观有效，设计师也可对其进行可供性设计。 首先，字段在视觉上应该是交互式的。这样就能让用户立即明白，该区域是可以直接输入文本的。以下的完美食谱应用界面就展示了其搜索区域。显而易见，用户可以简单通过其形状，对比，搜索图标以及提示文本的应用，判断它是交互式的，可以输入文字进行搜索。

通知

UI设计中，很多方式可以帮助设计师提示用户：软件或用户操作存在哪些遗漏或值得注意的地方。而其中一个有效方式，就是使用界面通知。比如，下面界面展示的购物车图标，其显示的黄色圆点就快速暗示用户，该购物车不为空。

文本（语言）可供性设计

尽管用户对图片的感知速度远远高于文字，但文本对于应用交互流设计影响任然非常大。因为，图像有时也需要文本进行解释，以避免误解。而且，并不是所有信息都能体现在图片中，有时也需要一定的文字配合阐述。更别说，文本本身在传输信息，标记指令，行为召唤，功能说明以及支持界面布局效率方面，作用巨大。

在日常的生活中，文字交互对于人们来说是非常自然常见的。而且，它比图形用户界面出现的早得多。界面文本线索和提示帮助用户了解要做什么或期待什么，以及需要牢记什么。人们也需要从界面符号，广告，以及针对报纸，手册和书籍的文字说明中获取更多软件信息。而虚拟数字界面也是如此。它是一种能够实现直接与用户交流的方式。例如，HealthCare App的日历页面就展示多样的语言可供性设计。除去关于患者的主要信息，用户可以发现其搜索区域，CTA按钮以及界面空白区域的文本提示，都在向用户传达一个信息：用户可以简单点击该区域进行预约。

Pattern Affordances

Pattern affordances是基于习惯，展示界面有效交互设计的重要影响因素。其最大的优点就是能够帮助用户花费更少的精力记忆更多的界面信息。正如我们在之前的文章中提到的那样，短期记忆是有限，且具有一定局限性的。因此，用户学习和掌握的模式越多，对Web或App的导航设计理解得更加透彻，他们应对全新信息的能力也会更佳。

实际设计案例中，有许多典型的模式可供性设计。比如，人们都已然习惯了在网站标题中添加可点击图标，来打开一个主页。在页面切换的过程中，人们清楚下划线标出的文本，通常附有可点击链接。网站联系方式和隐私政策通常放置在网页底部。而在App页面布局方面，垂直显示的三个点一般意味着”更多“，能够点击展示额外功能。保留和使用这些模式就是为了让用户能够轻松了解界面，从而增强其对界面和应用的信心。因此，如果在具体的设计实例中需要打破此类模式可供性设计时，请考虑清楚并事先完成必要的测试，再进行选择。无论如何，创意应该是合理的，而且对用户来说也应该是清晰明了的。

动画可供性设计

界面中动画的应用能够有效的将物理和虚拟世界联系起来。在大多数情况下，它模仿的是与真实事物之间的交互，比如拉，推，滑动以及拖动等。所以，就这方面而言，界面动画能够简单或复杂的呈现界面的强大功能。

以下案例中显示了Toobie报警器的开关。当开关打开时，其标签色彩、转换色彩和激活动画等会相应的发生变化。这样一来，就能立即通知用户相关信息，增强界面的情感化设计。

另一个例子显示了在Home Budget app的交互流中出现的通知，用以提醒用户注意某些特定的限制。通过脉动的动画特效，吸引了用户注意到该警示。

还有一个例子就是下面的拉动刷新页面动画。当其出现在界面上时，它会告知用户，界面正在更新，也为用户等待更新过程增添一些乐趣，提升用户体验。

消极可供性设计

无论听起来多么离谱，消极可供性设计业在提升用户体验愉悦度方面，发挥着至关重要的作用。因为，负面的结果也是结果，能够为设计师提升用户体验提供支持。界面消极可供性设计的目的就是为了提醒用户，某些元素或操作当下是不可用的。例如，下面Homey app界面显示”卧室“ 按钮是可用的，然而剩下的其他房间按钮则是不可用。所以，这些设计呈现地就是界面的消极可供性设计。在安全级别方面，level 5是完全不可用的。

另外一个例子就是标签栏通过添加色彩显示可用的标签，而剩下的标签设计就是不可用。体现其消极可供性设计。

错误可供性设计

从用户体验的角度来看，错误和消极的可供性并非同义词。错误的可供性是指设计师应该避免的一些界面设计。例如，一些能够导致用户进行不同操作或带来不同结果的错误提示， 而非设计师希望通过提示引导用户进行的操作或实现的结果。尽管，这类设计，有时是设计师故意添加， 但绝大多数情况下，则是设计师无意思下犯错造成的。例如, 如果 web 界面文本中部分文字带下划线, 那么用户很有可能会自动认为它们是可单击的。所以，当用户发现它们无法进行点击时，他们可能就会变得很生气。而且，这也表明他们被误导了。

上面的简要介绍让我们了解了可供性在用户体验设计中发挥的重要作用。所以，在具体的设计实例中，一定要注意UI的可供性设计，提升用户体验。

推荐阅读：

为什么可用性设计重要？如何实现可用性设计？

App可访问性设计: 拒绝体验“障碍”

易用性设计：如何让你的应用程序适用于所有人

作者：Tubik Studio

原文链接：https://uxplanet.org/ux-design-glossary-how-to-use-affordances-in-user-interfaces-393c8e9686e4

学习工具，但不受限于某种工具。Mockplus做原型，更快更简单，现在下载Mockplus，免费体验畅快的原型设计之旅。