網頁設計

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

網站重設計和調整有什麼區別?

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

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

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

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

  • 我們想通過重設計來實現什麼目標?
  • 我們的業務和營銷目標是什麼?
  • 我們的目標用戶都是什麼人?
  • 我們想要如何改善網站上的體驗?

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

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

1. Rev.com

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

網頁設計

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

重設計之前

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

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

網頁改版

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

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

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

重設計之後

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

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

從用戶體驗的角度上來說,重設計讓頁面更加輕盈現代,導航更加清晰,而產品特徵則藉助色彩得到了強化。而項目經理 Barron Caster 在之後公佈了數據,新的設計讓 Rev.com 的網站轉化率提升了 18%。

2. Panos Pictures

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

重設計之前

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

重設計之後

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

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

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

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

3. Mailchimp

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

重設計之前

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

重設計之後

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

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

4. UserTesting

客戶體驗研究平台 UserTesting 在產品原型設計和迭代方面有著很廣泛的影響力,對於設計和開發者而言都不會太陌生。今年,這家公司針對自家的網站進行了重設計,將品牌推到了一個全新的高度。

重設計之前

UserTesting 首頁的主要控件是一個超大的輪播圖,輪播圖主要是引導用戶註冊為測試服務的用戶,並且通過額外的 CTA按鈕引導用戶到其他的服務。輪播圖本身存在的風險是不確定的,同時第二個和第三個輪播圖的功能相對不夠清晰,轉化並沒有預期的高。

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

整個首頁內容很多,甚至有點亂。當然,作為一個經常進行用戶測試的機構,我相信 UserTesting 自己也沒少測試自己的首頁設計。

重設計之後

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

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

UserTesting 的重設計更加輕盈、清晰,也更加符合邏輯,易於理解,看著不累。

5. Art Institute of Chicago

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

重設計之前

正如同很多同類的老舊網站一樣,AIC 的老版網站的寬度是固定的,頂部導航也是傳統的多層級導航菜單,下拉框是半透明的,交互體驗並不讓人愉悅。

導航下面是全屏式的輪播圖,6張圖均是網站中的藏品或者展覽。網頁中的這個設計存在一個非常顯著的問題,就是輪播控件和文本的色彩是固定的,但是背景圖片則完全不可控,經常因為色彩對比度不夠,而無法看清前景的控件和文本,體驗非常混亂。

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

重設計之後

經過重新設計之後,AIC 的整體體驗得到了很大的改善。首先,網站被改成完全響應式的,可以在任何網站上輕鬆閱讀其中的內容。網站的信息架構被重新調整了,頂部的導航也進行了簡化,沒有笨重的下拉菜單。還增加了一個臨時的公告區域。

輪播圖被單個的首屏視頻所替代,這樣可以更加生動地呈現內容。而文本內容則增加了一個不透明的灰色的底,確保可讀性。

借助柵格系統,網站的展覽、活動、博物館的亮點、周邊商品都被約束了起來,確保佈局優雅清晰。後面是用戶註冊的快速入口,頁腳則被設計得更加易於理解。

AIC 是幾個案例當中,改版前後變化最大的網站,可用性、可讀性、SEO、響應式等功能都是在改版之後才用有,風格上優雅大氣,還強化了品牌影響力。

結語

雖然這些網站各不相同,但是在這些重設計案例當中,可以清晰地看到網站的設計趨勢,需求上的變化,以及很多珍貴的經驗。最典型的是對於輪播圖這一控件的認知,越來越多的設計師開始在實戰中摒棄這種設計,而開始擁抱高清大圖和視頻背景,更加在意針對性和目標明確的簡約設計。動效和體驗之間的緊密關係,使得設計師開始更多地在網頁中使用這些元素。