視覺樣式詞條 3-34

圖示Icon

也常叫做:圖示、小圖、Icon

你可能會這樣說

列表前面想要小圖示讓內容更好掃,但不會畫圖也不知道去哪找,直接從別的網站存圖下來又大小不一、風格混亂。

白話解釋

圖示是用一個小符號代替一段文字:加快掃讀、跨越語言。實作上幾乎都用圖示庫(如 Lucide、Heroicons 這類開源套件),風格統一又是向量,放大不會糊。

挑圖示的鐵則是同一頁同一套:線條粗細、圓角風格要一致,混用寫實與極簡圖示是常見的雜亂來源。

圖示不是裝飾:沒有對應意義的圖示寧可不要。跟 AI 說「這頁全部換成同一套線性圖示、粗細一致」,通常一次到位。

親手試試

✕ 四種來源大雜燴
⭐ 快速出貨
✅ 七天退款
🅿️ 實體門市
☯ 會員優惠
寫實、彩色、極簡混在一起——一眼就是東拼西湊
✓ 同一套線性圖示
快速出貨
七天退款
實體門市
會員優惠
同一套:同粗細、同圓角、單色

挑圖示的鐵則:同一頁同一套;沒有意義的裝飾圖示寧可不要。

圖 3-34 左邊東拼西湊,右邊同一套線性圖示——一致性就是質感。

這樣對 AI 說

中文就可以
請幫這頁統一圖示:
全站改用同一套開源線性圖示,粗細一致、風格極簡。
每個服務項目配一個語意相關的圖示,不要為了好看亂配。
圖示統一 24px,與文字間距 12px、垂直置中。
列出純裝飾、沒有意義的圖示,讓我決定要不要刪。

同一課的其他詞