File Samples 超過 180 種格式範例檔下載,開發測試使用更方便

File Samples 超過 180 種格式範例檔下載,開發測試使用更方便

平常因為工作上會需要測試我都會準備各種範例檔案,一些簡單、常見的檔案格式大多都不會少,偶爾需要少見的格式時除了自己轉檔製作,也能從「File Examples 提供各類型測試用檔案免費下載」網站取得特定格式,好處是更快速、更節省時間,也不用擔心資料安全性等問題(畢竟要做測試檔還要考慮到放什麼內容),最近在寫線上轉檔工具題材時無意間又發現一個類似的免費資源,趕緊分享給大家。

Loaders 為開發者提供免費動態載入圖示 React、HTML、CSS 程式碼

Loaders 為開發者提供免費動態載入圖示 React、HTML、CSS 程式碼

如果在開發網站、應用程式或軟體專案時需要讀取中的動態圖示,UI Ball 有個名為「Loaders」網站收錄 24 種類型獨特、可自訂且輕量化的載入動態圖,Loaders 也是一個 React.js 套件資料庫,打開網站就能在線上直接預覽這些很眼熟的動畫圖,對於要取用拿去開發專案來說非常有用,也不用上網到處尋找動態圖,Loaders 所有動態圖示都有提供對應的 React、HTML 和 CSS 原始碼。

Lorem Picsum 線上測試圖產生器,快速插入特定長度、寬度 CC0 圖片

Lorem Picsum 線上測試圖產生器,快速插入特定長度、寬度 CC0 圖片

在開發網頁或設計版型可能會需要放入圖片進行測試,除非你原本就有自行準備測試圖片,否則就需要使用佔位圖片(Placeholder),簡單來說,佔位圖就是依照使用者所需的長度寬度快速產生圖片,以填充特定的圖片空位,好處是不用手動裁切圖片,大多數的佔位圖片產生器都是透過圖片網址來指定要顯示的大小,有些還能加上特效、選擇不同類型的範例圖片,我覺得可以在圖片中顯示長寬尺寸對於要辨識來說也很有用。

Fluenticons 微軟 4000 個開放原始碼免費圖示下載,線上預覽風格配色

Fluenticons 微軟 4000 個開放原始碼免費圖示下載,線上預覽風格配色

微軟(Microsoft)釋出超過 4000 個開放原始碼免費圖示Fluent UI System Icons」,一系列大家都感到熟悉、友好和現代化的圖案設計,不過在 GitHub 取用這些圖案、瀏覽上並不是很方便,因此有國外開發者另外開發了一個「Fluenticons」網站做為 Microsofts fluent icons 檢視器,透過這個工具就能在線上預覽、搜尋特定的圖示圖案,也能切換淺色或深色背景,讓下載圖示變得更簡單。

Lineicons 超過 5000 個線條圖示,適合設計師或開發使用者介面

Lineicons 超過 5000 個線條圖示,適合設計師或開發使用者介面

Lineicons 是一套收錄超過 5000 種圖案的圖示集,主要設計風格為手工製作線條圖示,適合使用於各種現代化使用者介面,例如網頁、行動裝置應用程式、桌面軟體等等,對於設計師或開發專案來說非常有用。其實類似的圖示資源還真不少,例如之前介紹過 UiconsUnicons Icon LibraryiconhubHeroiconsIcoMoon App,這些圖示多半都已經完整覆蓋常見常用圖案,差異在於細節或是授權方式,如果需要尋找開發用的素材可找找免費圖示分類。

DOTOWN 前任天堂設計師開發免費點陣圖網站超過 600 種素材免費下載

DOTOWN

之前介紹過「俐方體11號:免費、開放原始碼 11×11 中文點陣體字型下載」,一款帶有復古感覺的點陣免費字體,看起來非常有時代感,彷彿回到二十年前的 DOS 老遊戲風格,一格一格的營造出早期解析度不高的效果。如果你喜歡這種點陣圖設計,現在還有專門提供類似素材的網站(不過當然以日文為主),無論要使用於海報、投影片或是做為報告插圖,將它套用於實體商品都非常適合。

Uicons 超過 4000 個免費圖示下載!適合網頁、應用程式開發者使用

Uicons

很多年前介紹過「FlatIcon 超過 12000 個平面化圖示設計免費下載」設計資源,時至今日它已經是個非常龐大的素材庫,這家公司旗下還有包含 FreepikSlidesgo 等知名的網站,前陣子剛推薦過 Icons Pattern 以 Flaticon 提供的圖示製作無接縫背景圖片工具,對於要產生重複拼接效果的素材很有用,接下來還要再推薦一個也是 Flaticon 旗下的免費工具,如果需要開發網站、軟體或應用程式可以研究一下。

How Big Is My Browser? 打開網頁顯示目前的瀏覽器可見範圍尺寸

How Big Is My Browser? 打開網頁顯示目前的瀏覽器可見範圍尺寸

因為工作需求我時常需要對螢幕進行擷圖,擷取瀏覽器、應用程式視窗畫面,透過 SizeUp 工具可快速調整視窗大小(SizeUp 不是免費軟體,Spectacle 是功能類似的免費替代方案),不過很難得知實際瀏覽器顯示解析度,如果是開發者或設計師想調整頁面,可能需要設定一個確切的顯示範圍進行更精準測試,接下來要介紹的小工具可以滿足類似需求。

Placy 線上佔位圖產生器,製作特定尺寸範例圖三種格式下載

Placy 線上佔位圖產生器,製作特定尺寸範例圖三種格式下載

在開發網站、測試網頁模版設計時經常會需要用到佔位圖(Placeholder),這是什麼呢?簡單來說就是範例圖片,用於填充一些可能要預留、之後顯示圖片的位置,既然是佔位圖片就要符合幾個要件,像是快速設定要產生特定尺寸大小、可以快速取用(甚至不用下載圖片、直接給使用者圖片鏈結),或是在圖片上方會清楚標示出這張佔位圖的尺寸,對於開發來說就會更方便更省時間。

Share Icon 超過 25 萬個免費圖示下載!PNG、SVG 兩種主要格式

Share Icon 超過 25 萬個免費圖示下載!PNG、SVG 兩種主要格式

如果想要尋找好看的圖示圖案,我曾經介紹過許多免費圖示資源,大家可以從各種網站中尋找自己需要的素材,畢竟對大多數使用者來說要自己繪製圖示圖案還是有不少難度,還好網路上已有現成圖示可直接使用,減少重新開發需要耗費的成本和時間。偶爾在製作簡報或是書面報告時需要用到圖片也能找找有無合適的素材,或許可以使內容看起來更為生動活潑。