Apple的网页设计哲学

我从来都认为参巧是学习设计其中一个最有效的方式，故推出“优秀设计赏系列”，把我从各大网站学到的小事情记录下来，与大家分享。本文是本系列的第二篇。

只要是 Apple 出品的，无论是硬件还是软件，在易用性﹑用户体验等方面都是业界一流的。所以我很好奇 Apple 的网站用户体验又如何呢? 关于 Apple 网站的旧版本点评请阅 Apple 网站历年设计 ，多谢支持。

新版网站首页设计。

今次改版中，影响到整个网站的改动有:

• 网站大小: 由以前的 800 * 600 变成了现在 1024 * 768。苹果已经放弃了那些还在使用 800 * 600 的用户了。(相关阅读: 07年用户浏览环境数据)
• 跟以往的改版一样，目录项目总是第一个被改的地方，详细请读 Apple 网站历年设计。本次改版删除了 QuickTime，加入了 Download。
• 在目录上加入了 Search。以往 Search 一般在页面底部。
• 网站内容方面，加入了很多第三分软件的资讯在 Download 栏目下。
• 网站内页的底部加入了一个类似 Site Map 的东西，后文会有详述。
• 用了很多 AJAX 效果。

OK OK，我们由首页开始一页一页慢慢说。 大家都说 Apple 的首页看着就觉舒服，不知道你有没有想过为什么呢? 首页资讯少是主因之一。 一般来说我们都爱把所有内容一股脑的掉到首页上，这样做很容易对用户做成资讯过载。 Apple 网站首页的中心只有一个 - 中部的图。 虽然图片经常改变，但视觉中心会不变。见下图:

好的设计都应该只有一个重点， Apple 首页的设计很好地做到了这一点。 被中心所吸引之后，你的视线会跑到上方的目录去，就如上图所示。 这也是一个好的设计应有的特点: 用户不会不知道该往哪处去。

请注意一点，浏览或阅读时的视线不是真的如上图般呈线性的，而是应该是一跳一跳的。 设计网站时请留意这一点。 我见 Microsoft Office 2007 的新接口已经犯了这个错 … Orz …

接下来到内页的设计了，假设用户点击了目录上的 Store ，他们的视线应如下图:

第一个视点很理所当然的坐落于网页的左上方，因为:

• 我们刚刚点击了位于目录左方﹑网站左上方的 Store 按钮;
• 这是我们的阅读习惯，由左至右由上至下;
• 网页是由左上方的元素开始下载的，所以左上方的图片和文字会最先下载完毕;
• 网页左上方有一不太好看的蓝色方块，吸引了我们的目光 ;
• 即使我们看一张白纸，或一个空白的网页，第一眼也应该望着 中间偏左偏上 的位置 (黑点下方);

因此，大部份网站都把 Logo 放到左上方的位置，而不是置中或者置右，这样方能让用户一眼就把 Logo 认出。在此之后，眼光会快速扫到页面右下方。 嗯， 用户浏览网站的时候，绝对不是一行一行的读，而是高速扫描。 因此撰写文案时应尽量简洁，适时使用图片，以方便面用户在扫读的时候认出内文。 千万不要把你的网站搞得像报纸一样，这样做绝对是赶客的行为，紧记这一点。

另外，用户的线视流程基本上都是如上图所示，左上至右下，少有改变。 没错，你的设计的确可以影响视线流程，不过不要尝试这样做: 改变用户习惯是可用性的大忌。 顺应用户的习惯，才能做到一目了然，一睇就明。

本文为“优秀设计赏”系列第三篇，撰写本系列的目的在于师人之长技为己用，多看多想方有进步。前两篇分别为 Apple 网站历年设计 和 Apple的网页设计哲学(上) 两文。本文将主力探讨 Apple 购物页面 (Store) 的设计及流程，并加以分析。
Apple Store 给人的感觉真的很像一个实体商店， Store 页面的设计就像一个橱窗: 陈列著各项产品﹑价格等 (如上图)，并不时有促销广告。 Apple 网站简洁的设计跟 hp.com﹑ Dell.com 等站的设计真的人天壤之别。 Apple 的网站架构跟其他电脑制造亦有很大不同。 如果你要到 Dell 网站寻找某机种的资讯，你需要先选择电脑的类别。 要分清 Notebook﹑ Desktop 没有问题，但 Workstation? 我的 Desktop 算 Workstation 吗? 而 Sony 则把它的 Notebook 再分为 大画面﹑轻薄等。 当然 Apple Store 也有它的缺点: 如果使用者想购买其他产品 (如 keyboard)，就得先花一下工夫了。

Shop iMac!

另一点值得一提的设计细节是 Apple store 网站上方的 Breadcrumb Navigation (见上图放大了的部份)。 这个设计让我想起 Yahoo! 美国最近大量采用的 Tabbed Breadcrumb Navigation (见下图)。 Breadcrumb Navigation 作用在于告诉用户目前身处的位置，正如一块路牌。 很多大型网站都有 Breadcrumb Navigation ，不过做得像 Apple 这么精致而自然的实在少见。 关于 Yahoo! 的 Tabbed Breadcrumb Navigation 可能会另文再述，可能吧 (Yahoo! 的设计好多都是一流，就怕自己没这个动力去写)。

Tabbed Breadcrumb Navigation

除了 Breadcrumb Navigation 外， Shop iMac 页面还有另一个不得不提的设计。 Apple 在这个页面少见地把所有资讯都放到同一个页面之中: 上方的“系列选择”; 中间的规格和售价资料; 下方的详细简介。 因为资料太多， 所以整个购物页面其实是颇长的。 在一般情况下网页设计师应该尽量避免页面过长， 为甚苹果的设计师仍要知错犯错呢? 其实这样设计的目的在于让用户可以快速方便地比较不同系列不同型号之间的分别。 鱼与熊掌不可兼得，如果没有大量资料，用户就难以在一页之间比较。 再看看中间的 iMac Screen ， 设计师为了让用户可以直观地比较 20″ 和 24″ 的不同， 提供了随意切换 Screen 的大小的功能， 实在是个很贴心的设计。 订单页面也有相似的设计， 请看订单页面 (下图):

终于来到最后一篇“Apple的网页设计哲学”，前三篇文章分别为 Apple 网站历年设计 ﹑ Apple的网页设计哲学(上) 及 Apple的网页设计哲学(中) 三文。 Apple.com 网站的优秀设计写十篇都写不完，我在这几篇只提及到一些比较特别的地方。有任何意见欢迎留言。
Apple.com 本次改版的其中一个特式是， 部份页面上部出现了产品横向滚动条 (如上图)。 这是一个极具创意的设计， 不过在可用性 / 易用性 方面就不敢恭维，因为:

• 因为这种设计是完全违反了用户的使用习惯，人们只习惯上下滚动网页;
• 要用户向下 scroll 又要左右 scroll 是很糟糕的事情;
• 当鼠标的滚轮对横向滚动条毫无作用的时候，情况就更加坏了。
  在鼠标滚轮面世以前， 只有不足 20% 的人会向下拉网页; 滚轮面世以后， 几乎所有人都会某程度上地向下滚动网页。 可见工具很大程度地影响用户的操作行为， 而 UI 对之的影响则相对较少。

虽 然这种设计并不尽善尽美，但我认为 Apple 已经在其能力范围内尽了最大的努力。大家应该去试试看，你会看到好多细节 Apple.com 都做得好好。特别是在加入超炫的特效﹑Ajax 之余，Apple 并没有因此而放弃对 Web Standard (网页标准) 的坚持 (Amazon 新版页面倒退到用 Table 排版…)。Apple 改版以前就很注重 Web Standard ，即将内容 (HTML)﹑ 样式 (CSS)﹑ 行为 (JavaScript) 三层完全分离。 以上面的滚动条为例，在 No Style / 纯文字 的情况下浏览 Apple 的页面，你会发现这个滚动条不来只是一个 List (见右图)。如果要我选一个最漂亮的 XHTML Site ，我一定会选 Apple.com。

Apple.com 的细节实在做得太好了，网站内每一个产品页面都是独立设计，各具特式。例如 iPod shuffle页面的设计:

iPod shuffle

看见了我放大了的 “Choose a color.” 部份吗? 当你选择其中的一种颜色，页面内的其他 iPod shuffle 的颜色都会随之而变。包括右方夹在心口的那一个!

另一个值得一提的变更是， Apple.com 网站开始大量使用 Video ，从内页到首页都有。网站内随处看见到 “Click to play” 或者 “Play now” 的字样。我觉得这个可能是未来互联网发展的一个趋势 - 大量使用 Rich Media。不过我觉得苹果有点走得太前， Video 用得太多了，我还是不太习惯。

大家应该有过这么一个体验: 某网站的主页有个 Auto play 的 Flash ，那个 Flash 还是有声有画的，于是每次回到首页那个烦人的 Flash 都会播一次。平易近人的苹果当然没这么笨，它用了 Cookies 来判断用户是否首次光临本页，而 Video 只会播放给首次来临的用户看。Want to watch the ad again?

Watch the ad again.

Apple 的网页设计哲学终于来到了尾声。我最后想介绍的一个设计是:

Why You’ll Love an iMac

是网站底部，一个类似 Sitemap 的导航区。这种设计最近才渐渐流行起来，在底部采用这种导航区的网站还有 Skype。这种设计有点 Amazon 的 “Customers Who Bought This Item Also Bought…” 的意思。只不过 Apple.com 上的是由 Apple 员工人手提供，你可以叫它做 “People Who Read This Page Also Read…” 。