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

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

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

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

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

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

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

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

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

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

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

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

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

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

● 缺少能顯著提升用戶體驗(yàn)的特性；

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

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

部分內(nèi)容改版

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

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

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

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

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

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

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

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

Yellow Pages

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

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

老版本

新版本

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

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

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

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

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

Blinksale

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

老版本

新版本

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

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

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

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

Six Apart

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

老版本

新版本

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

Plaxo

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

老版本

新版本

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

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

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

ThinkGeek

ThinkGeek新版本是一個(gè)很好的改版實(shí)例。

老版本

新版本

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

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

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

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

Joyent

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

老版本

新版本

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

Mozilla

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

老版本

新版本

有效的功能得以保留，同時(shí)增加了一些新功能，即一個(gè)Email注冊(cè)表單和一個(gè)突出顯示功能內(nèi)容的幻燈片。新的網(wǎng)站布局看起來少了一些雜亂，這主要是因?yàn)樯倭撕芏喑溄雍驮O(shè)計(jì)元素之間的空白區(qū)域。

REI

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

老版本

新版本

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

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

Dave Wilkinson

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

老版本

新版本

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

Etrade

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

老版本

新版本

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

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

結(jié)論

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

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

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

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