梅州做网站：什么是网页设计中被低估的词？

“可供性”是对象可用于执行特定动作的感知信号或线索。椅子位于膝盖高度附近并且似乎提供支撑。它提供了坐姿。牙刷的手柄比人的手掌略长。它提供抓地力。梅州做网站

我们周围的所有物体都具有可供性：一些是明确的（门把手上方的“推”标志），而其他物体则是隐藏的（椅子可用于打破窗户或用作武器）。这个词最初是由心理学家詹姆斯·吉布森（James G. Gibson）创造的，然后由唐纳德·诺曼（Donald Norman）在他的着作“日常生活的心理学”一书中介绍了人机交互，需要阅读各地新兴的工业和产品设计师。

界面设计师一直使用可用性。他们必须。与物理对象不同 - 物理对象通常具有基于其大小，形状和重量的可供性 - 网络和移动界面必须通过设计获得所有可用性。对于大多数设计师来说，这是直观和本能的，基于我们每天看到的数以千计的设计模式。但是你有没有想过让物体能够提供点击，滑动，拉动或推动的品质？

通过深入了解可供性如何工作，您将更好地掌握界面或产品设计。您将能够使用示能表作为一种工具，使您的设计更易于使用，并鼓励用户采取您想要的操作，例如注册产品，生成内容或与其他用户建立联系。更好的可供性会对转换率，注册率以及对您正在设计的网站，应用或产品最重要的用户操作产生巨大影响。这就是为什么“可供性”是网页设计中最被低估的词。

你能算一下用户在Tumblr主页上可以采取的行动数量吗？

虽然它看起来是一个非常简单的屏幕，但您可能会对Tumblr主页上的11个操作感到惊讶：

1. 输入电子邮件地址，

2. 输入密码，

3. 单击问号图标（通向密码恢复屏幕），

4. 点击“登录”按钮，

5. 点击“注册”链接，

6. 点击“条款”链接，

7. 点击“隐私”链接，

8. 点击“发布者blvcktrip”链接，

9. 点击blvcktrip的头像图片

10. 单击“搜索Tumblr”输入字段

11. 按Enter键搜索输入的术语

如果您能够猜测这些操作中的任何一个，那么您可以通过识别可用性来实现，这是接口“为用户提供”其功能的方式。所有你必须使用的是Tumblr页面的平面截图。通过识别模式和显式可供性，您可以调查界面的功能。

并非所有的能力都是平等的，有些是比其他的更强。了解可以在界面中使用的可供性类型很重要。费用通常分为以下类型之一：显性，模式，隐喻，隐藏，虚假和消极。我们将在本文的其余部分深入研究这些类别。

明确的负担

显性可供性是通过语言或对象的外观来表示的。显示“单击此处”的文本明确提供了单击。从周围表面看起来凸起的按钮似乎具有触觉并提供推动力。门把手上方有“推”字，提供推动力。显式写入“写注释”的输入字段提供正在写入的注释。

这些可供性是显而易见的，因为任何人都可以猜测如何与元素交互，即使它们之前从未接触过该接口。这些可供性不依赖于模式。无论是在屏幕上还是在关闭状态下，看起来可以推送的物体都会引发推动。即使用户之前从未见过链接，显示“单击此处”的链接也会发出咔嗒声。只要用户知道如何点击或推送，就可以发现可供性。

在以下情况下，显性可供性尤为重要：

1. 当界面的用户不太可能在过去暴露于许多可供性模式时这种情况最常发生在那些不熟悉技术或不经常与Web或移动界面交互的用户身上。这些用户不太可能通过设计模式识别可供性。这也可能适用于独特或创新的界面。第一批移动应用程序大量使用显式支持，例如点击或滑动。

2. 当没有建立模式来表示动作的可供性时可能不清楚如何在视觉上传达移动界面中的对象提供向内收缩以向外和向外扩展。在这种情况下，设计者可能会使用显式可供性（即通过向对象添加“Pinch to expand”文本）。

是否使用显式可供性取决于上下文。过于明确可以在设计中引入冗余。如果每个链接都显示“单击此处”，则页面将变得单调。考虑在没有明确指示的情况下，您的受众有多大可能理解对象的可供性。例如，科技创业公司创始人的应用程序用户之前可能已经看过输入字段。如果界面指示他们“点击输入电子邮件地址”，他们可能会感到光顾。

模式负担

这是现代界面设计中最常见的可供性类型。例如，我们隐含地理解，不是句子的一部分且位于页面内容主要区域之外的单词通常是提供点击的链接。我们认识到屏幕顶部包含脱节单词的条带通常是导航栏，而单词提供导航。我们认识到，类似按钮的背景上的单个单词或短语通常是执行操作的可单击按钮。我们猜测旁边带有向下箭头的单词或短语通常会扩展为下拉菜单。

模式隐喻是用于传达特定一组可供性的既定隐喻。例如，电子邮件通常由信封图标表示（即使发送电子邮件从未涉及物理信封）。这个比喻是有效的，因为它是一种既定的模式。我们将在隐喻可供性部分中更详细地讨论这个问题。

模式可供性优雅，因为它允许复杂的界面快速向用户发出许多可供性信号。当我们与更多种类的网站和应用程序进行交互时，我们会更快地解析给定屏幕上可用的无数可用性。

这是我在Envato Studio主页上的模式示例列表：

要了解设计对模式可供性的依赖，请问自己，如果您之前从未与网络或智能手机进行过互动，但您知道如何执行点击和点击等基本操作，您是否了解此界面为您提供的操作？

模式为我们提供了很好的快捷方式，可以轻松地传达可用性。请记住，他们依赖于已经花费大量时间与应用程序，网站和其他界面进行交互。当您为精通技术的观众进行设计时，模式可供性将构成您设计的主要部分。在为可能没有丰富界面经验的受众设计时（例如儿童，老年人和互联网访问最少的地区的人），那么您将希望减少对模式可供性的依赖。

隐藏的负担

一个更微妙的形式，隐藏的可供性只有在满足某个条件时才会变得明显 - 例如，链接文本仅在被鼠标悬停时才提供点击（并通过改变颜色来响应）。在iOS设备上，只有在主屏幕上轻敲并拖动时，每个应用程序图标屏幕才会被刷卡。在Pinterest上，固定的物品只有在它悬停时才会受到青睐。默认情况下，在用户采取某些操作来激活提示之前，不会显示元素的可供性。

隐藏的可供性通常用于复杂的界面中，使得每个单独的可供性显而易见会使界面混乱或混淆可用操作的层次结构。可以巧妙地使用隐藏的可供性来强调不那么重要的行为。当很少需要功能时（例如，报告图像不合适），这很棒。

风险在于用户可能不直观地知道如何揭示可供性。

最后，永远不要使用隐藏的能力来进行重要的行动。相反，通过将不太重要的行为淡化到背景中来减少重要行动的混乱。

在考虑是否使用隐藏的可供性时，问问自己，用户是否可以在不知道此操作的情况下愉快地使用此界面？如果答案是肯定的，那么隐藏的可供性将适用于此操作。

例如，允许用户通过将其悬停在图库中“喜欢”某个项目是可以接受的。用户可以每天愉快地访问画廊，而不会感到喜欢它的冲动。但是，仅通过将鼠标悬停在网站的某个部分上来授予对图库图像的访问权限将成为许多人的障碍。

一个严重依赖隐藏功能的iPhone应用程序是Clear，一个待办事项应用程序。然而，它的设计受到称赞。

它漂亮吗？是。然而，它主要依赖隐藏的可供性。当您向下拉列表项时，屏幕顶部会向下折叠，指示您“拉动以创建项目。”解锁这些说明需要进行实验。向左滑动会删除项目，向右滑动会将其标记为已完成。将两个列表项分开，在它们之间创建一个新项。向内挤压会关闭一个列表。

这些隐藏的功能并不意味着Clear的用户体验不佳。首次打开应用程序时，您可以滚动浏览其某些功能的教程。如果您忘记了教程中的说明，待办事项看起来就像邀请实验的物理面板。您了解待办事项应用程序可能允许添加，删除或标记为完成的项目。面板看起来可以被操纵。通过坚持初始学习曲线，用户可以轻松使用并与干净，最小化的界面进行交互。

然而，Clear中体现的设计理念并不适用于所有接口。学习曲线越陡，用户之间的下降率就越大。清除成本购买金额，因此用户有理由花时间学习界面。考虑频谱的另一端：发现自己位于产品目标网页上的用户。他们没有理由花时间寻找隐藏的可供性。事实上，如果现有的行动不能立即明确，那么他们很可能会去其他地方。

隐藏的可供性仅适用于用户有一些买入的情况。他们拥有的支持越少，你的支持能力就越明确，以便迅速指导他们采取你想要他们采取的行动。

隐喻的负担

有时，沟通可供性的最简单方法是使用现实世界的对象作为隐喻。例如，大多数界面图标都依赖于这些隐喻来传达可供性。信封图标可以发送电子邮件。房子图标提供“回家”。手机图标可以拨打电话。打印机图标可以打印文档。链图标提供创建链接。

一些隐喻是语境。文档查看应用程序中的放大镜图标最有可能提供缩放。但是，网站上输入字段旁边的放大镜图标最有可能提供搜索功能。

通过使用从现实世界对象中提取的隐喻，我们可以比使用显式可承担性更快地为复杂任务传达可供性。例如，如果您必须在界面中添加一个按钮，允许用户拨打电话，但您无法使用电话图标或使用“拨打电话”文本，您将如何传达此功能？

因为现实世界中对可供性的比喻是如此强大，所以选择最好的比喻对于工作来说非常重要。考虑一下iPhone应用程序Ness（最近被OpenTable收购）：

你认为上面的图标需要描述性标签吗？如果它们被带走了，你会明白汽车图标是否提供了共享指示？如果您没有驾车前往该地点，或者您想与公共交通工具上的某人分享路线，那么您必须考虑一下这一点。在这种情况下，更常见的模式隐喻是地图标记。

模式隐喻

模式隐喻是用于传达特定一组可供性的既定隐喻。例如，大多数设计师现在使用老式手机来表示打电话的可靠性。大多数人使用信封图标来表示发送电子邮件的可靠性。大多数人使用心脏图标表示偏爱某事物的可供性。如果设计师认为存在更好的比喻，他们可以打破模式，但请记住，您的用户也将学习已建立的模式。考虑通过单个心脏图标传达的丰富的可供性：

• “点击这将是'最喜欢'的一个项目。”

• “这让我可以保存我喜欢的物品。”

• “我可能会在我的帐户区域的某个地方访问我的收藏夹。”

• “可能会通知添加此项目的用户已被收藏。”

• “这是对这个项目的积极姿态。”

一颗心通常被理解为爱或喜爱的象征。通过始终如一地用于传达与收藏相关的同一套可供性，它已经开始在界面设计中传达这些可供性。

另外，在改变既定模式隐喻的风格之前要仔细考虑。看看Tumblr的WYSIWYG编辑器。您能识别图标以创建链接并删除链接吗？

链接的既定模式隐喻是链中的两个或三个链接，连接在一起 - 在这个界面中找不到。最接近的匹配是左边第四个图标，看起来有点像倾斜的无穷大符号。旁边是一个倾斜的无限符号和一个删除线。这些图标在风格上比链接链更美观吗？大概。理解他们沟通的可靠性需要额外的一点精力吗？我认同。这值得么？我不确定。新图标看起来非常像无穷大符号。虽然人们可以争辩说，网络链接将人们连接到互联网的无限，但链中的链接却是一个不那么抽象的隐喻。

虚假的负担

虚假的能力似乎提供了特定的能力，但实际上提供了不同的能力或根本没有能力。例如：

• 一个看起来像是可以被推或点击的元素，因为它是从周围环境中升起的，但是不可能;

• 徽标图片，不会将用户返回到域的根目录;

• 一个单词，显示链接的模式可供性（彩色和下划线），但不是链接;

• 绿色按钮（表示创建内容的可供性的模式）实际上删除了数据;

• 一个灰色的单词，似乎不提供任何动作，实际上是一个链接;

• 信封图标，似乎可以发送电子邮件，实际上发送短信。

界面设计模式是绿色按钮提供保存或创建数据。通过使用绿色按钮触发破坏性操作，用户可能会在意外保存时意外删除数据。

您可能会惊讶于上面的Dribbble UI元素中的每个元素（视图计数除外）都可以单击以执行操作。这是因为元素并不代表他们点击的可靠性。它们在灰色背景下是灰色的，没有下划线，并且是无遮盖的。它们错误地表示缺乏可供性，实际上它们具有丰富的功能（查看谁喜欢该项目，查看项目所在的桶，下载配色方案）。

虽然这些UI元素的微妙之处更多地关注设计的其余部分，但设计师必须考虑权衡是否值得。例如，如果“分享”链接加粗并且更明确地提供点击，那么Dribbble项目会更频繁地共享吗？

一个简单的规则：如果你真的希望别人做某事，可以添加更多的可供性信号。

负面的负担

有时需要表明UI元素目前不提供任何功能。最常见的是，这是通过使元素变灰来实现的。在Rdio的应用程序中获取输入字段。

密码输入字段显示为灰色，因为它当前不提供点击或输入数据。要解锁这些可用性，您必须点击“更改”按钮。

在此UI元素中，“保存更改”按钮显示为灰色，因为我们尚未进行任何更改; 因此，我们无法拯救他们。该样式表示按钮当前不具备任何功能。

下面（否则很漂亮）设计中的灰色按钮明确地提供点击其“使用我们的设计服务列表”的说明。但按钮的样式方式遵循负面支持的模式（平坦，灰色，淡入到背景）。因为灰色按钮通常表示缺乏可供性，用户可能没有意识到它可以被点击。

格雷有时也用来表示通常是链接的单词或短语不是。在下面显示的Google.com用户界面中，看起来无法点击我的电子邮件地址。然而，点击它有点令人惊讶地打开一个带有帐户选项的下拉菜单。

明智地使用负面支持可以帮助您的用户更快地进入具有有用功能的界面部分。

A Affordance Review：iOS 7的天气应用程序

iOS 7的默认天气应用程序具有多种功能。六种类型中，有哪些类型，哪些类型丢失？

• 明确的

• 图案

• 隐喻

• 隐

• 假

• 负

让我们来研究一下这些。

明确的负担

这个应用程序的主界面没有明确的可供性，没有看起来特别可点击的元素，没有关于如何与界面交互的口头指示。除了屏幕底部的导航元素，应用程序的界面看起来像一个平面的数据显示。甚至底部的导航元素也依赖于模式。

模式负担

我可以在Weather的界面中找出两个模式示例，它们都位于屏幕的底部。

底部连续的点是iOS设计模式，表示要滑过的屏幕数量。突出显示的点表示您在链中的当前位置。当有多个应用程序图标屏幕可用时，此模式也会在iOS主屏幕的底部使用。

雅虎标志是模式可供性的另一个例子。定期使用Web界面的人会知道点击徽标通常会将他们带到有关该业务或组织（通常是主页）的页面。在这种情况下，我们需要一些雅虎搜索结果。

隐喻的负担

虽然在这个应用程序中使用了一些隐喻，但只有一个是可供性。天气图标都是隐喻。从云层后面窥视的太阳图标并不意味着云层背后会有一朵云; 这意味着天气晴朗多云。太阳图标不代表太阳，但它是晴天和晴朗天气的隐喻。然而，点击这些图标却无法提供任何功能。它们纯粹是信息性的。

这个界面中唯一的可供性隐喻在右下角。图标看起来像是表示项目的列表或菜单。点击它会打开一个天气位置菜单，允许您添加和删除项目。该图标使用视觉隐喻来描述其可供性。

隐藏的负担

这个屏幕上有两个隐藏的功能。每小时报告一次温度，但仅在六小时内报告。一小部分数据暗示可能有更多可用数据。如果我们向左滑动每小时温度，则从右侧滑入更多小时，使我们能够在小屏幕空间中查看所有可用的每小时温度。

界面没有给出任何线索，但点击屏幕顶部可以用湿度，风速，下雨几率和“感觉”温度等几个详细读数来取代温度。我经常使用Weather应用程序，但是只有在点击屏幕上方之后我才发现这一点，寻找本文的任何隐藏功能。

我怀疑应用程序的很大一部分用户从未发现过这种功能。在这种情况下，这个隐藏的可供性是否是好的设计是值得怀疑的。在屏幕顶部添加可供性更好 - 例如，通过使温度看起来升高以提供点击，通过强调天气读数，添加图标，或在温度的左侧和右侧显示细节和城市名称。

虚假的负担

这个应用程序没有错误的功能。用户可能会尝试点击一周中的其他日期来查看他们是否显示详细视图，但详细视图仅适用于当天。用户也可能尝试点击今天的低点，认为它可能会切换到所有低点的视图，而不是高点。但是该界面没有强烈误导性的暗示暗示这种功能。

负面的负担

该应用程序没有充分利用负面支持率。大胆的“星期一”伴随着更薄，更暗淡的“今天”，表明周一更高层次，“今天”是信息性的。点击可以切换到屏幕顶部的详细视图（也可以点击屏幕顶部的任何部分）。

财务摘要

结论

您很可能设计了具有许多此类可用性的接口，可能没有意识到它。对于用户和界面设计者来说，对可供性的认识通常是本能的。

通过刻意使用可供性，我们可以帮助用户更快地理解我们的界面，巧妙地鼓励他们采取一种行动而不是另一种。

通过了解可供性，我们可以评估下面的界面，并迅速看到Dunked.com的创始人必须立即用户“入门”。您可以使用示意图为您自己的设计添加类似的操作层次结构。

由于这些原因，网页设计中最被低估的词是“可供性”。

梅州做网站