最值收藏的36款工具「產品設計工具有哪些」

這是來自 Prototypr.io 的春季乾貨素材合集，總計36款不同類型，不同屬性的優質設計素材，覆蓋你不同的需求。先收藏再細看，總會有你想要的好東西。

這次的合集當中包含了如下內容：

• 4個學習資源
• 6款實用小工具
• 6個原型設計工具
• 2個圖標合集
• 6款建站工具
• 2個協作平台
• 3個視覺稿工具
• 6個設計素材合集
• 1個有趣的小工具

3個設計學習資源

在這個時代，保持學習和進步是必須的事情。下面的設計資源將會為你提供正確的前進方向，激勵你更進一步。

1. Humane by Design →

在很多時候，技術是用來提升我們能力，讓我們變得更強大。但是，事情並不總是如此。時間和注意力如今已經是稀缺資源了。很多數字產品都會鑽我們天性中的空子，利用人性的弱點。考慮到這一點，Humane By Design 這個資源合集就誕生了，其中彙集了大量更加註重體驗和人性化設計的數字產品，他們真正是服務於人，而非利用。

2. Unity for Designers →

這是一個長達6個小時的課程，教你如何從頭開始製作一款跨平台的遊戲。

3. Top UX School →

Kaiting Huang 基於自己在UX設計領域的經驗，創建了這個頂級的UX學校。你可以在這裡找到適合自己的UX學習計劃。

6款實用小工具

1. Shade →

這是一款在 iPad 和 iPhone 上使用的強大的調色工具，其中包含許多強大的進階功能，包括智能連接、高級渲染以及導出到 Unity 和 Codea，當然，它的 UI設計非常易用。

2. Accessible Brand Colors →

你的配色是否符合 ADA 的標準？這款工具能夠幫助你優化配色，確保色彩的可訪問性，甚至直接幫你找到效果更好的類似配色。

3. Color.review →

這也是一款非常棒的提升配色可訪問性的工具，它會根據你的前景色和背景色的具體配色來進行配色評級，幫你的設計走上正軌。

4. Culrs 2.0 →

這是一個來自設計師 Jolly Farhana、Arnob Mukherjee、和 Rupak Mishra 的設計項目，它也是幫你進行配色選取的，每套配色都經過精心策劃，每套配色的組合都非常優秀。

5. Speak Human →

設計出以人為中心的微文案，對用戶體驗設計師而言，這是非常重要的工作內容之一。但是在實際工作中，並不是每次都可以完美地完成這樣的工作，而這個工具就能幫你快速生成微文案。

6. Typetura →

這是Scott Kellum 和 Sal Hernandez 所製作的一款排版工具，讓你在不同的屏幕上流暢地設置不同的文本元素的樣式。

6個原型設計工具

1. Voiceflow →

如果你喜歡藉助語音來輸出文本甚至更多不同類型的內容，那麼現在你有福了。使用 Voiceflow，你可以在 Google Assistant 和 Amazon Alexa 的幫助下進行原型製作，甚至發布語音應用，全程都無需代碼。

2. Charts for Sketch →

這是 Ruslan Latypov 和 Anton Mishin 所創建的一款工具，用來全面而便捷地在 Sketch 中定製圖表和表單，它完全免費！

3. Vectary 3.0 →

Vectary 3.0 發布了！有了它，你可以在瀏覽器中為你的網站、社交媒體甚至其他項目快速創建3D內容。它還提供協作空間，這意味着你創建了之後還可以迅速地同你的團隊進行分享並收集反饋，以便迭代。

4. Haiku Animator →

這是一款對於設計師和開發人員非常友好的動畫工具，Haiku 讓你可以無縫地創建引人入勝的動畫，提升設計和開發效率。

5. Maze 2.0 →

Maze 是一個非常優秀的用戶測試平台，能夠讓設計和體驗團隊更好更快地了解用戶和產品，而不是在猜測和臆想中前進。

6. Retest →

這是一個用戶測試工具，你可以輕鬆地在不同的設備上測試你的網站，確保網站的體驗無縫並優化至最佳狀態。

2套圖標合集

1. Classic Macintosh UI Kit →

如果你是一個懷舊的人，那麼這套經典的 Macintosh UI 工具包能夠幫你回到美好的80年代，將 UI 變成當年的 Macintosh 的樣子。它包含100多個不同的符號、矢量圖標，它最大的優點在於，絕大多數的元素都是可編輯的！

2. Potlab Icons →

Potlab Icons 是設計師 Suresh Sakthivel 創意的產物，這個 SVG動畫庫將會給你的網站和設計項目帶來全新的生命力。自定義的色彩和筆觸，你將會擁有最大的自由度！

6款建站工具

1. GitHub Personal Website Generator →

我們都熱愛 Github ！而這是 Github 所提供的個人網站生成器。有了它，你能按照自己的需求來定製素材和體驗，享受開發的過程。

2. Book for Leeflets →

想要生成一個可訪問性強、自定義且像素完美的單頁網站？按照這套方法來就行了。

3. Gridbox v5.0 →

使用 Gridbox V5.0 你能更加直觀地使用代碼創建網站原型，這款工具附帶了一個 Bootstrap 和 HTML5 元素庫，可以更快、更加高效地構建頁面。

4. Core by Mason →

這是由 Mason 所提供的一款完全免費的 UI Kit，其中包含了各種各樣的功能和組件，包括 Banner、訂閱、CTA元素和表單，不一而足。適用於 React 和 HTML。

5. CSSeffectsSnippets →

CSSeffectsSnippets 是基於 Vue.js 來構建的，你只需要點擊你所需要的動畫，相應的代碼就會被複制到剪貼板當中，接下來你就能開始使用它們了！

6. Lax.js →

Lax.js 是一款輕量級的 Javascript 插件，可以讓網站在滾動瀏覽的時候生成令人驚嘆的動畫。這是一個打動用戶的好選擇哦~

2個協作平台

1. Honest Feedback →

了解如何展示你的工作和技能，就是找到工作機會的關鍵。Honest Feedback 為設計從業者提供了一個安全的空間，讓設計師在這裡獲得關於作品集和作品設計的反饋和指導，非常簡單，但是非常好用。

2. Plectica →

這是一個為團隊所提供的概念繪製工具，它讓團隊中的不同人共同完成概念設計，並且在這裡整合併進入同一步調。Plectica 為設計師和開發者構建出一個足夠簡單但是有效的環境，更快地將視覺內容和想法連接到一起。

3款視覺稿設計工具

1. Mock →

Mock 是一款非常獨特的視覺稿生成工具，它是藉助視頻錄製的方式，將屏幕內容轉化到不同的硬件上，生成視覺稿。

2. Mockdown →

Mockdown 將低保真視覺稿又帶回來了。它可以將你的UI圖片轉化為低保真模型，用來進行視頻展示和概念演練。目前測試版可以免費使用，試試看吧！

3. LongLiveSS →

這款簡單的工具，能夠讓你以非常優雅的方式來保存網站截圖，只需要提供你想保存的網頁的鏈接地址，以及圖片尺寸，它就能幫你生成。

6款設計素材合集

1. Ear Palettes →

這個配色合集的靈感來源於搖滾音樂的專輯封面，所以就有了這個 Ear Palettes 的名字。

2. Logo Grabber →

這個工具也相當實用，只要你提供相應公司的網站，這款工具能夠幫你找到並獲取公司的 LOGO。

3. Landing Stock →

找到完美的圖庫是一件很難的事情，無論是什麼圖片。而設計師 Craig Barber 則打算幫你解決這個問題，解決方案就是這個 Landing Stock 網站，它有一個精心設計的着陸頁圖片庫，確保能幫你生成高質量的、乾淨的圖庫。

4. UnDeck →

如果你正在服務於某個機構，那麼你一定知道找到高質量的展示用的圖片有多麻煩。亞特蘭大的服務供應商 KP 為此專門創建了 UnDeck 這個網站，專門提供高素質且免費的資源平台。來試試看吧。

5. Glide →

無論是展示幻燈片還是視覺稿，Slidor 所提供的這個強大的模板 Glide 都能夠幫你搞定。

6. Laazy →

忙碌可能是瞎忙，而偷懶同樣可以非常有效地解決問題。Laazy 可以幫助設計師和開發者更有效地在瀏覽器中使用圖片。

1款有趣的工具

1. Tinkersynth →

這並不只是一款生成數字藝術作品的線性工具，它還是一家藝術商店，它鼓勵你多嘗試多試驗，去創作更多有趣的東西。