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

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

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

Card-logo 免費下載信用卡、支付平台 LOGO,合併為 PNG 和 SVG 格式

Card-logo 免費下載信用卡、支付平台 LOGO,合併為 PNG 和 SVG 格式

通常在提供電子商務的網站都會看到支付圖案,讓消費者知道該店家支援的付款方式,常見的像 Visa、Masterard、JCB 信用卡,或是這幾年逐漸成為主流的行動支付 Apple Pay、Google Pay、支付寶,還有網路最多人使用的 PayPal 和比特幣等加密貨幣都是網路上常用的支付方式。

Datamaps.co 熱度圖產生器,可匯入資料於地圖上呈現各種數據

Datamaps.co 熱度圖產生器,可匯入資料於地圖上呈現各種數據

將文字的數據資料轉為可視化圖片有助於瀏覽閱讀,如在簡報時佐以圖表,也能夠讓聽眾更快掌握你的內容,當然好的圖片可不是隨手就有,平常也得收集一些素材,或是準確使用網路資源,例如 Chartico 可以協助使用者製作好看的圖表,以 Google Data GIF Maker 將數據快速製作為 GIF 動畫,若需要一些扁平化設計的免費圖示unDraw 是一款持續更新中的插圖圖庫,優點是能直接調整插圖的主要顏色,讓圖片和你的簡報設計更加緊密結合。

Favicon Checker 檢查網站圖示在 iOS、Android、PC 和 Mac 設定是否正確

Favicon Checker 檢查網站圖示在 iOS、Android、PC 和 Mac 設定是否正確
(Copyright: audiohead / 123RF Stock Photo

網站最佳化指南裡有提到最好可為網站加入網站圖示(Favicon),如果沒記錯的話,雖然是一個簡單的動作,但對網站來說卻有相當大的幫助,怎麼說呢?這些圖案有助於加深使用者對網站的印象,在書籤列顯示也更容易識別,除此之外,當今行動裝置瀏覽器例如 iOS Safari 或 Android Chrome 都支援將網站釘選到主畫面,不過必須事先設定好合適的圖案。

iOS Icon Gallery 收錄各種優秀應用程式圖示設計,macOS、watchOS 開發者必備

iOS Icon Gallery 收錄各種優秀應用程式圖示設計,macOS、watchOS 開發者必備
(Copyright: ymgerman / 123RF Stock Photo

我有時候會盯著 iPhone 手機應用程式的圖示看到出神,這些可能每天會被我們看不下數十、數百次的小圖案其實背後隱藏許多設計玄機,或許你曾讀過 Apple 是如何用心在著墨、設計這些圖案的文章,雖然有被加油添醋,但真的不誇張!在有限範圍內設計出能令人喜歡、一眼就記住的圖案很不容易,假如你正好缺一個好的圖示,可以先從別人的設計找尋靈感。

InstaCover:將 Instagram 相片製作為 Facebook 封面

InstaCover:將 Instagram 相片製作為 Facebook 封面

本來想問問你是不是 Instagram 的使用者,但想到這老梗昨天好像用過了,那換個問題:你知不知道如何把 Instagram 裡的相片製作成拼貼圖呢?這你就回答不上來了吧!如果你喜歡用手機來記錄生活的話,可以用一個線上服務把你所有的 Instagram 相片製作成臉書的封面相片,個人覺得還蠻棒的喔!

Favikon 網站小圖示(favicon)產生器

Favikon 網站小圖示(favicon)產生器

如果你有網站或部落格,應該為它加上一個網站小圖示,也就是 Favicon(發音為”fave-icon”,也就是喜愛的圖示),通常此圖示會出現在網頁瀏覽器的網址列旁邊,會使用標誌或是代表網站的圖片,除了出現在瀏覽器以外,也會使用在 RSS 閱讀器列表或是鏈結清單裡,加上好的 Favicon 可以讓使用者更容易辨識並記住你的網站。

Placehold.it 範例圖片產生器,以網址快速調用任何尺寸的圖片

Placehold.it

設計網頁時常常需要找寬度、長度合適的圖片來填充區塊,或是測試不同大小圖片的表現。這往往可能浪費很多時間,甚至還要自己動手製作某些特殊尺寸的圖片,相當麻煩。透過方便的線上工具Placehold.it ,可以快速產生任何大小的佔位圖片,且能自訂圖片的格式、顯示的文字、顏色等等。

化け猫アイコンメーカー:貓咪頭像產生器

化け猫アイコンメーカー

化け猫アイコンメーカー」是一個蠻有趣的小工具,讓你可以線上製作出可愛的貓咪頭像,包括外型、模樣、耳朵、眼睛、嘴巴和顏色等等都可以自訂,也可以寫上文字讓它更有個人特色。完成後可以保存為三種圖片格式,並設定需要的圖片大小。

Iconza 為你的網站、部落格量身打造的圖示產生器!

iconza-logo

Iconza與先前介紹的Iconizer線上圖示自訂工具類似,提供112個圖示,讓使用者可以自己線上自訂圖示顏色、尺寸及背景顏色,在將自己需要的圖示下載使用,Iconza也提供一次把所有圖示打包下載的功能。

如果你剛好需要一些圖示來裝飾自己的網站,可以到Iconza線上製作。