來源：優(yōu)設(shè)網(wǎng)
鏈接：https://www.uisdc.com/top-design-tools-june-2019
編者按：新一輪的干貨素材來了！這次依然是來自 Prototypr.io 設(shè)計(jì)干貨大合集，他們會(huì)根據(jù)設(shè)計(jì)工具的屬性，給它們分門別類。這次的合集中，各種設(shè)計(jì)工具數(shù)量不少，總會(huì)有幾款你能用得上的。
在過去的一年當(dāng)中，大量的免費(fèi)圖庫涌現(xiàn)了出來，創(chuàng)建免費(fèi)圖庫、提供素材服務(wù)似乎成為了一種新的趨勢(shì)。在過去的一個(gè)月當(dāng)中，還有很多新的、值得推薦的設(shè)計(jì)工具，接下來我們一起來看看。
一、插畫圖庫
算起來，今年 6 月幾乎是一個(gè)插畫圖庫月，這個(gè)月出現(xiàn)了大量的插畫免費(fèi)圖庫，除了之前我們所推薦的 UnDraw（使用的是MIT授權(quán)協(xié)議）之外，額外還有6個(gè)相當(dāng)不錯(cuò)的插畫圖庫。
1. 藝術(shù)圖庫 Mixkit Art →
https://mixkit.co/art/
Mixkit Art 是一個(gè)藝術(shù)風(fēng)格插畫圖庫，這意味著你可以在你的設(shè)計(jì)當(dāng)中，借助這樣的圖庫賦予設(shè)計(jì)以更濃郁的藝術(shù)氣息。當(dāng)然，這個(gè)圖庫是免費(fèi)的！這也是我最喜歡的詞！
2. 404頁面生成 Trendy 404s →
https://www.kapwing.com/404-illustrations
有了 Trendy 404s 之后，忘掉那些無聊的 404 頁面吧。在它的幫助之下，你可以讓你的 404 頁面更加有趣，不再單調(diào)局促。
3. 角色插畫生成工具 Stubborn Generator →
https://stubborn.fun/
這是一個(gè)免費(fèi)的插畫生成工具，能夠幫你的項(xiàng)目創(chuàng)建一個(gè)獨(dú)特的、富有故事性的插畫。這套工具包含 25 個(gè)角色和 50 種不同的背景，可以使用 Sketch 和 Figma 進(jìn)行自定義設(shè)計(jì)。
4. 剪紙風(fēng)插畫工具 Paper Illustrations 1.0 →
https://iconscout.com/paper-illustrations
高度定制化的扁平插畫是一種勢(shì)不可擋的趨勢(shì)。這套剪紙風(fēng)的插畫工具里面的素材都是矢量的，有 AI 和 Sketch 兩個(gè)版本，100% 可以商用。
5. 兒童涂鴉轉(zhuǎn)換工具 Drawow →
https://drawow.com/
你不得不承認(rèn)，有時(shí)候最有創(chuàng)造力的還是孩子。這套工具能夠幫你將孩子們的涂鴉作品轉(zhuǎn)化成為漂亮的插畫，這不僅能夠給你的家庭生活帶來更多樂趣，也能為你提供有用的插畫素材。
6. 角色插畫包 Grape Illustration Pack →
https://www.drawkit.io/grape-pack
這套插畫圖形包含了 20 個(gè)非常友好的角色，包含 AI、SVG 和 EPS 三種格式，你可以通過編輯和調(diào)整應(yīng)用在自己的品牌當(dāng)中，你甚至可以添加一些動(dòng)畫。
當(dāng)然，即使有這些新的工具，千萬不要忘記 UnDraw，他們還提供 100% 完全免費(fèi)的 SVG 插畫集，并且現(xiàn)在還提供了最新的 Adobe XD 插件，戳這里查看：
二、UI 工具包和設(shè)計(jì)素材
1. 設(shè)計(jì)系統(tǒng)入門 Getting Started With Design Systems →
https://marvelapp.com/ebook-design-systems
這是一套來自 Marvel 的電子書，可以幫你了解設(shè)計(jì)系統(tǒng)的基本運(yùn)作原理，并且會(huì)帶你創(chuàng)建一套屬于自己的設(shè)計(jì)系統(tǒng)。
2.設(shè)計(jì)雜志 Rooki.design →
https://www.rooki.design/
真正想要找到免費(fèi)又合適的設(shè)計(jì)素材是一件很難的事情，Rooki.design 是一個(gè)年輕的設(shè)計(jì)師線上雜志，你在這里能夠找到很多學(xué)習(xí)資源和獲取靈感所需要的一切。
3. 設(shè)計(jì)系統(tǒng) Eva Design System →
https://eva.design/
很多時(shí)候，設(shè)計(jì)師的設(shè)計(jì)系統(tǒng)會(huì)基于一個(gè)現(xiàn)有的設(shè)計(jì)系統(tǒng)來做，所以我們?yōu)槟阃扑]這套 Eva Design System。它高度可定制化，易于調(diào)整，可以集成你自己的品牌元素，可以實(shí)現(xiàn) Web 和移動(dòng)端的設(shè)計(jì)。目前它可以用于 Sketch，試試看！
4. UI工具套件 UI Kitten 4.0 →
https://akveo.github.io/react-native-ui-kitten/?ref=producthunt
這是一套基于 React Native UI 的新手 UI 工具套件，由 Akveo 所創(chuàng)建，其中包含深色和淺色兩種主題，可以更好地同后端集成到一起。
5. UI 框架 Storefront UI →
https://www.storefrontui.io/
雖然 Vue.js 目前依然還是一個(gè)比較年輕的工具，但是它已經(jīng)是最為強(qiáng)大的 UI 開發(fā)框架了。在此基礎(chǔ)上搭建起來的 Storefront UI 是一個(gè)非常有用的工具包，可以幫你構(gòu)建電商網(wǎng)站和移動(dòng)端 APP。
三、樣機(jī)工具
1. 圖形編輯器 Artboard Studio 2.0 →
https://artboard.studio/
在正式推出一年之后，在線圖形編輯工具 Artboard Studio 推出了 2.0 的版本，包含最新的協(xié)作和實(shí)時(shí)反饋的功能，并且引入了瀏覽器內(nèi)編輯視覺稿的功能。
2. 視覺稿工具 Hamok →
https://hamok.io/
這是一款非常易于使用的視覺稿工具，可以使用 URL 或者圖片來創(chuàng)建視覺稿。它提供了一整套模板，并且生成響應(yīng)式視覺稿，展示出各種不同的效果。
3. 設(shè)計(jì)框架 Octopus.do →
https://octopus.do/
在進(jìn)行UX設(shè)計(jì)的時(shí)候，搭建正確的產(chǎn)品框架結(jié)構(gòu)是工作中最為重要的部分。這款工具能夠幫助設(shè)計(jì)師和產(chǎn)品經(jīng)理更快更好地搭建程序原型，構(gòu)建設(shè)計(jì)，創(chuàng)建可視化的網(wǎng)站地圖，并且動(dòng)態(tài)地核算成本。這款工具快速且易于使用。
四、配色和圖標(biāo)工具
1. Colors & Fonts →
https://www.colorsandfonts.com/
Colors & Fonts 是出自 Michael Andreuzza 的一個(gè)免費(fèi)分享項(xiàng)目，他精心選擇了一些視覺風(fēng)格和效果非常突出的設(shè)計(jì)作品，你可以從中獲取布局、配色和字體相關(guān)的靈感，只需要簡單點(diǎn)擊就可以添加到你的設(shè)計(jì)項(xiàng)目當(dāng)中去（也就是復(fù)制粘貼）。
2. 圖標(biāo)包 Joy Pixels 5.0 →
https://www.joypixels.com/
這是一套非常有趣的圖標(biāo)合集，包含 230 多種新的的表情符號(hào)和超過 1500 款被重新設(shè)計(jì)過的圖標(biāo)。所有的這些都是免費(fèi)的（僅供個(gè)人使用）。
五、協(xié)作工具
1. 創(chuàng)意協(xié)作工具 Shape →
https://www.shape.space/
著名的設(shè)計(jì)機(jī)構(gòu) IDEO 將他們多年以來開放式創(chuàng)新的經(jīng)驗(yàn)融入到這款名為 Shape 的工具當(dāng)中，他可以用來構(gòu)建、測(cè)試和改進(jìn)創(chuàng)意設(shè)計(jì)協(xié)作，可以讓產(chǎn)品的創(chuàng)建更加高效。
2. 思維導(dǎo)圖工具 Whimsical Mind Maps →
https://whimsical.com/mind-maps/
來看看這款高效又漂亮的思維導(dǎo)圖工具吧，它有著非常實(shí)用的實(shí)時(shí)協(xié)作功能，你可以在幾秒鐘的時(shí)間以內(nèi)就和協(xié)作者組織出新的想法，輸出思維導(dǎo)圖。
3. 文檔集成工具 FYI →
https://usefyi.com/
FYI 能夠幫你將文檔集中到一起，并且將你正在使用的 APP 都打通。連接不同的 APP 只需要幾秒鐘時(shí)間，并且還可以借助 Chrome 瀏覽器插件，可以直接一站式解決問題。
六、設(shè)計(jì)代碼工具
1. Polypane →
https://polypane.rocks/
Polypane 是本月非常火的一款工具，它可以用來創(chuàng)建網(wǎng)站和 APP，全程在瀏覽器中完成。它適合開發(fā)者、設(shè)計(jì)師、產(chǎn)品經(jīng)理、QA 以及任何通過網(wǎng)絡(luò)來工作的人使用。
2. 深色模式插件 Darkmode Widget →
https://darkmodejs.learn.uno/
這是一個(gè)非常棒的小插件，可以為你的網(wǎng)站并切模式。你所需要做的事情很簡單，就是復(fù)制一段代碼嵌入到網(wǎng)站當(dāng)中，你就可以立刻擁有深色模式了。
3. CSS動(dòng)畫工具 CSS Wand →
https://www.csswand.dev/
CSS Wand 是一款開源工具，只需要復(fù)制粘貼，你就能擁有漂亮的 CSS 動(dòng)畫，定制起來也非常方便。
4. UI自動(dòng)生成工具 UIbot →
https://www.uibot.app/
有沒有聽說過程序化設(shè)計(jì)（programmatic design）？如果沒有，那么不妨試試 UIBot 這款工具，它可以隨機(jī)地生成不同尺寸的設(shè)計(jì)、配色和排版布局，全程借助程序自動(dòng)完成。
5. CSS轉(zhuǎn)換工具 Stylish →
https://akashj.pw/stylish/
Stylish 是一款非常便捷的瀏覽器工具，可以直接將 CSS 組件轉(zhuǎn)化為 React 樣式的組件。
七、用戶研究工具
1. 機(jī)器學(xué)習(xí)預(yù)測(cè)工具 Eyetato →
https://eyetato.com/
Eyetato 是一款借助機(jī)器學(xué)習(xí)來實(shí)現(xiàn)的工具，Eyetato 能夠預(yù)測(cè)用戶會(huì)看你的 APP 的哪些地方，而這種預(yù)測(cè)是基于成千上萬的真實(shí)的的眼動(dòng)測(cè)試得出的結(jié)果。這款工具能夠幫你更好地洞悉用戶習(xí)慣。
2. 視頻錄制工具 RecordScreen.io →
https://recordscreen.io/
錄制視頻很麻煩？現(xiàn)在在這款工具的幫助下，你可以直接在瀏覽器當(dāng)中錄制視頻，非常簡單，非常實(shí)用。
3. 用戶反饋跟蹤工具 Shipright →
https://shipright.co/
Shipright 是一款能夠跟蹤用戶反饋的工具，確保你所有需要的信息都能匯總在一個(gè)地方，從功能訴求，到用戶反饋，以及產(chǎn)品痛點(diǎn)等等。
八、特別推薦工具
1、設(shè)計(jì)工具時(shí)光機(jī) Time Machine
https://prototypr.io/time-machine/
在策劃這些新鮮工具的同時(shí)，Prototypr.io 團(tuán)隊(duì)還制作了一款專門跟蹤各種設(shè)計(jì)工具更新的工具──設(shè)計(jì)工具時(shí)光機(jī)。它能夠跟蹤包括 Sketch、Figma、Adobe XD、Marvel 等頂級(jí)設(shè)計(jì)工具的大版本更新。
借助這款工具，你能清楚地知道你可以借助這些工具的新功能做到哪些事情。
除此之外 Prototypr.io 團(tuán)隊(duì)正在開發(fā)最新的 Prototypr 3，它會(huì)是一個(gè)改進(jìn)之后更加強(qiáng)大的平臺(tái)，并且為你提供更加出色的設(shè)計(jì)工具。
聯(lián)系客服
