01 · Hero
大主視覺定調
第一眼用深色科技質感建立專業信任，右側浮動按鈕讓詢價與比較隨時可用。
[ Case Study ] AIC · 2026
AIC 官網設計，用心成就專業。
從首屏、產品到內頁，一套深色科技語彙，把複雜的伺服器產品線整理成一眼能判斷的網站。
aicipc.com00 / 04
01
導覽與行動呼籲
主選單只放五項，右側集中「ESG」、搜尋與語系，從任何一頁都能直達產品與報價。
02
右側浮動按鈕，隨時可用
「詢價」與「比較」浮在畫面右側，帶有數量徽章，不隨捲動消失，想問價、想比對時一鍵就到。
03
發光立方體，定調整站
堆疊的方塊象徵模組化架構，青藍光暈成為全站的視覺基調。
04
四枚徽章收成一列
圖示加短句，把關鍵資訊壓縮在首屏底部，不需要再往下找。
- 01導覽與行動呼籲主選單只放五項，右側集中「ESG」、搜尋與語系。
- 02右側浮動按鈕，隨時可用「詢價」與「比較」浮在畫面右側，不隨捲動消失。
- 03發光立方體，定調整站堆疊的方塊象徵模組化架構，青藍光暈成為視覺基調。
- 04四枚徽章收成一列圖示加短句，把關鍵資訊壓縮在首屏底部。
[ What we did ]
梳理產品與資訊層級，把複雜的伺服器產品線整理成一眼能判斷的網站。
針對雲端、邊緣與高效能運算的企業買家，以深色科技視覺為基調，搭配統一的卡片語彙與一致的內頁版型，讓訪客快速找到產品、解決方案與聯絡窗口。
[ Project Scope ]
- 01.資訊架構
- 02.視覺設計
- 03.互動動態
- 04.前端切版
[ Palette ]
- #111111
- #00627B
- #1FA6C4
- #0E76CC
- #8CC63F
KEY VISUAL
一個主體，貫穿整站
玻璃立方體象徵模組化的架構，是整站的視覺主體；產品、情境與徽章都沿用同樣的圓角與深色底。
- 6系列Product lines產品共用同一種卡片
- 6情境Solutions解決方案以場景呈現
- 4枚Trust badges關鍵資訊收成一列
為什麼這樣設計
Why It Works
六個設計決定，由首屏到頁尾，卡片隨捲動依序堆疊，每一張都對應首頁的一個區塊。
02 · Products
產品統一成卡片
六大產品線共用同一種卡片，買家不必重新學習就能互相比較。
03 · Solutions
解決方案用情境呈現
輪播放大單一應用場景，讓訪客用「用途」而不是型號找到產品。
04 · Value
價值主張獨立成區
兩張卡片說清楚差異，把「為什麼選我們」留給單獨的一屏。
05 · Global
據點與夥伴一眼可見
暗色地圖與標誌牆，快速建立全球服務與合作的可信度。
06 · Insights
消息與頁尾收攏入口
最新消息維持動態感，頁尾集中導覽、聯絡與訂閱，訪客不會迷路。
客製化內頁，維持一致性
Custom Page Design with Brand Consistency
內頁沿用首頁的導覽列、圓角卡片與按鈕樣式，白底內容區承載較多文字，閱讀更輕鬆。
-
aicipc.com/products
Products產品總覽：五個系列用同一種「圖＋說明＋兩顆按鈕」，左右交錯帶出節奏。
-
aicipc.com/solutions-detail
Solutions解決方案：左圖右文開場，下方以輪播串起相關產品。
-
aicipc.com/about
About公司介紹：願景、認證與能力，用一致的卡片與留白排列。