整合品牌視覺與多語系介面 打造具國際視野的企業網站
類別
.
Web Design
角色
.
全站 UI/UX 規劃
年
.
2024
專案亮點成果
.
設計系統建構與維護： 建立設計系統並緊密協作工程師，確保設計高效協作與精準落地。
RWD 響應式佈局： 規劃跨裝置佈局、交互邏輯，確保視覺與體驗的一致性。
多語系版面建置： 優化不同語言下的排版邏輯，確保視覺專業度。
專案簡介
.
官方網站的角色已從單純的企業名片，轉變為建立品牌信任與市場競爭力的核心工具。成高 SEIKOH 作為 YANMAR 在台灣的總代理，長期專注於船舶引擎及發電機領域。
隨著業務不斷拓展，SEIKOH 迫切需要一個優化後的數位平台，以便：
清楚傳達品牌價值。
提升國際市場能見度。
挑戰與目標
.
該網站作為品牌對外的主要資訊平台，需要有效體現品牌視覺定位，並支持響應式設計與多語系支援。在這個專案中，我希望透過建立完整的設計系統與UI邏輯，並透過結構化的資訊設計與互動優化，讓網站不只是資料整合工具，更能成為有效溝通品牌價值的入口。
本次設計目標在於：
提升網站跨裝置瀏覽體驗與互動便捷性。
解決版面差異，確保國際用戶的閱讀舒適性。
統一視覺風格，強化品牌專業形象。
解決方案策略
.
我的設計流程聚焦於品牌視覺整合、使用者體驗優化與高效交付協作。
設計系統與元件規劃
響應式設計處理
多語系內容排版策略
強化互動與轉換率
A. 設計系統與元件規劃
全面沿用並整合牌識別色與企業專屬字體，確保線上平台與企業線下形象（CIS）保持高度同步。
將 UI 元素系統性地分解為可複用的元件、模組與版型，以達成介面的高度一致性，更為前端開發提供了高可維護性與可擴展性的基礎。
制定色彩、字體、間距的規範，並建立排版階層系統，為設計與前端開發提供一致且清晰的指引。
B. 響應式設計處理
針對手機、平板、桌機進行版面調整，確保不同裝置上的使用體驗一致。
採用 彈性網格系統（flexible grid system），讓內容適應不同螢幕大小。
重新設計導覽、版面結構，使訪客能夠直覺瀏覽與快速尋找所需資訊。
C. 多語系內容排版策略
提供中文、英文、日文版本，未來可擴展至更多語言。
直覺的語言切換按鈕，確保用戶能快速轉換語系。
為解決不同語言在排版上的長度與閱讀差異，針對各語言重新設計資訊結構與留白邏輯，視覺平衡。
D. 強化互動與轉換率
增加聯絡表單、人才招募頁面、社群連結，提升用戶參與度。
優化行動呼籲（CTA, Call to Action） 設計，確保訪客能輕鬆聯絡品牌或獲取資訊。
產品頁面清楚標示產品型號、應用分類，以表格形式呈現引擎馬力、燃油消耗、尺寸等技術細節，讓用戶能快速找到關鍵資訊。
成果與影響
.
這次的網站改版不只是技術上的提升，而是品牌數位形象的一次全面躍進，讓SEIKOH 能夠在全球市場中持續拓展，邁向更高層次的商業機會。
強化品牌信賴度與市場能見度： 新網站成功展現 SEIKOH 的專業深度與國際視野，將顯著提升品牌可信度，進而擴大市場影響力。
優化使用者體驗，驅動轉化率： 透過清晰的資訊架構與響應式網頁設計 (RWD)，確保訪客能流暢獲取關鍵資訊，有效提升使用者滿意度與業務轉換效率。
提升全球市場競爭力： 藉由多語言介面支持與強化的品牌識別系統，新網站能更好地適應國際市場需求，為海外拓展奠定信任基礎。
實踐數據驅動的精準營銷： 整合後台數據分析工具，使企業能夠精確掌握客戶瀏覽行為，為制定高效的行銷策略與優化內容佈局提供數據支撐。
設計反思
.
從資訊整合到系統的思維轉變
我從這個專案中深刻領悟到，企業網站的價值核心，在於品牌溝通與用戶體驗的延伸，而不僅是資訊的整合。 我學會了如何在跨語系與多裝置的限制下做出具有彈性與一致性的 UI 設計，也強化了與工程端協作的能力，讓設計更確實被落地實現。這也讓我在後續的設計專案中，更重視元件系統的規劃與工程可行性。
