top of page

Bezalel官方網站

​#UI/UX  #官方網站設計  #RWD響應式網站

Bezalel品牌官網長期存在使用者不友善的問題,本次專案我負責與工程師
配合重新設計整體版面、UI及User flow,並依照品牌形象重新製作元件與
圖片以統一視覺調性,此外導入色彩主題並定義字級,一致化按鈕樣式,
優化網站使用者體驗。

網站原型已完成,目前正逐步更新上架。

web-02.gif
web-01.gif

舊版(上圖後)與新版網站(上圖前)。更新後設計使用明亮色系貼合品牌風格,並帶入品牌標準色,背景搭配長時間
閱覽友善的柔和色系。
​網站優化點包括:
I 購物體驗優化:優化商品搜尋路徑,包括icon顯示及直接搜尋,以易懂的icon呈現產品分類,懸停時則變換為商品圖。

II 調整首頁資訊佔比:原版首頁banner幾乎占據整個螢幕畫面,卻僅有look&feel功能,改版後調整banner佔比,讓使用者第一眼就能清楚看見產品類別,同時確保進入網站視覺上的協調性

web-07.gif
web-02.gif

III 降低理解成本:商品說明頁面中,只要將滑鼠懸停在商品上就會出現圖片指向特效,去除因產品外型名稱產生的型號混淆。
IIII 增加互動特效:為確保在相似元件中,使用者能一眼明瞭目前點選的目標,增加明顯的懸停特效以輔助辨別。並參考一頁式網頁的成功案例升級KOL推薦區特效,以實際社交軟體對話氣泡的形式吸引使用者閱讀。

web-03.gif
web-05.gif
web-04.gif

其他調整並改善購物車、登入、商品頁等頁面排版,使整體視覺觀感更協調。並製作RWD響應式網頁以符合不同裝置瀏覽需求。

web-06.gif
購物車.png
web-phone.png

本次網站製作參考了各大品牌的現有官網,以期降低使用者的學習成本。整個長期專案由我與內部工程師共同製作,並在過程中不斷進行迭代和調整設計。

​其他相似專案

一頁式-導覽.gif
切換頁面
bottom of page