Loaders 讓瀏覽者在等待網頁載入的同時出現動畫圖示

Loaders 讓瀏覽者在等待網頁載入的同時出現動畫圖示

網頁在呈現之前是需要運算及傳輸時間的,如果可以在這個等待時間加入一個進度條,讓瀏覽者知道還要等多久,會是較理想的網頁設計,但進度條的準確度會受到很多條件的限制,因此,大部分的網頁都是提供一個等待圖示動畫,藉此提示瀏覽者,不需要有多餘的動作靜待網頁呈現。以往要加入此類的等待圖示動畫,我們會使用 Gif 圖檔,而現在我們可以更方便的使用 JavaScript 或是純 CSS 就能加入,Loaders 這個網站提供獨特且具有質感的 24個免費 loader ICON,每個均提供 REACT、HTML 及 CSS 原始碼,讓網頁設計使用 loader ICON可以更方便且有更多選擇。

Fluenticons 微軟開源圖示集,PNG、SVG免費下載使用

Fluenticons 微軟開源圖示集,PNG、SVG免費下載使用

圖示就像成語,精簡又有內涵,想要在應用程式中使用圖示,不見得要自己製作,網路上有很多免費可商用且風格成套的圖示集可供下載,包含像是 Google Icon Fonticonhub 或是 IcoFont 都是相當不錯的應用。
Fluenticons 這個網站跟微軟官方沒有關係,其主要提供微軟在各種應用程式中所用到的 4000多種圖示並將之集合成套,每個圖示提供實心填充與輪廓兩種樣式,並提供使用者在線上就可以進行顏色更換,下載時可選 PNG、WEBP、Vue Component 或 React Component 多種檔案格式,減少下載後還要後製處理才能使用的麻煩。

「醬3」一組由醬油種類及其可搭配菜餚的圖示組合,免費下載可商用

「醬3」一組由醬油種類及其可搭配菜餚的圖示組合,免費下載可商用

「醤3(ショウスリー)」計畫首先開發出讓人用餐時可以品嘗到 3款不同醬油的「三口醬油碟」,而這組由醬油的基本用法、醬油的種類、互搭的菜餚等多種類別所組成的圖示也是其計畫中的產物,共有 70多種,採 PNG 檔案格式,可用於產品包裝、餐廳菜單符號、文宣品等各種場景,期盼藉由這些圖示能傳遞出醬油用途的無限可能性。

LRicons 線上左、右箭頭圖示免費下載,可商用

LRicons 線上左、右箭頭圖示免費下載,可商用

網路上有很多提供「圖示」免費下載使用的網站,使用者可以透過其分類或是搜尋來取得想要的圖示,但如果想要取得的圖示明確,也無須到這種包山又包海的圖示網站來搜尋,例如,我們想要的就是箭頭圖示,而且很明確就是要一組左、右箭頭的圖示,可以來 LRicons 這個網站試試,該網站就是只有收錄向左或向右箭頭的 SVG 圖示,讓使用者無須耗費太多在尋找圖示的過程,且所有的圖示均可共個人或商業免費使用。

「改圖寶」免費線上印章圖檔產生器

「改圖寶」免費線上印章圖檔產生器

個人印章多數用在實體文件上,其帶有法律效力,即便是儲存在電腦內的文件,多數也都是以圖檔來儲存,而印章圖檔呢?應該來說比較帶有裝飾性質,想要取得可自訂文字且是透明背景的印章圖檔,說實在也不用自己用圖片編輯軟體來製作,最簡單的方式就是利用線上印章圖檔產生器來製作,「改圖寶」這個網站免註冊就可以讓使用者輸入想要的文字,選好字型及所要的印章樣式,立刻就能產生背景透明的 PNG 圖檔,方便後續要應用的地方,相當方便。

Ira Design 可自訂顏色的 PNG、SVG 插圖免費下載(可商用)

Ira Design 可自訂顏色的 PNG、SVG 插圖免費下載(可商用)

適當的運用插圖或圖示,常能為版面帶來加分的效果,Ira Design 是一個免費網站,其提供 開源和可自定義的插圖,使用者可以根據自己的需求自訂插圖內的人物或物品顏色,以人物來說,可以自訂衣服、褲子及頭髮的顏色,完成後的插圖,可以下載成 PNG 或 SVG 向量圖檔,而要使用這些插圖,也無任何限制,個人或商業用途皆可,該網站無須註冊,即可以下載單一或整個插圖,相當方便。

WorldVectorLogo 免費下載全球知名企業 LOGO 圖示向量圖檔

WorldVectorLogo 免費下載全球知名企業 LOGO 圖示向量圖檔

做網頁、文宣品,如果需要放上企業品牌的 LOGO 圖示,像是 Google 旗下的 YouTube、Google Pay、Photos、Map...等眾多服務的代表圖示或是 Facebook、line、twitter社群網站的分享按鈕圖示時,通常都可以直接到官方網站下載圖示圖檔,然後根據所要的尺寸進行放大或縮小,方法雖可行,卻受限非向量圖檔的因素,品質很難統一。WorldVectorLogo 這個網站提供全球各大知名品牌的 SVG 向量圖示檔,不論對尺寸是要放大還是縮小,都能維持清晰度與一致性,大幅縮短網頁或文宣品的製做工時。

CSS.GG 免費圖示字型集,透過 CSS 語法就可應用

CSS.GG 免費圖示字型集,透過 CSS 語法就可應用

在網頁中如果要用圖示,例如電話、郵件或是箭頭,以往的做法就是要有該圖示的圖片檔,將其放在指定的位置,但隨著螢幕大小多元化,固定尺寸的圖示圖片檔,缺點盡顯,除了佔用流量外,亦無法滿足螢幕大小的變化,因此將圖示如同網頁字形般的運用,是目前圖示應用在網頁的做法。不論是 Unicode、Icons - Google Fonts 、Font Awesome 都有提供適合在網頁中使用的字形化圖示集,CSS.GG 這個網站同樣提供免費的字形化圖示集,使用者可以自訂顏色、尺寸,再透過其所提供的 HTML,CSS、SVG 或是 TSX 語法就能應用到網頁上。

IFN 電腦、家居、運動、食物...等類別圖示免費下載(可商用)

IFN 電腦、家居、運動、食物...等類別圖示免費下載(可商用)

「圖示」就是要用簡單的圖案就能讓人明白所代表的意思,IFN 這個網站提供網路/電腦、商業環境、學習、電器、家居用品、車輛、運動、大自然、食物/飲料、行為、 對話/情緒、箭頭、動物...等等各種類別的圖示,每個圖示均有提供 SVG、EPS 及 PNG 三種檔案格式,使用者可視需求自行選擇下載的圖檔格式,圖示無版權限制,不論是用在網頁、文宣、宣傳品均可,但不可以做為商標或出售。

Scale by Flexiple 可自訂顏色且可商用的 SVG 或 PNG 插圖

Scale by Flexiple 可自訂顏色且可商用的 SVG 或 PNG 插圖

要做簡報、文宣、網頁總免不了要使用一些插圖來增加版面的美觀,而要取得這些插圖通常可以購買或到網路上下載,但不論付費或免費,最須注意的就是其使用版權,Scale 是個免費提供插圖的網站,號稱每天都會更新,其提供單一顏色與使用者可自訂顏色組合的插圖,並且因應 COVID-19 疫情,還可以選擇插圖中的人物是否要戴上口罩,所有的插圖均提供 SVG 與 PNG 的圖檔格式,不但可商用使用時也無須著名出處,網站唯一要求就是不可以以這些插圖作成類似的網站,成為其競爭對手。