進煌實業有限公司

⚡ 進煌實業（CSP）官方網站・設計提案

一、 視覺與品牌調性：硬派職人 ✕ 頂級安全

我們不將它設計成傳統沉悶的傳產網頁，而是定位為「具有強大爆發力與安全感的科技品牌」。

• 色彩計畫（Color Palette）：
• 主色（60%）： 採用極致科技黑與深邃工業藍作為背景。傳達高壓電、大功率設備所需的「絕對穩定與專業安全感」。
• 點綴色（10%）： 採用進煌標誌性的「熔岩活力橘」（呼應「哇電」與 CSP 的產品色）。用於 CTA 按鈕、警示、重要規格與充電動態，營造電能爆發與高效率的視覺焦點。
• 視覺元素（Visual Anchors）：
• 光效與線條： 網頁背景點綴隱約的幾何電路網格，以及帶有科技感的光束粒子微動效，暗示電流的流動與高效能充電技術。
• 硬朗字體： 標題採用強調結構感、厚實的無襯線字體（Sans-serif），展現工業製造的扎實與剛強。

二、 首頁 UI 佈局：雙軌客群分流（Dual-UX Track）

本網站最大的設計挑戰在於：如何讓外銷工業採購與一般機車騎士，進站都能一眼找到要的資訊？ 我們採用頂部直接分流的雙軌設計。

• 區塊 1：Hero Section（首頁大橫幅）
• 不使用靜態圖片，而是採用高對比、暗色調的微電影感影片作為背景。畫面交織著「自動化大廠的儲能櫃閃爍綠光」與「深夜荒郊野外，車主用哇電一觸即發救車」的震撼場景。
• 區塊 2：Split Screen 雙軌入口（核心分流）
• 【左側入口：綠能與工業電源】：鎖定 B2B 採購、ESG 減碳企業。視覺呈現大型充電機、台塑新智能儲能系統。
• 【右側入口：車載電瓶與應急配備】：鎖定 B2C 零售、車主、修車廠。視覺呈現藍騎士電池、道路救援電霸。

三、 核心特色功能設計（UX & Feature Highlights）

作為設計師，為本站規劃了三個能大幅提升留存率與轉化率的互動體驗：

1. 智慧型「車種 ⇄ 電瓶」極速檢索系統（B2C 特色）

傳統網站的對照表大多是密密麻麻的 PDF，體驗極差。

• 設計： 在車用專區首頁打造一個像「機票訂購」一樣直覺的下拉選單：【選擇車型：機車/汽車】 ➔ 【品牌：例如 Yamaha】 ➔ 【年份：2024】 ➔ 【型號：勁戰六代】。
• UX 效果： 點擊搜尋後，系統以卡片化（Card View）立即跳出對應的「藍騎士奈米膠體電池」與推薦的「CSP 職人充電器」，並附帶「立即購買/查詢據點」按鈕，消除消費者的選購焦慮。

2. 工業規格「多維篩選器」（B2B 特色）

針對尋找客製化（OEM/ODM）或工業充電器的工程師。

• 設計： 側邊欄設計「電壓（12V/24V/48V/72V）」、「電流（10A~100A）」、「電池類型（鋰鐵/鉛酸/深循環）」的複選微調鍵。
• UX 效果： 讓工程師不需漫無目的地翻頁，3 秒內就能精準定位到符合工廠推高機或消防系統規格的充電機。

3. 多國認證「信任牆（Trust Wall）」與 3D 產品剖析

• 設計： 將德國 GS、歐盟 CE、美國 UL、日本 PSE 等國際認證標章，設計成精緻的扁平化（Minimalist）圖示，滾動視差進入網頁時自動淡入（Fade-in）。
• 亮點： 針對明星產品（如哇電、智慧充電機），設計 互動式 3D 拆解或爆炸圖。當使用者滑鼠滑過時，會亮起並標註「防爆晶片」、「耐高溫外殼」、「逆接保護安全機制」，用視覺直接證明「為什麼進煌是充電職人」。

四、 O2O 整合：完善的售後與通路地圖

網頁設計不只要好看，更要能幫客戶減輕客服負擔。

• RWD 互動據點地圖： 針對一般車主拋錨或需要就近換電瓶的需求，設計結合 Google Maps API 的「經銷商與 COSTCO 據點查詢」。使用者開啟手機定位，網站就會自動推薦最近的販售與維修據點。
• 線上保固登錄系統： 擺脫傳統紙本保固卡。車主購買產品後，掃描機身 QR Code 即可跳轉至官網專屬 UI，一分鐘完成產品註冊，同時幫進煌建立珍貴的消費者數據資料庫（CRM）。