通過5個實戰案例,幫你弄明白網站改版的方向 - 特级毛片www,色综合天天综合网,国产成人综合亚洲 - UISDC

通過5個實戰案例,幫你弄明白網站改版的方向

2018/11/28 16675評論區

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

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

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

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

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

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

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

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

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

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

重設計之前

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

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

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

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

重設計之後

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

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

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

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

重設計之前

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

重設計之後

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

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

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

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

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

重設計之前

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

重設計之後

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

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

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

重設計之前

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

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

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

重設計之後

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

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

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

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

重設計之前

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

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

輪播圖的下面是頁腳導航菜單,字體尺寸很。 唇穎謊顧醯媚岩允侗,博物館的開放時間和社交媒體鏈接也都擠壓在這個地方。

重設計之後

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

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

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

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

結語

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

儒墨堂大課堂

非特殊說明,本文版權歸原作者所有,轉載請注明出處
本文地址︰http://www.rumotanartist.com/5-excellent-website-redesigns

發表評論 加載中....

評論加載中....

uisdc

評論區都快餓癟了,看看我期盼的小眼神...

版式設計 交互設計師 界面設計 排版布局 職場 設計師干貨 儒墨堂專訪 儒墨堂大課堂 設計達人 配色 視覺設計 web前端開發 素材下載 AI教程 設計流程 設計理論 神器下載 字體下載 設計師專訪 psd下載 設計規範 用戶體驗設計 海報設計 平面設計 設計趨勢 動效設計 logo設計 圖標設計 ICON 產品設計 神器推薦 App設計 字體設計 職場規劃 酷站推薦 交互設計 ui設計 優秀網頁設計 設計師職場 ps技巧 酷站 用戶體驗 PS教程 網頁設計 經驗分享

您還沒有登錄

儒墨堂啟用更安全省心的 微信掃碼登錄

微信掃碼

300萬設計師聚集地!特级毛片www,色综合天天综合网,国产成人综合亚洲是極具人氣的設計師平台
2012年成立至今,一直專注于設計師的學習成長交流

特级毛片www|色综合天天综合网|国产成人综合亚洲

打開微信,掃碼分享
學設計 特级毛片www,色综合天天综合网,国产成人综合亚洲 在這里