編者按：想提升界面質感又不會設計圖標，收藏第一個網站就可以咯。第二個是款可能是全球易讀性最高的英文字體，現在開放商用，千萬別錯過咯。

年底干貨巨獻：《2016年年度設計圈干貨精選合集》

一般在開發項目或應用程序時會用到圖標集，不但能提升界面質感，也能讓使用者更容易學習使用，其實網絡上也已有不少免費圖示素材可以下載、使用在自己的項目上，節省重新設計或繪制時間預算，當然要找到能夠搭配的圖案可能不是那么容易，我傾向介紹一些較為簡單、線條干凈的圖示組，這會更適合整合到各種設計風格。

Evil Icons 是我最近發現的免費圖示集，這是一套簡單、干凈 SVG 圖示，開放原始碼，對于開發者來說只要幾行程序代碼就能輕松調用，支持 Rails、Sprockets、Node.js、Gulp、Grunt 和 CDN，如果你想要自己稍作修改或重新設計，Evil Icons 還提供 SVG、AI 及 Sketch 圖示格式下載。

最快速套用 Evil Icons 至網站的作法是直接使用 CDN 也就是 jsDelivr 的 Evil Icons，只要將兩行程序代碼插入網站（分別是最小化后的 CSS 和 JS），就能透過 CSS 來調用圖示或調整顏色尺寸。

Evil Icons 收錄的圖案總數有 70 個，三種圖示大小，線條簡單干凈。

Evil Icons

STEP 1

開啟 Evil Icons 網站后，可以看到所有圖示的預覽及代碼，這套圖示集是 SVG 格式，有 70 種不同圖案設計，其實都是蠻容易用到的圖案，在社群圖標部分也有中國臺灣很多人使用的 Facebook、Google+ 和 Instagram。

如果想預覽不同的大小尺寸呈現效果，可點選左上角的 S、M 和 L 來切換，圖示大小看起來有完全不同的感覺，也能運用在不同位置。

STEP 2

如果你想要打包下載整套 Evil Icons 圖示，點選網頁上方的「Download」就會有下載選項，分別提供四種格式：SVG、Illustrator CC 及 Illustrator CS 適用的 AI 格式及 Sketch。

STEP 3

因為 Evil Icons 屬于開放原始碼項目，可以在 GitHub 頁面找到更多詳細使用說明，其中我認為將圖示套用到網頁設計最快的方法就是利用 CDN 服務（jsDelivr），只要在網頁加載兩段程序代碼，就能依照下方的范例來顯示圖標，非常好用。

其他更多將 Evil Icons 套用到你當前開發項目的用法，除了從 GitHub 找到，也能自己把圖示下載下來研究一下，應該不會太難，這套圖示是由 Evil Martians 公司的兩位成員設計制作，以 MIT License 授權釋出。

Overpass Font

一般使用于道路標志上的字體設計講求易讀性，或者可以這么說，要如何在一定車速情況下不用花太多時間就能一眼辨識標示，成為該字型的設計初衷及最大挑戰。在開始介紹本文的 Overpass Font 前我查了關于Highway Gothic 數據，因為 Overpass 網站提到這個字型的設計靈感是來自它，也就是著名的「聯邦高速公路字體」，美國、加拿大、土耳其、澳大利亞、荷蘭、中國大陸及中國臺灣皆用于道路標志的標準字體，不過在一些地方已經逐漸被 Clearview 取代。

許多設計師以 Highway Gothic 為基礎創造出更多不同字型組合，Red Hat 使用的企業字型 Interstate 就是其中一個與 FHWA 類似的字型；Overpass 則是 Red Hat 委托設計師 Delve Withrington 設計作為取代 Interstate 的免費替代方案，并將它開放原始碼釋出（GitHub），提供使用者免費下載使用。

Overpass Font 免費字型一共內建八種字重（Font Weights），加上斜體及等寬字（Monospace），只要開啟網站就能下載桌面版適用的 OTF 格式字型文件。若要用于網頁，Overpass 也獲得 Google Fonts 和Keycdn贊助的 CDN 分流服務，只要一段程序代碼就能將它加載網站內調用，完全不耗費到你的網站流量就能使用這一套易讀性很高且設計中規中矩的免費字型。

STEP 1

開啟 Overpass Font 字型網站后，點選上方「Try It」來開啟測試預覽功能，可以看到這組字型一共有八種字種，分別為：200、300、400、500、600、700、800 和 900，在上方輸入要測試的英文或數字就會實時顯示于下方預覽。

STEP 2

點選「Variants」會有 Overpass 所有字重樣式，在一般標準及斜體的呈現效果。

我個人在找字型時會習慣看字符表（Glyphs），里頭會列出所有收錄的大小寫英文、數字及符號，它們在字型下顯示出來的效果，將鼠標光標移動過去還會放大讓你看到更多細節。

至于前面提到 Overpass 還有固定寬度字體（Monospace），如果要用于顯示程序代碼的話會更為合適，一樣點選上方的「Try Mono」就能開啟測試功能。

STEP 3

返回首頁后，點選「Desktop OTF Files」即可免費下載 Overpass 字型包，若要直接加載網站使用，可利用網站下方 KeyCDN 提供的免費 CDN 網址，支持 HTTPS（或 Google Fonts 也能找到鏈接）。

「優設12月人氣最高的3個神器」

1. 免費圖庫丨《超過5萬張！免費高清可商用圖庫ZOOMMY 3.0重磅來襲！》
2. 日本圖庫丨《福利兩連發！PS快速復制圖層插件+日本免費商用圖庫》
3. 可商用素材丨《每日更新，展示免費可商用素材的PIKTAB》

原文地址：free.com.tw

【優設網 原創文章 投稿郵箱：yuan@uisdc.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量180萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com