本节书摘来自异步社区《众妙之门——网页设计专业之道》一书中的第1章，第1.7节，作者： 【德】Smashing Magazine 译者： 赵俊婷 更多章节内容可以访问云栖社区“异步社区”公众号查看。
在之前的章节中，我们讨论了印刷设计技术、keypress导航、横向布局、丰富的排版和美观的设计所带来的强大影响。今日的网页设计发展迅速，打破了传统方法的局限性，以探索即将到来的技术的可能性。设计师们不仅在尝试新的技术和设计方法，也在技术和理论方面改善他们的设计质量。现代的网站有很多优势，例如在灵活性方面、跨浏览器的兼容性方面、个性化方面，等等。另一方面，现代网站也变得越来越简洁和直观。这是通过微妙的可用性增强应用程序来完成的，无论是在网络本身还是离线交互系统。当今网络日益复杂，而网络的使用则越来越简单。在本文中，我们将探索一些新的设计方法和技术来让你开发自己的项目。我们将呈现不寻常的或标新立异的设计方法，并尝试了解什么才是真正有趣的话题，以及我们应该如何将它们应用到我们的设计中。
也许现代网页应用程序和服务最突出的特点之一就是提供了丰富的用户体验。在这类系统中，用户交互变得非常简单和直观，甚至“本土”。但是这种意义上的直观不仅来自应用程序在传统原则上良好的视觉设计,还来自于更好的信息架构。我们已经看到了更多的网页设计，其设计元素通过让用户做出更多有限和简单的决定，来模仿生活中的隐喻或隐藏选择的复杂性。
按钮的发明就是个很好的例子。在现今的网页设计中，按钮的外观和用户交互就像现实生活中的按钮一样。按钮往往看上去非常逼真，它们脱颖而出，具有鲜明的色彩并且非常灵敏：当用户用鼠标悬停或点击此按钮时，它们通常会给予视觉反馈。如果将这些按钮和ATM机上的按钮作比较（从形状、颜色和反应灵敏度方面），就能发现一些惊人的相似之处。
可供性（Affordance）是设计元素的一个关键属性。它指的是对象或环境，允许用户执行某些方面的操作。正如Donald Norman所陈述的那样，可供性为正在运作的事物提供了强有力的线索。当可供性得到很好的运用时，用户只要一看就知道怎样去做，而不需要图片、标签和指令。对于用户而言，页面上的元素看起来越熟悉，就越容易将具体的、实际的应用和任务与它联系起来。
这个方法并不只是涉及“文字-动作”按钮，正如你将在下面看到，它是关于使用恰当的隐喻来传达某些设计元素的一般含义和目的。很明显，这种做法减少了用户交互的复杂性。另一种达到这个目的的方式是注重设计元素的外观，更确切地说，给它们一个不同的类别，或者减少它们在页面上的视觉重量感。
越来越多的网站开始摆脱过时、笨拙、无法使用界面和陡峭的学习曲线。转而使用直观、本土的隐喻。例如，滑块有时候会比某些常规选择器更有效（如在显示预算和时限时）；开启/关闭旋钮比复选框更加合适，等等。同时，复杂性最好隐藏起来，以简化用户交互。现代网页设计应该是具有吸引力的、直观的和简单的。
**1.7.1 现实生活中的隐喻**Dripping in Fat这家T恤服装店使用了现实生活中的隐喻——晾衣架。如果你的商店里没有太多产品的话，这将是一个不错的主题。但是，如果你有成百上千的产品的话，实现这样的设计会有一定的难度。
XHTML CafeXHTML Cafe采用了生动形象的促销版块，丝毫不会使访客感到烦闷。该设计的外形很好地适应了现实生活中的隐喻，既有吸引力，又令人难忘。
CulturedCode: StatusCulture Code的开发者将航班到达状态作为当前的任务，列举在状态页面中。列表中的每个项目都有说明、人员分配和状态。其设计有些类似机场常见的经典航班时刻表。这是一个将现实生活中有趣的隐喻应用到网页设计中的例子。虽然这并不适用于所有情况，但用在这里却相得益彰。
Builditwith.me 虽然这个网站乍一看很一般，但它的有趣之处在于右上角区域的切换开关。通常情况下，这是一个复选框，允许用户选择正在寻找的人是否应该已经具备了某些限制条件。在这里，它并没有采用传统的复选框，设计师决定使用一个切换开关旋钮。这是否是一个好主意，目前还不清楚，因为这个功能是否会起作用并不明确。这很容易让用户误以为这是一个滑块，但使用滑块的用户交互体验是不同的，它更像是一个切换开关。Oh! Media这是众多有吸引力的、突出的、微妙的和可点击的按钮中的一个好例子。按钮右边的小图标按钮非常微妙地模拟了工作行动或进展，虽不易察觉，但是的确很有用，既简单、又抢眼。
Apple iPhone的用户界面拥有简单的偏好开关和转换按钮。这个设计比喻的是现实生活中相似的物体，利用简单的开关来开启或关闭功能以执行某个转换，非常直截了当。1.7.2 隐藏复杂性SlideDeck幻灯片本质上是一个来隐藏网页复杂性的很好的方法，因为它们在一个紧凑的互动区域重组多个信息点。SlideDeck是一个来展现设计解决方案的好例子，此方案集成了水平和垂直滑动导航到一个元素中。布局简洁大方，并且为可用的功能提供了很好的描述。
NosotrosNosotros拥有一个有趣的非传统导航。通过减少导航文字，成为一些有意义的图标，非常巧妙地减少了其复杂性。博客页面有6个图标，作为博客导航选项。一旦用户点击图标选择某个类别，其他类别的图标就会消失。很难说这类操作是否会大规模采用。虽然在设计上有所不同，但是Calicott采取的就是类似的做法。
Gmail密切关注那些能够为用户体验提供更多直观性和本土性的小细节。如果你正在Google Mail写一封邮件，并且你需要添加一个附件到邮件中，在你忘记附加它时，系统就会发出一个友好的警告信息，这是一个很好的例子。卓越的网页应用程序和优秀的网页应用程序之间的区别就在于此。如果你觉得有点夸张，那么我们就来打一个比方：一位客户亲自拿着包裹走出邮局，没走出多远，友好的工作人员会提醒客户他忘记发出包裹。
KBBKBB,一个汽车交易资源网站，为销售业主提供预先写好的邮件模板。如果用户感兴趣，他们只需要输入自己的姓名、地址、电话号码，然后一键就能发送邮件。当然，消息是可以定制的。这是一个卓越的网页应用程序，精心设计繁琐的任务，让用户能够一键简单地完成操作。
MoofMoof在联络表格方面采取了相似的做法。目前尚不清楚这种做法是否会增加订单转化率，因此，对此进行一个可用性测试将会很有意义。
Livestream许多网页应用出现了具有多种定价计划的功能，如Livestream。其设计清晰地传达了适合特定类别用户的最佳计划，注意其帮助工具伴随网页“流动”的这种设计和出现在表格底部的红色丝带。黄色按钮也是能够响应的，并且能够提供视觉反馈。这是一个简单、有引导力的设计。
著名的应用程序：Pricing Table突出最流行的计划会是一个好主意，因为这会帮助用户在不需要查看整个表单的情况下快速做出决定。这是一个绝好的例子：当用户在社交场合时，他们将会观看其他人如何表现。这并非是有意识的，但也是能帮助我们解决困难的一个决定。
Single Log-In and Sign-Up降低复杂性的一个简单解决办法是将多个相关的功能组合成一个单独的功能。例如，你可以提供给用户一个单独的“登录或注册”按钮来提供两种服务，而不是提供两个独立分开的链接和页面来登录和注册。当用户选择了一个单选按钮之后，表格就会通过JavaScript得到更新。在登录表格时，请注意“提交”按钮表达了“登录”的意思，此外，还有一个链接可以帮助用户找回丢失的密码。注册表格时，在密码字段的标签提示用户“选择一个密码”并且“注册”，同时还要接受相关的服务条款。另外一种方法是提供两个输入区域，标签标有“电子邮件”和“密码”，并且在附近呈现一句“还没有账户？现在就注册！”的链接。这样的设计对于新访客或回访的访客来说都很合适。
相关资源：JDK1.7源码（rt.jar源码）官方版