【2020免費icon圖庫】網頁Icon靚就夠？Icon5大常犯錯誤8個使用貼士 文附10大高質icon載點 | 文章 – 滙豐機滙

猜猜你現在身處的頁面有多少 icon？其實 icon 比你想像中更無處不在！正確的ICON的可以完善用户體驗，往下獲取 Icon 用法、5 大常犯錯誤、8 個使用貼士，隨文還附上 10 個高質 icon 免費下載！

設計  ·    ·  6 mins read

icon 商用 icon 商用 免費 icon 圖庫

猜猜你現在身處的頁面有多少 icon？其實 icon 比你想像中更無處不在，無論在網頁，手機或應用程式，都總有數個在左近。許多 icons 已經在網絡世界有約定俗成的一套意義，例如星星★代表 bookmark，不用解釋，用家一看便會明白其操作。但卻不是所有 icon 都可以「不解釋」，哪些可以哪些不可以？Icon 除了令網站更美觀，還可以怎樣完善網站用户體驗？往下獲取 Icon 用法、5 大常犯錯誤、8 個使用貼士，隨文還附上 10 個高質 icon 免費下載平台，快打包屬於你品牌的一套 icon 吧！

ICON 有咩用？

  • 導航作用：有意思的 icon 可以代輔助文字，帶領訪客或顧客辨悉平台功能，甚至完成指令。

正面例子：
Ubereats 以食物 icon 配以文字啟發用家選取想吃的菜式：商用 icon 商用 免費 icon 圖庫 icon 免費 圖庫 2020 ui 網頁設計工具 ui 網頁設計 網頁 設計 Interfacer viivdjs fontello Iconscout Icons8 Flaticon Freebiesupply UXWing Thenounproject Flaticondesign

  • 節省空間：Icon 可為螢幕較窄小的電子產品，如手機節省內容空間。

    正面例子：
    Peets 於手機顯示「幫助」及「menu」功能，利用 icon 節省空間：商用 icon 商用 免費 icon 圖庫 icon 免費 圖庫 2020 ui 網頁設計工具 ui 網頁設計 網頁 設計 Interfacer viivdjs fontello Iconscout Icons8 Flaticon Freebiesupply UXWing Thenounproject Flaticondesign   ▲Peets 於手機版面商用 icon 商用 免費 icon 圖庫 icon 免費 圖庫 2020 ui 網頁設計工具 ui 網頁設計 網頁 設計 Interfacer viivdjs fontello Iconscout Icons8 Flaticon Freebiesupply UXWing Thenounproject Flaticondesign

    ▲Peets 於 desktop 版面


  • 沒語言限制：Icon 有標示性意義，容易明白，說不同語言的讀者都能夠明白。

  • 網站更美觀：設計美美的 icon 可以令網站看起來更有活力。

Icon 5 大常犯錯誤

Icon 是跟其他網站元素並存的元素，放置它與其他元素一樣講求技巧，以下是一些常犯錯誤：

  1. 沒有對應的文字標示（text label） —— 除非你十分確定讀者會明白 icon 表示的功能，例如是 quote 一些官方品牌的 logos 例如 Facebook、Twitter、Adobe softwares，或心心♥︎及星星★這些已於網絡約定俗成的 icons，icons 旁都應該顯示文字扮演輔描述的角色。你可以選擇用 text label 或 alt text（即滑鼠停留在元素上會顯示的文字）

    即使是用心心♥︎及星星★，沒 text label 都可能有不清晰情況：商用 icon 商用 免費 icon 圖庫 icon 免費 圖庫 2020 ui 網頁設計工具 ui 網頁設計 網頁 設計 Interfacer viivdjs fontello Iconscout Icons8 Flaticon Freebiesupply UXWing Thenounproject Flaticondesign正面例子：
    商用 icon 商用 免費 icon 圖庫 icon 免費 圖庫 2020 ui 網頁設計工具 ui 網頁設計 網頁 設計 Interfacer viivdjs fontello Iconscout Icons8 Flaticon Freebiesupply UXWing Thenounproject Flaticondesign▲美國深得年青人喜愛的衣服品牌 Pacsun，Icon 與文字並列 highlight 品牌的重點功能。商用 icon 商用 免費 icon 圖庫 icon 免費 圖庫 2020 ui 網頁設計工具 ui 網頁設計 網頁 設計 Interfacer viivdjs fontello Iconscout Icons8 Flaticon Freebiesupply UXWing Thenounproject Flaticondesign▲Uber 用 icon 作功能導航，用的是日常意思的 icon，故更需配以文字輔助令訪客了解功能。

  2. 使用沒意義或設計難明的 icon：
    icon 商用 icon 商用 免費 icon 圖庫 icon 免費 圖庫 2020 ui 網頁設計工具 ui 網頁設計 網頁 設計 Interfacer viivdjs fontello Iconscout Icons8 Flaticon Freebiesupply UXWing Thenounproject Flaticondesign

  3. 使用一些辨悉度低的 icon —— icon 不能夠立刻表達出所代表的含義，要長時間才看明白

    正面例子：icon 商用 icon 商用 免費 icon 圖庫 icon 免費 圖庫 2020 ui 網頁設計工具 ui 網頁設計 網頁 設計 Interfacer viivdjs fontello Iconscout Icons8 Flaticon Freebiesupply UXWing Thenounproject Flaticondesign
    ▲Peets 的 icon 不花一秒便看懂，採用的 icon 簡單直接，亦完美呼應描述文字。

  4. 沒足夠空間給予 icon

  5. 設計太複雜的 icon

8 個 ICON 使用貼士

  1. 使用辨悉度高的 icon，毋須重新設計：icon 的意義是讓讀者明白指示，故不建議創意度高但辨悉度低的 icon。（常用且大眾都理解的標示如有「維修指示版」、「地球」、「搜尋」

  2. 五秒定律：如果要 5 秒以上才看明白 icon 的意思，則未必是高成效的 icon，要考慮更換了。

  3. Less is more: 用設計從簡並賦予意義的 icon。

  4. 善用 icon 減少用字，增加平台空間感：例如放在 toolbars、導航、功能表。

  5. 保留約定俗成的程式 icon 元素：例如 Microsoft Word 的 icon 則沿用字母「W」及藍色框框。

  6. 風格統一：用同一組、同一系列或風格一致的 icon，跟其他設計元素需統一風格的原因一樣。\

  7. 心心星星分得清：雖然心心♥︎及星星★都有正面或喜歡的意思，但在網絡世界，星星已約定俗成為「bookmarked」，而心心則有單純「like」的意思。

    Icon 小新聞：Twitter 曾將「favourite」（bookmark功能）的星星★ icon，改作心心♥︎，結果劣評如潮，一來因為用家要重新適應，二來這是將約定俗成的用法反了過來，要人跟從便令人感到更困擾了。怎樣都想不到該用什麼 icon？Text label 是最好的後備。icon 商用 icon 商用 免費 icon 圖庫 icon 免費 圖庫 2020 ui 網頁設計工具 ui 網頁設計 網頁 設計 Interfacer viivdjs fontello Iconscout Icons8 Flaticon Freebiesupply UXWing Thenounproject Flaticondesign▲網上有教學教用家將逝去星星拿回來。|source|

  8. 怎樣都想不到該用什麼 icon？Text label 是最好的後備。


10 大 ICON 免費資源庫

1.   Interfacer ── 具不同風格 icon，一按即打包下載icon 商用 icon 商用 免費 icon 圖庫 icon 免費 圖庫 2020 ui 網頁設計工具 ui 網頁設計 網頁 設計 Interfacer viivdjs fontello Iconscout Icons8 Flaticon Freebiesupply UXWing Thenounproject Flaticondesign注：某些檔需要有 sketch Mac 設計程式才可開啟，想轉換成 psd 檔案的朋友可於此轉換。

2.   Vivid.js

下載前已可自訂 icon alt text 名稱，方便建立上文所提到的 text label，增加標示清晰度。icon 商用 icon 商用 免費 icon 圖庫 icon 免費 圖庫 2020 ui 網頁設計工具 ui 網頁設計 網頁 設計 Interfacer viivdjs fontello Iconscout Icons8 Flaticon Freebiesupply UXWing Thenounproject Flaticondesign

icon 商用 icon 商用 免費 icon 圖庫 icon 免費 圖庫 2020 ui 網頁設計工具 ui 網頁設計 網頁 設計 Interfacer viivdjs fontello Iconscout Icons8 Flaticon Freebiesupply UXWing Thenounproject Flaticondesign▲可以修改data-vi 的值來自訂檔案 alt texticon 商用 icon 商用 免費 icon 圖庫 icon 免費 圖庫 2020 ui 網頁設計工具 ui 網頁設計 網頁 設計 Interfacer viivdjs fontello Iconscout Icons8 Flaticon Freebiesupply UXWing Thenounproject Flaticondesign▲你亦可透過 <i data-vi="doc" data-vi-size="96"></i> 來自訂大小，甚至顏色
|source|

3.   Fontello

與 Vivid.js 類似，可以自訂 icon 顏色及大小，更可批量下載：icon 商用 icon 商用 免費 icon 圖庫 icon 免費 圖庫 2020 ui 網頁設計工具 ui 網頁設計 網頁 設計 Interfacer viivdjs fontello Iconscout Icons8 Flaticon Freebiesupply UXWing Thenounproject Flaticondesign

4.   Iconscout         

      你可於此找到不少官方程式的 redesign icons，可以讓訪客輕鬆辨悉功能又不失創意：icon 商用 icon 商用 免費 icon 圖庫 icon 免費 圖庫 2020 ui 網頁設計工具 ui 網頁設計 網頁 設計 Interfacer viivdjs fontello Iconscout Icons8 Flaticon Freebiesupply UXWing Thenounproject Flaticondesign▲各種應用程式 icon 供下載icon 商用 icon 商用 免費 icon 圖庫 icon 免費 圖庫 2020 ui 網頁設計工具 ui 網頁設計 網頁 設計 Interfacer viivdjs fontello Iconscout Icons8 Flaticon Freebiesupply UXWing Thenounproject Flaticondesign▲Adobe icons 整套下載icon 商用 icon 商用 免費 icon 圖庫 icon 免費 圖庫 2020 ui 網頁設計工具 ui 網頁設計 網頁 設計 Interfacer viivdjs fontello Iconscout Icons8 Flaticon Freebiesupply UXWing Thenounproject Flaticondesign▲過萬個 icon 整套下載

5.   Icons8 

  • 風格較統一的 icon pack 供下載
  • 可自訂 icon icon 商用 icon 商用 免費 icon 圖庫 icon 免費 圖庫 2020 ui 網頁設計工具 ui 網頁設計 網頁 設計 Interfacer viivdjs fontello Iconscout Icons8 Flaticon Freebiesupply UXWing Thenounproject Flaticondesign

icon 商用 icon 商用 免費 icon 圖庫 icon 免費 圖庫 2020 ui 網頁設計工具 ui 網頁設計 網頁 設計 Interfacer viivdjs fontello Iconscout Icons8 Flaticon Freebiesupply UXWing Thenounproject Flaticondesign▲可自訂 icon 樣式、顏色、文字、加減元

6.   Flaticon

  • 以主題分類 icon 
  • 可自訂顏色、大小、位置及製作 pattern 圖icon 商用 icon 商用 免費 icon 圖庫 icon 免費 圖庫 2020 ui 網頁設計工具 ui 網頁設計 網頁 設計 Interfacer viivdjs fontello Iconscout Icons8 Flaticon Freebiesupply UXWing Thenounproject Flaticondesignicon 商用 icon 商用 免費 icon 圖庫 icon 免費 圖庫 2020 ui 網頁設計工具 ui 網頁設計 網頁 設計 Interfacer viivdjs fontello Iconscout Icons8 Flaticon Freebiesupply UXWing Thenounproject Flaticondesign
    ▲可自訂 icon 顏色。例如可將原味麵包轉成朱古力味。
    icon 商用 icon 商用 免費 icon 圖庫 icon 免費 圖庫 2020 ui 網頁設計工具 ui 網頁設計 網頁 設計 Interfacer viivdjs fontello Iconscout Icons8 Flaticon Freebiesupply UXWing Thenounproject Flaticondesign

7.   Freebiesupply

  • 提供多款高質 icons，所有都附 psd 下載檔，以便後製。icon 商用 icon 商用 免費 icon 圖庫 icon 免費 圖庫 2020 ui 網頁設計工具 ui 網頁設計 網頁 設計 Interfacer viivdjs fontello Iconscout Icons8 Flaticon Freebiesupply UXWing Thenounproject Flaticondesignicon 商用 icon 商用 免費 icon 圖庫 icon 免費 圖庫 2020 ui 網頁設計工具 ui 網頁設計 網頁 設計 Interfacer viivdjs fontello Iconscout Icons8 Flaticon Freebiesupply UXWing Thenounproject Flaticondesign

8.   UXWing

  • 提供多類黑白系 icons icon 商用 icon 商用 免費 icon 圖庫 icon 免費 圖庫 2020 ui 網頁設計工具 ui 網頁設計 網頁 設計 Interfacer viivdjs fontello Iconscout Icons8 Flaticon Freebiesupply UXWing Thenounproject Flaticondesignicon 商用 icon 商用 免費 icon 圖庫 icon 免費 圖庫 2020 ui 網頁設計工具 ui 網頁設計 網頁 設計 Interfacer viivdjs fontello Iconscout Icons8 Flaticon Freebiesupply UXWing Thenounproject Flaticondesign

9.  Thenounproject

  • 高質黑白 icons
  • 設計風格多樣，具線性或繪圖設計
  • 按進 icon 會顯示風格接近的 icon 
  • 可自訂 icon 背景及去背icon 商用 icon 商用 免費 icon 圖庫 icon 免費 圖庫 2020 ui 網頁設計工具 ui 網頁設計 網頁 設計 Interfacer viivdjs fontello Iconscout Icons8 Flaticon Freebiesupply UXWing Thenounproject Flaticondesignicon 商用 icon 商用 免費 icon 圖庫 icon 免費 圖庫 2020 ui 網頁設計工具 ui 網頁設計 網頁 設計 Interfacer viivdjs fontello Iconscout Icons8 Flaticon Freebiesupply UXWing Thenounproject Flaticondesign

10.    Flat-icon-design

  • 日系 icons
  • 一按轉換背景形狀及/或顏色▲右上 icon 順序可將所有 icon 切換至圓形、正方形、及轉換顏色▲轉換形狀及顏色後▲多個下載檔及色系供下載

以上的 icon 圖庫不少都類似，最重要的是跟隨 icon 使用的大原則，尤其是適當配以文字描述、簡單易明及風格統一。如果你對網頁設計或更多經營貼士感興趣，記得 follow 商場心理學



商場心理學
商場心理學