轉(zhuǎn)載藍(lán)藍(lán)設(shè)計(jì)(   sillybuy.com  )是一家專(zhuān)注而深入的設(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ù)

來(lái)源： 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ì)兩家大公司——蘋(píng)果和微軟——的網(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)密的剖析。

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

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

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

1.首頁(yè)

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

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

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

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

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

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

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

2.流動(dòng)性

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

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

蘋(píng)果在網(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è)沒(méi)有死角，并讓訪問(wèn)者瀏覽下去。

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

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

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

3.導(dǎo)航條

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

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

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

微軟使用大型下拉菜單也有一定的道理，但他們做的有點(diǎn)兒過(guò)了。有些不同的選項(xiàng)都指向了同一個(gè)內(nèi)容，像‘Office’下拉項(xiàng)和‘All Products’下拉項(xiàng)中的‘Office’選項(xiàng)。大型下拉菜單還遮擋了其下面的頁(yè)面內(nèi)容，如果鼠標(biāo)不小心滑過(guò)了菜單，還要刻意移開(kāi)鼠標(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ì)比；

在文字周?chē)峁┳銐虻牧舭滓员苊馄渌麍D片和內(nèi)容干擾讀者；

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

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

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

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

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

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

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

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

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

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

5.搜索

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

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

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

6.美感

蘋(píng)果的網(wǎng)站美學(xué)反映出了他們的產(chǎn)品線。具有鋁質(zhì)感的導(dǎo)航欄有著柔和過(guò)渡的文字。此外，還有大量的思考和簡(jiǎn)約的設(shè)計(jì)元素。蘋(píng)果公司一直致力于統(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è)。其外觀和感覺(jué)都很一般，沒(méi)有充分的體現(xiàn)出它自己的不同，也沒(méi)有建立出一個(gè)統(tǒng)一的品牌形象。這里是另一個(gè)頁(yè)面，下載中心：

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

7.一致性

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

蘋(píng)果在保持頁(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)得出來(lái)這是微軟家的東西嗎？微軟每一個(gè)網(wǎng)站各自的圖形，樣式和顏色集使微軟沒(méi)能夠建立一個(gè)統(tǒng)一的網(wǎng)絡(luò)品牌形象。微軟的主要問(wèn)題在于，Microsoft.com 上的每個(gè)不同部分都有自己的外觀與風(fēng)格，即便是導(dǎo)航條。微軟的在線商店，Office 站點(diǎn)與安全中心就像是三個(gè)不同的網(wǎng)站。

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

結(jié)論

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

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

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

綜上，在我看來(lái)，蘋(píng)果顯然是勝者。

 

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

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