Awesome Design Tools
出色的設計工具作為 Flawless App 系列的一部分加入 Abstract！
今天，我們很高興地宣布，Flawless App 已加入Abstract，這是一個設計交付平台，可為設計帶來可見性、責任性、可測量性和可預測性。
Flawless App 是我們的第一家公司，我們為我們的 5 人團隊所取得的一切感到自豪。
自2015 年以來，我們為設計師和開發人員推出了強大的工具- 其中包括Flawless App、Reduce、 [Flawless Feedback] ]（https://flawlessapp.io/feedback）。我們也為社區驅動的舉措投入了大量的愛心和關懷。很棒的設計工具就是其中之一。
＃＃＃＃ 下一個是什麼？ 我們的團隊已加入 Abstract，專注於建置 Abstract SDK，以提升開發人員的體驗。一段令人難以置信的旅程已經結束，新的旅程才剛開始。如果您想進一步了解 Awesome Design Tools 的未來，請繼續閱讀我們的常見問題解答。
如何使用和貢獻
現在您位於 Awesome Design Tools 部分，如果您需要插件 - 請前往 Awesome Design Plugins。
若要尋找該工具，請瀏覽目錄或搜尋關鍵字（例如「動畫」、「原型製作」）。
在 Twitter 上詢問 Lisa。
如果您發現了一些很棒的設計工具或插件，只需根據我們的[貢獻指南]（https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Contribution_Guidelines.md）發送拉取請求（他們很簡單，請看一下）。設計工具應在此處提交，插件應在 Awesome Design Plugins 文件中提交。我們免費使用此類標籤！free.svg，開源！[open-source.svg] ( https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/open-source.svg) 僅限Mac  工具，不要忘記添加它們。現在我很想看到您的建議！
＃＃ 表中的內容
輔助工具
無障礙是指創建可供所有人（包括有視覺、運動、聽覺、言語或認知障礙的個人）使用的網站和應用程式的做法。在這裡，您可以找到適用於開發人員和設計人員的網路輔助功能工具、輔助功能測試工具以及輔助功能應用程式：
包容性設計 — Microsoft 團隊提供的方法論和一組工具。
動畫工具
動畫引導人們友善、順利地使用產品。即時互動UI讓使用者感受到即時回饋與情感觸動。這些免費和付費工具旨在使動畫創作變得更加容易。如果您打算製作動畫轉場、微互動或基於滾動的動畫，請使用以下工具：
After Effects — 由 Adobe 開發的數位視覺效果、動態圖形和合成應用程式。
BeatFlyer — 一個網路工具，可讓您從多層合成中快速創建循環且引人入勝的動畫。
Dokyu Motion — 簡化 After Effects 中的動作設計，以便任何剪輯師都可以講述不容忽視的故事。
Haiku Animator — 基於關鍵影格的動畫，將您的 UI 工具連接到開發人員可以輕鬆使用的程式碼。
Drama、Principle、Framer、Invision Studio、Flinto 也屬於 UI 和 UX 動畫應用程式和軟體動畫工具。
＃＃＃ 增強現實
擴增實境是一種透過向現實世界添加數位資訊層來升級現實世界的技術。AR 的使用日益增加，出現了數十種新的 AR 應用程式、開發套件和 AR 框架。因此，本節收集了不同的擴增實境工具，用於創建、投影和原型設計專注於 AR 的應用程式：
Daqri — 透過將數位資訊疊加到實體環境上，為員工提供專業級擴增實境。
EasyAR — 一款行動應用程式和擴增實境引擎，讓 AR 變得更容易。
HP Reveal — 透過視覺互動為列印內容增加價值。
Layar — 尋找各種基於擴增實境技術的物品。
Lightform — 投影 AR 設計工具。
Unity — 建立高品質的 3D 和 2D 遊戲，並將其部署到行動裝置、桌上型裝置和 VR/AR 上。
Vectary — 為您的網站建立 3D 和 AR。
Vuforia — 適用於行動裝置的 SDK，可用於建立擴增實境應用程式。
Wikitude — 為您的 iOS、Android 和智慧眼鏡應用程式提供圖像和物件追蹤、即時追蹤 (SLAM)、Geo AR 等功能。
協作工具
想要嘗試一些敏捷設計和開發協作的工具？好主意，因為這樣的工具讓設計人員和開發人員的生活變得更加輕鬆，節省時間並提高生產力。嗯，在 Slack 驅動的時代你知道這一切。在這裡您可以找到最適合產品團隊的協作工具：
Airtable — 一部分是電子表格，一部分是資料庫，完全靈活，團隊使用 Airtable 以自己的方式組織工作。
Asana — 工作管理平台團隊用來專注於發展業務的目標、專案和日常任務。
Basecamp — 專案管理套件，旨在從一個地方組織員工、委派任務並監控進度。
Freedcamp — 最具創新性的專案管理方式，完全免費......永遠。
Droplr — 螢幕截圖、檔案分享和螢幕錄影可協助您捕捉和解釋您的想法。
Filestage — 一款敏捷的內容審批軟體，可協助您與客戶和同事一起審查影片、設計和文件。
Float — 一種用於在一個地方規劃專案和安排團隊時間的工具。
HiveDesk — 透過螢幕截圖自動追蹤遠端員工的時間。它可以更輕鬆地監控遠端員工的生產力和管理專案。
Jira — 敏捷團隊所使用的軟體開發工具。
Keybase — 一款免費協作應用程序，內建端對端加密聊天、文件共享、git 存儲庫等！[free.svg](https://github .com/ LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg)  — 用於跨職能團隊協作的白板平台。它最近更名為米羅。
Slack — 無論您從事什麼工作，都是工作協作中心。在這裡，您可以進行對話、做出決定，並且訊息始終觸手可及。
Sunsama — 一個設計精美、面向團隊的任務管理器，可將 Trello/Jira/Asana 票證整合到一個面向日曆的視圖中。
Taskade — 團隊生產力變得簡單、有趣，專為遠端團隊設計。Taskade 具有協作性，可在網路、行動裝置和桌面上即時同步。
Trello — 一個基於 Web 的專案管理應用程序，使您能夠以有趣、靈活且有益的方式組織專案並確定其優先順序。
Workzone — 一款簡單、功能強大的專案管理軟體。
Wrike — 線上專案管理軟體，可讓您全面了解並控制您的任務。
Zenkit — 一個用於安排會議、追蹤專案進度和集思廣益新想法的工具。
zipBoard — 線上視覺錯誤追蹤與網站註釋工具
顏色選擇器工具
如果您正在尋找吸管工具、顏色標識符或顏色捕獲，請查看此部分。使用此處提及的顏色選擇器，您將能夠創建新的顏色組合併定義出色的顏色組合。幾乎所有這些工具都是免費的：
Color by Cloudflare — 一種工具，用於根據UI 元素預覽調色板、循環訪問可訪問的顏色組合以及透過URL 導入或生成方式手動創建調色板。
Color Hexa — 免費的顏色工具，提供任何顏色的資訊並為設計產生匹配的調色板。
Geenes — 一種透過程式碼和草圖檔案匯出建立和諧色彩主題的工具。
Khroma — 基於人工智慧的工具，可根據您的喜好產生調色板。
您也可以使用 Leonardo 建立調色板，這在輔助工具部分中提到。
設計回饋工具
在開發過程中您如何提供並獲取回饋？對於許多產品團隊來說，這個過程通常相當混亂，導致產品延遲和來回溝通的時間浪費。因此，如果您希望獲得有關 UI 問題或視覺錯誤的快速且結構性的回饋，請查看此工具：
GoVisually — 線上打樣、設計審查和批准軟體。
設計交接工具
當設計人員完成工作並需要向開發人員交付具有所有規格和資產的設計時，就會發生設計移交。設計交接工具允許自動產生樣式指南、對設計進行註解、檢查元素。這些工具最大限度地減少猜測並提高設計過程的有效性。
Avocode — 無需設計工具即可開放設計。無需準備圖層即可匯出影像。點擊圖層即可取得程式碼。
檢查 — 準備開發設計。由 Invision 製作。
Specctr — 如果您不幸在 PS、AI 或 ID 中設計 UI，此工具會建立紅線註解。
Sympli — 來自 Sketch、Photoshop 和 Adobe XD 的自動規格和資源移交。與 Jira、Xcode 和 Android Studio 整合。
Zeplin — 自動傳遞具有準確規格、資產、程式碼片段的設計和風格指南。
您也可以在 Relay 中進行設計切換，如設計版本控制部分中提到的。
設計靈感
創作過程可能會很艱難。因此，如果您沒有立即想到想法，請嘗試在其他設計師的作品中尋找靈感。這些設計靈感網站以流行公司和優秀產品的設計模式、用戶流程、電子郵件標記和創意解決方案為特色：
創意作品集 — 精選設計師和開發人員製作的最具創意的作品集。
Dribbble — 一個展示使用者製作的藝術作品的線上社群。從他人的作品中獲得靈感的絕佳資源。
Hover States — 為創意社群展示來自數位文化前沿的偉大作品。
H69.Design — 登陸頁面集合和為設計師提供的免費資源。
Lapa Ninja — 登陸頁設計靈感來自網路。1800 多個登陸頁面範例並每日更新。
Mobile Patterns — 一個設計靈感庫，具有最佳的 UI UX 模式（iOS 和 Android）。
Owwly — 充滿設計熱情的數位產品之家。
pttrns — 流行行動應用程式的設計模式。
設計團隊 — 關於矽谷一家科技新創公司的設計團隊的漫畫。
Typewolf — 幫助設計師為他們的下一個設計專案選擇完美的字體組合。
UI Garage — 為設計師、開發人員和行銷人員提供尋找靈感、工具和最佳資源的一站式商店。
UI Recipes — 每週 15 分鐘最熱門應用程式的 UI 設計課程。
Waveguide — 一個設計知識庫，其中包含數千個人工豐富的產品和品牌體驗範例（行動應用程式、登陸頁面、電子商務、CX/UX 模式範例）。
網頁設計博物館 — 超過 1,200 個精心挑選的網站，展示 1994 年至 2006 年間的網頁設計趨勢。
設計系統工具
我打賭您聽說過設計系統，因為這是一個非常受歡迎的話題。設計系統提供一致、穩健的設計模式，以保持設計和開發同步。它們本質上是規則、約束和原則的集合，在設計和程式碼中實現。在這裡您可以找到用於建置、維護和組織設計系統的工具。
Cabana — Sketch 的高級設計系統，可協助您比以往更快地創造令人驚嘆的產品。
設計系統管理員 — Invision 的設計系統管理員。
Frontify — 建立圖形指南、模式庫、設計系統。
互聯網 — 將設計和工程圍繞單一事實來源連接起來。該工具尚未公開可用（測試版）。
Lucid — 用於建立、管理和共享設計系統的工具。從簡單的元件庫到樣式的詳細描述。
Modulz — 設計、建置、記錄和發佈您的設計系統 — 無需編寫程式碼。
Specify — 用於創建、擴展和維護設計系統的工具。
符號設計系統 — 基於原子元素的草圖設計系統。
Toolabs — 基於設計系統和組件的設計、原型和開發工具。目前尚未公開，但您可以申請搶先體驗。
Zeroheight — 由設計師創建、由開發人員擴展、每個人都可編輯的風格指南。
我們也可以在 Sketch、Figma、UXPin 和 Framer X（Framer X Team Store）中加入此功能。
<文章 id="設計到程式碼工具">
設計到編碼工具
每個人都可以學習開發，但這需要時間和精力。如果您現在需要一個網站或應用程式並且不想僱用開發人員，請關注網站建立者。這種從設計到編碼的工具將幫助您快速而美觀地製作作品集、簡單的登陸或應用程式。
Bootstrap Studio — 一個強大的網頁設計工具，用於使用 Bootstrap 框架建立響應式網站。
Draftbit — 直接從瀏覽器直觀地設計和建立行動應用程式。
EasyLogic Studio — 非常棒的css+svg 設計工具，它也被轉換成如圖所示的程式碼。 ![open-source.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master /Media/open-源.svg）
Grapedrop — 使用易於使用的編輯器設計您的元件、Web 專案並立即在線上發布它們。
PageCloud — 最快、最可自訂的網站建立器，讓任何人可以創建自己理想的網站。
Piinegrow — CSS Grid、Bootstrap 4 和 3、Foundation、響應式設計、HTML 和 CSS 的專業視覺化編輯器。
px.div — 適合開發人員和設計人員的網站建立工具。
Readymag — 一種視覺上令人愉悅的工具，用於在網路上設計從登陸頁面到多媒體長讀物、簡報和作品集。
STUDIO — 從頭開始設計、即時協作並發佈網站。
Supernova Studio — 從 Sketch 匯入設計並將其轉換為 Android、iOS 或 React Native 程式碼。
Tilda — 使用 Tilda 模組免費建立網站、登陸頁面或線上商店，並在當天發布。
Wix — 最簡單且功能最齊全的網站建立器，可讓您建立自己的高度客製化的網站。
Webflow — 在您的瀏覽器中建立響應式網站，然後由我們託管或匯出您的程式碼以託管到任何地方。
<文章 id="設計版本控制">
設計版本控制
開發人員很長一段時間以來都在積極使用版本控制工具，可能是從 2005 年（Git 第一版）開始。對於開發團隊來說，使用版本控制系統是不費吹灰之力的，而設計版本控制系統最近才出現。這個市場正在迅速發展，我們期望設計師在版本控制方面看到更多：
Abstract — 一個供設計團隊對 Sketch 檔案進行版本控制、管理和協作的平台。
Figma Relay — Relay 將您的最新資源從 Figma 直接推送到您的程式碼庫（尚未發布）。
Versions — 為設計人員提供的版本控制工具，具有視覺差異、合併和衝突解決功能。適用於 GitHub、Bitbucket、GitLab 和 Azure DevOps。
<文章 id="開發工具">
開發工具
本節提到開發工具和瀏覽器。開發瀏覽器具有幫助開發人員和設計人員創建和測試網站和應用程式的功能。
Blisk — 提供了一個開發工作區，可以以兩倍的速度開發和測試現代 Web 應用程式。
Litmus — 一個電子郵件行銷活動創建平台，除此之外，它還可以讓您了解 HTML 電子郵件在各種電子郵件用戶端中的顯示方式。
Polypane — 一款從頭開始建立的瀏覽器，用於建立和測試網站和應用程式。
<文章 id="體驗監控">
體驗監控
傾聽使用者的聲音很重要，但了解真實的使用情況更為重要。為此，您需要安裝不同的分析工具、體驗監控軟體和使用者行為應用程式。只需使用有關用戶資料的分析解決方案：
Amplitude — 了解您的用戶，快速發布更好的產品體驗並發展您的業務。
Chalkmark — 在實施之前獲得有關設計的快速回饋，從而提高客戶轉換率和以任務為導向的成功率。
Fathom — 提供簡單、有用的網站統計信息，無需追蹤或儲存使用者的個人資料。
FullStory — 一款可在一個強大且易於使用的平台中擷取所有客戶體驗資料的應用程式。
Heap — 自動擷取每個 Web、行動和雲端交互，然後追溯分析您的數據，而無需編寫程式碼。
Hotjar — 查看訪客如何使用您的網站並收集使用者回饋。
Inspectlet — 在訪客使用您的網站時錄製視頻，以便您可以看到他們所做的一切。
LiveSession - 高品質的使用者會話重播分析。
LogRocket — 查看使用者在您的網站上執行的操作，幫助您更快重現錯誤並解決問題。
Mixpanel — 深入了解所有以使用者為中心的數據，以便根據客戶如何使用您的產品或網站做出更明智的決策並更快地採取行動。
Mouseflow — 記錄滑鼠遊標移動。
Pendo — 衡量並提升應用程式中的客戶體驗。
Smartlook — 使用者會話重播與使用者參與度分析。
Usabilla — 透過在正確的時間提出正確的問題來建立面向未來的客戶體驗。
<文章 id="字型工具">
字體工具
字體通常用於使網頁變得更加美麗。它是任何設計的重要組成部分。在本部分中，您將找到字體產生器和字體查找工具，可讓您管理和使用字體：
Fontface Ninja — 瀏覽器擴展，用於發現任何網站上使用的字體。
Fontown — 一種印刷工具，具有不斷增長的字體目錄，可促進設計人員的工作流程。
FontSelf — Illustrator 和 Photoshop CC 的擴展，可讓您在幾分鐘內將任何字母轉換為 OpenType 字體！
Font Squirrel — 下載廣泛的免費字體。
LostType — 第一家按需付費類型鑄造廠。
您也可以使用指定處理字體，這在設計系統工具部分中提到。
<文章 id="漸層工具">
漸層工具
你可以看到漸層顏色無所不在——使用者介面、品牌、插畫、排版。漸層是透過使用兩種或多種不同的顏色來繪製一個元素並在它們之間逐漸淡出而創建的。它可能看起來是一種令人難忘、新鮮和獨特的顏色。要為您的設計製作這樣的漸變，請使用這些漸層調色板。
顏色和字體 — 為數位設計師和 Web 開發人員精心設計的顏色、g 輻射和字體庫。
酷炫背景 — 探索精心挑選的酷炫背景，您可以將它們新增至部落格、網站。
您也可以使用 Leonardo 建立和審核漸變，這在輔助工具部分中提到。
<文章 id="圖示工具">
圖示工具
除了字體之外，每個設計中都使用了圖示。這些基本元素支援並指導產品內的許多使用者操作。毫無疑問，圖標是使用者導航中的重要元素。雖然製作這些小設計元素既困難又耗時，但您可以獲得數千個向量圖示供個人和商業用途。
Animaticons — 一組不斷增長的精美、高分辨率、動畫 GIF 圖標，您可以自訂它們。
Flaticon — 1593000+ SVG、PSD、PNG、EPS 格式或圖示字體的向量圖示。
Freepik — 獨家免費贈品和項目所需的所有圖形資源的集合。
Iconscout — 在一處獲取高品質圖示、插圖和庫存照片。
Iconfinder — 向量圖示 (SVG) 市場。以 IconJar 格式提供的圖示集。
Motion — 免費、簡單的動畫圖示編輯器。
Noun Project — 一切的圖示。
Orion Icons — 具有高階互動式 Web 應用程式的 SVG 向量圖示。
SVGRepo — 一個擁有 300.000 多個 SVG 向量和圖示的網站。
您也可以使用「指定」來處理圖標，這在設計系統工具部分中提到。
<文章id =「插圖」>
插圖
插圖可以用在您的登陸頁面、部落格文章、應用程式或電子郵件行銷活動中。它們使您的設計變得生動有趣。雖然繪製好的插圖是熟練的圖形設計師的任務，但您可以從我們社區中非常友善的人那裡獲取免費的 SVG 圖像和插圖：
Pngtree 圖解 — 超過 13142 張專業設計的不同風格的插畫。
<文章 id="資訊架構">
資訊架構
資訊架構幫助設計人員組織和建立網站、行動應用程式和其他軟體內的內容。因此，用戶將了解產品功能並找到所需的一切。這些資訊架構工具應該允許您創建視覺化網站地圖並改進您的網站內容結構：
DYNO Mapper — 使用可視網站地圖、內容清單、內容審核、內容規劃、每日關鍵字追蹤和網站可訪問性測試來組織網站專案。
Octopus.do — 視覺化網站地圖產生器。即時建立您的網站結構並快速共享它以與您的團隊或客戶合作。
OmniGraffle — 使用這款功能強大且易於使用的應用程式創建精美的圖表和設計。！[mac.svg](https://github. com/LisaDziuba/ Awesome-Design-Tools/blob/master/Media/mac.svg)
OptimalSort — 卡片分類工具，可讓您了解人們如何對 UI 中的內容進行分類。
Treejack — 上傳您建議的網站地圖以查看使用者將如何瀏覽您的網站。
WriteMaps — 建立令人印象深刻的網站地圖！以視覺、有趣且美觀的方式規劃您的下一個網站專案的頁面和內容。
<文章id =「標誌設計」>
＃＃＃ 標誌設計
徽標是您品牌形象的起點。它反映了產品使命、功能和品牌訊息。理想情況下，徽標在您的產品和用戶之間建立了牢固的聯繫。標誌設計是一門藝術，就像許多其他設計學科一樣。有了正確的標誌設計工具，這種藝術可以更快完成。
Graphic Springs — 從向量格式標誌範本庫中進行選擇，按行業分類。編輯模板的圖形和文本，然後下載。
標誌設計團隊 — 提供價格實惠的專業客製化標誌設計和品牌設計服務。
Logojoy — 使用人工智慧立即為您的企業產生獨特的標誌創意。
Designhill 的 Logo Maker — 只需幾分鐘即可產生 1000 個獨特的徽標，無需設計專業知識。
Logo My Way — 從全球創意設計師的 600 個客製化商標設計中進行選擇。
Logo Package Express — 在 5 分鐘內自動為您的客戶匯出並包裝數十種徽標變體和檔案類型。
Wizlogo — 使用專業設計師支援的簡單且經濟實惠的工具創建標誌。
您也可以使用UI設計工具中提到的Adobe Photoshop、GIMP、Inkscape、Krita和Vectr進行標誌設計。
<文章 id="mockup-tools">
樣機工具
模型是表示產品的視覺方式。線框主要代表產品的結構，而模型則顯示產品的外觀。這些模型工具可協助您建立模型、線框圖、圖表和原型並進行協作：
Artboard Studio — 線上圖形設計應用程式主要專注於產品模型。
Cleanmock — 使用最新的裝置框架（如 iPhone 和自訂背景）創建令人驚嘆的模型。
Craftwork Design — 免費且優質的高品質數位產品，讓您的工作更快、更輕鬆。
Device Shots — 此工具可協助您使用網站或行動應用程式的螢幕截圖免費建立精美的裝置模型。
Dimmy.club — 用於您的網站和應用程式螢幕截圖的裝置模型產生器。
Frrames — Frrames 模型是為您理想的演示精心製作的響應式視窗模型。
Mediamodifier — 在幾秒鐘內創建令人印象深刻的產品模型。
Mockflow — 集思廣益使用者介面創意的最快方法。
Mockuuups — 用於創建漂亮的應用程式預覽或任何行銷資料的拖放工具。
類比影片 — 透過在影片中新增裝置框架來立即建立模型。
Moqups — 協助您在線上框框、模型、圖表和原型上即時建立和協作。
原始模型 — Photoshop 的高品質模型，讓您的設計脫穎而出。
PixelBuddha — 為網頁設計師和開發人員提供免費且優質的優質資源。
Ramotion Store — 為 Sketch 和 Photoshop 精心製作的 Apple 和 Android 模型。
SceneLab — 在線創建逼真的模型和定製品牌設計。
ScreenSpace — 運動設計師的 3D 設備影片。
Screener — 使用此應用程式使用您選擇的模型將一堆圖像插入到主題演講檔案中。
Smartmockups — 只需點擊幾下即可創建令人驚嘆的產品模型。
shotsnapp — 為您的數位應用程式和網站設計創建精美的設備模型演示。
Threed — 在瀏覽器中產生自訂 3D 設備模型。
沒有程式碼工具
隨著「無程式碼工具」的興起，每個擁有筆記型電腦的人都可以建立和啟動專案。這些工具可協助設計師和製造商創建網站、應用程式甚至遊戲。沒有任何程式碼工具可以自動執行日常任務並且可以在沒有開發背景的情況下使用。查看此處的工具，如果您需要更多工具，請查看“程式碼設計”部分。
Bubble — 建立和託管 Web 應用程序，無需編寫程式碼或僱用工程師團隊。
Retool — 為您提供構建塊，您可以更快地建立工具。
sheet2api — 從 Google Sheets 或 Excel Online 試算表建立 API，無需編碼。
Sheet2Site — 從 Google Sheets 建立網站，無需編寫程式碼。
Shopify — 一個平台，具備您啟動、經營和發展業務所需的所有電子商務和銷售點功能。
Thunkable — 任何人都可以建立本機行動應用程式的拖放工具。
UserGuiding — 建立演練、清單、熱點和模式以改善使用者入門。
像素藝術工具
像素藝術是一種數位藝術形式，其中顏色應用於各個像素以創建圖像。像素藝術可用於創建從複雜的場景和遊戲背景到角色設計或表情符號的一切。如果您想嘗試一下，請查看適用於 macOS 和 Windows 的像素藝術軟體：
<文章 id="原型工具">
原型設計工具
原型是所提出的解決方案的簡單實驗設計。它應該有助於以快速且廉價的方式測試想法、設計假設和假設。原型設計工具使設計人員和客戶能夠了解產品在現實世界中的功能，並就該解決方案進行協作。許多現代原型設計工具可用於線框圖、原型設計和協作：
Axure RP — 線框圖、原型設計、協作和規範生成。
SAP Build — 一套完整的雲端為基礎的工具，用於設計和建置企業應用程式。
Flinto — 一款 Mac 應用程序，用於創建應用程式設計的互動式動畫原型。
Marvel App — 協作設計平台。線框圖、原型、線上設計並在一個地方創建設計規格。
Maze — 一款為設計師和開發人員提供的工具，可為您的 Invision 原型提供分析結果以及可操作的 KPI。
ProtoPie — 將高保真互動組合在一起，建立感測器輔助原型並在幾分鐘內分享您的驚人創作。
Proto.io — 一種用於創建完全互動式高保真原型的工具，其外觀和工作方式與您的應用程式完全相同。
Prott — 一種易於使用且直覺的原型設計工具，可促進團隊協作。
Useberry — 一種可用性測試工具，允許從InVision、AdodeXD、Sketch、Marvel 導入原型，並透過熱圖、視訊記錄、使用者流程、時間條獲取用戶行為洞察以及後續問題的解答。
您也可以使用 Figma、Adobe XD、Sketch 和 InVision Studio 進行原型設計，這些在 UI 設計工具部分 中提到。
截圖軟體
截圖是設計和開發工作流程中的典型任務。因此，這些免費且功能齊全的螢幕截圖應用程式可以幫助您輕鬆捕獲螢幕。有些螢幕截圖僅適用於 macOS，而其他螢幕截圖則支援兩種作業系統：
草圖工具
有時您只需要一支鉛筆和一張紙就可以開始創建您的應用程式或網站。因此，您可以在此處找到具有出色素描表範本的線上素描工具，以加快您的創作過程：
SMM 設計工具
行銷團隊通常需要精心設計的材料。它可以是不同的橫幅、促銷視覺效果、網站圖標、動畫或只是社交平台（如 Twitter 或 Instagram）的精美圖像。在本節中，我們將不斷添加工具，供每個人創建行銷設計。
Canva — 為工作、生活和娛樂創造令人驚嘆的設計 — 即使您不是設計專家！
Crello — 使用網路上最好的軟體創建自己的設計：貼文、封面、圖形和海報。
Stencil — 一種圖形設計工具，旨在輕鬆快速地創建社交媒體圖像。
聲音設計
聲音設計是為網站、應用程式、電影、遊戲或任何其他產品創建音景的藝術。聲音在改變人們與您的產品的聯繫方面具有巨大的潛力。有些聲音設計軟體非常先進，大多數聲音設計師都可以使用，而有些則適合初學者。
Appsounds — 適用於應用程式、遊戲和任何產品的 UI 聲音套件。
AudioJungle — 來自音樂家和音響工程師社群的 836,206 首曲目和聲音。
Max — 使用虛擬跳線連接物件以建立互動式聲音、圖形和自訂效果。
Reaper — 匯入任何音訊和 MIDI，合成、取樣、作曲、編排、編輯、混音和掌握歌曲或任何其他音訊專案。
SoundKit — 一個 UI 聲音庫，專為滿足您的所有介面需求而設計。
UI Sounds — 透過範例學習使用者介面的聲音設計。
庫存照片工具
需要 iOS 應用程式的高品質照片或新橫幅嗎？您始終可以自己拍攝或從庫存照片網站借用。幸運的是，有數百張美麗的免費庫存照片和免版稅圖片可用於任何項目：
Death to Stock — 付費庫存照片服務，偶爾會提供免費包的郵件列表，並且注重看起來不像庫存攝影。
庫存視頻
如果您使用影片內容，您將喜歡這些高品質、手工策劃的庫存影片。您將在下面找到許多優質且免費的庫存影片網站，您可以在您的網站、廣告活動或社交媒體中使用它們：
學習設計的工具
設計+程式碼 — 最佳工具和設計系統的完整課程。
DesignerUp — 一系列自訂進度的課程和指導，可協助您掌握產品設計 (UI/UX)。
Figma Training — 針對 UI 設計師的 Figma 的速成課程。
Interaction Design Foundation — 業界知名的學習 UX/UI 技能的網站。
學習 UX — 學習 UI 和 UX 工具的完整方法。
Sketch Master — 專業人士學習 Sketch 的視訊訓練課程集合。
UI 設計工具
2019 年最好的 UI 設計工具是什麼？您可以選擇下面的任何工具，它可以讓您完成數十種設計任務——網站或行動裝置的 UI、線框、原型、動畫、標誌。對於 UX 和 UI 設計師來說，這些都是很棒且功能齊全的工具：
Affinity Designer — 適用於 macOS、iOS 和 Microsoft Windows 的向量圖形編輯器。
Botmock — 設計、原型設計和測試語音和文字對話應用程式。支援多個平台。
CleverBrush — 一個基於瀏覽器的線上向量編輯器和數位發布工具，可以作為 JS 元件整合到頁面中。
Figma — 一種基於瀏覽器的設計工具，允許即時協作進行設計和原型製作。
Illustrator — 為印刷品、網路、視訊和行動裝置建立標誌、圖示、繪圖、排版和插圖。由 Adobe 製作。
Photoshop — 由 Adobe 開發的圖像和圖形設計軟體。
Studio — 將設計、原型製作和協作整合到一個和諧的工作流程中。由 InVision 製造。
Voiceflow — 為 Amazon Alexa 和 Google Home 製作原型、設計和部署真實應用程式。
使用者流程工具
使用者流程是使用者為實現有意義的目標所採取的一系列步驟。這是規劃客戶旅程路徑和改善使用者體驗的快速方法。因此，如果您需要製作使用者流程圖、使用者流程圖或網站地圖，請看看這些工具：
Flowmapp — 一個用於建立網站地圖和使用者流程的線上工具，可協助您有效地設計和規劃使用者體驗。
NinjaMock — 線框與使用者流程線上工具。連結您的視圖並建立邏輯流原型。全部具有寫意的視覺風格。
Overflow — 將您的設計轉變為可播放的敘述故事的使用者流程圖。
Whimsical — 輕鬆建立流程圖、線框和便條紙。
XMind: ZEN — 腦力激盪與心智圖工具，可在大綱與樹狀圖之間切換。將主題與其他圖表連結。
使用者研究工具
使用者研究透過各種定性和定量方法（訪談、觀察、表格等）幫助您了解使用者行為、需求和動機。這些使用者研究工具可能對您有用：
Appoint.ly — 一個基於網路的日程安排工具，可透過與線上行事曆整合來協助快速安排會議。
Calendly — Calendly 可以幫助您安排會議，而無需來回發送電子郵件。
Crowd Signal — 收集、組織和分析來自各種來源（包括社群媒體和行動裝置）的資料。
Doodle — 用於時間管理和協調活動、會議、約會的線上日曆工具
Evolt — 以乾淨、現代的方式創建使用者角色、故事板、商業模式畫布、體驗地圖、腦力激盪板和情緒板。
Feedback Lite — 使用旨在提高網站效能並提高客戶參與度的客戶之聲解決方案收集高品質的客戶回饋。
GoToMeeting — 一個簡單、功能極為強大的網路會議服務。
Handrail — 端到端、協作式使用者研究與見解平台 — 規劃研究、收集和分析資料並分享您的發現。
Lookback — 使用即時產品或原型遠端運行、記錄和記錄使用者研究會話。
Reflector — Reflector 是一種基本的螢幕鏡像和記錄工具，因此您可以使用任何現有的線框或原型遠端進行使用者測試。
Reframer — 一種研究工具，可協助您的團隊擷取、標記（程式碼）和識別多位研究參與者的質性資料中的模式。
Sticktail — 用於在組織內集中、尋找和分享使用者見解的平台。
Survey Monkey — 線上調查工具，用於捕捉對您最重要的人的聲音和意見。
Typeform — 使用簡單的拖放介面建立任何類型的表單、調查或問卷，甚至接受信用卡付款。
Wufoo — 建立表單、收集資料和付款並自動化您的工作流程。
YesInsights — 簡單的問題和 NPS 調查可改善您的業務。
UserBit — 為您的團隊提供即時研究工具的平台。標記/編碼訪談和回饋、捕捉見解、創建角色、視覺化網站地圖等。
使用者訪談 — 根據職業、人口統計、地理等因素，從擁有 125,000 名成員的社群中招募參與者，進行任何類型的研究。
Zoom — 這是最好的線上會議服務之一。
視覺化偵錯工具
LogRocket — 一種記錄使用者在您網站上執行的操作的工具，以便您可以更快地重現錯誤並修復問題。
Visual Inspector — 用於網站回饋和修復設計錯誤的協作工具。
<文章 id="線框工具">
線框工具
線框是一種視覺模型，概述了網站或應用程式的基本結構。它包含了最基本的元素和內容，可幫助您輕鬆解釋設計想法。線框是一種低保真度的設計展示方式。本節介紹了適用於各種用例的最佳線框圖工具。
Balsamiq Cloud — 輕鬆繪製 UI 草圖。捕捉您的想法，協作設計，讓每個人都參與其中。
Gliffy — 用於建立框架、UML 圖、流程圖、線框圖等的工具。
Pidoco — 此軟體可讓您快速建立點擊式線框和完全互動式的 UX 原型。
異想天開的線框 — 即時線框觸手可及。豐富的可配置元素庫，如按鈕、輸入、複選框。
1200px 網格系統 — 幫助您建立比 960 像素樣式更廣泛的網站設計網格系統。
三維建模軟體
3D 圖形用於遊戲、電影製作、建築、工程和 3D 列印。3D 藝術家和設計師使用本節中提到的特定 3D 建模軟體。
Autodesk — 整合 CAD、CAM 和 CAE 軟體。將設計、工程和製造統一到一個平台。
Maya — 在一個工具集中製作動畫、環境、運動圖形、虛擬實境和角色創建。
Onshape－專門針對科技與零配件設計的建模軟體，是首款全雲3D軟體。
Rhino — 一款基於曲線的 3D 建模軟體，可建立數學上精確的 3D 曲面模型。
SketchUp — 真正為每個人製作 3D 建模的 3D 設計軟體，具有簡單易學且功能強大的工具集。
Vectary — 使用我們的拖放 3D 建模工具創建精美的 3D 模型。
3D Slash — 3D 建模工具，可在所有裝置和所有作業系統上使用，線上和離線。
附錄（參考與啟發）
Awesome Design Tools & Plugins 由 Flawless 團隊的 Lisa Dziuba 和 Valia Havruliyk 策劃。它的靈感來自於設計社群的文章和我們的好朋友 Graeme Fulton 製作的 Prototypr.io Toolbox。如果您發現一些很棒的設計工具，請建議。感謝您讓這個專案變得很棒:)
Last updated
