读书摘要f（众妙之门 .网站ui设计之道）

一、关于排版

      在我们开始着手设计用户界面之前，首先应该理解什么样的用户界面才是出色的用户界面，我们的设计要具备哪些品质才够得上是出色的界面设计。所有伟大的用户界面大都具备下面这八种品质或特点：

     1、清晰。通过使用文字、流程图、层级图、图标等元素，避免用户对界面的模糊认识。

     2、简洁。如何让界面同时保持简洁和清晰，这正是设计伟大界面得到挑战所在。

     3、熟悉。人们总是对之前见过的东西有一种熟悉的感觉    ，有的界面即是是第一次使用，其中的有些元素我们还是会感觉熟悉。在设计过程中，使用一些现实生活中公认的意象能够更好的帮助用户理解。

     4、响应性。这意味着两件事情。首先，响应必须迅速，一个良好的界面不应该让人感觉反应迟缓。其次，界面应该提醒用户发生了什么事情，用户的输入是否被成功的处理，让用户了解这些信息反馈，并且明确的告知用户，您的请求已经被成功受理。

     5、一致性。在整个应用程序中保持界面一致是非常重要的，这能够让用户识别出使用的模式，从而很快知道其他地方如何操作。

     6、美学性。一个好看的界面会让用户工作起来更开心。

     7、高效性。一个伟大的界面应该通过快捷键菜单或者良好的设计来帮助用户提高工作效率。

     8、容错性。它是否容易撤销操作？是否容易恢复删除的文件？

制作有效用户界面的实用技术：

   1、使用空白来构建联系

          通过收紧元素之间的空白，能够把一些相关的项目组成一组。增加这些分组之间的空白能够更加强调这些分组与其他内容之间的联系。使用空白，我们可以分组相关的控件，也可以构建页面中元素之间的层级关系。

   2、使用圆角来定义边界

         圆角通常用来改善图片元素的观感。它们看起来非常舒服而且能够为你的界面带来额外的平滑感。圆角或其它任何类似的视觉上的处理，都能够让分界线变的更为明显。

   3、用颜色来表达含义

   4、引导用户的注意力

   5、使用阴影或者深背景聚焦

   6、强调核心的动作

     7、使用块状链接提高效率

      8、用动词作标签

          用户在使用应用程序的时候，总是准备去做一些事情，他们总是在想动词。“我想保存这些文件”或“我想更新这篇文章”。在创建对话框或者其它需要用户处理的应用时，使用动词而不是使用像“是的”，“不是”、“好的”这样的表述。如果你使用动词，例如“保存”“取消”，用户就不需要再看其它的消息，他们马上就知道这个对话框或选项是做什么的。

      9、输入时自动／重新聚焦

     10、使用浮动控件进行简化和解构

           使用浮动空间，在用户移动到一个特定区域后才显示的方式可以简化界面。但是在使用这个方法之前，你还需要考虑两件事情。首先考虑控件是否能被找到。你的控件是否做的足够显著以吸引用户注意？其次，移动设备上的网页浏览器也许不能模拟鼠标的动作，那么这些控件将无法使用。

    11、动态扩展表单

        当用户填完并且增加一条记录后，程序会在新纪录后再创建一个额外的输入框，允许用户键入更多的信息。

    12、输入框中的标签

      你想要砍掉一些不必要的元素，并且为剩余的元素更好的利用空间。将标签放到输入框内部是一个巧妙的办法。这不仅节省了空间，也清楚地表明了与输入框对应的标签。

   13、上下文敏感的界面元素

   有时，你希望为高级用户整合一些额外的功能，但是又不想让页面臃肿，可以通过提供按需增加的上下文元素来实现。例如，你的应用程序中有一个带高级搜索的搜索条，在没有使用的时候只显示搜索条，当用户单击时再显示一些额外的控件。

    14、图标

       使用图标能够简化界面、让界面看起来更有吸引力，使用正确的图标能够让界面更容易使用

     15、使用加载指示器

         研究表明，在指示器存在的情况下，用户感觉时间变短了。加载指示器对短时的等待非常适用，但是如果一个操作需要一分钟甚至更多来完成的情况呢？你还是可以做一些事情来改善用户的等待体验，例如，很多应用程序在长时间的等待过程中会显示一些有趣的提示或技巧。

     16、使用按钮状态提高响应性

        在桌面应用程序中，按钮具有多种状态，最常见的是按钮默认状态和鼠标单击后的状态。

     17、帮助性的空白状态

      当用户第一次加载应用程序的时候，屏幕上不会显示过多的内容；用户也还没有输入数据，也没有什么好显示的。在这个空白状态中添加简短的帮助信息，来引导用户如何使用。

     18、宣传应用程序的特点

         由于互联网产品经常会进行一些细微的更新或者时不时推出一些新功能，所以通过广告的方式让你的用户知道这些变更就变的更有意义。通知区域应当吸引眼球但又不至于让用户分心，影响用户的正常工作。用户读了这个通知后，应该可以关掉它。

     19、取消操作

      20、还原操作

     21、确认对话框

二、关于文字

     1、空白是最好的空隙

          在网页排版中使用空白的重要性无法低估。空白使正文的连续文本能够呼吸，并帮助读者获取网站传递的信息。空白也被称为“负空隙”，是构图中元素之间的空隙，或者设计中没有被使用的部分，包括图形、外边框、页面和分栏（宏观空白）之间的空白，以及文本行之间、单词之间和图片标题之间（微观空白）的空白。实际上，很多清晰度和可读性问题都可以被解决或至少被减弱，只要审慎的、均衡地使用空白。正像页间、内边距、外边距、行宽或行高的一些额外的像素可以很大程度上影响内容整体的清晰度。正如Mark Boulton在他的一片文章中陈述的那样，“一旦你知道如何设计和操控外部、内部和内容周围的空白，你将能够给读者一个好的开始、使他们更加精确的定位你的产品，甚至也许会用新的眼光看待你的内容。”

     2、排版和网格

      黄金分割可能是最常用的网格布局方式。黄金分割是等于1.618，是彼此相邻放置事物的长度比值。

      垂直节奏

     为了理解垂直节奏，想象一下经典的布满线条的练习本。每条线（也被称为基线）彼此等距。如果文本正好位于基线上，意味着每一行文本的基线整好和每一行的基线吻合这时可以说设计获得了连贯的垂直平衡。

    维护垂直平衡的关键是行高，换句话说，是两条基线之间的距离。

        基线高度➗字体大小＝行高

    在开发过程中，创建包含网格线的背景图片会起到很大的作用。在实践中，垂直节奏并不总是可以实现的，尤其是在处理很多不同尺寸图像的时候。然而，它仍然是一个值得追求的目标，对改进页面效果非常有帮助。

         分级和分度

          分级支持通过提供关于文本结构和组织的视觉线索而获得清晰度。分级定义了内容如何被阅读。它为用户展示了到哪里开始阅读和到哪里停止阅读。分级在使布局易于扫视方面起到了重要作用，它也是使网站排版变得可读的一项重要技术。为了在排版中获得良好的分级，需要使用分度，下面是传统的分度：

     6，7，8，9，10，11，12，14，16，18，21，24，36，48，60，72

     一些设计者倾向于在定义文本和标题的字体大小时使用Fibonacci数列（比如：16-24-40-64-104）这个数列从第三项开始，每一项都等于前两项之和，比如：16+24=40；24+40=64.

     当然，要在设计中穿件一个合适的版式分级，你不必把自己仅仅限制在字体大小上。你还可以使用颜色、字体效果（比如首字母下沉、大写字母、小型大写字母）、斜体和其它的选择，来为用户提供关于页面的内容结构和文本块相对重量的线索。 

       注意细节

       寡妇和孤儿

       “寡妇”就是在段落末尾的一个单独的短行或一个单独的词。“孤儿”就是在一个分栏的开头或结尾的一个单词或短行，它被从段落的其它部分分离出来。寡妇和孤儿产生了难看的碎片，打断了读者的阅读，破坏了可读性。它们可以通过调整字体大小    、行宽、行高、单词间距和字母间距或手动加入换行符来避免。

     标点外伸

       优秀的排版会把引号、括号、数字位伸到文本流的外边。缩进的括号会打断文本流。通过标点外伸，文本和引用内容可以被突出并显得更加精致和易读。

三、关于网站可用性

     用户如何思考？

     用户上网的习惯于顾客逛商店的习惯基本上没有太大的不同。他们以访客的目光浏览每个新页面，扫视某些文本，然后点击第一个让他们感兴趣的或是大体上与他们正在寻找的东西类似的链接。实际上，有大量网页他们几乎不看一眼。

     很多用户寻找有趣的（或有用的）而且可点击的东西。当一个令人振奋备选项被发现时，用户就会点击。如果打开的新页面没有达到他们的预期，他们就会点击“后退”按钮，并继续搜索。

     1、用户重视质量和可靠性。如果他们看到高质量的内容，他们通常愿意忍受广告和糟糕的设计。这就是为什么多年来那些设计平庸而内容优良的网站会获得许多流量的原因。内容本身比用来支撑它们的设计更为重要。

      2、用户不会阅读，而会扫视。当他们分析一个网页时，他们通常会寻找一些能够帮助他们略过页面其它内容的固定点或是锚点。

      3、网站用户是没有耐心的。用户处理一个网站的信息所需认识负荷越高、导航的直观性越差，用户就越容易离开，寻找其它替代的网页。

    4、用户并非总会做出最佳的选择。用户会选择那些充分而又令人满意的信息。他们会选择第一个合理的、表述恰如其分的选项。用户一旦发现一个可能会达到他们目标的链接，他们非常可能会立即点击它。优化是艰难的，需要很长的时间。使网站变得充满效率会更高一些。

    5、用户遵循他们自己的直觉。在大多数情况下，用户会靠自己的摸索而不是靠阅读设计者提供的信息解决问题。

    6、用户希望能够进行控制。用户希望能够控制他们的浏览器，并依赖那些遍布网站、展现连贯的数据。比如。他们不希望出乎意料地看到弹出的新窗口，他们希望能够使用“后退”按钮，返回他们刚才浏览过的网站。

     使用整洁连贯的视觉设计

     视觉设计告诉一个用户如何同网站进行交互。不幸的是，我们在设计中经常让自己的创意占据上风，以至于界面设计得太过于创新，导致用户在看第一眼时难以理解。

    当进行一个网站的视觉设计时，理解一些通用的惯例，会有助于创建一个看起来很棒而又不需耗费脑力去想如何使用的网站。

    固定元素属于固定位置

    当人们访问一个网站时也会有某种预期，这些预期如果没有被满足，就会导致用户难以理解网站的工作原理。因此，让用户预见到网站该如何操作，以及那些固定的元素会出现在什么地方，对网站设计来说是很重要的。

          网站设计的一般惯例：

         1、链接到主页的网站标题通常会在网站的左上方提示。

         2、宣传语和二级标题通常紧靠在网站标题的下面。宣传语会迅速地传达出网站的用途。

         3、网站的搜索框通常会出现在网站的右上方或中部的上方。

         4、不同类型的网站也许会有一些共同的习惯。比如，当访问一个提供RSS订阅的博客时，用户几乎毫无疑问地会先去页面的右上方查看订阅选项。

          

         搜索是简单的

         搜索框必须是一个框。你的访客不会阅读页面，他们只会扫视。针对搜索功能最常见的设计就是一个框，一个包含输入框而显得相对宽大的框。同样，搜索框也要简单。根据对可用性研究，在默认情况下不显示高级搜索选项会显得更加友好一些。高级搜索，就像他的名字一样，一些用户在使用它的时候会感到困惑。一项研究表明，大多数用户不知道该如何使用高级搜索或布尔搜索的语法。

          

         链接要像链接

        永远不要让用户去猜测一个项目是否可以点击。y一般说来，使用颜色和下划线表明了这段文本是一个链接。颜色和下划线要一起使用，这个组合是辨识文本中超链接最容易识别的形式。

链接应该有不同的状态。当为链接设定样式时，注意鼠标悬停、被激活和访问过这三个状态。这样，用户将在他们正掠过一个链接、点击了一个链接或已经访问过这个链接时，将会有所察觉。

        仅在必要的时候使用下拉菜单

        下拉菜单并不是没有用处，他们在网上绝对有自己的一席之地，但它们也经常会被误用。因为下拉菜单通常占用很少的空间，对一些设计者而言，它们成了最佳的导航方式。就在这种倾向大行其道的时候，下拉菜单的缺点也暴露出来。

          1、下拉菜单中的链接可见性较低、用户将只能看到一个选项，除非菜单被全部展开。

          2、当下拉菜单包含太多选项时，用户不得不通过滚动来查看选项。在这种情况下，传统的列表会更好一些。

          3、用户在凭直觉浏览时，下拉菜单不是最先被察觉的东西。在选用它们之前与普通的导航菜单进行测试和比较，看它们的效果如何，不失为明智之举。

          下拉菜单并不一定要很小。根据Jacob Nielsen对下拉菜单的研究，所谓的“巨型”导航下拉菜单效果也不错。大的二维下拉面板通过对导航选项进行分组，把用户从不得不进行的滚动中摆脱了出来，通过有效地使用版式、图标和工具提示，它可以精确地呈现用户选项。

         下拉菜单能将内容组织成整洁的小元素，如果没有做好，它将和糟糕的布局一样。当多于两个级别时应避免采用下拉菜单。如果子菜单通过悬停展开，只要用户的鼠标指针离开它们，就会失去焦点。如果子菜单通过点击展开，将需要太多的点击操作，是菜单难于使用。

   有一个解决方案也许可以增进悬停功能和多级导航的可用性，一旦用户把鼠标移开菜单，下拉列表连同大部分菜单会立刻消失，这个解决方案是延缓它们的消失的过程，或者增加一个单机功能，要求用户点击下拉菜单外部的区域来关闭它。

     仔细看一下保时捷网站的菜单。它有多个层级，但是它的菜单有一个广阔的焦点区，所以你必须把鼠标移开一定的距离才能关闭它。这是一个很好的设计方案。

     使注册表单尽量简洁

     使用标记来构建上下文

      每一部分使用不同的颜色、页眉、和按钮    ，可以帮助用户定位。这些被称为标记。网站标记的作用很想购物中心和游乐园中信息亭的“我在这”标签。这就是为什么在新的窗口打开链接降低了用户体验：用户访问内容的连贯性遭到了破坏。用户知道他们在你的网站中的位置，会有助于建立一种目的感，并使他们问自己“我能在这做什么？”。这就是信息设计的目的：使用户能够对他们可及的信息进行选择。

     建立良好的导航

    全局导航 ：在整个网站中我都能去哪？

     全局导航通常以表格式导航的形式出现，还会包含一个便捷的指向网站主页的链接。全局导航应该包含“受控制的”文字或短语（比如各栏目的名称、行业标准术语和外行使用的语言），并且突出网站的结构。

    本地导航：在这个部分我能去哪？

    许多用户喜欢进一步浏览和他们正在浏览的内容相关的内容，本地导航整好能满足这一需求。如果网站组织的很好，当用户访问某一栏目时会知道他们将会发现什么，本地导航就是他们获得此类内容的入口。

   

    上下文导航：在这个页面我能去哪？

      在用户已经深入到你的网站，并发现了他们正在寻找的内容，他们接下来该去哪了？上下文导航会把用户留在同一页面，但是允许他们通过容易理解的内容区域四处活动。

      

     补充导航

       在浏览你网站的一个页面后，许多用户离开了，访问了其它网站或关闭了浏览器。这时，一个好的主意是在内容的下面紧跟上补充导航。补充导航通常包含相关内容，以便用户能够停留并获悉你的网站还能提供什么。

       面包屑是一种典型的二级导航模式，它用来定位用户在一个网站或一个网络应用中的位置。面包屑在真实的网站应用中为用户提供了一种返回到他们出发点的途径。

       面包屑导航应该被看做一种额外的导航特例，不应该取代基本的导航菜单。它是一种便利，一种二级导航方案，它可以提醒用户他们在哪，并提供一种不同的浏览网站的方式。

       面包屑路径是一种吸引第一次来访的用户通过登录页细读网站的绝佳方式。如果用户通过浏览器引擎搜索到了某个页面，看到面包屑路径之后，它们可能会点击更高一级的页面去看相关的主题，从而降低了网站的整体跳出率。

       重要的易用性法则和原则

       7+／－2原则

        因为人脑处理信息的能力是有限的，所以它通过把信息分成块和单元来处理复杂问题。根据研究，人们短期记忆每次能处理5-9件事情。这经常被作为把导航菜单的元素限制在7个以内的依据。

        2秒钟法则

        这是一个松散的原则，用户在使用某类系统时的等待反应的时间不应该超过2秒。用户等待的时间越短，用户体验越好。

         3次点击法则

         根据这条原则，用户在3次点击之内如果还没有找到他们想要的信息或了解网站的特色，他们就会离开该网站。这条原则突出了清晰的导航、符合逻辑的结构和易于理解的网站层级的重要性。用户始终知道自己现在在哪、从哪里来和他们能去哪是很重要的。

        80/20法则

        “少数关键定律”或“因素稀疏定律”表明80%的结果，由20%的原因产生。这在商业中是一条基本的经验法则，但是也同样适用于设计领域和可用性领域。比如：对20%的用户、客户、活动、产品或过程的定位，可能为你带来80％的利润，使你对它们的注意程度最大化。

       界面设计的8个黄金法则：

       1、努力做到连贯，

       2、允许频繁使用系统的用户使用快捷方式；

       3、    提供信息反馈；

       4、为关闭这一动作设计对话框；

       5、提供简单的设计处理；

       6、允许简单的撤销操作；

       7、提供控制感。支持内部控制点；

       8、降低短期记忆载荷。

       Fitt's定律

       这个原则断言    ，在定位时存在一个速度和精度的平衡，目标越小和距离越远需要的时间越久。这个定律在处理鼠标活动时通常表现明显。即内容越容易被点击到，它的点击率越高。

          

       心智模式和象征物

        用户访问你的网站也是来完成某项任务的。他们会欣赏网站视觉设计和巧妙的图像，但是在第一次到访后，他们会仅仅希望按日常习惯使用你的网站。

         象征物是一种介绍你的产品或服务的捷径，几乎不需要解释，好的象征物已经把你的产品或服务和用户头脑中的信息或心智模型结合起来。

          组织网站的内容

         如果你的网站包含大量的内容，则需要找一个合理的方式组织它。进行分类是一个好的起点，也就是把内容分成语义相关联的组。另一种组织内容以及优化网站搜索结果的方式是使用元数据，也就是关于数据的数据。比如，一篇博客文章的元数据包括作者、出版日期、浏览次数和评论次数等。这类数据允许用户对网站的内容进行搜索和排序，这将为他们提供可以操作的内容列表，进一步逼近他们的目标。

          提供站点地图

          如果你的网站包含很多内容，站点地图是一种很好的导航方式。站点地图就是一个页面或栏目，它以直观的方式展示网站上可以访问的页面子集。考虑一下把这个结构展示在页脚中或提供指向它的链接。

   

          不要让用户毁掉自己的用户体验

         如果用户可以删除内容，那么请为他们提供一个“恢复”功能。如果用户可以在输入信息时关闭浏览器，在没有询问之前不要抛弃他们的数据。如果用户在保存文档的过程中可以关闭浏览器，不要删除保存的数据。在这些案例中，要考虑到用户不会按照你预期的方式使用你的服务，因此尽量不要使结果让人无法接受。

          不要要求太多而给予太少

          最基本的元素通常被最先破坏。不要屏蔽用户的“后退”按钮。不要限制用户为你的网站加书签的能力。不要在非必要的情况下修改用户已浏览和未浏览的链接颜色。许多交互活动应该跨浏览器进行测试，在那些能被用户屏蔽的功能不起作用的情况下，交互活动仍能表现良好。

         及早测试，经常测试

        底线：如果你想做一个非常棒的网站，你必须测试        

        最后需要考虑的事情

        当我们开始着手改善用户体验时，我们面对的最大的挑战是该从哪里入手！它可能会让人有种挫败感，但是却是一个好的开始。这里有很多你可以考虑的方式，来使你的网站更加有吸引力。

        1、虽然创意是个好东西，但不要让创意盖过了设计过程本身。

        2、创建可以预见的网站，设计用户期望的东西。

        3、用户会快速浏览网站，不会停下来看那些设计者花了很多小时精心雕琢的细节。如果你能够使他们更容易的从一处跳到另一处，或帮助他们找到自己需要的东西，他们会更加欣赏你的工作。记住，很多用户仅仅希望把使用网站当做日常事物的一部分。

        4、在投入视觉设计之前，花一些时间规划你的用户将如何使用网站，他们会如何在网站上进行导航，以及网站将会如何与他们进行交流。

        5、总是通过路标告诉用户他们在网站中的位置。知道自己方位的用户更容易建立目标感。

        6、沿用导航惯例。如果用户不清楚他们能够去哪里，在进行导航的时候将会遇到困难。在设计导航的时候，不要停在第一层级：为每个网页都设计全局导航、本地导航和上下文导航。通过让内容按语义关联进行分组，来帮助用户找到他们正在寻找的内容。

        7、总是预想用户不会按你的预期使用你的网站。设想下他们会如何误用你的网站，不要让误用造成难以接受的后果。