Fluent Icons 免費下載 965 個漂亮專業的流暢設計風格圖示

最後更新於 2020 年 07 月 07 日

在一些大公司推動的產品開發都會有「設計語言」(Design Language),簡單來說就是將設計的表達方式、偏好或風格系統化,寫成明確規範,讓設計師和開發人員間能夠溝通運用,另一方面也可重複使用設計元件,避免重複開發,將時間投入在真正重要的事物本質上。更重要的是讓產品在不同平台的設計風格維持一致性,以提升產品的識別度、強化品牌形象。

本文要介紹的「Fluent Icons」是 Icons8 新推出的免費圖示集,採用微軟的流暢設計(Fluent Design)風格,流暢設計是微軟在 2017 年開發者大會提出的設計體系,基於五個最重要的關鍵元素:光感,深度,動效,材質及縮放,能讓整體看起來更具有質感也更為活潑。

微軟的流暢設計(Fluent Design)就如同 Google 質感設計(Material Design)、Apple 扁平化設計(Flat Design),都是一個設計體系,遵循指導手冊就能開發設計出類似效果的介面或是應用程式。

Icons8 這次推出的 Fluent Icons 圖示集一共收錄 965 個免費、漂亮且專業的圖案,這些圖示適合使用於應用程式、簡報、網站或資訊圖表,圖案風格看起來活潑有趣,但又不失專業,利用適當的顏色與光線效果讓吸引使用者目光。可免費下載 48px、96px 兩種尺寸、PNG 格式圖片素材,依照授權免費使用時必須標示出處來源。

Fluent Style Icons — Icons8
https://icons8.com/l/fluent/

使用教學

STEP 1

開啟 Icons8 的 Fluent Icons 網站可以看到此風格的特色介紹,即使圖示色彩繽紛,依然保有專業感,在某些情境下使用有加分效果。下方有 Fluent Icons 各類圖示包括使用者介面、醫療、食品、手勢、商業和其他,點選分類底下的鏈結可以看到更多圖示,總數有 965 個。

STEP 2

點選任何你要下載的圖示,開啟 Icons8 網站後點選「Download」下載檔案,另外也有一個是直接產生網址的 HTML 嵌入方式。

STEP 3

免費用戶可下載 PNG 格式,大小為 48px、96px 或小於 100px 的自訂大小圖案,如果要下載更大張的圖檔或是取得 SVG 或 PDF 格式必須付費升級才行。

下載後會顯示如果是免費下載、使用的話必須在你使用圖示的頁面放上圖示來源鏈結,確認沒問題點選「Download for free」就能免費獲取圖示。

STEP 4

前面有提到除了下載圖檔,Icons8 還提供另一種「HTML 嵌入」方式,簡單來說就是直接給你網頁程式碼,分為 CDN 和 Base64 兩種,透過網頁給出的 HTML 程式碼就能將圖示快速使用於網站(當然使用時一樣必須標示來源出處)。

值得一試的三個理由:

  1. Icons8 新推出 Fluent Icons 免費圖示,一共有 965 個圖案設計
  2. 採用微軟的流暢設計(Fluent Design),色彩繽紛但保有專業感
  3. 可免費下載 48px、96px 的 PNG 格式,亦可取得 CDN 鏈結網址

 

相關的文章

Bg-Patterns 日本免費網頁背景素材,提供常見格式及向量圖下載

如果要找尋一些很細膩、有質感的網頁素材,日本網站是個很好的去處,像是之前介紹過的 FLAT ICON DESIGN 收錄許多扁平化設計圖示,還有 FREE LINE DESIGN 提供各種分隔線素材,相片的話可以找找東京デート、Model.foto、photoAC、BIZUTART 和 PAKUTASO 等等,應該都會有不少收穫。有些網站其實很適合使用這一類素材,放上後的裝飾效果更能提升頁面整體質感。

Artify 提供新冠肺炎免費設計素材,線上編輯器修改立即使用

隨著新冠肺炎(COVID-19)疫情趨緩,一些社交活動或限制也逐漸解禁,終於可以回到大家比較熟悉的生活。不過該做的健康管理與防護還是要養成習慣,例如外出後要記得洗手,不以手碰觸眼睛或口鼻,如果搭乘大眾運輸工具或是前往公共場所還是盡量戴上口罩和保持社交距離,一方面也能確保不被感冒或各種疾病傳染,想想平日的衛教宣導還蠻重要的。

Vector Creator 線上自製創意插圖圖庫,匯出 PNG 和 SVG 格式

Icons8 是一個相當活躍的免費圖示公司,後來也持續在免費圖庫、向量圖和音樂音效素材等方面深耕,現在算是非常全面的設計師資源,無論是需要一般相片、向量圖、插圖或音樂都可以從 Icons8 找到相關工具,例如以提供免費音樂素材為主的素材庫 Fugue、讓使用者自己製作圖庫的 Moose Photos、透過程式碼就能快速插入圖示的 Omg-img 專案都出自於這家公司,接下來要再來介紹旗下的新服務。

useAnimations 免費動態圖示下載,可用於應用程式或網站介面開發

如果要開發應用程式或製作網站,我們通常會尋找適合的免費圖示,如此一來就能減少開發成本,也能更快製作出符合期待的介面,像是 Ikonate、Potlab Icons、Unicons 和 illustrio 都可以直接套用到使用者操作介面的圖示集,而且也具備一定程度的可自訂性,對於開發者來說是不可多得的資源。

Freebies.ByPeople 各種免費素材集散地,設計師開發人員必須收藏

免費資源網路社群本身已經是一個收錄超過六千篇文章的免費資源網站,因此我就比較少介紹同類型的服務,不過網路上確實有不少類似網站,例如 Evernote Design 設計師必備懶人包就在單一網站上整合各種設計相關素材資源;或是 The Stocks 精選免費圖庫,一站收錄更方便搜尋等等,這些集合式免費資源都非常值得加入書籤以備不時之需。

Line Awesome 超過 4000 個免費線稿圖示,修改自知名 Font Awesome

如果說到最知名的免費圖示字型(Icons Font),我想大家一定聽過 Font Awesome,這套圖示最初發佈於 2012 年,現今則由 1,544 個圖案組成,主要分為免費、開放原始碼和付費 Pro 圖示兩大類型,在使用 Font Scripts 網站中佔有 20% 市佔率,可以想見我們看到的很多圖案可能都是來自它。若要使用這套圖示,除了直接從官方網站或 GitHub 下載整套圖示集,亦可透過開放式內容傳遞網路提供的鏈結載入相關圖案。

回應