在实际的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的说法，人类更倾向于经过改变环境来让其生活更加温馨简便。而学习和掌握环境的可供性成为人类社会化的一个重要部分。web
而应用到设计中，“可供性”这个术语仅指用户可以感知到的那些物理操做的可能性。就这一方面，1988年，Donald Norman又在其书籍《The Design of Everyday Things》进行了更近一步的解释：“可供性指的是事物可感知的真实属性，主要是那些决定如何使用该事物的一些基本属性。可供性提供了很是有利的线索来暗示事物的相关操做。好比，磁盘须要推进，按钮须要旋拧，插槽须要插入东西以及球能够投掷或拍打等等。当设计师进行Web或App设计时，充分考虑其可供性，用户一看界面就知道该怎么作，无需任何图片，标签或说明”。安全
随着各类Web或App界面的出现，界面可供性拥有了全新的开发载体。人们能够经过不一样的动做，工具以及事物完成数百种操做。也能够简单敲击鼠标或屏幕实现批量操做。这样就可以让
UX设计师拥有全新的设计方式来展示人们在数字交互中积累的真实生活模式和知识，呈现界面设计的可供性。固然，因为用户体验不一样，实现的方式也会不一样。
界面设计可供性分类
界面设计可供性可根据其性能和展示方式的不一样划分为不一样类型。固然，不管哪一种类型，其主要目的都是帮助人们落实必须简化交互流程的相关知识和经验。
根据其性能的不一样，人们能够在UI中找到显式和隐式两种提示。
显式可供性设计是基于众所周知的典型的提示，引导用户完成特定操做的设计。例如，当人们看到按钮被设计成为很是明显的可点击部件，即视觉上更像是现实世界中的按钮时，人们就会天然的明白他们能够经过简单点击来实现与按钮的交互。如若该按钮同时结合适当文本或图标，其可供性就更加清楚明了了：app
它将告诉用户来自系统的对应反馈。ide
如图，来自Gourmet网页的页面设计：其CTA按钮清晰可点击，微文案也指明了按钮用途。（
隐式可供性设计并不明显。他们被巧妙的隐藏起来，而且可能只在特定的用户行为流中才得以显现。好比，当用户将鼠标悬停于某些界面布局元素，随之而出现的工具提示或解释说明，即为隐式可供性设计的一种。其它的例子，包括多层级导航元素设计，好比下拉菜单或可扩展按钮等。它们不会一直显示，也不会在交互发生的第一时间就显现出来，而是在某个用户进行了某个特定操做才会触发。而其中最具争议性的设计就是下图的汉堡菜单设计，它隐藏了按钮背后的无障碍功能。工具
图形化界面可供性设计
图形化界面可供性是经过对界面添加各类视觉设计，来实现帮助用户快速扫描并了解界面功能的设计。相较于界面文字，各类类型的图形更容易被用户快速感知并牢记。所以，其重要性不可低估。如下，你们就跟着小编的步伐，了解其中最具表明性的一些图形化界面可供性设计：
图片
主题图片，项目图片，用户头像以及标题图片为App或Web界面设计提供了视觉上的支持。好比，为界面使用信息（好比购买，沟通，显示，观看，学习，写做等）以及具体功能说明提供了视觉支持。比方说，如若一款App容许用户收藏和分享食谱，那么以下图所示这般，经过添加适当图片设置即时关联会更加炫酷。
品牌标志
Web或App标志， 公司标志和应用于Web或App的色彩呈现了界面与特定品牌之间的联系。这对于其忠实客户而言，是极其实用的设计。布局
如图，Jewellery Ecommerce app的启动页和界面顶端上展现的标志，将其与对应品牌联系起来
插画
主题插图和吉祥物可以很是直观有效地给予用户提示。以下图，Toonie报警应用界面显示了一个弹出窗口， 经过使用众所周知的万圣节视觉提示 —— 万圣节南瓜，告知用户关于万圣节的相关信息。
图标
图标，应该是界面设计中最丰富且最经常使用的视觉可供性设计元素。这些图标具备极强的象征性，并且大多采用来自真实世界的常见暗示，已便用户可以快速的理解它们。并且，更重要的是，即便某些图标已然失去与原有物理对象的联系，如若为大部分用户所熟知，任然可以实现其功能可供性。用于“存储”的软盘就是其中的一个典型实例，即便软盘再也不拥有如图标显示的外在物理形象，用户任然可以经过此图标知道其指向的是应用的“存储”功能。好比，心型或星型图标一般引导用户跳转到收藏页面。而放大镜图标则暗示其搜索功能， 而相机图标则则指向拍照功能。（
10
）
图标也是界面内容板块划分的重要影响因素。界面分类和板块区域划分结合适当图形进行展现，对用户来讲会更直观易用。
按钮
按钮，做为最核心的UI交互设计元素之一，也是公认的Web或App界面元素。事实上，在
GUI时代以前，按钮就已经被用到各类各样的物理事物，从简单的计算器到复杂的仪表盘。咱们都知道如何更好的设计按钮。而最关键的一点就是要让其引人注目，被用户真正视做是
UI中显而易见的按钮进行使用。而形状，对比，色彩以及文本的添加和设计可以极大的帮助咱们实现这一点。（
）
字段
通常而言，字段呈现的是用户能够根据须要输入必要数据的区域。为了使其更加直观有效，设计师也可对其进行可供性设计。
首先，字段在视觉上应该是交互式的。这样就能让用户当即明白，该区域是能够直接输入文本的。如下的完美食谱应用界面就展现了其搜索区域。显而易见，用户能够简单经过其形状，对比，搜索图标以及提示文本的应用，判断它是交互式的，能够输入文字进行搜索。
通知
UI设计中，不少方式能够帮助设计师提示用户：软件或用户操做存在哪些遗漏或值得注意的地方。而其中一个有效方式，就是使用界面通知。好比，下面界面展现的购物车图标，其显示的黄色圆点就快速暗示用户，该购物车不为空。post
文本（语言）可供性设计
尽管用户对图片的感知速度远远高于文字，但文本对于应用交互流设计影响任然很是大。由于，图像有时也须要文本进行解释，以免误解。并且，并非全部信息都能体如今图片中，有时也须要必定的文字配合阐述。更别说，文本自己在传输信息，标记指令，行为召唤，功能说明以及支持界面布局效率方面，做用巨大。
在平常的生活中，文字交互对于人们来讲是很是天然常见的。并且，它比图形用户界面出现的早得多。界面文本线索和提示帮助用户了解要作什么或期待什么，以及须要牢记什么。人们也须要从界面符号，广告，以及针对报纸，手册和书籍的文字说明中获取更多软件信息。而虚拟数字界面也是如此。它是一种可以实现直接与用户交流的方式。例如，HealthCare App的日历页面就展现多样的语言可供性设计。除去关于患者的主要信息，用户能够发现其搜索区域，CTA按钮以及界面空白区域的文本提示，都在向用户传达一个信息：用户能够简单点击该区域进行预定。
Pattern Affordances性能
Pattern affordances是基于习惯，展现界面有效交互设计的重要影响因素。其最大的优势就是可以帮助用户花费更少的精力记忆更多的界面信息。正如咱们在以前的文章中提到的那样，短时间记忆是有限，且具备必定局限性的。所以，用户学习和掌握的模式越多，对Web或App的导航设计理解得更加透彻，他们应对全新信息的能力也会更佳。学习
实际设计案例中，有许多典型的模式可供性设计。好比，人们都已然习惯了在网站标题中添加可点击图标，来打开一个主页。在页面切换的过程当中，人们清楚下划线标出的文本，一般附有可点击连接。网站联系方式和隐私政策一般放置在网页底部。而在App页面布局方面，垂直显示的三个点通常意味着”更多“，可以点击展现额外功能。保留和使用这些模式就是为了让用户可以轻松了解界面，从而加强其对界面和应用的信心。所以，若是在具体的设计实例中须要打破此类模式可供性设计时，请考虑清楚并事先完成必要的测试，再进行选择。不管如何，创意应该是合理的，并且对用户来讲也应该是清晰明了的。
动画可供性设计
界面中动画的应用可以有效的将物理和虚拟世界联系起来。在大多数状况下，它模仿的是与真实事物之间的交互，好比拉，推，滑动以及拖动等。因此，就这方面而言，界面动画可以简单或复杂的呈现界面的强大功能。
如下案例中显示了Toobie报警器的开关。当开关打开时，其标签色彩、转换色彩和激活动画等会相应的发生变化。这样一来，就能当即通知用户相关信息，加强界面的情感化设计。
另外一个例子显示了在Home Budget app的交互流中出现的通知，用以提醒用户注意某些特定的限制。经过脉动的动画特效，吸引了用户注意到该警示。
还有一个例子就是下面的拉动刷新页面动画。当其出如今界面上时，它会告知用户，界面正在更新，也为用户等待更新过程增添一些乐趣，提高用户体验。
消极可供性设计
不管听起来多么离谱，消极可供性设计业在提高用户体验愉悦度方面，发挥着相当重要的做用。由于，负面的结果也是结果，可以为设计师提高用户体验提供支持。界面消极可供性设计的目的就是为了提醒用户，某些元素或操做当下是不可用的。例如，下面Homey app界面显示”卧室“ 按钮是可用的，然而剩下的其余房间按钮则是不可用。因此，这些设计呈现地就是界面的消极可供性设计。在安全级别方面，level 5是彻底不可用的。
另一个例子就是标签栏经过添加色彩显示可用的标签，而剩下的标签设计就是不可用。体现其消极可供性设计。
错误可供性设计
从用户体验的角度来看，错误和消极的可供性并不是同义词。错误的可供性是指设计师应该避免的一些界面设计。例如，一些可以致使用户进行不一样操做或带来不一样结果的错误提示，而非设计师但愿经过提示引导用户进行的操做或实现的结果。尽管，这类设计，有时是设计师故意添加，但绝大多数状况下，则是设计师无心思下犯错形成的。例如,若是web界面文本中部分文字带下划线,那么用户颇有可能会自动认为它们是可单击的。因此，当用户发现它们没法进行点击时，他们可能就会变得很生气。并且，这也代表他们被误导了。
上面的简要介绍让咱们了解了可供性在用户体验设计中发挥的重要做用。因此，在具体的设计实例中，必定要注意UI的可供性设计，提高用户体验。
推荐阅读：
App可访问性设计:拒绝体验“障碍”测试
做者：Tubik Studio
原文连接：
uxplanet.org/ux-design-g…