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

閱讀時間 1 分鐘

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

網站或 App 的一致風格圖示組

先列出清單

把您的網站或 App 從頭到尾看一遍,寫下每一個用圖示會有幫助的地方:

  • 主選單: 首頁、服務目錄、搜尋、購物車、帳戶。
  • 功能或好處: 快速配送、安全付款、退貨、客服。
  • 聯絡方式和操作: 電話、電子郵件、地點、分享、下載。

用幾個字描述每個圖示,例如「配送:一輛小貨車」或「退貨:一個有箭頭的箱子」。清單越清楚,之後要修改的地方就越少。

需要多少個圖示

  • 約 4 個: 有三、四項好處的到達頁,或一份簡短的簡報。
  • 約 8 個: 小型網站的主要區塊和功能。
  • 約 16 個: App 或有很多區塊的較大型網站的完整圖示組。

通常最好比現在需要的多訂幾個。之後另外訂購繪製的圖示,比較難做到完全一致。

選定一種風格

選一種風格,並用在整組圖示上:

  • 線條: 細線條,輕盈而現代,適合簡潔的介面。
  • 填色: 實心形狀,在很小的尺寸下也容易辨識。
  • 雙色調: 同一種顏色的兩種深淺,多一點個性。
  • 3D: 柔和的立體感和陰影,適合色彩鮮明的到達頁。

如果您已經有幾個喜歡的圖示,請分享連結,讓新圖示延續相同的樣子。

顏色

使用您的品牌色,如果有的話,請提供色碼,例如 #1A73E8。通常一個主色和一個強調色就夠了。如果您還沒有品牌色,中性色調在任何背景上都適用。

小尺寸決定一切

選單中的圖示通常只有 24 像素寬。在這個尺寸下細節會消失,所以簡單的形狀勝出:

  • 一個圖示只表達一個概念。 用一輛貨車代表配送,而不是貨車加上道路、時鐘和箱子。
  • 圖示裡不放文字。 圖示一小,文字就看不清楚。
  • 熟悉的符號。 用放大鏡代表搜尋、用購物車代表購物,到哪裡都看得懂。

您會拿到什麼、如何使用

一般的圖示組會以透明背景的個別 PNG 檔案提供,讓每個圖示都能放在任何顏色上。PNG 是點陣格式:用在網站、App 和投影片上都沒問題,但它不是可以無限放大的向量檔。如果您需要網站圖示(favicon),免費的線上轉檔工具一分鐘就能把 PNG 轉成 ICO 檔。

重點整理

清楚的清單、適當的圖示數量、一種風格和您的品牌色:這樣整組圖示在每個畫面上都會風格一致。如果您希望由別人為您繪製,可以訂購圖示組:您提供圖示清單、風格和顏色,就能拿到 4、8 或 16 個風格一致的圖示,以透明背景的個別 PNG 檔案提供。只有在您驗收作品後才會撥付款項。