• EN
香港:(852)3749 9734
廣州: (020)3834 3713
[email protected]

新聞資料

網站改版的理由是什麼?看看這些網站改版後的好處

網站運營一段時間後,基於網站的需求不同,網站也會被要求重新設計。有些人認為網站重新設計成本太高了,只要適當調整就可以。雖然這樣說沒錯,但當網站需求和變化達到一定程度後,重新設計網站能夠讓網站變得更加統一,同時還能和產品、企業和業務進行更加深度的契合。

今天,香港網頁集團通過不同案例的處理方法,以及前後對比,與你分享什麼時候需要從新設計網站。

案例一:Rev.com

Rev.com是一個為用戶提高在線轉錄服務的網站。

網站改版的理由是什麼?看看這些網站改版後的好處

重新設計前:網站設計風格看起來有點過時,其次網站的輪播圖本身就有問題,用戶一次只能看一張,對耐心有限的用戶,很難堅持看完,經常會跳過其中的內容。此外,導航和輪播圖靠得太近,在視覺和動效都會使用戶產生不適感。

重新設計後:從用戶體驗的角度來說,Rev.com拋棄了輪播圖和復古設計,以簡單的卡片式設計和清晰的導航設計,藉助色彩強化產品的特徵,吸引用戶,鼓勵點擊。

案例二:Panos Pictures

Panos Pictures是一個拍攝記錄片和電影的代理機構。

網站改版的理由是什麼?看看這些網站改版後的好處

重新設計前:Panos Pictures網站比較簡陋,加上不是響應式設計網站,對移動端設備並不是很友好。頂部導航使用的是老式嵌套式的導航菜單,部分圖片已超出導航的瀏覽範圍,並且用戶無法通過清晰的路徑來方便用戶關注更多信息。

重新設計後:網站採用響應式設計,網頁內容和元素會自適應,頂部導航欄的功能相對較弱,已被收納到漢堡菜單中。內容區域依然以圖片呈現為主,每首屏首圖的尺寸會比首屏尺寸短些,確保底部更多信息能夠被用戶注意到,並引導用戶向下瀏覽。每張圖片都帶有相應的標題、簡短的介紹和點擊鏈接,點擊加載時還會觸發動人的動畫效果,提供更好的用戶體驗。

案例三:Mailchimp

Mailchimp是著名的郵件服務供應商。

網站改版的理由是什麼?看看這些網站改版後的好處

重新設計前:Mailchimp的網站首頁佈局設計簡單,首圖大圖直觀且清晰地將產品應用的感覺傳遞給用戶。雖然網站無論在情感上還是設計上,都已經是業內最值得學習的網站,但仍然會覺得有點美中不足。

重新設計後:明亮的顏色成為本次設計最醒目的元素,搭配對比強烈的黑色襯線字體呈現出品牌和產品的價值主張內容,天馬行空的插畫也增加了首屏的視覺張力。此外MailChimp 最終的4個功能都呈現在首頁當中,並附有小巧有趣的手繪插畫,精鍊而直觀,一目了然。

案例四:UserTesting

客戶體驗研究平台 UserTesting 在產品原型設計和迭代方面有着很廣泛的影響力,對於設計和開發者而言都不會太陌生。

網站改版的理由是什麼?看看這些網站改版後的好處

重新設計前:UserTesting 首頁的主要控件是一個超大的輪播圖,雖然能吸引用戶的眼球,但第二個和第三個輪播圖的功能相對不夠清晰,轉化並沒有預期的高。此外,整個首頁額內容很多,甚至有點亂,這會影響用戶瀏覽網站的心情。

重新設計後:網站內容數量降低了25%,與之前的案例一樣,輪播圖被拋棄換上更智能有趣的插畫。客戶列表信息變得更加簡潔,並配上動畫,通過微交互使信息的生動性和傳播性更強。

案例五: Art Institute of Chicago

芝加哥藝術研究院(AIC)是最受歡迎的博物館之一,他們有着美國最好的藝術收藏品。

網站改版的理由是什麼?看看這些網站改版後的好處

重新設計前:網站寬度是固定的,頂部導航也是傳統的多層級導航菜單,下拉框是半透明的,交互體驗讓人並不愉悅。此外,輪播控件和文本色彩是固定的,背景圖片則完全不可控,經常會出現因對比度不夠,而無法看清控件和文本。頁腳導航菜單字體尺寸太小,鏈接被壓縮的難以識別,而且這個位置的信息量比較大,顯得比較亂。

重新設計後:網站被改成完全響應式,可在任何設備輕鬆閱讀其中內容,頂部導航簡化了,沒有笨重的下拉菜單,還增加臨時公告區域。輪播圖被首屏視屏所替代,能更生動地呈現內容,同時還會文本內容增加不透明灰色地,增加可讀性。藉助柵格系統,確保佈局優雅清晰,頁腳則被設計得易於理解。

從以上的設計案例中,我們不難發現目前的網站設計的流行趨勢是怎樣,同時也清楚輪播圖對網站的怎樣的「傷害」,這使得不少網頁設計師將會更加有意地針對目標來設計。