Acer 官網
Redesign

概念性專案，與 Acer 官方無關。Product imagery and specifications © Acer Inc., used for conceptual purposes only.

以 Nielsen 啟發式評估、5 家競品分析與使用者問卷（n=5），找出官網阻礙購買決策的三個斷點：

1. 四套分類互相打架　頂層導覽同時存在系列、特色、用途、價格四種分類，使用者必須先猜對 Acer 的內部邏輯才找得到產品。
2. 購買旅程被切成兩個網站　同一台機器在 acer.com 與 store.acer.com 各有一頁，規格寫法甚至互相矛盾。
3. 比較功能比不到決策要用的東西　比較頁列出 50+ 項規格卻沒有價格，重量排在第 11 組且經常缺值；而價格是 5/5 受訪者在產品頁最先找的資訊。

四種分類邏輯被放在同一個視覺層級

現行比較頁 50+ 項規格，沒有價格

• 資訊架構　四套分類收斂為以「用途」為唯一頂層分類，系列與特色降級為篩選器；篩選條件從 13 組零件規格精簡為用途、價格、重量。
• 設計系統　token-based 三層架構（Primitive → Semantic → Component），Figma 樣式與 CSS 變數一對一對應（text/primary 即 --text-primary）。
• 色彩語意　Acer Green 只代表「可行動」；品牌綠在白底對比僅 2.4:1，文字改用 green-700（4.96:1）通過 WCAG AA。
• 響應式　篩選改為 bottom sheet、購買列移至拇指熱區、比較改為雙欄橫向滑動。

筆電列表頁 — Desktop 1440

Design Token 三層架構：Primitive → Semantic → Component

手機版三頁 — Mobile 375

規格不是附錄，是主文

• 比較功能做成就地開啟的 overlay：勾選 2–4 台後底部浮出比較列，表格只保留重量、記憶體、顯示器、處理器、儲存、售價六項，並標示較優值；關閉後回到原位置。
• 產品詳細頁的 Sticky Buy Bar 跟隨捲動，同一網域完成購買。
• 以 Figma 原型進行 5 人非主持式遠端測試，依結果將卡片上的重量拆為獨立一列並提升字級。

勾選 2–4 台後，底部浮出比較列

Compare Overlay — 差異模式只留下不一樣的那幾列

產品詳細頁的 Sticky Buy Bar 跟隨捲動