这两大巨头都对生产尖端产品以及引领软硬件的发展感到自豪，但他们的网站又怎么样呢？如何做出比较？更重要的是，哪一个网站更好，更实用呢？

在本文中，我们将从网站可用性的角度，对这两家公司的网站做一个严密的剖析。

在这一比较开始前，我们应当注意到，这两家公司的业务是围绕着不同的市场展开的。

微软的利润基本上来自于企业用户，其中包括向计算机制造商销售操作系统许可和向企业销售办公软件。

这并不是说他们不卖东西给个人用户——他们卖，他们一样拥有针对于个人用户的产品线，比如 X-Box，当然个人用户也会购买 Windows 和 Office。微软的客户目标是每一个人，从家用电脑用户到开发者及企业用户，这从侧面又补充了他们的网站的目的：试图服务每个人。

另一方面，苹果的业务基本针对个人用户，它的大部分利润来源于销售硬件，比如 iPod 和 Mac。这使得苹果的目标更加明确：推销，销售并提供售后服务。

他们不必为卖给制造商许可而操心，因为他们是唯一的制造商，因此，他们的网站的主要目的就是宣传产品，扩展产品线，并通过在线商店销售产品。

1.首页

首页是网站中的第一页，最重要的页面之一，在多数情况下，主页是唯一打动访问者，并使他们继续浏览下去的理由。你有几秒钟的时间说服访问者你的网站对他们有足够的价值，否则的话，他们就会走开。

苹果公司的一贯做法是，通过主页告诉大家，网站还在正常运行着。他们把主页当做是一个广告板，总是展示一个他们最新产品的大幅广告，下面附带着三个当前同等重要的产品或新闻。

如果对这四个条目都不感兴趣，可以点击上方的大型导航条，它被分成几部分来代表苹果公司的核心产品：Mac，iPod 和 iPhone，其下拉菜单中还有更多的链接，比如在线商店和售后支持。除此之外，还有个搜索栏。

有趣的是，这幅主体广告相当巨大，几乎覆盖了整个页面。如果它不能吸引你的注意力，那意味着整个网站的失败。幸运的是，苹果通过良好的产品营销知道如何抓住用户的吸引力，所以，他们没什么好怕的。

另一个需要注意的是，其网站简单的内容。你不会被侧边栏，通知或是额外的导航项目而打扰——在页面上只有很少的东西，吸引你的注意力，使人轻而易举地找到下一步的去向。

微软对自己的首页有着不同的诠释。首先，他们在顶部放置了一个风格相似的广告，目的是抓住人们的目光。这三幅巨大的图片广告——能够通过鼠标的滑过来轮流展示，很吸引人的眼球，但这可能会削弱其他两个广告的效应。在页面顶端的，是搜索栏和导航条。

在主广告下面的内容就更有趣了，正如我先前所提到的，微软的商业运作涵盖了从企业用户到个人用户的方方面面。

这块区域展示着微软不同商业领域的新闻与重要信息。但是，其内容是相当枯燥无味的，大量信息充斥在这样一个小空间内，毫无条理而言。

诚然，这些内容也被细分为了几个要点，但其字号很小并缺乏图片来区分条目。总之，它很难勾起我读下去的欲望，因为它确实，很没劲。

2.流动性

我所说的流动的意思是：该网站的结构布局，能让人轻松地找到所需的信息吗？我是否知道接下来应该看什么——这个网站能否让我更容易的到达目标，或者说我需要在网页内容中努力寻找我想要的东西吗？

这是 Apple.com 的 MobileMe 区块：

苹果在网页架构方面做得不错，在这个页面，首先吸引你的应该是右面的图片，然后是左边的大标题。

看了大标题后，可以继续阅读下面的推荐广告，它们能够轻松地引领人们去点击免费试用的注册按钮。每一项广告下面都以链接到详细内容页面的“Learn more”文本结束，这使得网页没有死角，并让访问者浏览下去。

微软似乎努力过却收效甚微。这是他们的 SharePoint 区块：

是的，这儿是有个吸引目光的焦点——顶端长长的引述和一张服务器的图片——但是接下来呢？

下面所有内容都极为单调，尤其是那个有 8 个链接的“Learn More”区块。干巴巴的介绍让访问者缺乏浏览的欲望。有些微软站点在布局上做的稍好些，能指引用户的吸引力流动，但它们都有一个通病：内容太多。

提供给用户的多种选择，增加了用户的负担——他们不得不思考自己想要什么，并处理更多的信息。通过减少选择余地，苹果引领用户进入了一个经过精心设计的，提供了良好用户体验的通道。

3.导航条

苹果的网站上方有一个大型的导航条，这使网站的每个部分都能够保持一致。

可供选择的部分展示了苹果的主线产品，同样也有包括售后支持和在线商店在内的重要内容。导航条同样集成了搜索功能，同时还进行了品牌展示，比如主页按钮显示的是苹果的 Logo 而不是简单的“Home”标签。

任何额外的二级导航都位于个别页面，而且都在网页的内文中，也许是在侧边栏，也许是个顶端的水平条。

微软的主页有一个类似的导航条，但它在网站中并不是始终一致的。事实上，所有的子页面都有各自不同的导航条——不论在样式上还是内容上。主页的导航条几乎是微软网站各个部分的网站地图。

在包括主页在内的许多导航条上，微软都使用了下拉菜单——与苹果不同，苹果不光使用下拉菜单——而且是巨大的下拉菜单。有时候，下拉菜单竟然还有一个滚动条！（Firefox 中）

这是好是坏？在最近的一篇文章中，Jakob Nielsen——有名的可用性大师——写到，巨型的下拉菜单还是可行的。

说它可行是因为它集中提供了多种选项，使人更容易地检索并获取所需。通过它能够达成某个既定目标，比如将只需要显示一次的命令集中放在一起。

微软使用大型下拉菜单也有一定的道理，但他们做的有点儿过了。有些不同的选项都指向了同一个内容，像‘Office’下拉项和‘All Products’下拉项中的‘Office’选项。

大型下拉菜单还遮挡了其下面的页面内容，如果鼠标不小心滑过了菜单，还要刻意移开鼠标以继续浏览——同时还要小心谨慎，不把鼠标移到其他条目上。

大的下拉菜单同样包含了不少内容——有时一次显示大约 13 个条目，这使得分辨选项更加困难。同样，网站各区块导航菜单的不一致也给页面跳转制造了障碍。像从 Office 网站跳转到 XBox 网站。

4.可读性

因为网站中的主要内容都是文字，所以确保每部分内容都清晰易读是尤其重要的。下面是改进网站可读性所需考虑的要点：

• 使文本足够大以便阅读。
• 确保文字与背景有足够的对比。
• 在文字周围提供足够的留白以避免其他图片和内容干扰读者。
• 提供充足的大标题和高亮/粗体字，以便读者快速获取关键信息。
• 为个别文字区域添加图片和图标来强调内容，如产品或功能描述
• 保持文字简洁并突出重点

现在让我们来看看苹果和微软在这方面做得如何。这是 Apple.com 上一个典型的页面：

苹果使所有东西都轻松易读。其文字虽然很小，但都不至于太小使阅读困难。标题很大很突出，使人很快就能找到这一部分的要点。

苹果还大量地运用留白以区分每一部分，并添加图片提升每段文字的趣味性。

这是 Microsoft.com 上的一个典型页面：

它遵循了可用性设计的通常准则，把大块的东西分割成容易理解的小段文字。其页面上的更多内容和对标题及高亮文字的多种不同处理方式，使它看起来要比苹果的网站忙得多。

页面上的过多样式导致了视觉的混乱，各种不同的颜色和粗体字吸引着人们的注意力，在这种情况下，页面需要简单化以使访问者更易阅读。

这是微软的另一个网页，微软安全中心：

页面上的文字过小而难以阅读，而且它需要更多的留白来把文本分离开来。再来看看 Apple.com 上一个繁忙的页面：

这是苹果在线商店，到处都有大量的商品信息和分类链接。字体小得恰到好处以容纳更多内容，当然，留白的良好运用仍然确保了页面的可用性。

5.搜索

苹果网站的搜索区域集成在导航菜单里。当键入内容的时候，会有使用 Ajax 实现的实时搜索结果以小方块的形式弹出来。

这个东西非常棒——完全没有延迟，结果被组织成几个分类并且相当迅速，通常是在输入完查询语句之前，这是它的样子：

如果想查看更多结果，可以在完成输入之后敲击回车键，这样标准的搜索结果页面就会显现出来。它非常简洁，同样搜索结果也有组织地按分类排列。

还可以通过分类进一步探究搜索结果，还有右侧可选的菜单。这些对寻找他们的产品很有帮助。

微软有一个更熟悉的搜索结果页，看起来很像是 Google（或当前其他搜索引擎）。

它使用了微软自家的 LiveSearch 核心，很善于发掘人们所要寻找的并展示出来。搜索结果是一个大大的列表，标榜着微软的商业地位，它有许多子页面和不同的搜索内容。

其功能性很强，但外观和感觉却与其他页面不同，好像是在浏览另一个网站。

6.美感

苹果的网站美学反映出了他们的产品线。具有铝质感的导航栏有着柔和过渡的文字。

此外，还有大量的思考和简约的设计元素。苹果公司一直致力于统一其整个产品线的界面外观和风格，从硬件到软件，其网站当然也不例外。

美感与可用性有什么关系吗？当然有。研究表明，人们认为，美观的界面更好用。

吸引人的界面给用户留下更好的第一印象，甚至会让用户更能够容忍缺点。微软在美观性上做得如何呢？这是 Internet Explorer 8 的页面：

这个页面采用了有着淡蓝色云彩的微软主题，很显然这是一个关于 Internet Explorer 或是 Windows 的网页。

其外观和感觉都很一般，没有充分的体现出它自己的不同，也没有建立出一个统一的品牌形象。这里是另一个页面，下载中心：

这又是完全不同的另一种设计，尽管背景同样是淡蓝色的。如果页面上没有标题，你能知道这个是微软的网页吗？大概不能吧。

总的来说其设计还是相当不错的，但这远远不够，还是有许多前后不一致和欠雕琢的地方，这方面，苹果仍然领先。

7.一致性

一致性非常重要，你可以以此为基础建立使用模式。这意味着如果你的网站有一个一致的界面贯穿始终，访问者就会迅速了解网站的运行模式，并使用这种方式浏览每一个页面。

苹果在保持页面一致性方面也做得相当不错，其各个产品页面都具有相似的美感与相同的架构。

整个站点的外观与风格始终如一，每一个页面都有着相同的导航条。这意味着整个用户体验都是非常连贯统一的——你知道你正在浏览的是同一个网站。

这是微软 Azure 平台的网页：

如果拿掉 Logo 的话，你还能认得出来这是微软家的东西吗？微软每一个网站各自的图形，样式和颜色集使微软没能够建立一个统一的网络品牌形象。

微软的主要问题在于，Microsoft.com 上的每个不同部分都有自己的外观与风格，即便是导航条。

微软的在线商店，Office 站点与安全中心就像是三个不同的网站。

更糟糕的是，其网站的导航条会消失，这意味着访问者不得不后退到主页或进入网站地图才能够浏览其他站点。它就像是托管在同一域名下的生态系统，不能像苹果的网站一样从一致性建设中获益。其品牌形象也极其分散，难以定义一个完整的微软网站。

结论

哪一个网站是赢家？仅仅考虑可用性的话，苹果是出类拔萃的。他们的主页设计得更好，选项更少，减少了用户的思考。

他们的每个页面都有一个相同的导航条，使用了大量的留白和子标题来增加可读性。他们保持页面的简洁性，没有过多的使用文字处理效果。

苹果的网站通常对用户友好，且为查看苹果最新产品的顾客提供了更好的体验。

话虽如此，苹果的网站在规模上要比微软网站小得多。与苹果不同，微软在 Microsoft.com 品牌下许多不同的站点和区块，创造了一个子网站的完整生态系统。每个站点都充斥着大量的信息和 LiveSearch 核心的搜索。微软网站的最大问题就是一致性。

微软网站没有一个一致，连贯，统一的品牌形象。每个区域看起来都不尽相同。没有个统一的导航，并且缺乏微软的可视化标识。而苹果网站中所展示的反映其产品理念的独特美感，也使得苹果建立了一个强大的品牌效应。

综上，在我看来，苹果显然是胜者。

原作者 Dmitry Fadeyev 运营着一个研究可用性的博客，名叫 Usability Post。

本文将讨论这4项与web设计相关的原则。只要在脑海中牢牢记住了这4项原则，你就一定可以设计出更加整洁漂亮的网页。

1. Contrast反差效果

好的反差效果设计可以给用户一个极好的第一印象。如果用户的眼睛没有焦点，注意力就会在处处是相同尺寸的元素和排版界面中迷失。设计师需要设计出很明显的突出视觉元素来引导用户的体验。你可以通过选择图片、颜色和字体等来形成良好的反差效果。

图片反差
当需要在很多小元素后面展示一个大尺寸的插图时，这种方法很有效。嗯，我的意思就是，比如：

The Invoice Machine
这个网页利用一张大图片来吸引用户的注意。而同时网页很自然的单色又让很少的蓝色应用有了更好的效果。

Instabox
当你眼睛看到这个页面的时候，首先你会注意到什么？最有可能的就是盒子上面的那个星星了。跟 The Invoice Machine 一样，它们都是通过用一张大图片和很少的颜色来制造一个视觉焦点。

颜色反差
恰到好处地使用少量颜色，是网页中另一种制造视觉反差的有效方法。可以在网页的头部和文本拷贝中使用不同的颜色，也可以在一张图片或插图的颜色里面应用。

Fatburgr
这个网站是极出色的一个所有设计原则的应用实例。关于颜色反差我们来看看它大大的黄色头部和小小的淡灰文字。排列、图片反差、重复和分类这几个原则做得都很彻底。

I Love Typography
一个用来展示排版的网站如果在它自己的页首就为我们展示了一个极好的排版效果，那让人觉得多惊奇啊！我喜欢他们所用的字体，也喜欢他们良好的青色和深灰色搭配。

字体反差
如果你想通过字体来产生反差效果，就应该避免使用2个很相像的字体外观和大小。很相像的字体会造成混淆，并让设计变得模糊。不过把字体大小弄得很不一样就会非常有效果，或者是把字体最细和最粗的版本拼合到一起也同样有效。同样的，如果你将两种外形差别明显的两种字体排在一块，就会对它们带来的视觉冲击效果感到惊奇。把一个 san serif 字体和一个手写字体放在一起就是一个例子。

Fixie Consulting
哇噻，我真的非常喜欢这个网站上使用的排版和颜色。注意看他们标语的大小和笔画。页面上洒水效果和少量蓝色的使用，都让我非常欣赏。

2. Repetition重复原则

跟web设计相比，重复原则在书本设计中应用得更加普遍，不过它在两者之间都是一样有效的。重复的设计元素可以使页面显得很连贯，还能提升品牌。在web设计中，可以很好地达到这个目的的一个方式是在网页的头部和脚部重复放元素。看看下面这些例子吧。

Ten24 Media
Ten24 Media 在头部和脚部都使用了很有创意的插画。

Silverback
这个网站绝对是超赞的！我绝对可以在前面“反差原则”部分就可以把它作为一个好例子亮出来的，可它在“重复原则”部分也是一个好例子，因为它的界面风格和品牌部分都很明显地应用了这个原则。仔细看它用香蕉来当做列表前面的图标，还有头部、脚部的森林插画。

3. Alignment排列原则

你的网站外观设计得很业余还是很专业，排列原则在其中扮演了一个很复杂的角色。最近我很主张在设计网页时使用格栏。这么做可以让你的设计很干净，也可以提供一个很好的设计框架。如果你有兴趣想学习更多关于格栏设计的知识，去看看我最近的文章吧（在这王婆卖瓜，自卖自夸一下），Design A Fresh Blog Theme On The 960 Grid。

Black Estate Vineyard
这个网站在960 Grid website上有展示。它的版面排列很连贯也很引人注目。我很欣赏它将主要内容整齐地排在左边的做法，尽管有些大级别的头部破坏了这个规则并排到了左侧边栏里面。对留空的大量使用和字体反差大小的使用都非常不错。

A List Apart
A List Apart中使用的可视格栏非常有特色。里面的栏目设计良好，把所有包含内容都变得易于阅读。研究表明过宽的栏目会造成严重的阅读困难。在跟随那么宽的栏目中的文字时，你的眼睛会变得很累。（这里译者貌似漏了一句：A List Apart also features a fantastic article that argues, Good Designers Redesign, Great Designers Realign.）

4. Proximity分类原则

最后一个原则是分类。只有在将相关元素分组，将无关元素分开的时候才会用到这个原则。假如你将所有东西都分到同一块文本块中，绝对会摧毁用户的体验。这就是为什么使用头部标签和适当的留空是那么的重要。

Envato
这个网站漂亮地将内容规整地组织到三个主要分类下，这些内容的定义既清晰又规整。

Paradigm Reborn
这个网站结构良好。头部既整洁又简单明了。空白留的很好，内容分开放得很有逻辑。

最终思想

当你脑中时刻惦记着这4个基本原则时，你会发现你的设计有了不可思议的改进。当然肯定还有许许多多别的东西也需要考虑，但是以反差、重复、排列和分类作为基础你的设计会取得长足进步。

到你了

加入到讨论中吧。你对这些设计原则有什么看法？能否分享别的一些东西

以下八个特性是我认为一个良好的用户界面所必须的：

• 清楚
• 简明
• 熟悉
• 易响应
• 一致
• 吸引力
• 高效
• 宽容

让我们仔细看看每一个特性。

1. Clear清楚

清晰度是用户界面设计最重要的元素。事实上，用户界面设计的所有目的是为了使人们能够与您的系统通过沟通和功能来进行交互。 如果人们不知道你的应用程序怎样工作或在你的网站上应该去哪里，他们会困惑和沮丧。

这是什么呢？鼠标移到WordPress的按钮时工具提示会弹出解释其职能。

2. Concise 简明

清晰的用户界面是很好的，但是，您应该谨慎，不要陷入过度明晰。定义和解释很容易被添加，但是你这样做的同时也增大了规模。您的界面规模增加。添加过多的解释，您的用户将不得不花费过多的时间去读它们。

不仅要保持清晰，而且还保持简洁。当你能用一句话解释一项功能的时候就不要用三句话。当你可以用一个单词标记一个项，就不要用两个。 保持简洁可以节省你的用户的宝贵的时间。 同时保持清晰和简明并不容易，需要足够的时间和努力来实现，但其回报是值得的。

在 OS X 的音量控制中使用两个小图标以显示的音量从低到高。

3. Familiar熟悉

许多设计师努力使自己的界面，直观。 但到底直观的真正意思是什么？直观也就是就是说可以自然地，本能地理解和领会。但是你怎么能做到直观一些？你可通过是它变的熟悉来实现。

熟悉就是， 跟你以前遇到过的东西相似。当你熟悉的东西，你就知道怎样它怎么做-你知道会发生什么事情。 弄清你的用户熟悉的并把它们融合到你的用户界面中。

GoPlan的标签页式界面。 标签很熟悉 ， 因为他们模仿文件夹上的标签。 你清楚知道点击标签您将浏览该节和其他地方的标签将继续存在为了进一步导航。

4. Responsive易响应

易响应意味着两件事。 首先，易响应意味着快速。 如果没有软件在后台，界面应该响应很快。等待加载和缓慢的界面是令人沮丧。 看起来加载的很快， 反正就是界面快速载入（即使内容尚未赶上）改善了用户体验。

易响应也意味着界面提供某种形式的反馈。界面应该反馈给用户，告知他们现在怎么了。 你成功地按下那个按钮吗？你将如何知道？按钮应显示一个被按了的状态反馈， 或许可以把按钮上的文字改成“正在加载... ”并且禁用按钮。 是软件挂了还是内容载入中？用转动的轮子或显示进度栏的方式来保持用户在进程中。

Gmail会显示一个进度栏当您第一次进入您的收件箱。 而不是逐步载入网页时，一旦一切准备就绪整个页面即时显示。

5. Consistent一致

之前我谈过关于上下文的重要性 ，以及它应如何指导你的设计决定。我认为，适应任何给定的上下文是很聪明，但是，一个界面仍然应保持一定程度的一致性。

一致的界面，使用户能够开发惯用模式-他们会了解不同的按钮，标签，图示和其他界面元素的外观，并识别他们。认识到在不同的情况他们所做的事情不同。他们也将了解特定的东西如何工作，能够从过去的经验中更快的总结知道如何操作新功能。

在Microsoft Office的用户界面是一致的是有原因的。

6. Attractive吸引力

这可能有一点争议，但我相信一个良好的界面应该有吸引力。 吸引力在某种意义上，是与界面交互变得是愉快。是的，你可以让你的用户界面简单，易于使用，有效率和易反应，它将尽其出色-但如果你可以做额外的一步，使之有吸引力的。那样用户体验会真正令人满意。当你的软件使用起来是令人愉快的，你的客户或工作人员将不仅是简单地使用它-他们会期待着使用它。

当然有许多不同类型的软件和网站，所有的创作针对的不同的市场和用户。什么样看来'好'对任何一个特定的观众都会有所不同。 这就是说，你应该为了你的用户来包装你的界面的的外观和风格。 此外，美感设计应适度使用，并且是为了加强功能。美化界面不同于加载时使用多余的眼睛糖果。

谷歌是众所周知的极简洁的界面 ， 他们关注功能重于形式，但他们显然的花费时间美化了 Chrome用户界面元素 ， 如按钮和图标 ， 使它们看起来正好体现了微妙的梯度和像素超薄突出。

7. Efficient高效率

用户界面像是车辆，带你去你要到的地方。这些地方是软件应用程序或网站的不同的功能。 一个良好的界面可让您在执行这些功能更快。 现在， '有效'听起来像一个相当模糊的属性-如果你把所有其他的事情在这个清单上，当然界面到头来还是需要高效？ 差不多，但不完全。

你真正需要做的是使界面能高效的找出用户努力想要实现的，然后让他们可以有条不紊的做到。 您必须确定您的应用程序应该如何工作' -什么功能它需要有，什么样的目标是你努力努力争取实现？ 实现一个界面，可以让人们轻松地完成他们想要做的，而不只是简单的实现对各个功能的访问。

苹果公司已经确认了人们在其iPhone上想要对照片做三个关键的事情，并在照片控制中提供按钮来分别完成他们。

8. Forgiving宽容

没有人是完美的，当使用你的软件或网站必定有人会犯错误。 如何处理这些错误将成为你的软件的质量一个重要指标。不要惩罚用户-建立一个宽容的界面，纠正问题。

一个宽容的界面可以使你的用户远离代价高昂的错误。例如，如果有人删除了重要的信息，他们可以轻松地重新检索或撤消这一行动？ 当有人浏览到损坏或不存在的网页，他们会看到什么？他们会迎接一个加密的错误提示还是得到了一些有用的替代目的地？

错误的删除了电子邮件？Gmail可让您迅速取消上一次的操作。

结束...

实现这些特性实际上可能同实现另外一些特性产生冲突。 例如，试图使一个界面清晰，您可能会增加太多的描述和解释，即最终使整个界面变得大而笨重。 缩减容量，努力使事情简洁可能产生相反的效果，使东西模糊不清。 实现一个完美的平衡需要的技能和时间，解决方案根据不同的案例也并不一样。

1. 暗示（Subliminal Suggestion）

研究表明你看到的物体与图片会导致一些必然的行为。举个例子，一项对儿童的研究表明：在向儿童展示了一顶圣诞帽之后，他们会更愿意与别人分享糖果。圣诞帽体现了分享的概念并把这种概念灌输给儿童，使得他们更积极地与他人分享。而同样的研究表明向儿童展示一个Toys ‘R’ Us（玩具反斗城）的LOGO跟圣诞帽的效果恰恰相反–让儿童更不愿意分享他们的糖果。

LegacyLocker 在页面上放上一张很温馨的家庭照,想必是为了让人对他的产品感到亲切,并且唤起想要保护亲人的感觉。

当给你的网站挑选图片时，仔细思考你要传达给浏览者什么信息。挑选图片是一件十分重要的事，因为图片体现了你要表达的信息与感觉。不要因为图片本身很好看而把它们放在网站上，如果它们没有完成既定的目标，那么它们就不应该出现在网站上。过度使用图片也是很危险的，因为它们可能并不能正确地传递内容的含义，所以根据你要表达的效果去挑选图片。

2. 防止选择麻痹（Prevent Choice Paralysis）

在营销里有一种很著名的现象叫做choice paralysis（选择麻痹）。当向客户提供太多的选项时，选择麻痹就会出现。给人以选择是很好的，但是当你的客户面前有很多个选择时，他们就会对该怎么继续下去产生疑惑。没有人希望看到客户后悔（自己的选择），所以当客户浪费很多时间在选择上面时，他们就会变得麻痹。

事实上，根据Barry Schwatz的说法，当客户面临太多的选项时，他们通常会放弃做出选择——这就是我们设计网页需要仔细考虑的地方了。

Highrise的价格清单对最受欢迎的那一项使用了突出的设计,帮助你选择它。

为了避免“选择麻痹”的产生，应该让人们找到最适合他们的产品或服务。告诉他们每个选项最突出的地方是什么，接着建议他们应该选择的那一个。你甚至可以在一些最受欢迎的产品上使用视觉高亮（突出）效果，来引导潜在客户去关注它.如果这个产品不适合他们，他们会选择其他的。而如果他们一开始就感到疑惑，一个“默认”的选项将有助于避免“选择麻痹”。

3. 把产品展示出来（Show The Product）

当你逛一间实体店，例如一间杂货店时，你可以瞧一瞧，再仔细检查，或者有时候还可以尝尝口味（促销食品）。你会根据你获得的产品信息来决定你是否购买。番茄熟不熟？草莓红不红？新鲜出炉的面包看起来闻起来怎么样？

当你在互联网上销售服务或Web apps（网络应用），你也应该做同样的事——把产品展示出来。令人惊讶的是很多销售软件的网站并没有把软件截图展示出来。是的没错，这些无形商品与电子商品你摸不到也闻不到，但是你要知道它们是可以看得到的。

Dashboard在首页上放上他们的软件截图。

人们会根据产品的外观来判断他们（的好坏）。Why？因为外表是一个指标，无论对错，表示一个产品的可用性（usability）。这就是著名的美学-可用性效应（aesthetic-usability effect）。

Xtorrent是一个Mac OS的BT软件,他们也在首页上放上软件截图。

如果人们看到一个复杂，混乱的界面，又或者只是一个不吸引人的界面，他们就会假设这些产品是不好用的或者很难学会用。相对的，如果人们看到一个很吸引人，很简洁的界面，他们可能会想开始了解这个产品是怎么运作的，并且想要试用一下。让顾客想象一下正在使用你的软件的情形，这会让你离交易成功更近一步。

4. 让顾客试一下（Let People Try It）

当你开始使用一个产品时，你会跟它变得关系密切。当你开始在里面输入数据时，你开始觉得是你自己的东西。每一秒钟用户花心思去发现你产品的特点，都是在投入时间去学习与使用你的产品。

当问这个用户是否购买或是定期付费给这个产品或服务时，他们更愿意说“我要”，因为他们已经对它感到亲切并且投入了很多时间。当然，如果产品本身很烂，这也会让客户放弃使用。但是这也会让你更优先去提高产品的水平，来使得客户喜欢。

MailChimp是一个Email营销服务,你可以免费使用,除非你的订阅者超过100人。

在过去几年，我们看到一种商业模式的出现，那就是“freemium”（免费试用），一个“freemium”服务允许用户免费使用产品的一部分功能，但是没有时间限制。这使得用户不用花钱就可以使用这个产品，并且当他们喜欢的时候再付费进行升级（到完全功能版）。

这种商业模式对于Software-as-a-Service(软件即服务)的商务十分适合，因为一旦有人开始使用你的产品，他们就会沉浸其中，开始依赖它，当他们依靠它去完成生意或是管理他们的生活时，他们就会更加需要专业版的功能，而且会更喜欢去升级为专业版,因为他们已经知道你提供的服务很好用。

产品描述对于销售是十分重要的，因为这让潜在顾客想象他们使用你的产品时的情形。但是让用户免费试用一下效果会更好。他们不用想象了，因为他们现在可以不花一分钱使用它。无论是通过演示版，有限期的试用或是freemium模式，只要是让用户试一下你的产品，那都是赢得客户的绝佳方式。虽然这不是一个真正的“设计”要素，但是在这里真的很有必要提出来,因为这的确销售很有帮助。

5. AIDA

AIDA是一种很有名的销售策略，代表“Attention，Interest，Desire，Action”（注意，兴趣，欲望，行动）。它描述了你想要成功完成销售的顺序。所以，首先你必须引起潜在客户的“注意(Attention)”，接着解释你的产品或服务对他们有什么帮助，从而引起他们的“兴趣（Interest）”。

一旦他们产生了兴趣，你要让他们对你的产品产生一种“欲望（Desire）”。举个例子，一个产品使用描述，可以帮助他们了解这个产品对自己有何帮助， 能带来什么好处？确实，“带来好处”这一部分内容才是整个过程的关键，因为只有顾客了解到他们将获得“好处”，而不是产品有什么特性,他们才会购买产品。

最后，你需要让顾客“行动（Action）”起来，也就是让他们购买产品或是注册。如果他们想这么做，他们只需要一个按钮来进行付款。如果他们有一点兴趣但还不太确定（是否购买），你可以利用其他方法来刺激他们。举个例子，制造一种“限时，限量供应”的情形。（物以稀为贵）。

Yokaboo用了一些很大很吸引眼球的图片，你首先会注意到左边的描述，然后会把眼睛移到那件T恤上，最后在右边已经提供给你“下一步行动”的链接。

现在，AIDA说明宣传口号比设计更需要被关注，所以在设计这方面需要做的就是让宣传口号更显眼，以确保浏览者可以看得到。这意味着让一个新访问者第一眼看到的就可以真正引起他们的注意。接着页面的布局应该引导他们去关注那些能引起“兴趣”与“欲望”的地方。最后在页面的末尾，我们需要完成销售，所以你要提供“马上订购（Order now）”，“点此注册（Sign up here）”这样的“行动”链接。

我们需要明白，单靠设计是无法形成销售的。 好的宣传口号能对整个销售起到巨大作用，而设计只是为了加强并支持宣传口号。

Reinvigorate用了“measure. analyze. evolve.”三个大大的字首先引起你的注意，大字下面就是描述文字，加一个“下一步行动”链接。

这就意味着你不应该先去设计一个漂亮的网站，然后把文字填上去。相反地，先想想你要传达什么信息，把宣传口号写下来，然后再去构思怎样的设计才能更好地传递这些信息。这就好比一辆货车故障了，那就无法把货物送达目的地。但是如果刚开始车里没有货物，送不送达也就无所谓了。（译注：指没有好的宣传口号，再好的设计也是无谓的）。

6. 注意力引导（Guide attention）

要从AIDA这种策略中获益，你需要让你的浏览者的视线经过那些内容。你可以通过对齐来使得视线向某方向移动，再用一些图片来引导视线。举个例子，如果你要让某个地方引起注意，可以用一个大大的箭头图片。我们的眼睛会注意到箭头，并自然地把视线转移到箭头所指的位置。

Business Catalyst用了一个箭头图片来引导人的视线移到“观看视频”的按钮那。

Silverback的布局指向下载按钮，同时下载按钮上的箭头还指向了购买按钮。

组织好你的内容让他们会自动让视线向某个方向移动。杂乱无序的产品描述也许会让你的浏览者感到困惑，并且选择离开。如果你想确保你的浏览者不遗漏任何内容，你可以把所有东西都沿着一根线进行对齐布局，这样浏览者就会沿着这根线对内容进行扫描。最后你要确保所有的内容结尾都要指向“行动”，即“注册”或是“下载”按钮。

7. 永远都要有“下一步行动”的链接（Always Provide Next Actions）

ABC: Always Be Closing.如果你正在设计一个销售商品的网站，无论是软件或是在线服务，你应该经常考虑一下，每个页面要怎么让交易完成。这不代表说你需要在每个页面都放置“马上购买”的按钮，意思是当顾客已经准备好要购买的时候，他们不需要到处找，就可以发现“马上购买”按钮。

请留意Skype上3个地方的文字下面都有“行动”链接，就是“了解更多”或是购买链接。

随时提供“下一步行动”的连接可以让浏览一直继续，并确保不让潜在客户丢掉注意力。“下一步行动”的连接可以链接到产品详细信息的页面，或是一个可以购买，注册的页面。这些链接通常都像“喜欢？点这里”，“查看更多”，“体验一下”，“现在购买”这样。

不要让浏览者在看完网页后没地方可去，要随时引导他们进入需要浏览的页面。

8. 古腾堡规律（The Gutenberg rule）

古登堡图（或是古登堡规律）描绘出了“阅读引力”，“阅读引力”描述了西方人的阅读习惯：从左到右，从上到下。古登堡图把一页分为4个象限，左上象限是“Primary Optical Area（主视区）”，右上是“Strong Fallow Area（强沉寂区？）”，左下是“Weak Fallow Area（弱沉寂区？）”，右下角是“Terminal Are（终点区）”。

古登堡图（The Gutenberg diagram）

这就是当我们的眼睛从左上向右下方向扫描，左下区域是最不能引起关注的，并且我们的扫描会在右下区域停止。那我们应如何利用这些概念呢？按钮与“下一步行动”链接就要放在右下区域(不要放在左下区)，因为右下才是浏览者眼睛扫描的最后地方。

请留意GoodBarry的“注册”按钮就放在右下区域。

需要注意的是，“古登堡图”更适用于那些内容平衡分布的页面。如果你页面中有某个地方有强烈的对比，或是用了很大的文字，那么这些区域照样会吸引更多的注意力，并引导浏览者按其他方向扫描页面。

相关文章

你可能会对以下相关的文章感兴趣：

• 10 Principles Of Effective Web Design
• 5 More Principles Of Effective Design
• 9 Common Usability Mistakes In Web Design
• 10 Useful Web Application Interface Techniques

关于作者

Dmitry Fadeyev is the founder of the Usability Post blog, where you can read his thoughts on good design and usability.

P.S.相关文章以下内容并不在翻译文内，是我为了增加完整性自行添加的。

简单的效果和技巧是建造当今设计的基石。比方说，如果你都不知道如何正确选择颜色和文字效果，灿烂的星光效果又能有什么用？

本着“少就是多”的理念，我们为你精选了十个简单好用的设计技巧 ，它们能大大提升你设计的专业性和感染力。

更多技巧可参阅(英文)：

• 12 Useful Techniques For Good User Interface Design
• Grid-Based Design: Six Creative Column Techniques

基础先行。 学会走之前要先学会爬，让我们从最基础的简单有效设计的概念开始。

1. 增加对比

很可惜，添加额外的对比是最被忽视和弃用的技巧之一。

Joost de Valk 采用了细的高对比度边线，让访客能更容易区分页面的不同区域。在上图中放大了的部分，你可以看到，大多数时候这种对比只是一条1像素的高亮线挨着1像素的暗线。

话说回来，这个页面上的“More”和“Go”按钮与周围的对比度太小，即使你刻意在找也很容易被忽略掉。

WordPress 为页面中最受欢迎的链接 “Download(下载)” 使用了对比色。 这种红色在冷灰色调的页面中自己跳了出来。但这红色在明度方面有所收敛，避免了影响页面整体效果。

如果你对于该不该使用对比犹豫不决，就把这一决定过程当做是化妆。你要做的不是让人们大吼“看呐，对比色！”，你需要的是自然而然的吸引他们注意页面中重要的内容，高亮出已经存在的重点。

2. 渐变

技术的发展为所有想使用渐变的人提供了各种创造渐变的工具。但渐变真的很好么？

Media Temple 网站的每一个页面都使用了渐变，不过其渐变使用的节制和精妙才是设计成功的关键。logo，大标题，按钮和背景都有细微的或者镜像的渐变，以强调内容。最复杂的渐变用在了那些简单的120像素宽的按钮(子页面中的“ACTIVATE”和“LEARN MORE”)上，因为它们是需要访客注意的重点。

Commission Junction的渐变运用远没有Media Temple的细致，而且采用了过于丰富的渐变类型：

• 从黑色到灰色的水平线性渐变，位于页面顶部
• 页眉处的绿色径向渐变
• 登陆框背景的“CJ” 标志上方模糊的斜向渐变
• 输入框背景中淡淡的垂直线性渐变
• 导航条背景的垂直渐变
• Webinar广告中明亮的线性渐变
• 另一个垂直线性减弱，用在了大标题处

这种设计有点冒险，大部分渐变式有用的，但还是存在一些问题。最突出的一点是，设计丧失了一致性。同选择可辨性强的色彩组合一样的道理，设计师也需要为每个项目选择合适的渐变组合。

例如，大的水平渐变(1)引导眼睛横向注视页面。这本没有什么问题，但就在此渐变的正下方又出现了把视线吸引到中心的径向渐变(2)和把视线引导到右下角的斜向渐变(3)。这会给访客造成困扰，起伏变化的视觉流（visual flow）也削弱了可读性。

使用渐变时，保证好的视觉流很重要：请保守而精致地使用渐变。最重要的一点，仅当对整体设计有帮助时才使用渐变。

3. 色彩

合理使用颜色很有挑战性。在挑选完美的色彩组合和为各种色调找到合适位置的过程中，时间哗啦啦地就流走了。

Realmac Software 大胆地在404页面采用了全色系渐变。这样做有以下原因：首先，Realmac已经将页面背景设成了中性灰色，更重要的是，页面其余部分没有明显的色彩的，除了蓝色的文字链接和一些零星的毫无冲击力的色彩。

全谱色彩渐变完美地吸引了人们的注意。它保持了简单性，有着灰色的配合，也不会让眼睛感到不适。但在一项设计中采用四种或五种以上的颜色通常都显得太过了。除非你非常确信你的设计需要那么多颜色，还是采用简单的四色组合比较好。

当你在设计中克制而明智地使用色彩时，吸引访客对重要项目的注意力就变得相当容易。在 Interspire的 “About Us（关于我们）” 页面中，访客的注意力被迅速吸引到页面顶部LOGO那红色的一点上，然后是标题，然后是页面右边的LOGO照片。

在字体上花点功夫。字体的艺术博大精深，远远超出我们大部分人的想象。字体中超出x高度部分（ascenders ）和边位（side bearings）处的创作空间巨大，你可以在此处添加一些有趣的细节。不过还是运用接下来的一些技巧更重要。

4. 字符间距

字符间距，或者称为字距调整 (kerning)，能对标题、段落、logo等文字相关内容造成巨大影响。其远不止每个字符之间的距离那么简单。

Krop’s 的新作品集创建器，在处理文字的时候，十分吝啬空间。该网站上大部分基于文字的图片中的字符间距都很小，使叙述内容显得更为简洁有力。

上图表现了字符间距对你的设计可能产生的负面影响。小而无抗锯齿的字体如果没有适当的字符间距，将更加难以阅读。

如果你以前没有在意，试试现在对你设计中的字符间距做一些调整，你会为调整后带来的不同而震惊。推荐图片中使用“Myriad Pro” 字体，HTML文字中使用“Trebuchet MS”字体进行尝试。

5. 大小写

改变字母大小写不过是按一下Shift或者Caps Lock键的功夫，但很少有设计师好好利用了这一技巧的潜能。

MSNBC’s 对大小写的使用很值得参考。logo是全小写的，页面其他部分的字体大小写更有着微妙的变化。页面上方的大横幅通告，一般用大写字母写着“WATCH LIVE（观看直播）”或者 “BREAKING NEWS（最新消息）” 。这些通告都是非常重要的内容，这种方式很好地吸引了访客的注意。

另外，采用纯大写的按钮，让他们的小按钮足够清楚易读。 在这种5像素高的应用里，小写字母，如a, m, x，可能只有2到3像素高，非常难以辨认。

继续关注新闻站点， CNN 在字体大小写上缺少变化来平衡页面。导航条是全部大写的，但页面中的其余部分则很传统地几乎全部采用了首字母大写。

6. 消锯齿

虽然技术上比较复杂，消锯齿仍可以归纳为“使边缘平滑”，在各种设计中都有运用到。在Web设计的世界里，是否消锯齿部分决定于文字是要出现在图片还是HTML文字中。另有一个让事情变得复杂的情况，部分浏览器或操作系统会自动在一定程度上消锯齿，但总的来说，HTML文字是不具有抗锯齿功能的。

Stockxpert 非常聪明地在广告页面中部分使用消锯齿，而部分文字不消锯齿。大部分文字都有平滑边缘，但页面顶部和底部的小字则保留了锯齿。同上面说的MSNBC按钮一个道理，5像素高的文字需要有尽量锐利的边缘来保持可读性。这种情况中的模糊或平滑边缘会让眼睛很累，最终放弃阅读。

混搭是王道！ 完美的东西一般都显得很假或者乏味。树木的枝叶并不完全对称；任何形式的照明都不会产生平衡的影子；照相机镜头有时会让部分景物模糊，以及产生镜头光晕…… 有些设计需要干净的人造风格，另一些则需要混搭一点~

7. 制造瑕疵

任何人都能在使用一台电脑十分钟后告诉你它并不完美。但在设计过程中，电脑可以为你创造完美的结果。在你最喜欢的设计工具中使用直线工具时，只需要采用默认设置，你就能画出特定两点间的完美直线。

这个怀旧Ace牌的教程提供了很多步骤来让这张牌看起来不完美。不得不说，这一过程并不简单。不过其中的概念十分简单——让事物显得老旧，创造不完美，给你的作品以独特的肌理。

这张蝴蝶照片看起来就像是20世纪中期拍摄的，另一个不完美的例子。其实它是用数码相机拍摄的，使用了一些滤镜和颜色调整，赋予其怀旧效果。

为设计创造艺术风格化的瑕疵比你想象中要容易。你只需要将素材变成灰色或褐色，再添加一点细节……

8. 模糊

如果你还在为如何让内容突出、消隐而一筹莫展，请试试各种不同的模糊方式。通过模糊前景、模糊背景，甚至整个设计，你可以动态地增加你的项目的冲击力。模糊的焦点，需要至少部分地相关联。通过模糊一个元素，焦点被带向另一内容。

Ios V2 壁纸使用简单的模糊创造平静的、生机勃勃的感官。一些明锐的线条用来形成图像的焦点，而模糊的背景对于壁纸的整体效果至关重要。

模糊亦可形成深度和层次覆盖的感觉。 Windows Vista的Aero效果将窗口后面的内容模糊掉，形成很酷的漫反射玻璃效果。使用高斯模糊 即可创造类似效果。

9. 对齐

即使我们强调保证整洁和直线，你仍然有需要为你的设计添加一些额外趣味。

这个示例标志中的“logo”几个字母被提到了右上角。更改设计元素的对齐方式可以让它们更容易被记住，更容易被人们讨论起，结果是让整个设计更高效。

这一技巧并不只是用于文字。部分设计师在思考一项设计概念时会利用模板化内容或者个人工作习惯。这可以加快给客户回应的速度，但也经常会限制了创意——尤其是在内容对齐方面。

Icon Designer通过旋转某些元素让自己与众不同。这一页面很容易成为稀松平常的无聊之作，但简单的几个旋转让它趣味十足。

现在的网页大部分是700到900像素宽，一般在浏览器中居中，并且是方盒子式的构造。大部分案例中，这样做使内容安排有序，但也有一些站点，需要设计师考虑跳出盒子，创造特色。

接下来，最重要的是…

10. 消除累赘

这可能是最重要也最被忽视的设计技巧了。去掉不必要的部分，也是最难做的部分之一。

通过去掉所有不必要的部分， CSS Remix只留下了必要部分，可以同时展示7个大广告 (128 * 96 像素),，53个favico广告 (16 *16 像素) ，以及一大群网站（56个）——全部在页面上方1000像素内！甚至网站的logo都被削减到了53乘 7 像素。

生活中也是如此，好事做得太好就不是一件好事了。上面的logo太小以至于难以辨认，特色站点也难以同彼此区分开来。奇怪的是，页面顶部的Twitter feed，相对于站点logo和导航来，又过分突出。

关于作者

Mark Praschan是一位具有将近十年经验的网页设计师，Web开发师，Web项目经理人。 他拥有并负责运行 Arrival Media . You can follow Mark on Twitter as well.