網(wǎng)站改版案例分享:為什么要進(jìn)行網(wǎng)站改版

申請免費(fèi)試用、咨詢電話：400-8352-114

前段時間，我們針對網(wǎng)站改版的注意事項及改版方法進(jìn)行了探討，并發(fā)表了文章《不要盲目進(jìn)行網(wǎng)站改版 需遵循幾大原則》、《如何恰當(dāng)?shù)剡M(jìn)行網(wǎng)站改版？》，那么有哪些網(wǎng)站改版案例值得我們借鑒與學(xué)習(xí)呢？Web設(shè)計師Mohammad Moradi曾經(jīng)發(fā)表博文《An Exploration of Website Redesigns: Tips and Examples》，文中分享了網(wǎng)站改版的十大精彩案例。CSDN對該文進(jìn)行了編譯，內(nèi)容如下：

無論對網(wǎng)站，還是對用戶來說，網(wǎng)站改版看起來似乎是一個令人興奮且十分有趣的項目。創(chuàng)建一個新設(shè)計的同時繼續(xù)保持網(wǎng)站原有的品牌與內(nèi)容，也是相當(dāng)刺激與富有挑戰(zhàn)性的。這種類型的挑戰(zhàn)對于大部分Web設(shè)計師來說很具有激勵作用。

盡管如此，但網(wǎng)站改版在計劃和實施上都較困難。它具有一些限制，而這些是在新創(chuàng)建網(wǎng)站的過程中通常不會存在。我甚至認(rèn)為，對網(wǎng)站進(jìn)行改版往往比從草圖開始設(shè)計一個網(wǎng)站更加困難。

我們將通過回顧和評論一些網(wǎng)站（如Yallow、Mazilla和Blinksale）在網(wǎng)站改版上所做的努力來研究一下網(wǎng)站改版這個課題。

為什么要進(jìn)行網(wǎng)站改版？

設(shè)計，作為最基本的形式之一，是解決問題的行為，注意到這一點(diǎn)很重要。無論它是為了解決耐用性及信號強(qiáng)度問題，同時保持移動電話的完美性，還是對導(dǎo)航進(jìn)行設(shè)計，以方便用戶更易發(fā)現(xiàn)內(nèi)容，設(shè)計都應(yīng)該有一定的目的性。

如果僅僅從美學(xué)出發(fā)，而考慮重新設(shè)計一個已存在的網(wǎng)站，我認(rèn)為改版的能動性是不夠的。

這里列出了一些網(wǎng)站改版的原因：

● 網(wǎng)站對用戶不友好；

● 網(wǎng)站改版可以提高網(wǎng)站的收益；

● 一些客觀的信息（比如數(shù)據(jù)分析所收集到的數(shù)據(jù)），清晰地表明設(shè)計出現(xiàn)了問題；

● 過時的網(wǎng)站設(shè)計，損害了用戶體驗（如基于表格的布局、動態(tài)的Gif背景、過時的交互方式）；

● 缺少能顯著提升用戶體驗的特性；

● 信息架構(gòu)有缺陷（導(dǎo)航、分類等）；

● 與現(xiàn)有的企業(yè)品牌不貼合。

部分內(nèi)容改版

網(wǎng)站真的需要一次徹底全面的設(shè)計嗎？現(xiàn)存的問題是否能通過對部分內(nèi)容的重新設(shè)計或重組來解決呢？我們可以對產(chǎn)品站點(diǎn)進(jìn)行快速、無縫地迭代，對網(wǎng)站的部分內(nèi)容進(jìn)行重設(shè)計就足夠了。

例如，電子商務(wù)網(wǎng)站的結(jié)帳表單讓用戶體驗變得很笨重，我們可以專注于那些問題組件，更高效地利用資源，而不必把我們的精力分散地花在處理所有事務(wù)之上。

改版思維：集中精力解決問題

一個網(wǎng)站的成功，最重要的元素是它的內(nèi)容和目標(biāo)。無論是為人們提供交流的網(wǎng)站（如Craigslist），還是為人們提供信息的網(wǎng)站（如Wikipedia），成功都是可測量的，這一切都是基于網(wǎng)站的實用性而非美觀程度。

網(wǎng)站改版必須與網(wǎng)站的目標(biāo)相匹配。設(shè)計必須支持網(wǎng)站的目標(biāo)。

網(wǎng)站在內(nèi)容及實用上的缺陷永遠(yuǎn)無法通過改善網(wǎng)站的美觀程度來解決。

網(wǎng)站改版案例分享

為了進(jìn)一步探索這個主題，讓我們來研究幾大網(wǎng)站在改版上所做出的努力。

Yellow Pages

根據(jù)該網(wǎng)站的“關(guān)于”頁面可知，Yellow Pages網(wǎng)站的目標(biāo)之一是“為用戶提供實用工具：用最少的點(diǎn)擊，幫助用戶生活更好的一站式網(wǎng)站。”

因此，該網(wǎng)站改版后的結(jié)果應(yīng)該是增加內(nèi)容的易找性；降低到達(dá)所需內(nèi)容的點(diǎn)擊數(shù)。網(wǎng)站改版后達(dá)到這個目標(biāo)了嗎？讓我們看看。

老版本

新版本

改版后的網(wǎng)站與之前的版本有很多相似之處。它保留了很多原始色彩（最顯著是黃色和黑色）。

在新設(shè)計中，通過定位，基于用戶位置的相關(guān)信息填充于首頁。這大大方便了用戶尋找他們感興趣的地理位置。

除此之外，新設(shè)計在美觀上也有了顯著提高。一些可能有用的老功能都被去掉了。

例如，“More Tools”標(biāo)簽被移動到一個不太容易訪問到的地方。用來幫助新老用戶提高搜索查詢的“search tips”鏈接被移除了。

首頁應(yīng)用了很多圖片，雖然這樣可以使網(wǎng)頁更加生動，但卻減低了客戶端的性能。如果這些并不能提升用戶體驗，無法支持網(wǎng)站的目標(biāo)，那么這次改版是非常表面的。

Blinksale

Blinksale，作為一個Web應(yīng)用，希望擁有一個可以提高轉(zhuǎn)化率的網(wǎng)站布局，以便新用戶更快速地了解到該工具如何工作，并能快速地發(fā)現(xiàn)注冊入口。從這個方面來說，Blinksale新的設(shè)計相比老版本，有一些優(yōu)點(diǎn)。

老版本

新版本

新設(shè)計使用戶更容易注意到頁面中所呼吁的行動——使用“區(qū)別的藝術(shù)”對它進(jìn)行突出顯示，方便用戶一眼就看到。通過在左側(cè)放置簡潔的優(yōu)勢列表和價格信息，用戶也可很容易了解該應(yīng)用的賣點(diǎn)——它的價格如何，它區(qū)分于其他競爭者的獨(dú)特之處是什么。

我們假設(shè)大部分的用戶習(xí)慣從左到右瀏覽頁面，那在老版本的設(shè)計中，用戶需要在網(wǎng)頁上不斷來回掃描。

一個希望注冊的訪問者，他的邏輯思維一般是先弄明白Web應(yīng)用的用途及價格信息后才會決定去注冊。

老版的設(shè)計布局顛倒了這一理想的眼睛掃描方向。

Six Apart

Six Apart在改版中改變了頁面的結(jié)構(gòu)布局和顏色。

老版本

新版本

新設(shè)計從視覺和感覺上比老版本更精細(xì)，更高雅。在新設(shè)計頭部的搜索框是不錯的新特性。

Plaxo

該例中，我們能看到網(wǎng)站改版所帶來積極和消極（潛在的）的結(jié)果。

老版本

新版本

在老版本中，Plaxo有一個顯著的水平導(dǎo)航條和一個精簡的首頁。

老版本中的導(dǎo)航菜單被省略了，這意味著習(xí)慣了該功能的老用戶現(xiàn)在不得不重新學(xué)習(xí)如何導(dǎo)航該網(wǎng)站。新設(shè)計加長了頁面的長度，很多用戶需要向下滾動頁面才能訪問到所需內(nèi)容。

盡管如此，新設(shè)計面向新的用戶提供了清晰的“行動呼吁”。它清晰的布局突出了重要的網(wǎng)站功能。它提供了更好的內(nèi)容，向那些潛在的用戶對關(guān)于本應(yīng)用的很多問題提供了答案。

ThinkGeek

ThinkGeek新版本是一個很好的改版實例。

老版本

新版本

老版本中一些有效的組件得到了保留和優(yōu)化。例如，左側(cè)縱向的導(dǎo)航菜單仍保留在原位置，只是在版式上做了重新設(shè)計，使它更易閱讀，在視覺上更吸引人。

搜索框進(jìn)行了重定位，用戶可以更方便地搜索某一特定產(chǎn)品。它與縱向?qū)Ш讲藛芜M(jìn)行了恰當(dāng)?shù)慕M合，彼此之間很好地進(jìn)行了互補(bǔ)。

而且，還增加了一些新功能，如水平導(dǎo)航條、購物車狀態(tài)信息。

該設(shè)計不僅使網(wǎng)站更加漂亮，還完善了頁面的布局，增添了有用的功能。

Joyent

在我首次看到Joyent的老版本設(shè)計時，我并沒有搞清該公司能提供什么，直到我閱讀了網(wǎng)站的文字信息。老版本設(shè)計的主題——雖然獨(dú)特且吸引人——似乎并不能清晰地支撐和表明該公司的職能。

老版本

新版本

經(jīng)過更新后的設(shè)計很不錯。它保持了原有的導(dǎo)航。新設(shè)計在美學(xué)上更清新，更吸引他們的典型用戶：IT管理者、CTO、服務(wù)器管理員等。新設(shè)計添加了有用的組件，如公司的聯(lián)系信息（被顯著地顯示在網(wǎng)站的頭部）、側(cè)欄上的“行動呼吁”按鈕及頁面底部的導(dǎo)航（引導(dǎo)現(xiàn)有用戶和潛在用戶進(jìn)入內(nèi)部頁面）。

Mozilla

Mozilla網(wǎng)站似乎總能看見一些顯著的設(shè)計。Mozilla的改版，運(yùn)用了創(chuàng)新的設(shè)計技術(shù)，另外增加了很多有用的功能。

老版本

新版本

有效的功能得以保留，同時增加了一些新功能，即一個Email注冊表單和一個突出顯示功能內(nèi)容的幻燈片。新的網(wǎng)站布局看起來少了一些雜亂，這主要是因為少了很多超鏈接和設(shè)計元素之間的空白區(qū)域。

REI

REI是一個很精彩的案例，改版中使用了很多新技術(shù)和技巧。

老版本

新版本

主要的導(dǎo)航主題和信息架構(gòu)基本沒什么變化。作為一個電子商務(wù)網(wǎng)站，改變某些忠誠用戶已經(jīng)習(xí)慣了的東西，會使他們不安，這意味著像導(dǎo)航之類的組件在網(wǎng)站改版中應(yīng)該特別小心。

采用圖片輪播及多層次的水平導(dǎo)航條是該新網(wǎng)站設(shè)計中的兩大主要改變之處。

Dave Wilkinson

這是一個Web開發(fā)者的簡歷式網(wǎng)站。網(wǎng)站開發(fā)者和設(shè)計者因能快速改版自己的網(wǎng)站，反應(yīng)出當(dāng)前最流行的設(shè)計趨勢而聞名。

老版本

新版本

新老版本之間的差別很大。幾乎所有的東西都被改變了。Logo、標(biāo)語、顏色、設(shè)計風(fēng)格、布局、網(wǎng)站的個性、信息密度——都有了提升。

Etrade

Etrade的改版更像是一次內(nèi)容重組。

老版本

新版本

布局中大部分的組件都沒有改變，即便有，修改也很微小。

但，網(wǎng)站中一些設(shè)計元素的位置卻做了改變。同時，左手側(cè)的縱向?qū)Ш讲藛伪粍h除了，鏈接被安排在其它合適的位置、水平導(dǎo)航條上，降低了可能帶來的混亂——不必再為鏈接放在哪個菜單上而憂慮，同時釋放了一些空間。

結(jié)論

對網(wǎng)站進(jìn)行改版著實是一個誘人的主意。在為此努力之前，我們必須小心規(guī)劃，考慮好一些重要的因素。

首要的，我們應(yīng)該確定我們是否必須要進(jìn)行網(wǎng)站改版。網(wǎng)站改版并不只是說改變網(wǎng)站的外貌，還要增加一些缺失的功能、彌補(bǔ)設(shè)計的不足、重新組織信息架構(gòu)、移除不必要的組件，以使用戶界面更加清晰、功能更加強(qiáng)大。（編譯：陳秋歌）

譯者注：本博文發(fā)表于2011年6月20日，到目前為止部分網(wǎng)站又進(jìn)行了相應(yīng)的改版。

原文地址：An Exploration of Website Redesigns: Tips and Examples