本專案為製造業企業形象官方網站，服務對象為全球自行車零件供應商，
專注自行車組件的專業加工、自有品牌產品及 OEM／ODM 代工服務。
網站設計以提升品牌形象與國際辨識度為主軸，
因此版面規劃簡單大方，並搭配品牌識別的藍色與黃綠色，
營造專業、穩重且具國際感的形象。
友誌金屬 | UI/UX網頁設計
專案名稱
專案背景
設計系統規劃
主色調使用友誌金屬的企業形象色藍色和黃綠色，並以主色調為基礎，延伸出和諧的色系變化，搭配灰階色彩作為協調，用於強調頁面元素， 區分整體網頁視覺層級。
- #1b3c72
- #296094
- #1e95d4
- #c6d11f
- #545225
- #f0edc1
- #333333
- #bcbcbc
- #efeeee
中文字體
思源黑體 | Noto Sans TC
英文字體
Poppins
視覺特色
使用大型產品圖，作為首頁視覺焦點，強化品牌第一印象
整合多樣化產品，提升產品搜尋效率
客戶產品多元化，單純使用下拉選單易造成產品搜尋不易，且未來擴增產品分類較無空間，因此使用巨型選單來解決產品類別較多的狀況。 並有中英文語系切換功能，符合國際市場的使用需求。
垂直輪播的切換，更利於快速了解產品項目
為了能讓使用者馬上了解企業相關的產品類別，從上下輪播的大圖切換輔以文字說明，點擊連結可快速連至相關產品頁面，增加產品查找的便利性。
產品外銷至世界各地滿足客戶的需求，增加專業的企業形象
使用者透過世界地圖的圖像，再輔以從台灣地區發散的紅色箭頭，表達產品可外銷至全球， 展現企業的專業是能滿足國際市場的需求。
用自行車為主視覺焦點，讓使用者快速理解企業的核心產品
搭配拆解的零件元素，串聯產品與零件之間的關聯性，突顯企業在零件加工的專業實力，強化企業對產品研發創新的重視。
區塊化的版面，將不同製程資訊分區呈現提升閱讀性
將原料、生產加工與成品三大主題，完整的呈現企業從材料供應、精密加工到成品製造的一站式服務能力。 把「核心優勢」明確的點出。
互動操作3D圖像，全面性了解產品細節
使用modelviewer的立體圖像套件，搭配客戶提供的3D建模圖檔，透過滑鼠的互動操作來引起使用者的興趣。
