在一些大公司推動的產品開發都會有「設計語言」(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 鏈結網址