轉(zhuǎn)載藍(lán)藍(lán)設(shè)計(jì)(   www.alimai.net  )是一家專注而深入的設(shè)計(jì)機(jī)構(gòu) ，為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的   BS界面設(shè)計(jì) 、  cs界面設(shè)計(jì) 、  ipad界面設(shè)計(jì)  、  包裝設(shè)計(jì) 、  圖標(biāo)定制 、  用戶體驗(yàn) 、交互設(shè)計(jì)、  網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

來源： http://www.lpued.com/?p=451

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中，            請(qǐng)點(diǎn)這里

原文作者：Dmitry Fadeyev
原文鏈接：Apple vs. Microsoft – A Website Usability Study
譯者：indigo90
中文原文：http://ineu.org.cn/blog/index.php/archives/430

今天我們要對(duì)兩家大公司——蘋果和微軟——的網(wǎng)站做一個(gè)比較。

這兩大巨頭都對(duì)生產(chǎn)尖端產(chǎn)品以及引領(lǐng)軟硬件的發(fā)展感到自豪，但他們的網(wǎng)站又怎么樣呢？如何做出比較？更重要的是，哪一個(gè)網(wǎng)站更好，更實(shí)用呢？

在本文中，我們將從網(wǎng)站可用性的角度，對(duì)這兩家公司的網(wǎng)站做一個(gè)嚴(yán)密的剖析。

在這一比較開始前，我們應(yīng)當(dāng)注意到，這兩家公司的業(yè)務(wù)是圍繞著不同的市場(chǎng)展開的。

微軟的利潤(rùn)基本上來自于企業(yè)用戶，其中包括向計(jì)算機(jī)制造商銷售操作系統(tǒng)許可和向企業(yè)銷售辦公軟件。這并不是說他們不賣東西給個(gè)人用戶——他們賣，他們一樣擁有針對(duì)于個(gè)人用戶的產(chǎn)品線，比如 X-Box，當(dāng)然個(gè)人用戶也會(huì)購(gòu)買 Windows 和 Office。微軟的客戶目標(biāo)是每一個(gè)人，從家用電腦用戶到開發(fā)者及企業(yè)用戶，這從側(cè)面又補(bǔ)充了他們的網(wǎng)站的目的：試圖服務(wù)每個(gè)人。

另一方面，蘋果的業(yè)務(wù)基本針對(duì)個(gè)人用戶，它的大部分利潤(rùn)來源于銷售硬件，比如 iPod 和 Mac。這使得蘋果的目標(biāo)更加明確：推銷，銷售并提供售后服務(wù)。他們不必為賣給制造商許可而操心，因?yàn)樗麄兪俏ㄒ坏闹圃焐?，因此，他們的網(wǎng)站的主要目的就是宣傳產(chǎn)品，擴(kuò)展產(chǎn)品線，并通過在線商店銷售產(chǎn)品。

1.首頁(yè)

首頁(yè)是網(wǎng)站中的第一頁(yè)，最重要的頁(yè)面之一，在多數(shù)情況下，主頁(yè)是唯一打動(dòng)訪問者，并使他們繼續(xù)瀏覽下去的理由。你有幾秒鐘的時(shí)間說服訪問者你的網(wǎng)站對(duì)他們有足夠的價(jià)值，否則的話，他們就會(huì)走開。

蘋果公司的一貫做法是，通過主頁(yè)告訴大家，網(wǎng)站還在正常運(yùn)行著。他們把主頁(yè)當(dāng)做是一個(gè)廣告板，總是展示一個(gè)他們產(chǎn)品的大幅廣告，下面附帶著三個(gè)當(dāng)前同等重要的產(chǎn)品或新聞。如果對(duì)這四個(gè)條目都不感興趣，可以點(diǎn)擊上方的大型導(dǎo)航條，它被分成幾部分來代表蘋果公司的核心產(chǎn)品：Mac，iPod 和 iPhone，其下拉菜單中還有更多的鏈接，比如在線商店和售后支持。除此之外，還有個(gè)搜索欄。

有趣的是，這幅主體廣告相當(dāng)巨大，幾乎覆蓋了整個(gè)頁(yè)面。如果它不能吸引你的注意力，那意味著整個(gè)網(wǎng)站的失敗。幸運(yùn)的是，蘋果通過良好的產(chǎn)品營(yíng)銷知道如何抓住用戶的吸引力，所以，他們沒什么好怕的。

另一個(gè)需要注意的是，其網(wǎng)站簡(jiǎn)單的內(nèi)容。你不會(huì)被側(cè)邊欄，通知或是額外的導(dǎo)航項(xiàng)目而打擾——在頁(yè)面上只有很少的東西，吸引你的注意力，使人輕而易舉地找到下一步的去向。

微軟對(duì)自己的首頁(yè)有著不同的詮釋。首先，他們?cè)陧敳糠胖昧艘粋€(gè)風(fēng)格相似的廣告，目的是抓住人們的目光。這三幅巨大的圖片廣告——能夠通過鼠標(biāo)的滑過來輪流展示，很吸引人的眼球，但這可能會(huì)削弱其他兩個(gè)廣告的效應(yīng)。在頁(yè)面頂端的，是搜索欄和導(dǎo)航條。

在主廣告下面的內(nèi)容就更有趣了，正如我先前所提到的，微軟的商業(yè)運(yùn)作涵蓋了從企業(yè)用戶到個(gè)人用戶的方方面面。這塊區(qū)域展示著微軟不同商業(yè)領(lǐng)域的新聞與重要信息。但是，其內(nèi)容是相當(dāng)枯燥無味的，大量信息充斥在這樣一個(gè)小空間內(nèi)，毫無條理而言。

誠(chéng)然，這些內(nèi)容也被細(xì)分為了幾個(gè)要點(diǎn)，但其字號(hào)很小并缺乏圖片來區(qū)分條目?？傊?，它很難勾起我讀下去的欲望，因?yàn)樗_實(shí)，很沒勁。

2.流動(dòng)性

我所說的流動(dòng)的意思是：該網(wǎng)站的結(jié)構(gòu)布局，能讓人輕松地找到所需的信息嗎？我是否知道接下來應(yīng)該看什么——這個(gè)網(wǎng)站能否讓我更容易的到達(dá)目標(biāo)，或者說我需要在網(wǎng)頁(yè)內(nèi)容中努力尋找我想要的東西嗎？

這是 Apple.com 的 MobileMe 區(qū)塊：

蘋果在網(wǎng)頁(yè)架構(gòu)方面做得不錯(cuò)，在這個(gè)頁(yè)面，首先吸引你的應(yīng)該是右面的圖片，然后是左邊的大標(biāo)題?？戳舜髽?biāo)題后，可以繼續(xù)閱讀下面的推薦廣告，它們能夠輕松地引領(lǐng)人們?nèi)c(diǎn)擊免費(fèi)試用的注冊(cè)按鈕。每一項(xiàng)廣告下面都以鏈接到詳細(xì)內(nèi)容頁(yè)面的“Learn more”文本結(jié)束，這使得網(wǎng)頁(yè)沒有死角，并讓訪問者瀏覽下去。

微軟似乎努力過卻收效甚微。這是他們的 SharePoint 區(qū)塊：

是的，這兒是有個(gè)吸引目光的焦點(diǎn)——頂端長(zhǎng)長(zhǎng)的引述和一張服務(wù)器的圖片——但是接下來呢？下面所有內(nèi)容都極為單調(diào)，尤其是那個(gè)有 8 個(gè)鏈接的“Learn More”區(qū)塊。干巴巴的介紹讓訪問者缺乏瀏覽的欲望。有些微軟站點(diǎn)在布局上做的稍好些，能指引用戶的吸引力流動(dòng)，但它們都有一個(gè)通?。簝?nèi)容太多。

提供給用戶的多種選擇，增加了用戶的負(fù)擔(dān)——他們不得不思考自己想要什么，并處理更多的信息。通過減少選擇余地，蘋果引領(lǐng)用戶進(jìn)入了一個(gè)經(jīng)過精心設(shè)計(jì)的，提供了良好用戶體驗(yàn)的通道。

3.導(dǎo)航條

蘋果的網(wǎng)站上方有一個(gè)大型的導(dǎo)航條，這使網(wǎng)站的每個(gè)部分都能夠保持一致?？晒┻x擇的部分展示了蘋果的主線產(chǎn)品，同樣也有包括售后支持和在線商店在內(nèi)的重要內(nèi)容。導(dǎo)航條同樣集成了搜索功能，同時(shí)還進(jìn)行了品牌展示，比如主頁(yè)按鈕顯示的是蘋果的 Logo 而不是簡(jiǎn)單的“Home”標(biāo)簽。任何額外的二級(jí)導(dǎo)航都位于個(gè)別頁(yè)面，而且都在網(wǎng)頁(yè)的內(nèi)文中，也許是在側(cè)邊欄，也許是個(gè)頂端的水平條。

微軟的主頁(yè)有一個(gè)類似的導(dǎo)航條，但它在網(wǎng)站中并不是始終一致的。事實(shí)上，所有的子頁(yè)面都有各自不同的導(dǎo)航條——不論在樣式上還是內(nèi)容上。主頁(yè)的導(dǎo)航條幾乎是微軟網(wǎng)站各個(gè)部分的網(wǎng)站地圖。在包括主頁(yè)在內(nèi)的許多導(dǎo)航條上，微軟都使用了下拉菜單——與蘋果不同，蘋果不光使用下拉菜單——而且是巨大的下拉菜單。有時(shí)候，下拉菜單竟然還有一個(gè)滾動(dòng)條！（Firefox 中）

這是好是壞？在最近的一篇文章中，Jakob Nielsen——有名的可用性大師——寫到，巨型的下拉菜單還是可行的。說它可行是因?yàn)樗刑峁┝硕喾N選項(xiàng)，使人更容易地檢索并獲取所需。通過它能夠達(dá)成某個(gè)既定目標(biāo)，比如將只需要顯示一次的命令集中放在一起。

微軟使用大型下拉菜單也有一定的道理，但他們做的有點(diǎn)兒過了。有些不同的選項(xiàng)都指向了同一個(gè)內(nèi)容，像‘Office’下拉項(xiàng)和‘All Products’下拉項(xiàng)中的‘Office’選項(xiàng)。大型下拉菜單還遮擋了其下面的頁(yè)面內(nèi)容，如果鼠標(biāo)不小心滑過了菜單，還要刻意移開鼠標(biāo)以繼續(xù)瀏覽——同時(shí)還要小心謹(jǐn)慎，不把鼠標(biāo)移到其他條目上。

大的下拉菜單同樣包含了不少內(nèi)容——有時(shí)一次顯示大約 13 個(gè)條目，這使得分辨選項(xiàng)更加困難。同樣，網(wǎng)站各區(qū)塊導(dǎo)航菜單的不一致也給頁(yè)面跳轉(zhuǎn)制造了障礙。像從 Office 網(wǎng)站跳轉(zhuǎn)到 XBox 網(wǎng)站。

4.可讀性

因?yàn)榫W(wǎng)站中的主要內(nèi)容都是文字，所以確保每部分內(nèi)容都清晰易讀是尤其重要的。下面是改進(jìn)網(wǎng)站可讀性所需考慮的要點(diǎn)：

使文本足夠大以便閱讀；

確保文字與背景有足夠的對(duì)比；

在文字周圍提供足夠的留白以避免其他圖片和內(nèi)容干擾讀者；

提供充足的大標(biāo)題和高亮/粗體字，以便讀者快速獲取關(guān)鍵信息；

為個(gè)別文字區(qū)域添加圖片和圖標(biāo)來強(qiáng)調(diào)內(nèi)容，如產(chǎn)品或功能描述；

保持文字簡(jiǎn)潔并突出重點(diǎn)；

現(xiàn)在讓我們來看看蘋果和微軟在這方面做得如何。這是 Apple.com 上一個(gè)典型的頁(yè)面：

蘋果使所有東西都輕松易讀。其文字雖然很小，但都不至于太小使閱讀困難。標(biāo)題很大很突出，使人很快就能找到這一部分的要點(diǎn)。蘋果還大量地運(yùn)用留白以區(qū)分每一部分，并添加圖片提升每段文字的趣味性。

這是 Microsoft.com 上的一個(gè)典型頁(yè)面：

它遵循了可用性設(shè)計(jì)的通常準(zhǔn)則，把大塊的東西分割成容易理解的小段文字。其頁(yè)面上的更多內(nèi)容和對(duì)標(biāo)題及高亮文字的多種不同處理方式，使它看起來要比蘋果的網(wǎng)站忙得多。

頁(yè)面上的過多樣式導(dǎo)致了視覺的混亂，各種不同的顏色和粗體字吸引著人們的注意力，在這種情況下，頁(yè)面需要簡(jiǎn)單化以使訪問者更易閱讀。這是微軟的另一個(gè)網(wǎng)頁(yè)，微軟安全中心：

頁(yè)面上的文字過小而難以閱讀，而且它需要更多的留白來把文本分離開來。再來看看 Apple.com 上一個(gè)繁忙的頁(yè)面：

這是蘋果在線商店，到處都有大量的商品信息和分類鏈接。字體小得恰到好處以容納更多內(nèi)容，當(dāng)然，留白的良好運(yùn)用仍然確保了頁(yè)面的可用性。

5.搜索

蘋果網(wǎng)站的搜索區(qū)域集成在導(dǎo)航菜單里。當(dāng)鍵入內(nèi)容的時(shí)候，會(huì)有使用 Ajax 實(shí)現(xiàn)的實(shí)時(shí)搜索結(jié)果以小方塊的形式彈出來。這個(gè)東西非常棒——完全沒有延遲，結(jié)果被組織成幾個(gè)分類并且相當(dāng)迅速，通常是在輸入完查詢語(yǔ)句之前，這是它的樣子：

如果想查看更多結(jié)果，可以在完成輸入之后敲擊回車鍵，這樣標(biāo)準(zhǔn)的搜索結(jié)果頁(yè)面就會(huì)顯現(xiàn)出來。它非常簡(jiǎn)潔，同樣搜索結(jié)果也有組織地按分類排列。還可以通過分類進(jìn)一步探究搜索結(jié)果，還有右側(cè)可選的菜單。這些對(duì)尋找他們的產(chǎn)品很有幫助。

微軟有一個(gè)更熟悉的搜索結(jié)果頁(yè)，看起來很像是 Google（或當(dāng)前其他搜索引擎）。它使用了微軟自家的 LiveSearch 核心，很善于發(fā)掘人們所要尋找的并展示出來。搜索結(jié)果是一個(gè)大大的列表，標(biāo)榜著微軟的商業(yè)地位，它有許多子頁(yè)面和不同的搜索內(nèi)容。其功能性很強(qiáng)，但外觀和感覺卻與其他頁(yè)面不同，好像是在瀏覽另一個(gè)網(wǎng)站。

6.美感

蘋果的網(wǎng)站美學(xué)反映出了他們的產(chǎn)品線。具有鋁質(zhì)感的導(dǎo)航欄有著柔和過渡的文字。此外，還有大量的思考和簡(jiǎn)約的設(shè)計(jì)元素。蘋果公司一直致力于統(tǒng)一其整個(gè)產(chǎn)品線的界面外觀和風(fēng)格，從硬件到軟件，其網(wǎng)站當(dāng)然也不例外。

美感與可用性有什么關(guān)系嗎？當(dāng)然有。研究表明，人們認(rèn)為，美觀的界面更好用。吸引人的界面給用戶留下更好的第一印象，甚至?xí)層脩舾軌蛉萑倘秉c(diǎn)。微軟在美觀性上做得如何呢？這是 Internet Explorer 8 的頁(yè)面：

這個(gè)頁(yè)面采用了有著淡藍(lán)色云彩的微軟主題，很顯然這是一個(gè)關(guān)于 Internet Explorer 或是 Windows 的網(wǎng)頁(yè)。其外觀和感覺都很一般，沒有充分的體現(xiàn)出它自己的不同，也沒有建立出一個(gè)統(tǒng)一的品牌形象。這里是另一個(gè)頁(yè)面，下載中心：

這又是完全不同的另一種設(shè)計(jì)，盡管背景同樣是淡藍(lán)色的。如果頁(yè)面上沒有標(biāo)題，你能知道這個(gè)是微軟的網(wǎng)頁(yè)嗎？大概不能吧。總的來說其設(shè)計(jì)還是相當(dāng)不錯(cuò)的，但這遠(yuǎn)遠(yuǎn)不夠，還是有許多前后不一致和欠雕琢的地方，這方面，蘋果仍然領(lǐng)先。

7.一致性

一致性非常重要，你可以以此為基礎(chǔ)建立使用模式。這意味著如果你的網(wǎng)站有一個(gè)一致的界面貫穿始終，訪問者就會(huì)迅速了解網(wǎng)站的運(yùn)行模式，并使用這種方式瀏覽每一個(gè)頁(yè)面。

蘋果在保持頁(yè)面一致性方面也做得相當(dāng)不錯(cuò)，其各個(gè)產(chǎn)品頁(yè)面都具有相似的美感與相同的架構(gòu)。整個(gè)站點(diǎn)的外觀與風(fēng)格始終如一，每一個(gè)頁(yè)面都有著相同的導(dǎo)航條。這意味著整個(gè)用戶體驗(yàn)都是非常連貫統(tǒng)一的——你知道你正在瀏覽的是同一個(gè)網(wǎng)站。

這是微軟 Azure 平臺(tái)的網(wǎng)頁(yè)：

如果拿掉 Logo 的話，你還能認(rèn)得出來這是微軟家的東西嗎？微軟每一個(gè)網(wǎng)站各自的圖形，樣式和顏色集使微軟沒能夠建立一個(gè)統(tǒng)一的網(wǎng)絡(luò)品牌形象。微軟的主要問題在于，Microsoft.com 上的每個(gè)不同部分都有自己的外觀與風(fēng)格，即便是導(dǎo)航條。微軟的在線商店，Office 站點(diǎn)與安全中心就像是三個(gè)不同的網(wǎng)站。

更糟糕的是，其網(wǎng)站的導(dǎo)航條會(huì)消失，這意味著訪問者不得不后退到主頁(yè)或進(jìn)入網(wǎng)站地圖才能夠?yàn)g覽其他站點(diǎn)。它就像是托管在同一域名下的生態(tài)系統(tǒng)，不能像蘋果的網(wǎng)站一樣從一致性建設(shè)中獲益。其品牌形象也極其分散，難以定義一個(gè)完整的微軟網(wǎng)站。

結(jié)論

哪一個(gè)網(wǎng)站是贏家？?jī)H僅考慮可用性的話，蘋果是出類拔萃的。他們的主頁(yè)設(shè)計(jì)得更好，選項(xiàng)更少，減少了用戶的思考。他們的每個(gè)頁(yè)面都有一個(gè)相同的導(dǎo)航條，使用了大量的留白和子標(biāo)題來增加可讀性。他們保持頁(yè)面的簡(jiǎn)潔性，沒有過多的使用文字處理效果。蘋果的網(wǎng)站通常對(duì)用戶友好，且為查看蘋果產(chǎn)品的顧客提供了更加的體驗(yàn)。

話雖如此，蘋果的網(wǎng)站在規(guī)模上要比微軟網(wǎng)站小得多。與蘋果不同，微軟在 Microsoft.com 品牌下許多不同的站點(diǎn)和區(qū)塊，創(chuàng)造了一個(gè)子網(wǎng)站的完整生態(tài)系統(tǒng)。每個(gè)站點(diǎn)都充斥著大量的信息和 LiveSearch 核心的搜索。微軟網(wǎng)站的最大問題就是一致性。

微軟網(wǎng)站沒有一個(gè)一致，連貫，統(tǒng)一的品牌形象。每個(gè)區(qū)域看起來都不盡相同。沒有個(gè)統(tǒng)一的導(dǎo)航，并且缺乏微軟的可視化標(biāo)識(shí)。而蘋果網(wǎng)站中所展示的反映其產(chǎn)品理念的獨(dú)特美感，也使得蘋果建立了一個(gè)強(qiáng)大的品牌效應(yīng)。

綜上，在我看來，蘋果顯然是勝者。

 

原作者 Dmitry Fadeyev 運(yùn)營(yíng)著一個(gè)研究可用性的博客，名叫 Usability Post。

英文原文 http://www.webdesignerdepot.com/2009/05/apple-vs-microsoft-a-website-usability-study/