Web設(shè)計(jì)師Mohammad Moradi曾經(jīng)發(fā)表博文《An Exploration of Website Redesigns: Tips and Examples》，文中分享了網(wǎng)站改版的十大精彩案例。本文進(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ò)的新特性。