設計實務

圖示 icon 設計是什麼？電商介面裡不說話卻很會帶路的小圖

2026年8月9日・ViewInternet 編輯部

逛網路商店時，你其實一直在讀圖示卻沒察覺。右上角那個小購物車、搜尋框旁的放大鏡、商品旁邊的愛心，這些不需要文字說明就知道在幹嘛的小圖形，就是圖示 icon。它們安安靜靜地待在介面各處，替畫面省下大量文字，也讓使用者一眼就找到功能。很多店家把 icon 當成隨手抓來的裝飾，結果整個網站的小圖東拼西湊、風格不一，看起來就廉價。這篇就把圖示 icon 設計講清楚，讓這些小圖真的替你的網站帶路而不是扣分。

圖示 icon 到底是什麼

圖示 icon，指的是介面上用來代表某個功能、物件或概念的小圖形。它的核心價值是用圖像取代文字——一個放大鏡就代表搜尋，一個購物車就代表結帳，不用寫字使用者也懂。這對介面有兩個好處。第一是省空間，尤其在手機這種寸土寸金的小螢幕上，一個 icon 抵得上好幾個字。第二是加快辨認，人腦看圖形比讀文字快，熟悉的 icon 幾乎是瞬間就被認出來。但要注意 icon 是一種約定俗成的語言，它靠的是大家共同的認知。放大鏡等於搜尋是因為大家都這樣用，你若自創一個沒人看得懂的圖形，反而製造理解負擔。

電商網站常見的 icon 用法

在電商情境裡，icon 幾乎無所不在。導覽與功能區——購物車、會員、搜尋、選單這幾個是標配，通常固定在頁面頂端。商品操作——加入購物車、收藏愛心、比較、分享，這些出現在商品卡與商品頁上，讓操作一目了然。信任與服務——免運卡車、退換貨箭頭、安全金流鎖頭、客服對話框，用小圖把服務保障視覺化。分類與屬性——商品規格旁的尺寸、材質、產地小圖，幫助快速掃讀。狀態提示——打勾表示成功、驚嘆號表示警告，替訊息加上情緒與辨識度。這些 icon 各司其職，共同讓介面變得好讀好操作，前提是它們得長得像一家人。

電商實例：一致的 icon 讓網站瞬間變精緻

想像兩間賣居家用品的網路商店。A 店的購物車是細線條、愛心卻是填滿的、客服圖示又換成立體風格，每個小圖都像從不同網站抓來的，整個頂端看起來雜亂又廉價。B 店的所有 icon 都是同樣的線條粗細、同樣的圓角、同樣的視覺重量，購物車、愛心、搜尋、會員排在一起就像同一套餐具，畫面立刻乾淨精緻。使用者不見得說得出差別在哪，但 B 店那種井然有序的專業感會讓人更信任。icon 這種小東西的威力就在這裡——單看一個不起眼，但整站統一起來，就是質感的分水嶺。一致性帶來的信任，往往就是猶豫的訪客願不願意留下來的關鍵。

怎麼設計出好用的 icon

圖示設計有幾個實用原則。第一，風格要統一，整站的 icon 用同一套線條粗細、圓角與填色方式，最省事的做法是直接採用同一套圖示庫，別東抓一個西抓一個。第二，盡量用大家看得懂的通用符號，搜尋就用放大鏡、購物車就用購物車，別為了獨特硬創新符號，看不懂比不好看更糟。第三，該配文字就配文字，除了購物車搜尋這類人人都懂的，其餘 icon 最好在旁邊或底下加上文字標籤，別讓使用者猜。第四，點擊範圍要夠大，手機上小圖本身可以小但可點的範圍要留足，避免手指戳半天戳不中。第五，顏色與重量要克制，icon 是輔助不是主角，別讓一堆花花綠綠的小圖搶走商品的注意力。

圖示與整站設計的關係

icon 看起來是小細節，卻是整體電商網站設計風格能不能收得住的一環。網站的字型、配色、圓角、留白構成一套視覺語言，icon 必須融進這套語言裡，才不會顯得突兀。這也是為什麼專業的網站在規劃時會把 icon 當成設計系統的一部分一起定義，而不是最後隨便補上。同樣的一致性邏輯也延伸到商品頁——商品頁上的規格圖示、服務保障小圖若和全站風格呼應，整個購物流程看起來就是一氣呵成。想把商品頁的視覺與說服結構一起做扎實，可以參考商品頁設計服務的規劃方式，讓每個小圖都替專業感加分。

常見問題 FAQ

icon 一定要配文字嗎？ 不一定，但除了購物車、搜尋、選單這種人人都懂的通用符號，其餘建議都配上文字標籤。多數使用者不會花時間猜圖形的意思，猜錯就等於操作失敗，加個文字成本很低卻能大幅降低誤解。

可以直接用免費圖示庫嗎？ 可以，而且是推薦做法。重點不在於 icon 是不是原創，而在於整站是否用同一套、風格是否統一。挑一套涵蓋你需要功能的圖示庫從頭用到尾，比自己畫一堆風格不一的小圖實際得多。

icon 太多會有問題嗎？ 會。icon 是輔助不是裝飾，滿畫面小圖反而讓人眼花、也搶走商品的注意力。只在真正需要幫助辨認的地方用，該留白就留白，克制反而更專業。

圖示 icon 是介面裡不說話卻很會帶路的小圖，統一與否直接決定網站的質感。ViewInternet 電商裝修師提供從官網設計到既有網站改版的一條龍服務，會把 icon 納入整體設計系統一起規劃，讓每個小圖都和字型配色圓角是一家人。想讓你的網站每個細節都透著專業？加 LINE 描述你的商品與現況，先給你一份免費的整站健檢建議。