網(wǎng)站建設(shè)經(jīng)驗
website experience
Web設(shè)計師Mohammad Moradi曾經(jīng)發(fā)表博文《An Exploration of Website Redesigns: Tips and Examples》,文中分享了網(wǎng)站改版的十大精彩案例。本文進行了編譯,內(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)站進行改版往往比從草圖開始設(shè)計一個網(wǎng)站更加困難。
我們將通過回顧和評論一些網(wǎng)站(如Yallow、Mazilla和Blinksale)在網(wǎng)站改版上所做的努力來研究一下網(wǎng)站改版這個課題。
為什么要進行網(wǎng)站改版?
設(shè)計,作為更基本的形式之一,是解決問題的行為,注意到這一點很重要。無論它是為了解決耐用性及信號強度問題,同時保持移動電話的完美性,還是對導(dǎo)航進行設(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)品站點進行快速、無縫地迭代,對網(wǎng)站的部分內(nèi)容進行重設(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)容及實用上的缺陷永遠無法通過改善網(wǎng)站的美觀程度來解決。
網(wǎng)站改版案例分享
為了進一步探索這個主題,讓我們來研究幾大網(wǎng)站在改版上所做出的努力。
Yellow Pages
根據(jù)該網(wǎng)站的“關(guān)于”頁面可知,Yellow Pages網(wǎng)站的目標(biāo)之一是“為用戶提供實用工具:用更少的點擊,幫助用戶生活更好的一站式網(wǎng)站。”
因此,該網(wǎng)站改版后的結(jié)果應(yīng)該是增加內(nèi)容的易找性;降低到達所需內(nèi)容的點擊數(shù)。網(wǎng)站改版后達到這個目標(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)點。
老版本
新版本
新設(shè)計使用戶更容易注意到頁面中所呼吁的行動——使用“區(qū)別的藝術(shù)”對它進行突出顯示,方便用戶一眼就看到。通過在左側(cè)放置簡潔的優(yōu)勢列表和價格信息,用戶也可很容易了解該應(yīng)用的賣點——它的價格如何,它區(qū)分于其他競爭者的獨特之處是什么。
我們假設(shè)大部分的用戶習(xí)慣從左到右瀏覽頁面,那在老版本的設(shè)計中,用戶需要在網(wǎng)頁上不斷來回掃描。
一個希望注冊的訪問者,他的邏輯思維一般是先弄明白Web應(yīng)用的用途及價格信息后才會決定去注冊。

Six Apart
Six Apart在改版中改變了頁面的結(jié)構(gòu)布局和顏色。
老版本
新版本
新設(shè)計從視覺和感覺上比老版本更精細,更高雅。在新設(shè)計頭部的搜索框是不錯的新特性。