設計實務

商品資訊圖表化：把規格表變成一眼看懂的圖

2026年5月12日・ViewInternet 編輯部

商品頁的規格區是流量的墳場：一整塊密密麻麻的表格文字，手機上沒人放大來讀——但裡面偏偏藏著購買決策的關鍵（尺寸合不合、成分好不好、跟別家差在哪）。資訊圖表化（infographic）就是解這個題：把文字資訊翻譯成一眼看懂的圖。它不需要高深的設計功力，需要的是「翻譯的方法」。這篇給幾個最常用的公式。

為什麼圖表化值得做

三個直接的回報：降低理解成本——手機上的閱讀是掃視不是精讀，圖解的資訊吸收速度是文字表格的數倍；降低客服與退貨——尺寸與用法的誤解是退貨大戶，一張好的尺寸圖解直接省下後端成本；內容的複用性——圖表化的素材同時可用於商品頁、社群貼文與廣告輪播，一次設計多處收成。

公式一：尺寸圖解——放進生活的參照物

尺寸的文字標示（45×30×20cm）沒有體感，圖解的做法：商品線圖＋標註尺寸是基本盤；加上參照物才是勝負手——包包旁邊畫一支手機與一瓶水、收納箱裡畫出「可放 12 件衣物」、桌子旁站一個人形剪影。參照物把抽象數字翻譯成「跟我的生活什麼關係」。服飾類的進階版：不同身高體重的模特實穿對照表（「160cm／50kg 著 M 號」），這是服飾退貨率的第一解藥。

公式二：成分與材質的視覺化

保養品、保健品、食品的成分表是信任的關鍵卻最難讀。圖解的做法：明星成分卡——挑三到五個核心成分，每個一張小卡（成分名＋來源圖示＋一句白話功能），別把全成分表都圖表化（重點的敵人是全部）；含量的視覺對比——「每份含鈣 300mg＝一杯牛奶的 1.5 倍」，用參照物講含量才有感；檢驗與認證的橫幅——SGS、有機認證的標章列成一排＋報告編號，信任訊號要看得見。注意法規紅線：成分的功效描述要守住品類的宣稱規範，圖表化不是誇大的掩護。

公式三：比較表——誠實但有立場

「跟別人差在哪」是決策的最後一題，比較表的設計原則：跟「類型」比，不點名品牌（「本品 vs 一般市售款」，點名競品有法律與公關風險）；比較維度挑你有優勢的（這是立場），但數據要真實（這是誠實——造假的比較表被拆穿，信任歸零）；視覺上用勾叉與色塊，你的欄位用品牌色微微突出，一眼看出差異即可，別做成攻擊性的紅綠對決圖。自我比較也好用：「經典版 vs 升級版」的世代比較表，是引導客人選高階款的自然推力。

公式四：步驟圖——三到五步講完使用法

使用方法的圖解結構：一步一格、一句話一動作（「步驟 2：按壓兩下於掌心」），配實拍或簡筆插圖；步驟控制在三到五步（超過就該分組）；常見錯誤用法加一格「別這樣做」（打叉的錯誤示範常比正確示範更防呆）。安裝型、沖泡型、保養型商品的步驟圖，直接反映在客服訊息量的下降上。

版型的一致性：做成系統，不是散圖

圖表化最容易翻車的地方是「每張圖各自為政」：這張圓角那張直角、五種顏色三種字體。解法是先定一套小模板：標題的位置與字級、色彩的使用規則（跟著品牌規範走）、圖示的風格（線條粗細一致）——之後每個新商品套模板產出，速度快、全店的視覺也整齊。這套模板做一次，用三年。

ViewInternet 的商品頁設計含資訊圖表的系統化設計（模板交付，你的團隊能自己延用），賣場裝修把圖表語言統一到全店。規格表還在嚇跑客人？加 LINE，把它變成好懂的圖。