和重新設(shè)計網(wǎng)站不一樣，網(wǎng)站重設(shè)計的項目通常都會更麻煩一些。由于網(wǎng)站本身是企業(yè)、產(chǎn)品和內(nèi)容承載的重要平臺，通常一個網(wǎng)站設(shè)計完成之后會使用好幾年，但是隨著時間推移，它需要基于逐漸變化的需求而進行重設(shè)計。

網(wǎng)站重設(shè)計和調(diào)整有什么區(qū)別？

有些人認為不應(yīng)該對網(wǎng)站進行重設(shè)計，那樣成本太高昂了，只需要做適度調(diào)整即可。乍一看這么說也沒錯，網(wǎng)站本身只是內(nèi)容的載體，只需要根據(jù)企業(yè)和產(chǎn)品本身的變化調(diào)整即可。不過，當需求和變化達到一定程度的時候，完整的重設(shè)計能夠讓網(wǎng)站本身更加統(tǒng)一一致，也能和產(chǎn)品、企業(yè)和業(yè)務(wù)進行更加深度的耦合。

當我們在進行重設(shè)計的時候，會基于企業(yè)的業(yè)務(wù)、營銷等目標，從原型層面上入手，進行重新設(shè)計。這樣做一方面目標明確，另一方面也符合流程，這也符合 Justinmind 的工作方式。

小貼士：如何重新設(shè)計網(wǎng)站

在開始進行重設(shè)計之前，首先要制定相對明確的目標。適當?shù)膯栴}會給你帶來你想要的答案：

• 我們想通過重設(shè)計來實現(xiàn)什么目標？
• 我們的業(yè)務(wù)和營銷目標是什么？
• 我們的目標用戶都是什么人？
• 我們想要如何改善網(wǎng)站上的體驗？

在這4個問題的框架下來進行重設(shè)計，能夠讓項目向著正確的方向推進。

案例解析

今天，我們挑選了5個網(wǎng)站重設(shè)計案例，通過不同案例的處理方法，以及前后對比，來同你分享網(wǎng)站重設(shè)計的經(jīng)驗。

1. Rev.com

Rev 為用戶提供在線轉(zhuǎn)錄服務(wù)，網(wǎng)站的使用時間已經(jīng)不短了，他們希望通過重設(shè)計，讓網(wǎng)站在視覺和體驗上更加貼近當下，具備更加現(xiàn)代、專業(yè)的視覺和外觀。

重設(shè)計之前

舊有的網(wǎng)站設(shè)計風(fēng)格看起來有點過時，最主要的 UI元素是中間的輪播圖，公司的三個價值主張則通過三張輪播圖分別呈現(xiàn)：「速度、質(zhì)量和服務(wù)」。圖中使用了上世紀50年代的時候所流行的復(fù)古插畫來呈現(xiàn)產(chǎn)品特性，借用火箭、飛船和電話撥號盤更強勁的隱喻，來強調(diào)產(chǎn)品質(zhì)量。

在輪播圖上方則是網(wǎng)站的主要導(dǎo)航，并且分別導(dǎo)向網(wǎng)站的不同子頁面，每個頁面中也大都使用了風(fēng)格類似的復(fù)古插畫。首屏的輪播圖和子頁面中都包含了產(chǎn)品服務(wù)更詳細的信息，產(chǎn)品定價以及清晰醒目的 CTA按鈕，引導(dǎo)用戶去點擊。

輪播圖本身所存在的問題在于，用戶一次只能看一張，但是耐心有限的用戶，很難堅持都看完，經(jīng)常會跳過其中的內(nèi)容。如果采用更加簡明的價值主張，只使用一張圖即可。另外導(dǎo)航和輪播圖也靠的太近。從趨勢上來說，視差和動效會讓用戶更加舒適，視覺愉悅感也更強。

視覺風(fēng)格上，目前更流行的是扁平、自然有機的圖形，超大而引人矚目的首屏設(shè)計，或者是視頻內(nèi)容。

重設(shè)計之后：

Rev.com 的新版完全拋棄了輪播圖和復(fù)古的設(shè)計，替換以現(xiàn)代、清爽、干凈的視覺，企業(yè)的價值主張也更加精簡直觀。下面包含3個不同的卡片，分別詳細闡述服務(wù)本身一直就有的完整的3個價值主張，每個卡片上都有詳細的解釋和清晰的行為召喚用語。更重要的是，視覺上，三個卡片足夠突出，可以吸引用戶，鼓勵點擊。

向下滾動可以看到更多改變。頁面中使用了一些公司客戶的案例來支撐這些價值主張，并且后續(xù)有對服務(wù)更詳細的描述。視覺上，每種服務(wù)都用不同的色彩進行區(qū)分。服務(wù)條款則是可點擊的，會讓人覺得可信度更高。

從用戶體驗的角度上來說，重設(shè)計讓頁面更加輕盈現(xiàn)代，導(dǎo)航更加清晰，而產(chǎn)品特征則借助色彩得到了強化。而項目經(jīng)理 Barron Caster 在之后公布了數(shù)據(jù)，新的設(shè)計讓 Rev.com 的網(wǎng)站轉(zhuǎn)化率提升了 18%。

2. Panos Pictures

Panos Pictures 是一個拍攝紀錄片和電影的代理機構(gòu)，他們的網(wǎng)站重設(shè)計需求不僅僅是調(diào)整整體的視覺，而且還需要通過設(shè)計來修改底層架構(gòu)。

重設(shè)計之前：

Panos 之前的網(wǎng)站比較簡陋。老版本的網(wǎng)站并不是響應(yīng)式的網(wǎng)站，對于移動端設(shè)備不夠友好，缺少 JavaScript 的支持，導(dǎo)航選項也需要完善。首頁頂部是一個導(dǎo)航菜單和搜索框，下面是超大的首屏圖片，并在下方附帶兩三個比較小的圖片。每個圖片都會鏈接到相應(yīng)的圖片商店。

鼠標光標懸停在圖片上，能夠顯示相關(guān)的圖片信息，用戶可以通過點擊瀏覽照片背后的故事詳情。頂部導(dǎo)航使用的是老式的嵌套式的導(dǎo)航菜單，但是實際上還有一些圖片超出了導(dǎo)航的瀏覽范圍，并且用戶無法通過清晰的路徑來方便用戶關(guān)注更多的信息。

重設(shè)計之后：

經(jīng)過重新設(shè)計的 Panos 的網(wǎng)站讓用戶更加「熟悉」，體驗上和現(xiàn)代設(shè)計更加貼近，而內(nèi)容屬性和之前保持一致——畢竟是一個提供圖片的攝影機構(gòu)，他們做的事情始終還是拍照。但是，在內(nèi)容的呈現(xiàn)方式和細節(jié)上，已經(jīng)發(fā)生了改變。

首先，網(wǎng)站已經(jīng)完全是響應(yīng)式的了，網(wǎng)頁的內(nèi)容和元素會自適應(yīng)，頂部導(dǎo)航欄由于功能性相對比較弱，已經(jīng)被收納到漢堡菜單當中了，用戶點擊的時候會以一個彈出圖層的形式呈現(xiàn)。頁面頂端僅保留了原本的品牌LOGO 和搜索框。

而內(nèi)容區(qū)域則依然以圖片呈現(xiàn)為主。每張圖片都帶有相應(yīng)的標題、簡短的介紹和點擊鏈接。而用作首屏的首圖在尺寸上則比首屏尺寸要短一點，確保底部更多的信息能夠被用戶注意到，引導(dǎo)用戶向下瀏覽。在篩選內(nèi)容的時候，加載的時候會觸發(fā)動人的動畫效果。

總之，Panos 的重設(shè)計在保留品牌精髓的情況下，提供了更好的用戶體驗。

3. Mailchimp

Mailchimp 是著名的郵件服務(wù)供應(yīng)商。作為今年關(guān)注度最高的重設(shè)計案例，Mailchimp 的網(wǎng)站重設(shè)計幾乎相當于是一次品牌重塑，網(wǎng)站不僅擁有了更加時髦的新襯線字體，而且重新調(diào)整了 LOGO、配色包括布局，以及更細致的功能。

重設(shè)計之前：

Mailchimp 的網(wǎng)站在情感和游戲化設(shè)計上，已經(jīng)是業(yè)內(nèi)最值得學(xué)習(xí)的了。網(wǎng)站首頁的布局設(shè)計很簡單，頂部是菜單導(dǎo)航，然后是價值主張的內(nèi)容和CTA按鈕，下面是更加詳細的功能描述和更多的CTA按鈕，而首屏的大圖則直觀而清晰地將這款工具應(yīng)有的感覺傳遞給用戶。網(wǎng)站有著良好的結(jié)構(gòu)，但是它并非無法改進。

重設(shè)計之后：

Mailchimp 經(jīng)過重設(shè)計之后，看起來完全不同，但是依然讓人感覺得到之前的影子。明亮的黃色是這次重設(shè)計所加入進來的最醒目的元素，品牌和產(chǎn)品的價值主張內(nèi)容則使用對比強烈的黑色襯線字體來呈現(xiàn)，天馬行空的插畫則增加了首屏的視覺張力。

MailChimp 本身豐富的功能中，最重要的4個功能被呈現(xiàn)在首頁當中，每個功能都附帶了一個小巧有趣的手繪插畫，精煉而直觀，一目了然。

頁面靠下的位置，為客戶推薦語留下了足夠大的一塊區(qū)域，讓Mailchimp 的用戶為產(chǎn)品發(fā)聲，加強 Mailchimp 的品牌體驗。最下方的頁腳則經(jīng)過簡化，整個體驗比之前干練了不少，對于這個產(chǎn)品有所了解的用戶，應(yīng)該有較深的體會。

4. UserTesting

客戶體驗研究平臺 UserTesting 在產(chǎn)品原型設(shè)計和迭代方面有著很廣泛的影響力，對于設(shè)計和開發(fā)者而言都不會太陌生。今年，這家公司針對自家的網(wǎng)站進行了重設(shè)計，將品牌推到了一個全新的高度。

重設(shè)計之前：

UserTesting 首頁的主要控件是一個超大的輪播圖，輪播圖主要是引導(dǎo)用戶注冊為測試服務(wù)的用戶，并且通過額外的 CTA按鈕引導(dǎo)用戶到其他的服務(wù)。輪播圖本身存在的風(fēng)險是不確定的，同時第二個和第三個輪播圖的功能相對不夠清晰，轉(zhuǎn)化并沒有預(yù)期的高。

在輪播圖下，網(wǎng)站還展示了一些客戶的成功案例，并且呈現(xiàn)了品牌的三個主要的價值主張，再靠下的位置則是一些客戶的推薦語，一些研究案例的鏈接和頁腳。

整個首頁內(nèi)容很多，甚至有點亂。當然，作為一個經(jīng)常進行用戶測試的機構(gòu)，我相信 UserTesting 自己也沒少測試自己的首頁設(shè)計。

重設(shè)計之后：

UserTesting 的新頁面看起來更加輕盈，內(nèi)容數(shù)量降低了25%，頂部導(dǎo)航被重新設(shè)計，輪播圖和之前的幾個案例一樣，也被放棄了，更換上了看起來更加智能、現(xiàn)代、有機的插畫，而宣傳用語也更加的大膽和吸引人。

在客戶列表下方的產(chǎn)品特征和價值主張等信息，則更加簡練，并且搭配上了動畫，通過微交互讓信息的生動性和傳播性更強。接下來，他們強化了客戶推薦語的模塊，每一段寄語都是關(guān)于一個主題，各司其職。最后就是知識庫和帶有 CTA按鈕的頁腳。

UserTesting 的重設(shè)計更加輕盈、清晰，也更加符合邏輯，易于理解，看著不累。

5. Art Institute of?Chicago

芝加哥藝術(shù)研究院（AIC）是最受歡迎的博物館之一，他們有著美國最好的藝術(shù)收藏品。而他們的網(wǎng)站同樣需要重設(shè)計，提升整體的可用性，尤其是希望網(wǎng)站中大量的藝術(shù)作品的圖片能夠發(fā)揮效用。

重設(shè)計之前：

正如同很多同類的老舊網(wǎng)站一樣，AIC 的老版網(wǎng)站的寬度是固定的，頂部導(dǎo)航也是傳統(tǒng)的多層級導(dǎo)航菜單，下拉框是半透明的，交互體驗并不讓人愉悅。

導(dǎo)航下面是全屏式的輪播圖，6張圖均是網(wǎng)站中的藏品或者展覽。網(wǎng)頁中的這個設(shè)計存在一個非常顯著的問題，就是輪播控件和文本的色彩是固定的，但是背景圖片則完全不可控，經(jīng)常因為色彩對比度不夠，而無法看清前景的控件和文本，體驗非?；靵y。

輪播圖的下面是頁腳導(dǎo)航菜單，字體尺寸很小，鏈接被壓縮得難以識別，博物館的開放時間和社交媒體鏈接也都擠壓在這個地方。

重設(shè)計之后：

經(jīng)過重新設(shè)計之后，AIC 的整體體驗得到了很大的改善。首先，網(wǎng)站被改成完全響應(yīng)式的，可以在任何網(wǎng)站上輕松閱讀其中的內(nèi)容。網(wǎng)站的信息架構(gòu)被重新調(diào)整了，頂部的導(dǎo)航也進行了簡化，沒有笨重的下拉菜單。還增加了一個臨時的公告區(qū)域。

輪播圖被單個的首屏視頻所替代，這樣可以更加生動地呈現(xiàn)內(nèi)容。而文本內(nèi)容則增加了一個不透明的灰色的底，確?？勺x性。

借助柵格系統(tǒng)，網(wǎng)站的展覽、活動、博物館的亮點、周邊商品都被約束了起來，確保布局優(yōu)雅清晰。后面是用戶注冊的快速入口，頁腳則被設(shè)計得更加易于理解。

AIC 是幾個案例當中，改版前后變化最大的網(wǎng)站，可用性、可讀性、SEO、響應(yīng)式等功能都是在改版之后才用有，風(fēng)格上優(yōu)雅大氣，還強化了品牌影響力。

結(jié)語

雖然這些網(wǎng)站各不相同，但是在這些重設(shè)計案例當中，可以清晰地看到網(wǎng)站的設(shè)計趨勢，需求上的變化，以及很多珍貴的經(jīng)驗。

最典型的是對于輪播圖這一控件的認知，越來越多的設(shè)計師開始在實戰(zhàn)中摒棄這種設(shè)計，而開始擁抱高清大圖和視頻背景，更加在意針對性和目標明確的簡約設(shè)計。動效和體驗之間的緊密關(guān)系，使得設(shè)計師開始更多地在網(wǎng)頁中使用這些元素。

作者：?Justinmind

譯者：陳子木

來源：https://www.uisdc.com/5-excellent-website-redesigns

本文由 @陳子木 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議