Printables 可列印免費手機模型草稿紙,以更清晰的思路開發應用程式

Printables 可列印免費手機模型草稿紙,以更清晰的思路開發應用程式

雖然沒有親身參與過手機應用程式專案,但可以想見在開發前期應該會有一段繪製草稿的過程,將各種想法經過討論轉為可視化應用程式草圖,才能夠繼續接下來的調整,這時候就必須把應用程式畫面畫出來。最近看到一個有助於應用程式開發的免費資源,提供許多手機模型模版,只要將它下載、列印出來就變成草稿紙,直接在紙上繪製更方便。

Radix Icons 小型 SVG 免費圖示集,Figma、Sketch 格式下載

Radix Icons 小型 SVG 免費圖示集,Figma、Sketch 格式下載

還記得上次介紹的 System UIcons 專為系統和產品開發設計的免費圖示嗎?這類尺寸較小、精緻且適用於介面設計的圖案相當深得我心,在很多情境下可能都派得上用場,如果你覺得之前推薦的圖示集不太夠用,或者剛好缺少你需要的圖示,可以試著搜尋其他替代方案。小型圖示集選項很多,通常是開放原始碼(Open Source)且包含多種常見常用圖片格式,接下來要介紹的免費圖示包含相當豐富的圖案,需要的朋友可以研究一下。

Free illustrations 免費插圖和向量圖庫懶人包,適用於個人和商業用途

Free illustrations 免費插圖和向量圖庫懶人包,適用於個人和商業用途

這幾年網路上有不少免費插圖素材可以下載使用,大多數都提供可編輯的向量圖格式,像是常見的 AI、EPS 或 SVG,也有部分是以 JPG 或 GIF 為主,後來還有直接線上自訂顏色樣式或配件的編輯器,能讓使用者在現有的素材下客製化更多不一樣的圖片素材,例如我之前介紹過的 Stories by Freepik 除了可自訂顏色外還能加入動態效果,讓原本靜態的素材變成動畫影片;Blush 可以挑選圖庫上不同配件的樣式和顏色組合;Icons8 旗下的 Vector Creator 讓使用者挑選人物或各種配件,自行組合出獨特插圖。

HANDZ 免費 3D 插圖素材,收錄 12 種手勢、9 種膚色共 320 種組合圖庫

HANDZ 免費 3D 插圖素材,收錄 12 種手勢、9 種膚色共 320 種組合圖庫

手勢是一種很容易讓人聚焦的方式,有時候一個動作就可以勝過很多文字,不過要注意的是手勢在不同國家、文化背景可能代表著截然不同的意思。記得很久以前曾經介紹過手勢圖示集,不過後來網站也已關閉,手指或手部素材不是那麼好找,當然如果你有一些繪畫設計能力要自己製作圖片並不算太難,若和我一樣無法自製,還是還是可以尋找網路上現成的素材加工後使用。

Blush 可線上調整、預覽並快速製作插圖素材,提供 PNG 格式免費下載

Blush 可線上調整、預覽並快速製作插圖素材,提供 PNG 格式免費下載

最近很流行的插畫素材是可以自訂各個部分,讓使用者快速製作符合自己需求的圖案,不用受限於原有圖案設計,前陣子介紹的 Stories by Freepik 還能加入動態效果,使靜態圖片變成動畫插圖;Icons8 旗下的 Vector Creator 可以自行挑選樣式,將需要的素材元件拖曳到畫面上,使其成為一張新的圖片。現在很多插畫庫都是直接提供使用者免費的向量圖或可編輯格式(像是 Sketch、Figma 或 XD),如果能在線上直接編輯產生圖片更方便。

Photopea 免費圖片編輯器 Photoshop 線上版支援 PSD 格式

Photopea 免費圖片編輯器,堪稱 Photoshop 線上版支援 PSD 等常見格式

每個人的青春歲月一定會有 Photoshop,至少對我來說是這樣,早期繪圖軟體選擇不多,也沒有線上編輯器可用,遇到網頁圖片需要編輯、修圖或是製作廣告橫幅 Photoshop 就是一般使用者最容易上手的工具。後來我比較沒有機會使用繪圖軟體,直到有機會再接觸 Adobe Creative Cloud 訂閱後才又稍微操作了一下久違的 Photoshop,相信平常工作會需要設計、編輯相片或製作素材的讀者一定對繪圖軟體不陌生。

Open Peeps 免費手繪人物插圖,內建三種樣式可快速混搭造型模組

Open Peeps 免費手繪人物插圖,內建三種樣式可快速混搭造型模組

在開始介紹今天的主題前,快速搜尋了一下之前推薦過的免費資源,因為一直覺得手繪插圖並不是很多,而且風格鮮明,直覺就聯想到「Open Doodles 免費手繪插圖下載,CC0 授權連同原始檔一併釋出」,後來一看才發現原來 Open Peeps 和 Open Doodles 出自同一個插畫家!另一個也是很大型的免費圖庫 Openclipart 收錄超過 150,000 張的向量美工插圖,不過風格和前面提到的兩個不太一樣,反倒有一種回到十幾二十年前素材庫的感覺。

Zwicon 手工打造高品質免費圖示集,566 種圖案收錄各種格式

Zwicon 手工打造高品質免費圖示集,566 種圖案收錄各種格式

開發一項新的專案前,可能會先去把相關資源找齊,其中在介面部分一定會碰到的問題是要使用那一套圖示做為主視覺,網路上已經有相當多免費圖示可供下載甚至是商業使用,若非必要其實不用再重新開發,我在上一篇「免費圖示 Unicons 收錄超過 1000 個向量圖示下載」提過一些之前介紹過的圖示素材,如果你想找圖示,也可直接瀏覽本站免費圖示分類或透過右側站內搜尋框找到更多相關文章。

Eva Icons 超過 480 個精美免費圖示,開放原始碼可用於商業模式

Eva Icons 超過 480 個精美免費圖示,開放原始碼可用於商業模式

在開發網路服務或應用程式介面都會需要用到圖示,因為涉及易讀性,也要能和各種不同風格搭配使用,多半會選擇簡單設計的圖案,過去我已經介紹過不少很值得使用的圖示集,包括:EntypoSmartIconsOcticonsGeomiconsMaki IconsZondicons 等等,族繁不及備載,其中不乏開放原始碼、可使用於商業模式的授權,如果你想開發網頁或程式,可以花點時間作功課找找有沒有符合需求的免費圖示選項。

Site Palette 從網站獲取配色,快速產生完整調色盤資訊(Chrome 擴充功能)

Site Palette 從網站獲取配色,快速產生完整調色盤資訊(Chrome 擴充功能)

最近介紹過一些令人印象深刻的色彩工具,多半都是 Google Chrome 外掛,例如我個人很喜愛的「CSSPeeper 為設計師量身打造,更聰明視覺化檢視網站 CSS 樣式表」,能以更簡單、有組織性的方式呈現網站樣式和各元件,對開發者來說是非常實用的工具。當然瀏覽器可以做的事情也很多,包括一行程式碼將瀏覽器變成網頁編輯器,直接從網頁中修改內容,在開發網站測試時會省時省事很多。