在用户浏览网站功能时，最常见的行为也是最关键的行为之一就是对比。比如用户在注册、购买或联系你要求报价之前，都会进行对比的行为。设计对比的第一步就是要为可对比的服务、产品或功能提供一致的可对比的属性。因为这些属性其实是分布在各个页面的，你要将他们整合起来放在一个页面中以便方便用户浏览和做决策。这样用户能够轻松找出每个产品、服务或功能之间的特点和特性。
keurig.com: 典型的产品对比表格
何时需要设计产品对比表格？
比较表格常被误解为只是在电商平台才使用的，但是讲真，比较表格最常见的例子是中高档的消费品，特别是电子产品(比如手机、空气净化器、微波炉、吸尘器、汽车等等)。同时比较的表格还适用于服务、会员等级、产品定价、软件功能、课程学费这些方面。它们可以用来比较来自同一个组织的不同产品，或者来自不同组织的同类型产品的对比。
要想了解什么时候使用对比表格，你必须首先考虑人们是如何做决策的。
当人们在众多备选方案中进行选择时，比较各个方案的利弊是非常困难的。因此我们鼓励用户使用非补偿性决策(non-compensatorydecision making) 例如，一个希望买一辆新车的用户可能会直接过滤掉比2万美元贵的所有汽车，尽管有些汽车可能会以很小的数量超过预算，通过非补偿性的过滤能帮助用户将结果限制在一个合理的区域内。
当人们在5-7个候补方案中进行选择时，他们通常会进行补偿性决策:用户会根据一些标准来看每个方案的优点和缺点并进行比较，人们有时会接受一些小的负面属性作为折中考虑。例如，当用户想要买一个新笔记本的时候，他们会想如果一个电脑有着更长的电池寿命和更强的计算能力的话，就算重量上稍微重一些也是可以接受的。
过滤器是支持非补偿性的决策的，相比之下，对比的表可以提供补偿性的决策途径。他们允许用户一眼就看到多个重要的属性，并让用户在其中权衡利弊。当然有些情况是完全不需要使用对比表格的，比如:
类似的项目不一定互斥。不像微波炉或一个笔记本电脑，用户也许只需要一台。消费者不太可能只买一件衬衫，所以像Zara这样的网站就不需要这样一个表格来展示好几个衬衫的对比表格。
产品或简单的服务，用户根本没有兴趣去分析他们的特性。例如，咖啡杯就没有需要对比的、有意义的属性。有人在网上买咖啡杯可能会对它的造型设计感兴趣，但绝对不会同时对比好几个咖啡杯。
产品或服务很便宜人容易被替代的时候，完全不需要对比。例如笔，纸巾。
产品的服务非常独特，难以和其他产品产生对比的时候，也不需要对比表格。例如你很难想对比两个艺术创作作品的特性。
除了这些例子之外，还有很多实用对比表格的情景。基本上任何时候你想让用户在同类产品中进行选择，特别是如果有多个因素同时存在可以促使用户决策的话，那你就可以是用对比表格了。
对比表格的类型
对比表格分为静态和动态两种。静态对比：预先设置好了对比的产品、服务等。而动态对比表格：允许用户自己选择需要对比哪些产品或服务。通常静态对比表格用来比较较少数量的产品或服务(通常小于5个)，而动态的对比可以包含许多对比项。
静态对比表格
例如苹果目前只销售5种不同型号的Apple Watch，因此它为用户提供了一个现成的静态对比表格：
apple.com
如果你有5个或更少的产品，可以采用这种方法。静态比较表格也通常适用于会员等级或者服务套餐等。使用这种比较方法你可以控制一个页面上具体展示多少信息以及信息展示的方式。但请注意，静态对比表格不如动态表格那样容易扩展。如果你的产品或服务有更新，就必须同时更新这个对比表格。
apple.com: 确保用户可以很容易找到对比表格的页面，例如苹果的官网上，在二级导航上的最右侧就提供了一个对比链接Compare.
动态对比表格
当你的产品大于5个以上时，建议设计一个动态的对比表格以便用户可以选择他们想要对比的项。当然由于动态的表格的灵活性，在页面布局上你需要使用flexible layout来实现。
动态表格中项目的选择. 两种流行的方式让用户选择项对比哪些项目的设计是：
对比按钮或者复选框: 将对比按钮或者标识的图标直接放在产品展示的列表页面。用户可以将刚兴趣的内容加入到动态对比的页面中。
选中标记(左图, homedepot.com)和按钮(右侧, lowes.com) 是两个最常见的允许用户自由选择项目进行对比的方式
产品列表页面内容常常拥挤不堪，所以设计上的挑战就是如何让对比按钮容易被发现。最保险的方法是将对比按钮作为第二操作按钮(第一操作是购买)，放在页面上方或下方，或者产品描述的下面。
delta.com: Delta的动态比较工具只有用户鼠标悬停在产品上的时候才能看见，不要将对比按钮隐藏到鼠标悬停事件中。
直接操作感兴趣的项目。 使用此方法，用户可以点击或拖拽产品到对比列表中。像下面这个例子，由于开启了对比模式，所以当用户点击某个商品时不再是进入详情页面，而是直接加入到了对比列表。
garmin.com: Garmin 比较特色的设计是将Compare的按钮放在产品列表的顶部了，当单击开启该功能后，单击产品则会将其直接加入对比列表中。
对比页面设计的最佳实践
一个对比表中最多对比5个项目
对比表格支持补偿性的决策，所以如果用户有超过5个以上太多的内容想要过滤时，建议要提供过滤器，让用户先筛选指定条件下的内容。对于动态的对比表格，一个额外的考虑是，如果用户有自由选择5个项目，那么页面如何能够优雅地将布局扩展到5个项目，考虑需要展示多少属性，怎样保证信息的可读性。
还要考虑用户的设备或浏览器的尺寸，你可能需要适当减少一些项目以适应不同浏览器的大小。如果空间足够的话，尽量不要限制用户一次只能对比两个。
Apple的动态对比页面，在Mac电脑上即使宽度达到3008，也仍然限制了用户只能对比两个项目，这就很不人性化了。
无论你限制什么，都要确保不要给用户带来误解。不要忘记可以允许用户移除某几个项目。
保持一致
大多数对比表格最大的问题不是设计的问题，而是内容的问题。当产品属性信息丢失，不完整或者不一致的同类产品时，本来得心应手的表格却变得没什么大用了。特别是动态的对比表格。例如下图，有些产品根本没有那些属性所以是空白的。这就不是很合理了。
bestbuy.com: 这个表展示了在Best Buy销售的四种照相机的性能对比，其中松下相机的属性最为丰富，而其他产品的信息则不够完整。
smugmug.com:再看这个SmugMug的会员级别的区分(其实根本看不出什么区分)。 每列的广告属性这里，才有不同的值(Zip, Zeor, Zich, Nada)，其他都是一样的。对比列表可不是展示你产品特性的地方，这样会分散用户的注意力，并且这些信息于对比毫无用处。
容易浏览
对比不同产品的利弊是一个认知的过程，你要确保用户可以专注于必需属性上。一个有效的方法就是通过差异化、相似性和关键字来突出对比的感觉。纵向的列通常是对比项，横向上是每个属性。使用一致的字体和对齐方式能够使文本更加容易浏览。
williams-sonoma.com: Williams Sonoma 对锅的分类分的很好，不幸的是，水平方向上标题不规范，方案了易读性，使用户难以对比。
在比较列表中的文本，也要尽量简洁，避免使用完整的句子。颜色的使用也是很有帮助的，用浅色的背景可以帮助区分每个属性水平方向上的内容。如下图。颜色的使用可以提高对比度，而不牺牲易读性。
FitBit.com 使用了各行换色的方法区分各产品之间的功能，这种颜色编码可以被也用在复杂的属性无法使用标识图标来表达的情况下。
使用不同的颜色清晰标识出不同的行是很重要的，这样用户可以清晰地辨别每个单元格指代的是什么属性。尤其是当单独使用选中标识代表有或没有的时候。行的背景、边框或额外的留白间距都可以帮助行独立和可辨识。
始终显示列标题
特别是页面特别长出现滚动的时候，一定要将列名固定住。因为人类的短期记忆是有限的，用户很容易忘记哪个列代表的是哪个产品。确保列标题是固定的不随浏览器滚动的。
disneyworld.disney.go.com
有意义的属性
对比表格中应只包含那些有意义的属性，而不是一股脑把产品所有的元数据都丢在这里。要帮用户分析出对他最优意义和用处的属性。尽可能避免使用术语，或者模糊的属性链接等等。这对用户来说不但没有帮助，反而增加了对比工作的复杂性。
amazon.com: 制造商将产品比较表中的属于转换为可理解的语言，帮助消费者理解。
以上的对比表格中，是比较电池这种类型的产品，所以比较有用的属性是：电池容量，充电速度和重量。但真正使这个表格变得对消费者有意义的是将这些屋物理属性转化为对用户有意义的，能够直观看出效果的信息。比如电池容量是“3350毫安”，哪个用户能知道这到底是多大？普通消费者很难想象。使模糊的属性变得有意义的一个有效途径是增加更多上下文或者提示信息以解释这个定义。
shopify.com: 当鼠标浮上i的图标，就会展示出更多的解释信息，这样是非常人性化的。
给用户控制权
当有太多的属性需要展示给用户时，其实用户只是关心其中几个属性的话，这时候使用长的纵向滚动的方法是不明智的，这样位于下方的属性很难被用户第一眼就发现。因此折叠是个很好的解决方法。
此外，将相似的都隐藏掉，只显示出不同的，有差异对比的属性，对用户也是非常有意义的。
samsung.com: Samsung 的动态对比表中提供了大量的定制选项。用户可以折叠或者展开某个属性类别，并且可以选择他们感兴趣的特定的属性。然而这个表格中存在列没有对齐的问题，这影响了易读性。而且，这个表格也存在过渡自定制的问题，为什么用户需要只看产品的相似之处呢？这个自定制就没有太大的意义了。
smugmug.com简单地展示了四个方案的不同之处
smugmug.com: 在另外一个页面展示着四个方案所有的不同之处
在移动设备上简化对比表格设计
有一些网站在手机上访问的时候，会删除掉他们的对比功能，其实也大可不必。如果可能的话，要考虑尽量优化对比功能的页面在移动设备上也能很好的被支持。在更小的屏幕上，你不可能在比较表格中展示2个以上的项目。而且一次会看到更少的属性行。但是这样会给用户带来记忆负担。因此建议让用户来选择他们想显示的内容。
在Mobile设备上，表格也要相应转变为Tab或者列表的形式以适应更小的屏幕。
shopify.com: 在Mobile上显示的时候就将表格变为了Tab，这意味着用户不能真正做对比了，但至少用户可以在产品之间切换内容查看不同之处，这总比来回切换浏览器要好很多。
设计对比表格的黄金法则
总结一下我们这里提到的很多设计指导方针： 总的来说，为用户服务是第一位的。
· 不要用不标准或过长的表格中重复的信息来拖慢用户的工作
· 不要让用户记住任何东西，任何内容都是所见即所得
· 不要用术语，无法一目了然的内容要给出提示或详情链接。
· 对比表格不是你营销的工具，要把它当做真正对用户有用处的功能来做。不要引导用户去买更贵的东西，这样只会引起用户反感。
从公司长远利益看来，你只需要让对比表格诚实地展示内容，并让用户自己做决定就好。让你的用户尽量快速容易地做决策:你会很高兴，用户也会很高兴。
本文地址：
http://www.njanyou.cn/news/657.html
Tag：
设计 对比 表格
专业服务：
南京网站制作,
南京网站制作公司,
南京网站建设公司
联系电话：025-65016872
上一篇：
为什么说手机应用危在旦夕
下一篇：
初识Adobe营销云
