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

網站重設計和調整有什么區(qū)別？

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

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

小貼士：如何重新設計網站

在開始進行重設計之前，首先要制定相對明確的目標。適當的問題會給你帶來你想要的答案：

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

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

今天，我們挑選了3個網站重設計案例，通過不同案例的處理方法，以及前后對比，來同你分享網站重設計的經驗。

1. Rev.com

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


 

重設計之前

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

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

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

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

重設計之后

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

 

2. Panos Pictures

Panos Pictures 是一個拍攝紀錄片和電影的代理機構，他們的網站重設計需求不僅僅是調整整體的視覺，而且還需要通過設計來修改底層架構。


 

 

重設計之前

Panos 之前的網站比較簡陋。老版本的網站并不是響應式的網站，對于移動端設備不夠友好，缺少 JavaScript 的支持，導航選項也需要完善。首頁頂部是一個導航菜單和搜索框，下面是超大的首屏圖片，并在下方附帶兩三個比較小的圖片。每個圖片都會鏈接到相應的圖片商店。鼠標光標懸停在圖片上，能夠顯示相關的圖片信息，用戶可以通過點擊瀏覽照片背后的故事詳情。頂部導航使用的是老式的嵌套式的導航菜單，但是實際上還有一些圖片超出了導航的瀏覽范圍，并且用戶無法通過清晰的路徑來方便用戶關注更多的信息。

 

重設計之后

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

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

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

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

3. Mailchimp

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

 

重設計之前

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

重設計之后

Mailchimp 經過重設計之后，看起來完全不同，但是依然讓人感覺得到之前的影子。明亮的黃色是這次重設計所加入進來的最醒目的元素，品牌和產品的價值主張內容則使用對比強烈的黑色襯線字體來呈現(xiàn)，天馬行空的插畫則增加了首屏的視覺張力。MailChimp 本身豐富的功能中，最重要的4個功能被呈現(xiàn)在首頁當中，每個功能都附帶了一個小巧有趣的手繪插畫，精煉而直觀，一目了然。

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


雖然這些網站各不相同，但是在這些重設計案例當中，可以清晰地看到網站的設計趨勢，需求上的變化，以及很多珍貴的經驗。最典型的是對于輪播圖這一控件的認知，越來越多的設計師開始在實戰(zhàn)中摒棄這種設計，而開始擁抱高清大圖和視頻背景，更加在意針對性和目標明確的簡約設計。動效和體驗之間的緊密關系，使得設計師開始更多地在網頁中使用這些元素。如果您的網站需要改版，可以聯(lián)系城池設計，為您的企業(yè)公司官網制作新網站。