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

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

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

當(dāng)我們?cè)谶M(jìn)行重設(shè)計(jì)的時(shí)候，會(huì)基于企業(yè)的業(yè)務(wù)、營(yíng)銷等目標(biāo)，從原型層面上入手，進(jìn)行重新設(shè)計(jì)。這樣做一方面目標(biāo)明確，另一方面也符合流程，這也符合 Justinmind 的工作方式。
 

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

在開(kāi)始進(jìn)行重設(shè)計(jì)之前，首先要制定相對(duì)明確的目標(biāo)。適當(dāng)?shù)膯?wèn)題會(huì)給你帶來(lái)你想要的答案：

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

在這4個(gè)問(wèn)題的框架下來(lái)進(jìn)行重設(shè)計(jì)，能夠讓項(xiàng)目向著正確的方向推進(jìn)。

今天，我們挑選了3個(gè)網(wǎng)站重設(shè)計(jì)案例，通過(guò)不同案例的處理方法，以及前后對(duì)比，來(lái)同你分享網(wǎng)站重設(shè)計(jì)的經(jīng)驗(yàn)。

1. Rev.com

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


 

重設(shè)計(jì)之前

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

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

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

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

重設(shè)計(jì)之后

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

 

2. Panos Pictures

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


 

 

重設(shè)計(jì)之前

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

 

重設(shè)計(jì)之后

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

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

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

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

3. Mailchimp

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

 

重設(shè)計(jì)之前

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

重設(shè)計(jì)之后

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

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


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