视觉可用性

《视觉可用性：数字产品设计的原理与实践》本书分为两部分，共8章。第一部分（第1～3章）全方位讲解了设计应用界面时需要遵守的三大基本原则，即一致性、层级和个性，以及这三大原则的概念、作用、定义过程。第二部分（第4～8章）详细介绍了布局、字体、色彩、图像、控件和可控性的视觉可用性工具，并结合实际的案例分析深入阐明了各个工具的使用技巧和使用过程中的常见错误，以及该如何避免。本书内容翔实、可读性强、易于学习，从基础的知识点和概念讲起，并结合实际案例帮助读者理解各个视觉可用性工具的使用方法，是一本学习应用界面视觉设计的不可多得的入门实践指南。本书可供任何初、中、高级视觉设计和用户界面设计工程师的参考。

《视觉可用性：数字产品设计的原理与实践》由资深视觉设计师Tania Schlatter和用户界面设计师Deborah A. Levinson亲力打造，内容全面且深入，既展示应用界面视觉设计的基本原则，又全方位讲解了基于理论和实践的设计方法和细节，使你在设计数字应用界面的时候避免犯常见的错误、做合理的决定，并最终实现超越平凡的应用设计，是学习应用视觉设计的最佳入门指南。【作者简介】第一部分　基本原则第1章一　致　性如果存疑，就坚持做下去。——A.Marcus，Graphic Documents for Electronic Documents and User Interfaces，第43页1.1　什么是一致性如何学会使用那些每个页面看起来都不太一样的应用呢？如何学会使用那些在一些页面使用动作按钮而在其他页面上为相同的动作使用了链接的应用呢？或者如何学会使用那些不可靠地运用色彩和字体，不用任何可识别的规则来强调内容和功能的应用呢？你能够学会，但并不怎么容易。为了帮助用户，同时避免一些普遍的界面设计错误，设计师和开发者们需要建立一套规则来放置和处理界面元素，并且坚持使用这套规则。正如你不能在用英语、法语和德语讲话的同时还期待别人能清楚地理解你一样，在你混用视觉界面特征的时候，用户也会产生困惑。和口头语言一样，视觉语言需要运用一致性的规则，这样用户才会认知和解读。你可以学会解读缺乏一致性的线索或者你也可以猜，但是在那些致力于帮助人们完成任务的应用里，这种猜来猜去的游戏可不怎么好玩。一致性听起来可能很无趣，那些“最具有一致性”的界面也不会获得什么嘉奖。无论你在设计一款应用还是在做晚饭，严格按照同样的方法不断重复地做事情都是无法让人感到兴奋的，但让人感到兴奋的是看着用户使用你的界面来做他们想做的事情。要记住，一致性不是要取悦自己，而是通过给予人们能够理解并且依赖的方式来取悦他人。1.1.1　一致性和市场本书着眼于那些能帮助用户完成任务的数字应用的设计，从线上银行或者软件下载的复杂应用到手机上的提醒事项的简单应用。甚至连最小的变化（例如移动某个按钮的位置）都有可能在用户理解和可用性上有巨大不同。建立一个能让人们快速上手并且明白如何与它互动的、具有一致性的界面对于这类应用的成功来说是至关重要的。某些类型的应用要比其他类型的变化得快。现在，由于不断演进的技术和交互/视觉设计的融合，用户界面有了全新的突破（Pinterest就是一个这样的例子，它使用了无限的滚动来显示丰富的图像内容）。然而，每天还是有很多人在使用那些外观糟糕、令人尴尬的应用。尽管某个界面无法满足频繁使用者们的目标和工作方法，他们依然创造了变通措施（他们不断地重复用来完成自己需求的一系列动作）或者就此放弃，然后向技术支持拨打代价高昂的电话。1.1.2　建立一致性建立一致性意味着通过用户熟悉的元素来设置并维持用户预期，此预期是由人们在屏幕上看到的以及过去曾经见过的东西建立的。例如，正在结账页面填写支付信息的人会基于他们看到的字段和组织结构来解读表格的流程，当然也会基于他们在刚刚退出的登录界面上看到的东西来解读表格的流程。他们的预期会受他们过去见过的其他登录和结账页面的影响，他们可能会寻找“提交”按钮，因为曾经在同一个应用的其他页面见过它，或者可能会查看他们曾经在其他结账表格中见到的“提交”按钮的地方。建立一致性依赖于对用户预期的察觉（见图1.1）。其中的一部分是通过现有页面上的一些可视化惯例建立的；另一部分是通过应用内其他页面上已经建立的预期建立的；第三个部分在我们的掌控之外，是用户在其他应用上曾经见过的。图1.1　人们如何解读他们在页面上看到的内容会受他们主动看到的内容的影响，也会受他们在同一个或者其他应用上看到的内容影响如果我们了解用户认为哪些页面是相关的，我们就可以预测他们的预期。如果你的设计决策是建立在用户的预期、了解他们看过怎样的模式、合并相关的事物上，那么就更有可能有效地建立一致性。你可以（甚至有时候你必须）在你的界面中采用那些用在相关页面或应用上的模式来提供用户预期的东西（以用户为中心的设计方式可以帮助你做这样的决定，如情境调查和原型测试，第3章会有更详细的说明）。了解用户预期是定义界面惯例（为你的应用的视觉语言建立规则和基本原理）的一部分。一致性的类型：内部一致性和外部一致性某个应用内的页面之间的一致性可以被叫作内部一致性，而不同的应用之间的一致性被叫作外部一致性。用另一种方式来说就是：外部一致性：应用的设计、内容和行为是否跟同一用户使用的其他应用相似？内部一致性：应用的设计、内容和行为是否在不同页面和功能上都保持基本一致？是否在特定平台的限制和需求范围内保持基本一致？当一款应用是一个应用套件的一部分时，内部和外部一致性会有交集。在这种情况下，一个应用的内部一致性的元素也会适用于同一个应用套件的其他应用，或者会跟其他用户的需求和要求相冲突。你不太可能让一切都能保持完美一致，但是你越努力地去尝试，你的用户就越有可能不会那么痛苦地在不同应用之间切换。（1）外部一致性外部一致性是非常重要的。如果你的用户对于某些惯例非常习惯（比如在搜索结果的左侧有分面导航控件），那么你可能需要去采用同样的惯例来使用户感觉舒服并且享受优质服务。但是，除非你在为某套产品或整个产品线中的一个界面做设计，否则这种外部一致性的要求实在是有些荒唐。用户的需求可能跟你公司的CEO爱用的某个网站或移动应用的用户需求不尽相同，而且那些设计师为了帮助自己的用户所做出的选择对你的用户来说未必是最佳选择。思考并评估外部一致性是对一个从草图开始设计的应用开始定义界面惯例的绝好方法。如果你的用户有很强烈的预期，那么建立一致性就需要检验其他应用已经采用的模式，甚至可能是采用这些模式。你可以从研究开始，并问你自己：根据人口统计学或已知的用户特性，用户会对什么样的布局和界面控件比较熟悉，你可以通过调研和情景调查来获得关于这些假设的答案。对已有一套产品组合的公司的新应用来说，同样可以采取这样的方式。例如，假设你正在为生产效率类软件的公司开发一款活动签到应用，活动签到应用代表了一条新的产品线，会有自己的名字，或许还会拥有跟原有产品不同的用户群。以比较多个功能并且寻找共性开始设计流程是很明智的。如果多个应用拥有相同的功能，你就有可能复用潜在的准则。从公司品牌一致性的角度出发，就算这个活动签到应用拥有一个全新的名字，它依然可以在这个新应用上使用相同的整体布局、控件与可供性以及CSS代码（或者至少是字形特征）。这会让母公司在用户面前表现出一致性、条理性，在营销材料和广告中也是这样。（2）内部一致性当某个应用的设计和行为在不同的页面及功能当中大部分保持一样的时候，我们称之为内部一致性。有内部一致性的应用对于避免常见错误是非常重要的，对于可用性也很关键。没有人愿意在使用每个页面时都重新学习一套视觉语言，也没有人愿意去猜为了看到更多信息他们是应该点击还是滑动，然后在下一个页面上继续猜。他们想要的是尽快地用自己了解的方式把事情完成。当一个应用内的视觉可用性工具（如布局、字体、色彩、图像、视觉处理、控件与可供性）在页面和小组件的层面上都被一致地运用时，内部一致性就实现了。如果一个应用是跨平台的（例如台式/笔记本计算机、手机、平板电脑），在考虑到平台特有的用户界面交互惯例的情况下，这些视觉可用性工具应该尽可能地达成一致。选择合适的范式之所以如此重要，正是因为要考虑到内部一致性，理想状态是，一旦选定了一个惯例，可以不断地重复使用它，而用户可以不假思索地使用你的应用。如果你基于某种案例选择了一种范式，然后发现它无法适用于其他的应用，那就需要重做了。1.2　一致性在应用设计中的作用成功的应用设计需要在商业目标、用户需求、设计理论和技术能力这些方面都玩得转，同时还需要牢记由Steve Krug推广开来的基本可用性原理：“不要让我思考。”不让用户思考就要求你要了解你的用户：他们是谁，他们在什么时候如何使用你的应用，以及他们使用的原因。你还要了解他们的预期：你预期他们具备什么样的基本知识，他们对于技术的熟悉度，他们正在使用哪些相似的应用。假设你将对以上问题的理解已经融入了以用户为中心的设计流程之中，下一步就是把这些你已经掌握的信息运用到界面设计的方方面面中了：布局：是否把相同功能的元素都摆放在每个页面相同的位置？排版：相似元素是否都使用同样的排版？色彩：是否有一组已定义好的色彩？是否有一套用色彩来强调并支持信息层级的系统？图像：是否使用了相同风格的图像传达相似的信息？控件和可供性：是否使用了同样的界面元素和设计处理来代表同样的动作？是否为反馈和互动控件使用了同样的动作？1.2.1　布局的一致性在任何应用当中都会有展示相似信息类别的页面，它们会包含一些无论在哪都处理相似任务的功能单元（小组件、内容区块等）。这里有两条实用的规则可以帮助你建立自己的布局：在展示同类信息的页面上，所有元素都应该一直以相同的方式摆放。彼此关联的不同元素应该保持一样的空间关系，无论它们出现在什么地方。例如，在一个电子商务应用当中，一个产品名字应该总是摆放在一个与产品图片相关的统一位置上。保证以上两条规则实现的最佳方式是为不同的组件及页面类型开发模板。如果你是一名开发者，你可能已经对内容管理系统内的模板概念非常熟悉了；如果你是一个设计师，那么你可能已经在印刷和网站布局当中使用过它们了。模板的基础是网格。像网格一样，好的模板非常灵活，可以变化，而且可以很好地支持页面之间一致的元素摆放（在第4章，我们会探讨更多网格和模板设计的内容）。下面，让我们看一些实际的例子：Google的应用——Gmail、Google News以及Google Drive（见图1.2）。尽管它们的布局是不相同的，但它们却拥有相似的结构，这让人们能够感到它们属于同一个产品家族。因为他们彼此独立却拥有同样的用户，所以我们将它们看作外部一致。然而，随着时间的推移，这些应用也越来越具有内部一致性，这也是Google提高跨平台应用可用性和改进外观的部分成果。它们的相似之处包括：跨应用的顶部导航条。左侧包含品牌标志的二级栏，中间是搜索功能，右侧是用户账号及分享工具。左侧的一列标出应用的名字，并提供内部导航。主体内容区域放在导航条右侧的一到两列。应用工具和设置放在主体内容上方。如果你准备设计另一款Google应用，它可能被同样的用户使用，那么你就需要回顾这些现有的应用，寻找它们在内容和功能上的相似之处。你会把应用名称和导航放在同样的位置，尽可能多地重复使用元素，让那些使用同系列应用的用户能够熟悉你的新应用。你采用的这些惯例会成为新应用的布局规则和基本原理的起点。1.2.2　排版的一致性你选择的字体以及如何运用这些字体是创造一个合理信息结构的重要部分。在页眉及内容中运用一套标准的格式规则可以帮助人们快速地识别出哪些是重要的部分；图1.2　a）Gmail；b）Google News；c）Google Drive使用了一致的视觉语言使用不统一的格式则可能导致一些混乱，进而让用户不得不浏览整个页面（甚至可能是好几个页面）来找到他们想要的东西。我们已经探讨过Google如何在数款应用之间使用有限数量的布局来实现一致性，我们还能从同样的案例中看出，它们的排版也是具有一致性，至少对于那些相关类型数据来说是具有一致性的。Google Drive（见图1.2c）和Gmail（见图1.2a）的主界面是一个表格式的信息清单。这两款应用使用了同样的磅值和字体，以及左侧间隔正合适的导航区域。这两款应用还使用了字体粗细度和颜色来强调信息的层级：Google Drive的文档名字使用了黑色罗马字体，旁边是文档分享的状态，用灰色的稍小字体显示，表示这是次重要的信息。Gmail把最新消息当做最重要的信息——发件人的名字及消息标题用粗体标出，这几乎不可能被人忽略掉，然后信息展开的内容是灰色罗马字体。Google Drive把最新更改过的文档的名字用黑体标出来，表示它们比那些用罗马字体标出的未经改动的文档要重要。尽管这些应用之间有显著的差异，但它们相同的排版和字体标准能够帮助用户明白需要什么时候在什么地方集中注意力，无论他们正在使用哪个应用。