網站或 App 的圖示組:如何規劃和訂購

圖示是告訴大家該點哪裡的小圖:首頁、購物車、配送、客服、個人資料。如果它們來自不同的免費圖庫,網站看起來就會東拼西湊:粗線條旁邊是細線條,圓角旁邊是尖角。一組風格一致的圖示能解決這個問題,讓即使是簡單的網站也顯得完整。以下說明如何規劃一組圖示。

先列出清單
把您的網站或 App 從頭到尾看一遍,寫下每一個用圖示會有幫助的地方:
- 主選單: 首頁、服務目錄、搜尋、購物車、帳戶。
- 功能或好處: 快速配送、安全付款、退貨、客服。
- 聯絡方式和操作: 電話、電子郵件、地點、分享、下載。
用幾個字描述每個圖示,例如「配送:一輛小貨車」或「退貨:一個有箭頭的箱子」。清單越清楚,之後要修改的地方就越少。
需要多少個圖示
- 約 4 個: 有三、四項好處的到達頁,或一份簡短的簡報。
- 約 8 個: 小型網站的主要區塊和功能。
- 約 16 個: App 或有很多區塊的較大型網站的完整圖示組。
通常最好比現在需要的多訂幾個。之後另外訂購繪製的圖示,比較難做到完全一致。
選定一種風格
選一種風格,並用在整組圖示上:
- 線條: 細線條,輕盈而現代,適合簡潔的介面。
- 填色: 實心形狀,在很小的尺寸下也容易辨識。
- 雙色調: 同一種顏色的兩種深淺,多一點個性。
- 3D: 柔和的立體感和陰影,適合色彩鮮明的到達頁。
如果您已經有幾個喜歡的圖示,請分享連結,讓新圖示延續相同的樣子。
顏色
使用您的品牌色,如果有的話,請提供色碼,例如 #1A73E8。通常一個主色和一個強調色就夠了。如果您還沒有品牌色,中性色調在任何背景上都適用。
小尺寸決定一切
選單中的圖示通常只有 24 像素寬。在這個尺寸下細節會消失,所以簡單的形狀勝出:
- 一個圖示只表達一個概念。 用一輛貨車代表配送,而不是貨車加上道路、時鐘和箱子。
- 圖示裡不放文字。 圖示一小,文字就看不清楚。
- 熟悉的符號。 用放大鏡代表搜尋、用購物車代表購物,到哪裡都看得懂。
您會拿到什麼、如何使用
一般的圖示組會以透明背景的個別 PNG 檔案提供,讓每個圖示都能放在任何顏色上。PNG 是點陣格式:用在網站、App 和投影片上都沒問題,但它不是可以無限放大的向量檔。如果您需要網站圖示(favicon),免費的線上轉檔工具一分鐘就能把 PNG 轉成 ICO 檔。
重點整理
清楚的清單、適當的圖示數量、一種風格和您的品牌色:這樣整組圖示在每個畫面上都會風格一致。如果您希望由別人為您繪製,可以訂購圖示組:您提供圖示清單、風格和顏色,就能拿到 4、8 或 16 個風格一致的圖示,以透明背景的個別 PNG 檔案提供。只有在您驗收作品後才會撥付款項。