Awesome Design Tools

• 很棒的設計插件

• 精彩設計會議

• 很棒的設計 UI 套件

出色的設計工具作為 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  工具，不要忘記添加它們。現在我很想看到您的建議！

＃＃ 表中的內容

• 輔助工具

• 動畫工具

• 擴增實境

• 協作工具

• 顏色選擇器工具

• 設計回饋工具

• 設計交接工具

• 設計靈感

• 設計系統工具

• 設計到程式碼工具

• 設計版本控制

• 開發工具

• 體驗監控

• 字型工具

• 漸層工具

• 圖示工具

• 插畫

• 資訊架構

• 標誌設計

• 模型工具

• 無程式碼工具

• 像素藝術工具

• 原型工具

• 截圖軟體

• 草圖工具

• SMM設計工具

• 聲音設計

• 庫存照片工具

• 股票影片

• 學習設計工具

• UI 設計工具

• 使用者流程工具

• 使用者研究工具

• 可視化調試工具

• 線框圖工具

• 3D 建模軟體

輔助工具

無障礙是指創建可供所有人（包括有視覺、運動、聽覺、言語或認知障礙的個人）使用的網站和應用程式的做法。在這裡，您可以找到適用於開發人員和設計人員的網路輔助功能工具、輔助功能測試工具以及輔助功能應用程式：

• A11ygator — 根據 WCAG 規則分析網站的網路工具。也可以作為 Google Chrome 瀏覽器擴充功能和 Twitter 機器人。 
• Accessibility Insights — 協助開發人員快速尋找並修復可訪問性問題。
• Accessible Palette Builder — 一個基於 Elm 的原型，可協助設計人員建立可存取的調色板。 
• AChecker — 可訪問性測試 Web 應用程序，用於評估 HTML 內容的可訪問性問題。
• ANDI — Web 內容的可訪問性測試工具（小書籤）。它將自動檢測可訪問性問題，提供改進線上可訪問性的建議並檢查 508 合規性。 
• Axe — 無障礙引擎，設計用於所有現代瀏覽器以及您今天使用的任何工具、框架、庫和環境。它是為開發人員提供的自動化可訪問性測試工具。 
• ColorBox — 一款透過演算法建立可存取的色彩系統的網路應用程式。由 Lyft 設計團隊完成。
• Colorable — 一個免費的網路為基礎的對比工具。
• Color Oracle — 一個免費的色盲模擬器。
• Contrast — 一款 macOS 應用程序，供設計人員和開發人員快速訪問 WCAG 顏色對比度。
• 對比檢查器 — 幫助檢查元素背景與頁面本身之間的對比。
• Contraste — 一款用於根據網頁內容可訪問性指南 (WCAG) 檢查文字可訪問性的應用程式。
• 包容性設計 — Microsoft 團隊提供的方法論和一組工具。
• Hex Naw — 幫助您測試整個色彩系統的對比和可訪問性。
• Leonardo - 根據所需的 WCAG 對比度產生調色板。為設計師和工程師提供的開源 Web 工具和 npm 模組。由 Adob​​e 製作。  ![Web](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/web.svg ）
• PA11Y — 可訪問性測試工具，用於尋找網頁問題。它從命令列運行 HTML CodeSniffer 以進行程式設計輔助功能報告。它是一個輔助功能開發人員工具。 
• Sim Daltonism — 適用於 macOS 和 iOS 的色盲模擬器，可讓您可視化各種類型色盲所感知的顏色。 
• Stark — 一款付費 Sketch 插件，可讓您模擬不同類型的色盲。
• Toptal 的濾色器 — 讓您測試您的網站並向您展示不同色盲的人將如何看到您的頁面。
• tota11y — 一個可訪問性視覺化工具包。有趣的事實：在工具名稱中您可以看到“a11y”。它是可訪問性的縮寫，即“a”，後面跟著 11 個字母，最後是“y”。
• WAVE — 讓您直接在 Chrome 和 Firefox 中評估網頁內容的可訪問性問題。這是一個網路可訪問性檢查器。
• 90 個範例 — 可存取的顏色主題的免費集合。

動畫工具

動畫引導人們友善、順利地使用產品。即時互動UI讓使用者感受到即時回饋與情感觸動。這些免費和付費工具旨在使動畫創作變得更加容易。如果您打算製作動畫轉場、微互動或基於滾動的動畫，請使用以下工具：

• After Effects — 由 Adob​​e 開發的數位視覺效果、動態圖形和合成應用程式。
• BeatFlyer — 一個網路工具，可讓您從多層合成中快速創建循環且引人入勝的動畫。
• Dokyu Motion — 簡化 After Effects 中的動作設計，以便任何剪輯師都可以講述不容忽視的故事。
• Flare — 一款強大的設計和動畫工具，可讓設計師和開發人員為其應用或遊戲創建動畫。
• Flow — 用於 Sketch 設計的專業動畫工具，也可以匯出 iOS、Web 或 SVG 檔案的生產就緒程式碼。
• GSAP — 一套在所有主要瀏覽器中用於腳本化、高效能 HTML5 動畫的工具。
• Haiku Animator — 基於關鍵影格的動畫，將您的 UI 工具連接到開發人員可以輕鬆使用的程式碼。
• Keyshape — 2D 動畫工具，允許匯出動畫 SVG。
• Kite Compositor — 一款適用於 Mac 和 iOS 的強大動畫和原型設計應用程式。
• LightBox — 2D、手繪動畫包。 
• Lottie — 適用於Android 和iOS 的行動庫，可解析使用Bodymovin 匯出為JSON 的AdAdobe After Effects 動畫，並在行動裝置和Web 上本地渲染它們。
• Mantra — 一個基於網路的時間軸動畫工具。
• Meteoritic — 適用於 iOS 和 Android 的動畫樂趣庫。從適合不同應用程式風格的各種動畫中進行選擇。
• Naker.Back — 免費整合互動式背景，吸引更多人關注您的網站。
• Naker.Story — 透過 3D，讓您的 Web 內容具有互動性，以前所未有的方式吸引訪客。
• OFFEO — 一個線上影片製作工具，供小型企業在無需大量預算的情況下製作像大品牌一樣的影片廣告。
• StorySwag — 只需輕按幾下，即可透過手機為 Instagram 和 Facebook 創建時尚的動畫貼文。 
• Spirit — 動畫工具，可協助您在瀏覽器中即時建立和管理動畫。
• Stylie — 一個基於 Web 的圖形 CSS3 動畫工具。
• Tumult Hype — 適用於 macOS 的 HTML5 動畫/互動創作應用程式。

Drama、Principle、Framer、Invision Studio、Flinto 也屬於 UI 和 UX 動畫應用程式和軟體動畫工具。

＃＃＃ 增強現實

擴增實境是一種透過向現實世界添加數位資訊層來升級現實世界的技術。AR 的使用日益增加，出現了數十種新的 AR 應用程式、開發套件和 AR 框架。因此，本節收集了不同的擴增實境工具，用於創建、投影和原型設計專注於 AR 的應用程式：

• Daqri — 透過將數位資訊疊加到實體環境上，為員工提供專業級擴增實境。
• EasyAR — 一款行動應用程式和擴增實境引擎，讓 AR 變得更容易。
• HP Reveal — 透過視覺互動為列印內容增加價值。
• Layar — 尋找各種基於擴增實境技術的物品。
• Lens Studio — 使用或不使用程式碼為 Snapchat 建立、發布和分享您自己的 AR 體驗。
• Lightform — 投影 AR 設計工具。
• Spark AR Studio — 無需程式碼即可為 Instagram 創建 AR 體驗。 
• Torch — 一款專注於行動 AR 的雲端的 3D 設計和原型製作應用程式。 
• Unity — 建立高品質的 3D 和 2D 遊戲，並將其部署到行動裝置、桌上型裝置和 VR/AR 上。
• Vectary — 為您的網站建立 3D 和 AR。
• Vuforia — 適用於行動裝置的 SDK，可用於建立擴增實境應用程式。
• Wikitude — 為您的 iOS、Android 和智慧眼鏡應用程式提供圖像和物件追蹤、即時追蹤 (SLAM)、Geo AR 等功能。

協作工具

想要嘗試一些敏捷設計和開發協作的工具？好主意，因為這樣的工具讓設計人員和開發人員的生活變得更加輕鬆，節省時間並提高生產力。嗯，在 Slack 驅動的時代你知道這一切。在這裡您可以找到最適合產品團隊的協作工具：

• Airtable — 一部分是電子表格，一部分是資料庫，完全靈活，團隊使用 Airtable 以自己的方式組織工作。
• Asana — 工作管理平台團隊用來專注於發展業務的目標、專案和日常任務。
• Basecamp — 專案管理套件，旨在從一個地方組織員工、委派任務並監控進度。
• Freedcamp — 最具創新性的專案管理方式，完全免費......永遠。
• Droplr — 螢幕截圖、檔案分享和螢幕錄影可協助您捕捉和解釋您的想法。
• Excalidraw — 一款白板工具，可讓您輕鬆繪製具有手繪感覺的圖表。 
• Filestage — 一款敏捷的內容審批軟體，可協助您與客戶和同事一起審查影片、設計和文件。
• Float — 一種用於在一個地方規劃專案和安排團隊時間的工具。
• 圖庫 — 用於上傳設計作品、獲取回饋和追蹤修訂的協作工具。 
• HiveDesk — 透過螢幕截圖自動追蹤遠端員工的時間。它可以更輕鬆地監控遠端員工的生產力和管理專案。
• Jira — 敏捷團隊所使用的軟體開發工具。
• Jitsi — 多平台開源視訊會議，您可以自行安裝或在他們的伺服器上使用。 
• Keybase — 一款免費協作應用程序，內建端對端加密聊天、文件共享、git 存儲庫等！[free.svg](https://github .com/ LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) ![open-source.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/媒體/開源.svg）
• Lumeer - 一個簡單的視覺化協作工具，隨時隨地規劃、組織和追蹤任何內容。
• Mattermost — 一個靈活的開源訊息傳遞平台，甚至可以滿足最嚴格的隱私和安全標準。
• Milanote — 一種易於使用的協作工具，可將您的想法和項目組織到可視板中。
• Mixed — 適用於分散式團隊的即時白板和協作工具。
• Moqhub — 創意專案的快速線上打樣。取得影像和 PDF 的回饋。
• MURAL — 視覺思考與協作。隨時隨地。
• Nextcloud — 用於文件、看板、聊天和通話、日曆等的開源協作平台。  com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg)
• Notion — 寫作、計畫、合作與組織。概念就是您所需要的一切—在一個工具中。
• ProofHub — 您所有專案、團隊和通訊的一個地方。
• RealtimeBoard (Miro) — 用於跨職能團隊協作的白板平台。它最近更名為米羅。
• Slack — 無論您從事什麼工作，都是工作協作中心。在這裡，您可以進行對話、做出決定，並且訊息始終觸手可及。
• Sunsama — 一個設計精美、面向團隊的任務管理器，可將 Trello/Jira/Asana 票證整合到一個面向日曆的視圖中。
• Taskade — 團隊生產力變得簡單、有趣，專為遠端團隊設計。Taskade 具有協作性，可在網路、行動裝置和桌面上即時同步。
• Trello — 一個基於 Web 的專案管理應用程序，使您能夠以有趣、靈活且有益的方式組織專案並確定其優先順序。
• Witeboard — 用於協作工作的簡單即時白板。
• Workzone — 一款簡單、功能強大的專案管理軟體。
• Wrike — 線上專案管理軟體，可讓您全面了解並控制您的任務。
• Zenkit — 一個用於安排會議、追蹤專案進度和集思廣益新想法的工具。
• zipBoard — 線上視覺錯誤追蹤與網站註釋工具
• Zulip — 將即時聊天的即時性與電子郵件線程模型結合，有助於專注於重要的對話，同時忽略不相關的對話。

顏色選擇器工具

如果您正在尋找吸管工具、顏色標識符或顏色捕獲，請查看此部分。使用此處提及的顏色選擇器，您將能夠創建新的顏色組合併定義出色的顏色組合。幾乎所有這些工具都是免費的：

• BrandColors — 最大的官方品牌顏色代碼集合。
• Calcolor — 一種基於 Web 的調色板管理工具，提供了一種與數位顏色互動的新方法。
• Chroma — 免費網路應用程序，可讓您識別顏色。
• 顏色 — 使用色輪創建配色方案或從顏色社區瀏覽數千種顏色組合。由 Adob​​e 製作。
• Color by Cloudflare — 一種工具，用於根據UI 元素預覽調色板、循環訪問可訪問的顏色組合以及透過URL 導入或生成方式手動創建調色板。
• Color Deck — HSL 驅動的調色盤集合。它也是開源的。 
• Color Hexa — 免費的顏色工具，提供任何顏色的資訊並為設計產生匹配的調色板。
• 顏色十六進位選擇器 - 用於從任何影像中取得任何顏色名稱的工具。您還可以獲得顏色的十六進位代碼和 RGB 值。
• Color Hunt — 免費開放的色彩靈感平台，擁有數千種時尚的精選調色盤。
• ColorKit — 一種用於混合顏色並產生顏色的色調和色調的工具。
• Color Leap — 跨越時間，看到歷史的色彩。
• Colorpicker — 一個完整的開源顏色操作工具，具有拾取功能。 
• ColorSlurp — 設計師和開發人員的終極色彩生產力助推器。 
• ColorsWall/ — 儲存調色盤或輕鬆產生的地方。
• Colorwise — 搜尋 Product Hunt 上投票最多的產品的調色盤。
• Colour Cafe — 色彩靈感在 Instagram 上選擇了現代調色板。
• Colourcode — 一款線上設計工具，可讓您輕鬆直觀地組合顏色。
• Coolors — 超快的配色方案產生器。 
• Culrs — 精心製作且易於使用的調色板。
• Geenes — 一種透過程式碼和草圖檔案匯出建立和諧色彩主題的工具。
• 影像顏色選擇器 — 影像顏色選擇器和配色產生器。
• Instant Eyedropper — 一款適用於 Windows 的極簡吸管工具，支援設計人員和開發人員的多種顏色格式。
• Just Color Picker — 免費的便攜式離線顏色選擇器和顏色編輯器。
• Khroma — 基於人工智慧的工具，可根據您的喜好產生調色板。
• Material Colors Native — Mac 應用程式形式的 Google 材質設計調色盤。  ![mac.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/mac .svg）
• Material Design Palette Generator — 從任何十六進位顏色取得完美的 Material Design 調色盤。 
• Paletton — 一種設計工具，用於創建協同工作的顏色組合。
• Pular — 使用 Google 影像搜尋的快速原色產生器。
• Pigment — 調色板產生器，具有應用程式建議的無數顏色配置。
• Pikka — 適用於 macOS 的顏色選擇器和配色方案產生器。
• React Color — 來自 Sketch、Photoshop、Chrome 的顏色選擇器集合。它是免費且開源的。 
• Sip — 收集、組織和共享顏色的更好方式。適用於 macOS 的全域吸管工具。
• Skala Color — 適用於多種格式，涵蓋 Web、iOS、Android 和 macOS 開發可能需要的所有內容。 
• 色板 — iOS 應用程序，可讓您收集、檢查和分享日常生活中激發您靈感的顏色。 
• 色調和陰影產生器 — 以 10% 的增量顯示給定十六進位顏色的色調和陰影。 
• Viz Palette — 用於資料視覺化的顏色選擇器。

您也可以使用 Leonardo 建立調色板，這在輔助工具部分中提到。

設計回饋工具

在開發過程中您如何提供並獲取回饋？對於許多產品團隊來說，這個過程通常相當混亂，導致產品延遲和來回溝通的時間浪費。因此，如果您希望獲得有關 UI 問題或視覺錯誤的快速且結構性的回饋，請查看此工具：

• 完美回饋 — 審查並註釋 iOS 應用程序，然後在 Jira 或 Trello 中分享您的回饋。
• GoVisually — 線上打樣、設計審查和批准軟體。

設計交接工具

當設計人員完成工作並需要向開發人員交付具有所有規格和資產的設計時，就會發生設計移交。設計交接工具允許自動產生樣式指南、對設計進行註解、檢查元素。這些工具最大限度地減少猜測並提高設計過程的有效性。

• Avocode — 無需設計工具即可開放設計。無需準備圖層即可匯出影像。點擊圖層即可取得程式碼。
• Flawless App — 一個在 iOS Simulator 中比較預期設計和真實應用程式的工具（對於使用 Xcode 的設計人員或行動開發人員很有用）。
• 檢查 — 準備開發設計。由 Invision 製作。
• Sketch Measure — Sketch 紅線插件。註釋元素的距離和大小。 
• Specctr — 如果您不幸在 PS、AI 或 ID 中設計 UI，此工具會建立紅線註解。
• Sympli — 來自 Sketch、Photoshop 和 Adob​​e XD 的自動規格和資源移交。與 Jira、Xcode 和 Android Studio 整合。
• Zeplin — 自動傳遞具有準確規格、資產、程式碼片段的設計和風格指南。

您也可以在 Relay 中進行設計切換，如設計版本控制部分中提到的。

設計靈感

創作過程可能會很艱難。因此，如果您沒有立即想到想法，請嘗試在其他設計師的作品中尋找靈感。這些設計靈感網站以流行公司和優秀產品的設計模式、用戶流程、電子郵件標記和創意解決方案為特色：

• Behance — 一個展示和發現創意作品的線上平台。
• CodeMyUI — 精心挑選的網頁設計與 UI 靈感與程式碼片段的集合。
• Collect UI — 一個從 Daily UI 及其他地方收集日常靈感的平台。基於 Dribbble 鏡頭，精心挑選了 14419 種設計。
• 創意作品集 — 精選設計師和開發人員製作的最具創意的作品集。
• Design Hunt — 每日收集所有創意人士的最佳產品、應用程式和靈感。 
• Dribbble — 一個展示使用者製作的藝術作品的線上社群。從他人的作品中獲得靈感的絕佳資源。
• Ficture — 正在使用的字體存檔，會帶給您啟發。
• Inspiration UI — 一個旨在為網路創作者提供最佳設計資源的社群。
• Hover States — 為創意社群展示來自數位文化前沿的偉大作品。
• Httpster — 一個靈感資源，展示了來自世界各地的人們製作的搖滾網站。
• H69.Design — 登陸頁面集合和為設計師提供的免費資源。
• Lapa Ninja — 登陸頁設計靈感來自網路。1800 多個登陸頁面範例並每日更新。
• Mobile Patterns — 一個設計靈感庫，具有最佳的 UI UX 模式（iOS 和 Android）。
• Mobbin — 瀏覽流行應用程式的行動設計模式。探索常見的使用者流程，例如入門、帳戶註冊和登入、核心功能等。
• One Page Love — 一系列美麗獨特的 One Page 網站，提供網站設計靈感。
• Owwly — 充滿設計熱情的數位產品之家。
• 頁面流 — 使用者串流影片和螢幕截圖可在您遇到困難時為您提供啟發。探索適用於 160 多種不同任務的行動和網頁設計模式。
• pttrns — 流行行動應用程式的設計模式。
• 真正好的電子郵件 — 4,150+ 精心挑選的電子郵件設計。
• ReallyGoodUX — 螢幕截圖以及來自真實行動和網路產品的出色使用者體驗範例。發現最好的使用者體驗範例 - 包括入門指南和演練。
• Saas 登陸頁面 — 探索頂級 SaaS 公司創建的最佳登陸頁面範例，並為您的下一個設計專案獲取想法和靈感。
• Saas Pages — 專注於文案和設計的最佳登陸頁面的集合。
• 設計團隊 — 關於矽谷一家科技新創公司的設計團隊的漫畫。
• Typewolf — 幫助設計師為他們的下一個設計專案選擇完美的字體組合。
• UI Garage — 為設計師、開發人員和行銷人員提供尋找靈感、工具和最佳資源的一站式商店。
• UI Sources — 來自當今 App Store 上設計最佳、收入最高的應用程式的超過 500 次互動。
• UI Recipes — 每週 15 分鐘最熱門應用程式的 UI 設計課程。
• UX Archive — 瀏覽 120 個行動應用程式中的 400 多個使用者流程。檢查預訂、登入、入職、購買、搜尋等任務。
• Waveguide — 一個設計知識庫，其中包含數千個人工豐富的產品和品牌體驗範例（行動應用程式、登陸頁面、電子商務、CX/UX 模式範例）。
• 網頁設計博物館 — 超過 1,200 個精心挑選的網站，展示 1994 年至 2006 年間的網頁設計趨勢。

設計系統工具

我打賭您聽說過設計系統，因為這是一個非常受歡迎的話題。設計系統提供一致、穩健的設計模式，以保持設計和開發同步。它們本質上是規則、約束和原則的集合，在設計和程式碼中實現。在這裡您可以找到用於建置、維護和組織設計系統的工具。

• Cabana — Sketch 的高級設計系統，可協助您比以往更快地創造令人驚嘆的產品。
• Catalog — 數位產品的生活風格指南，將設計文件與真實的即時組件結合。
• 設計系統管理員 — Invision 的設計系統管理員。
• DSK — 「Design System Kit」的縮寫 — 用於協作創建設計系統的工作台。  com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg)
• EOS 設計系統 — 一個基於 Bootstrap 構建的開源且可自訂的系統，遵循原子設計概念。
• Eva 設計系統 — 可自訂的設計系統，可用於具有行動和 Web 元件庫的 Sketch。  com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg)
• Frontify — 建立圖形指南、模式庫、設計系統。
• 互聯網 — 將設計和工程圍繞單一事實來源連接起來。該工具尚未公開可用（測試版）。
• Lingo — 與整個團隊建立共用資源庫。
• Lucid — 用於建立、管理和共享設計系統的工具。從簡單的元件庫到樣式的詳細描述。
• Modulz — 設計、建置、記錄和發佈您的設計系統 — 無需編寫程式碼。
• Prime Design System Kit — 它包括設備模板、圖表、UI 套件甚至插圖套件。
• Specify — 用於創建、擴展和維護設計系統的工具。
• Storybook — 一個開源工具，用於為 React、Vue 和 Angular 單獨開發 UI 元件。
• 符號設計系統 — 基於原子元素的草圖設計系統。
• Toolabs — 基於設計系統和組件的設計、原型和開發工具。目前尚未公開，但您可以申請搶先體驗。
• Zeroheight — 由設計師創建、由開發人員擴展、每個人都可編輯的風格指南。

我們也可以在 Sketch、Figma、UXPin 和 Framer X（Framer X Team Store）中加入此功能。

<文章 id="設計到程式碼工具">

設計到編碼工具

每個人都可以學習開發，但這需要時間和精力。如果您現在需要一個網站或應用程式並且不想僱用開發人員，請關注網站建立者。這種從設計到編碼的工具將幫助您快速而美觀地製作作品集、簡單的登陸或應用程式。

• Anima — 帶有 Sketch 插件的 Web 應用程序，可將 Sketch 轉換為 HTML。
• Blocs — 一種快速、易於使用且功能強大的視覺化網頁設計工具，讓您無需編寫程式碼即可建立響應式網站。
• 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 專案並立即在線上發布它們。
• Mobirise — 一款基於 Bootstrap 3/4 和 \ AMP 的離線拖放網站建立器軟體。
• PageCloud — 最快、最可自訂的網站建立器，讓任何人可以創建自己理想的網站。
• PaintCode — 向量繪圖應用程序，可立即將繪圖轉換為 Swift、Objective-C、JavaScript 或 Java 程式碼。
• Piinegrow — CSS Grid、Bootstrap 4 和 3、Foundation、響應式設計、HTML 和 CSS 的專業視覺化編輯器。
• px.div — 適合開發人員和設計人員的網站建立工具。
• Readymag — 一種視覺上令人愉悅的工具，用於在網路上設計從登陸頁面到多媒體長讀物、簡報和作品集。
• Sparkle — 製作真正網站的最簡單方法，無需程式碼，無需術語。
• STUDIO — 從頭開始設計、即時協作並發佈網站。
• Supernova Studio — 從 Sketch 匯入設計並將其轉換為 Android、iOS 或 React Native 程式碼。
• Tilda — 使用 Tilda 模組免費建立網站、登陸頁面或線上商店，並在當天發布。
• Wix — 最簡單且功能最齊全的網站建立器，可讓您建立自己的高度客製化的網站。
• Webflow — 在您的瀏覽器中建立響應式網站，然後由我們託管或匯出您的程式碼以託管到任何地方。

<文章 id="設計版本控制">

設計版本控制

開發人員很長一段時間以來都在積極使用版本控制工具，可能是從 2005 年（Git 第一版）開始。對於開發團隊來說，使用版本控制系統是不費吹灰之力的，而設計版本控制系統最近才出現。這個市場正在迅速發展，我們期望設計師在版本控制方面看到更多：

• Abstract — 一個供設計團隊對 Sketch 檔案進行版本控制、管理和協作的平台。
• Folio — 一個基於 Git 的簡單版本控制系統，供設計團隊使用。
• Kactus — 無需更改工具即可設計版本控制。管理變更、記錄工作並使您的團隊保持同步。  com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/mac.svg)
• Plant — Mac 應用程式和 Sketch 外掛程式為設計師和團隊提供完整的版本控制。
• Figma Relay — Relay 將您的最新資源從 Figma 直接推送到您的程式碼庫（尚未發布）。
• Versions — 為設計人員提供的版本控制工具，具有視覺差異、合併和衝突解決功能。適用於 GitHub、Bitbucket、GitLab 和 Azure DevOps。

<文章 id="開發工具">

開發工具

本節提到開發工具和瀏覽器。開發瀏覽器具有幫助開發人員和設計人員創建和測試網站和應用程式的功能。

• Blisk — 提供了一個開發工作區，可以以兩倍的速度開發和測試現代 Web 應用程式。
• Firefox 開發者版本 — Firefox 瀏覽器的開發者版本。
• Litmus — 一個電子郵件行銷活動創建平台，除此之外，它還可以讓您了解 HTML 電子郵件在各種電子郵件用戶端中的顯示方式。
• Polypane — 一款從頭開始建立的瀏覽器，用於建立和測試網站和應用程式。
• Storybook — 一個開源工具，用於為 React、Vue 和 Angular 單獨開發 UI 元件。它使構建令人驚嘆的 UI 變得井井有條且高效。  com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg)
• Styleguidist — 具有生活風格指南的獨立 React 元件開發環境。  com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg)

<文章 id="體驗監控">

體驗監控

傾聽使用者的聲音很重要，但了解真實的使用情況更為重要。為此，您需要安裝不同的分析工具、體驗監控軟體和使用者行為應用程式。只需使用有關用戶資料的分析解決方案：

• Amplitude — 了解您的用戶，快速發布更好的產品體驗並發展您的業務。
• Chalkmark — 在實施之前獲得有關設計的快速回饋，從而提高客戶轉換率和以任務為導向的成功率。
• Fathom — 提供簡單、有用的網站統計信息，無需追蹤或儲存使用者的個人資料。
• FullStory — 一款可在一個強大且易於使用的平台中擷取所有客戶體驗資料的應用程式。
• Google Analytics — 衡量您的廣告投資報酬率並追蹤您的網站和應用程式。
• Heap — 自動擷取每個 Web、行動和雲端交互，然後追溯分析您的數據，而無需編寫程式碼。
• Heatly — 免費熱圖工具，可以更了解網站的使用者體驗。
• Hotjar — 查看訪客如何使用您的網站並收集使用者回饋。
• Inspectlet — 在訪客使用您的網站時錄製視頻，以便您可以看到他們所做的一切。
• LiveSession - 高品質的使用者會話重播分析。
• LogRocket — 查看使用者在您的網站上執行的操作，幫助您更快重現錯誤並解決問題。
• Mixpanel — 深入了解所有以使用者為中心的數據，以便根據客戶如何使用您的產品或網站做出更明智的決策並更快地採取行動。
• Mouseflow — 記錄滑鼠遊標移動。
• Pendo — 衡量並提升應用程式中的客戶體驗。
• Smartlook — 使用者會話重播與使用者參與度分析。
• Usabilla — 透過在正確的時間提出正確的問題來建立面向未來的客戶體驗。

<文章 id="字型工具">

字體工具

字體通常用於使網頁變得更加美麗。它是任何設計的重要組成部分。在本部分中，您將找到字體產生器和字體查找工具，可讓您管理和使用字體：

• BeFonts — 一個不錯的免費字體集合。
• Behance 免費字型 — Behance 上傳的免費字型清單。
• DaFont — 可免費下載字型的檔案。按字母順序、風格、作者或受歡迎程度瀏覽。
• Emotype — 可以根據您想要在網站上傳達的情緒輕鬆找到字體。
• Fontbase — 字型管理變簡單。
• FontFabric — 華麗的介面和良好的收藏。
• Fontface Ninja — 瀏覽器擴展，用於發現任何網站上使用的字體。
• FontPair — 一個簡單的工具，可以幫助您將 Google 字體配對在一起。
• Fontown — 一種印刷工具，具有不斷增長的字體目錄，可促進設計人員的工作流程。
• 字體 — Adob​​e 提供的數千種精美字體。
• Fonts Arena — 精心策劃的排版網站，提供高品質的免費字體、為您量身定制的研究文章、高級字體的免費替代品、新聞等。
• FontGet — 各種字體都用標籤整齊地排序。
• FontSelf — Illustrator 和 Photoshop CC 的擴展，可讓您在幾分鐘內將任何字母轉換為 OpenType 字體！
• FontSpark — 一個簡單的工具，可協助設計人員快速找到適合其專案的最佳字體。
• Font Squirrel — 下載廣泛的免費字體。
• Google Fonts — 透過出色的排版使網路更加美觀、快速和開放。
• Google Webfonts Helper — 一種自行託管 Google Fonts 的麻煩方法。它是免費且開源的。 
• LostType — 第一家按需付費類型鑄造廠。
• 測量 — 使用此 Chrome 瀏覽器擴充功能測量印刷行長度。
• RightFont — 字體管理應用程序，有助於透過 iCloud、Dropbox 或 Google Drive 預覽、同步、安裝和組織字體。
• Sans Forgetica — 經過科學設計的可下載字體，可幫助您記住學習筆記。
• 尺寸計算器 — 使用觀看距離和印刷版式的實體尺寸計算感知尺寸。
• Typeface — 字體管理器，透過即時字體預覽和靈活的標記來改善您的設計工作流程。
• Wakamai Fondue — 該工具可以回答「我的字體能做什麼？」這個問題。
• Web 字型預覽 — 預覽 Google 字型與元件和網站範本的配對。 
• Webfont — 建立和維護自訂 SVG 圖示字體，製作共用圖示庫。 
• WordMarkIt — 顯示您的書面單字/短語以及電腦上已安裝的所有字體。

您也可以使用指定處理字體，這在設計系統工具部分中提到。

<文章 id="漸層工具">

漸層工具

你可以看到漸層顏色無所不在——使用者介面、品牌、插畫、排版。漸層是透過使用兩種或多種不同的顏色來繪製一個元素並在它們之間逐漸淡出而創建的。它可能看起來是一種令人難忘、新鮮和獨特的顏色。要為您的設計製作這樣的漸變，請使用這些漸層調色板。

• Blend — 建立和自訂漂亮的 CSS3 漸層。
• Colorffy — 取得 CSS、圖片、UI 預覽或建立自己的漸層。
• 顏色和字體 — 為數位設計師和 Web 開發人員精心設計的顏色、g 輻射和字體庫。
• ColorSpace — 適合您下一個專案的完美配色方案！產生漂亮的調色板。
• ColorSpark — 幫助設計師找到獨特的顏色和引人注目的漸變組合。
• 酷炫背景 — 探索精心挑選的酷炫背景，您可以將它們新增至部落格、網站。
• CoolHue — 為您的下一個超級驚人的東西精心挑選的漸變調色板和样本。
• CSS Gradient — 一個免費的 CSS 漸層產生工具，該網站可讓您建立彩色漸變背景。
• Egg Gradients — 一個顏色集合頁面，包含 12 種不同顏色的色調。
• Grabient — 用於產生網頁漸層的漂亮而簡單的 UI。
• Gradienta — 多色 CSS 漸變，JPG 下載，100% 免費！
• GradientsList — 最大的眾包漸變集合，來自Gradients Maker for iOS 上的用戶每日貢獻store/id1442380225?pt=117877769&ct=gh&mt=8)
• 漸層產生器 — 一種在兩種顏色之間產生階梯漸層的工具。
• Gradient Hunt — 一個自由開放的色彩靈感平台，擁有數千種時尚的手工色彩漸變。 
• Gradients Guru — 為您的 UI 提供混合模式背景圖片和漂亮的背景漸層。
• HtmlColours — 意識到使用此漸變產生器創建漸變是多麼容易和美麗。
• UI Gradients — 為設計師和開發人員精心挑選的美麗色彩漸層集合。
• Web Gradients — 180 個線性漸變的免費集合，您可以將其用作網站任何部分的內容背景。

您也可以使用 Leonardo 建立和審核漸變，這在輔助工具部分中提到。

<文章 id="圖示工具">

圖示工具

除了字體之外，每個設計中都使用了圖示。這些基本元素支援並指導產品內的許多使用者操作。毫無疑問，圖標是使用者導航中的重要元素。雖然製作這些小設計元素既困難又耗時，但您可以獲得數千個向量圖示供個人和商業用途。

• Animaticons — 一組不斷增長的精美、高分辨率、動畫 GIF 圖標，您可以自訂它們。
• CoreUI Icons — 優質設計的免費圖示集，帶有 SVG、Webfont 和光柵格式的標記。
• Digital Nomad Icons — 適合您下一個專案的生活方式圖示和表情符號包。25 個高解析度平面圖示。
• Essential Glyphs — 旨在滿足您對形狀完美的圖示的需求。適合小尺寸和大尺寸。
• Feather Icons — 每個圖示均在 24x24 網格上設計，強調簡單性、一致性和可讀性。 
• Flaticon — 1593000+ SVG、PSD、PNG、EPS 格式或圖示字體的向量圖示。
• Font Awesome — 網路上最受歡迎的圖示集和工具包，而且它是開源的。[](https://github.com/FortAwesome/字體-太棒了）
• Fontello — 使用圖示建立自訂字體的工具，也是開源的。 
• Freepik — 獨家免費贈品和項目所需的所有圖形資源的集合。
• Iconscout — 在一處獲取高品質圖示、插圖和庫存照片。
• Iconfinder — 向量圖示 (SVG) 市場。以 IconJar 格式提供的圖示集。
• IconJar — 將所有圖示儲存在一個圖示管理器中。
• Iconmonstr — 在 305 個集合中發現 4412+ 個免費圖示。大量且不斷增長的簡單圖示來源。
• Iconset — 免費、跨平台、快速的 SVG 圖示管理器，適用於 Mac 和 Windows。
• 圖示商店 — 由一流設計師設計的用於個人和商業專案的免費向量圖示庫。
• ICONSVG — 一種簡化為專案尋找和產生通用圖示的過程的工具。
• Icons8 — 免費 iOS、Android 和 Windows 風格的圖示。
• Ikonate — 自訂、調整和下載免費向量圖示。
• illustrio — 更聰明的圖示庫。使用 100% 可自訂的圖標來建立偉大的東西。
• Ionicons — 製作精美的開源圖示。
• Material Design Icons — 由開源貢獻者提供的免費材料設計圖示。 
• Material Icons Library — 1000 多個流行圖形工具圖示的免費集合。
• Motion — 免費、簡單的動畫圖示編輯器。
• Norde Source — Mac、Windows 和 Linux 應用程序，用於對圖標集進行顏色和自訂以適合您的品牌。
• Noun Project — 一切的圖示。
• Nucleo — 一款 Mac 和 Windows 應用程序，用於收集、自訂和匯出所有圖示。
• Orion Icons — 具有高階互動式 Web 應用程式的 SVG 向量圖示。
• Simple Icons — 流行品牌的免費 SVG 圖示。只需點擊所需的圖標，下載就會自動開始。
• 分享圖示 — 超過 300 000 個不同格式的免費下載圖示。
• Streamline Emoji — 850 多個向量表情符號的免費集合。此風格的靈感來自日本「卡哇伊」（可愛）風格。
• Svgsus — SVG 圖示管理工具。
• SVG Colorizer — 一種工具，可自動更改任何給定 SVG 圖標包的整個調色板，智能地保持陰影、高光和陰影。
• SVGRepo — 一個擁有 300.000 多個 SVG 向量和圖示的網站。
• Tilda Icons — 下載登陸頁面的免費圖示。700 多個向量圖標，共 43 套，適合商業用途。
• Twemoji — Twitter 的開源表情符號可以滿足您專案的所有表情符號需求。
• Unicons — 1000 多個像素完美的向量圖標，適合您的下一個專案。
• VisualPharm — 免費 SVG 圖標，具有超快搜尋和免費可樂。Icons8 專為娛樂而打造。
• Xicons — 免費向量圖標，每 10 天更新一次。
• Zwicon — 為您的下一個專案手工製作的圖示集。

您也可以使用「指定」來處理圖標，這在設計系統工具部分中提到。

<文章id =「插圖」>

插圖

插圖可以用在您的登陸頁面、部落格文章、應用程式或電子郵件行銷活動中。它們使您的設計變得生動有趣。雖然繪製好的插圖是熟練的圖形設計師的任務，但您可以從我們社區中非常友善的人那裡獲取免費的 SVG 圖像和插圖：

• 荒誕設計 — 為您的專案提供免費的超現實主義插圖。
• Blobmaker — 在瀏覽器中建立具有不同顏色、複雜度和對比度的向量 blob 插圖。
• Blush — 創作、混合和客製化由世界各地藝術家製作的插圖。
• Humaaans — 一個免費的圖書館，用於混合和搭配人物插圖。
• Pngtree 圖解 — 超過 13142 張專業設計的不同風格的插畫。
• IRA Design — 使用手繪草圖組件、精選的 5 種漸變和 ai.、svg 來創建令人驚嘆的插圖。或.png。格式。
• JoeSchmoe — 為開發人員和設計師提供的插圖化身集合，非常適合作為佔位符或即時網站。
• LukaszAdam — 免費向量藝術插圖和圖示。它們可用於個人和商業用途。
• ManyPixels — 免版稅插圖為您的專案提供動力。
• Mega Doodles Pack — 帶有手繪塗鴉的大型向量包，用於演示、社交媒體、部落格文章等。 
• Open Doodles — Pablo Stanley 創作的一組免費插圖，體現了開放設計的理念。您可以出於任何目的複製、編輯、重新混合、共享或重新繪製這些圖像，不受版權法或資料庫法（CC0 許可）的限制。
• Ouch — 向量插圖可提升您的專案的檔次。免費供個人和商業用途。
• Squircley - 開始創建漂亮的 SVG squircles 所需的一切。
• unDraw — 精美 SVG 影像的集合。
• Wannapik — 可供任何使用的免費插圖、向量圖像、照片和動畫的集合。

<文章 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 =「標誌設計」>

＃＃＃ 標誌設計

徽標是您品牌形象的起點。它反映了產品使命、功能和品牌訊息。理想情況下，徽標在您的產品和用戶之間建立了牢固的聯繫。標誌設計是一門藝術，就像許多其他設計學科一樣。有了正確的標誌設計工具，這種藝術可以更快完成。

• Design Evo — 大量向量圖示和形狀可協助您輕鬆設計自訂標誌。
• 免費商標設計 — 在幾秒鐘內創建令人驚嘆的專業標誌。
• Graphic Springs — 從向量格式標誌範本庫中進行選擇，按行業分類。編輯模板的圖形和文本，然後下載。
• 標誌設計團隊 — 提供價格實惠的專業客製化標誌設計和品牌設計服務。
• Logojoy — 使用人工智慧立即為您的企業產生獨特的標誌創意。
• Logo Lab — 透過自動化視覺實驗來測試您的商標。
• Logo Maker — 讓您可以在幾秒鐘內製作免費標誌。從空白畫布開始，新增文字和圖標，然後進行自訂。
• Designhill 的 Logo Maker — 只需幾分鐘即可產生 1000 個獨特的徽標，無需設計專業知識。
• Logo Makr — 免費設計徽標，從數百種字體和圖示中進行選擇，然後將徽標保存在電腦上。
• 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 — 此工具可協助您使用網站或行動應用程式的螢幕截圖免費建立精美的裝置模型。
• Facebook 的裝置 — 流行裝置的圖像和草圖檔案。
• Dimmy.club — 用於您的網站和應用程式螢幕截圖的裝置模型產生器。
• Frrames — Frrames 模型是為您理想的演示精心製作的響應式視窗模型。
• Lstore Graphics — 免費與進階模型、UI/UX 工具、適合忙碌設計師的場景創作器。
• Mediamodifier — 在幾秒鐘內創建令人印象深刻的產品模型。
• Mockflow — 集思廣益使用者介面創意的最快方法。
• Mockup World — 大量免費、合法、完全分層、易於自訂的逼真 PSD。
• 免費模型 — 免費設計資源、圖形和網頁設計師的 PSD 檔案。
• Mockuuups — 用於創建漂亮的應用程式預覽或任何行銷資料的拖放工具。
• 類比影片 — 透過在影片中新增裝置框架來立即建立模型。
• Moqups — 協助您在線上框框、模型、圖表和原型上即時建立和協作。
• 原始模型 — Photoshop 的高品質模型，讓您的設計脫穎而出。
• Overframe for Mac — 使用裝置框架疊加記錄您的原型和應用程式。
• PixelBuddha — 為網頁設計師和開發人員提供免費且優質的優質資源。
• Ramotion Store — 為 Sketch 和 Photoshop 精心製作的 Apple 和 Android 模型。
• Rotato — 適用於您的應用程式設計的動畫 3D 模型。
• SceneLab — 在線創建逼真的模型和定製品牌設計。
• Screely — 快速將網頁設計建置到極簡瀏覽器視窗。
• ScreenSpace — 運動設計師的 3D 設備影片。
• Screenzy — 立即將您的圖片和螢幕截圖轉換為漂亮的模型，準備在社交媒體上分享。
• Screener — 使用此應用程式使用您選擇的模型將一堆圖像插入到主題演講檔案中。
• Smartmockups — 只需點擊幾下即可創建令人驚嘆的產品模型。
• shotsnapp — 為您的數位應用程式和網站設計創建精美的設備模型演示。
• The Mockup Club — Photoshop、Sketch、Figma 和 InVision Studio 的最佳免費設計模型目錄。
• Threed — 在瀏覽器中產生自訂 3D 設備模型。
• UI Store Design — 200 多個免費精選設計資源，適用於 Sketch、Figma、Adobe XD、InVision Studio、Photoshop、Illustrator CC。
• UI8 — 設計免費贈品 — 史詩般的設計免費贈品可協助您入門。
• 向量模型庫 — Sketch、Figma 和 Photoshop 簡報模型的免費集合。

沒有程式碼工具

隨著「無程式碼工具」的興起，每個擁有筆記型電腦的人都可以建立和啟動專案。這些工具可協助設計師和製造商創建網站、應用程式甚至遊戲。沒有任何程式碼工具可以自動執行日常任務並且可以在沒有開發背景的情況下使用。查看此處的工具，如果您需要更多工具，請查看“程式碼設計”部分。

• Bubble — 建立和託管 Web 應用程序，無需編寫程式碼或僱用工程師團隊。
• Carrd — 簡單、免費、完全響應式的單頁網站，幾乎可以滿足任何需求。
• Coda — 一種新型文檔，它將文檔的靈活性、電子表格的強大功能和應用程式的實用性整合到一個新的畫布中。
• Kodika.io — 使用適用於 Mac 和 iPad 的 Kodika 無代碼應用程式建構器建立 iOS 應用程序，能夠透過拖放創建功能強大的應用程式。
• PageXL — 一個簡單的單頁網站建立器，用於快速建立登陸頁面和線上商店。
• Remove.bg — 免費服務，可刪除任何照片的背景。
• Retool — 為您提供構建塊，您可以更快地建立工具。
• sheet2api — 從 Google Sheets 或 Excel Online 試算表建立 API，無需編碼。
• Sheet2Site — 從 Google Sheets 建立網站，無需編寫程式碼。
• Shopify — 一個平台，具備您啟動、經營和發展業務所需的所有電子商務和銷售點功能。
• Thunkable — 任何人都可以建立本機行動應用程式的拖放工具。
• UserGuiding — 建立演練、清單、熱點和模式以改善使用者入門。

像素藝術工具

像素藝術是一種數位藝術形式，其中顏色應用於各個像素以創建圖像。像素藝術可用於創建從複雜的場景和遊戲背景到角色設計或表情符號的一切。如果您想嘗試一下，請查看適用於 macOS 和 Windows 的像素藝術軟體：

• Aseprite — 動畫精靈編輯器與像素藝術工具。
• Data Pixels — 以程式設計方式建立像素藝術。包括 DataPixels.js 和 Data Pixels Playground 桌面應用程式。 
• Draw! — 開源且免費的基於網路的像素藝術和 GIF 編輯器。 
• Grafx2 — 一個點陣圖繪製程序，靈感來自 Amiga 程式 Deluxe Paint 和 Brilliance。專門從事256色繪圖。  com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg)
• GraphicsGale — 具有許多像素藝術特定功能，包括調色板控制、選擇性擦除顏色以及快速替換和嘗試新顏色的工具。
• Goya — 基於 ClojureScript 和 Om 建構的像素藝術編輯器。 
• Make 8 bit art — 一個開源的瀏覽器內像素藝術繪圖工具。 
• Piskel — 動畫精靈與像素藝術的線上編輯器。 
• Pixel art to CSS — 由 React 提供支援的像素藝術動畫和繪圖 Web 應用程式。 
• Poxi — 平面像素藝術編輯器。 
• Pyxel Edit — 像素藝術編輯器，設計讓製作圖塊集、關卡和動畫變得有趣且輕鬆。 

<文章 id="原型工具">

原型設計工具

原型是所提出的解決方案的簡單實驗設計。它應該有助於以快速且廉價的方式測試想法、設計假設和假設。原型設計工具使設計人員和客戶能夠了解產品在現實世界中的功能，並就該解決方案進行協作。許多現代原型設計工具可用於線框圖、原型設計和協作：

• Alva — 使用程式碼元件建立活動原型。它也是開源的。 
• Axure RP — 線框圖、原型設計、協作和規範生成。
• SAP Build — 一套完整的雲端為基礎的工具，用於設計和建置企業應用程式。
• Creo — 原型設計、程式碼匯出和內建行動應用程式產生器。
• 戲劇 — 在單一 Mac 應用程式中進行原型、動畫和設計。
• InVision — 原型設計、協作與工作流程平台。
• Flinto — 一款 Mac 應用程序，用於創建應用程式設計的互動式動畫原型。
• Framer X — 以視覺化方式設計逼真的互動式原型的工具。
• Keynote — 用於創建簡報的內建Mac 應用程序，也可用於快速原型設計（了解Apple 設計師如何在WWDC 2014 會議中使用它“ 原型製作：假裝直到成功」來驗證設計概念）。 
• Lightwell — 視覺化工具和 SDK，用於建立可轉換為原生 iOS 元素的行動佈局和動畫。
• Marvel App — 協作設計平台。線框圖、原型、線上設計並在一個地方創建設計規格。
• Maze — 一款為設計師和開發人員提供的工具，可為您的 Invision 原型提供分析結果以及可操作的 KPI。
• Origami — 用於設計現代使用者介面的免費工具。快速建立原型，在 iPhone 或 iPad 上運行它，對其進行迭代，並匯出工程師可以使用的程式碼片段。 
• Pencil — 具有許多內建組件的原型設計工具，人們可以輕鬆安裝和使用它們在流行的桌面平台上創建模型。
• 原理 — 可以輕鬆設計動畫和互動式使用者介面。
• ProtoPie — 將高保真互動組合在一起，建立感測器輔助原型並在幾分鐘內分享您的驚人創作。
• Proto.io — 一種用於創建完全互動式高保真原型的工具，其外觀和工作方式與您的應用程式完全相同。
• Prott — 一種易於使用且直覺的原型設計工具，可促進團隊協作。
• Uizard — 將線框轉換為高保真互動原型、自訂樣式系統、匯出至 Sketch、匯出至 HTML/CSS 程式碼。
• Useberry — 一種可用性測試工具，允許從InVision、AdodeXD、Sketch、Marvel 導入原型，並透過熱圖、視訊記錄、使用者流程、時間條獲取用戶行為洞察以及後續問題的解答。
• UXPin — 利用程式碼元件、邏輯、狀態和設計系統的力量來建構感覺真實的原型。

您也可以使用 Figma、Adobe XD、Sketch 和 InVision Studio 進行原型設計，這些在 UI 設計工具部分 中提到。

截圖軟體

截圖是設計和開發工作流程中的典型任務。因此，這些免費且功能齊全的螢幕截圖應用程式可以幫助您輕鬆捕獲螢幕。有些螢幕截圖僅適用於 macOS，而其他螢幕截圖則支援兩種作業系統：

• Camtasia — 具有成熟內建編輯器的螢幕錄影機。
• CleanShot — 使用內建註解工具和快速存取疊加以卓越的方式擷取螢幕。
• CloudApp — 錄製影片、網路攝影機、註解螢幕截圖、建立 GIF。
• Collabshot — 與同事即時截圖並協作。
• Gifox — 令人愉悅的 GIF 錄製和分享應用程式。
• Giphy Capture — 捕捉螢幕的一部分並匯出為 gif 或 mp4。 
• Greenshot — 截取選定區域、視窗或全螢幕的螢幕截圖。
• Kap — 開源螢幕錄影機，具有匯出至 GIF、MP4、WebM 和 APNG 的選項。  
• Lighshot — 快速擷取螢幕。
• Monosnap — 建立螢幕截圖、註解並將其上傳到雲端。
• OBS — 用於錄影和直播的開源軟體。 
• Quicktime — 一個可用於錄製螢幕的影片播放器。 
• ScreenFlow — 影片編輯與螢幕錄製 適用於 Mac 的軟體。
• Screenie — 過濾和搜尋圖像，更改螢幕截圖檔案類型。
• ScreenshotAPI.net — 建立像素完美的全頁網站螢幕截圖。
• ScreenToGif — 錄製部分畫面的 gif。僅適用於 Windows。 
• ShareX — 螢幕截圖、檔案共用和生產力工具。 
• Shotty — 一個選單列應用程序，可幫助您快速找到所需的螢幕截圖，以便您可以將其拖放到任何應用程式中。
• Snagit — 擷取影像與影片、建立 GIF、註解、編輯與分享。
• 截圖工具 — Windows 免費螢幕截圖工具。
• Snappy — 快速拍攝照片並將其組織到集合中。 
• Teampaper Snap — 允許您截取選定區域的螢幕截圖。 

草圖工具

有時您只需要一支鉛筆和一張紙就可以開始創建您的應用程式或網站。因此，您可以在此處找到具有出色素描表範本的線上素描工具，以加快您的創作過程：

• 響應式草圖 — 提供響應式預設計範本。這些將自動調整其佈局以適應任何螢幕尺寸，並包括簡潔的功能。
• Sketchsheets — 一個開源項目，致力於為線框圖設計提供最新設備和平台的免費可列印範本。 
• Sneakpeekit — 列印筆記網格和設備框架。
• Sketchize — 只需選擇任何適合您專案的草圖，列印出來並開始勾勒您的夢想。

SMM 設計工具

行銷團隊通常需要精心設計的材料。它可以是不同的橫幅、促銷視覺效果、網站圖標、動畫或只是社交平台（如 Twitter 或 Instagram）的精美圖像。在本節中，我們將不斷添加工具，供每個人創建行銷設計。

• Canva — 為工作、生活和娛樂創造令人驚嘆的設計 — 即使您不是設計專家！
• Crello — 使用網路上最好的軟體創建自己的設計：貼文、封面、圖形和海報。
• Pablo by Buffer — 為您的社群媒體貼文設計引人入勝的圖像。
• Remove.bg — 免費服務，可刪除任何照片的背景。
• SocialSizes — 為設計師提供社交媒體上圖像和影片內容的最佳尺寸。
• Stencil — 一種圖形設計工具，旨在輕鬆快速地創建社交媒體圖像。

聲音設計

聲音設計是為網站、應用程式、電影、遊戲或任何其他產品創建音景的藝術。聲音在改變人們與您的產品的聯繫方面具有巨大的潛力。有些聲音設計軟體非常先進，大多數聲音設計師都可以使用，而有些則適合初學者。

• Appsounds — 適用於應用程式、遊戲和任何產品的 UI 聲音套件。
• AudioJungle — 來自音樂家和音響工程師社群的 836,206 首曲目和聲音。
• Bensound — 免費下載知識分享音樂、免版稅音樂並在您的專案中使用。
• Freesound — 知識共享授權聲音的協作資料庫。瀏覽、下載和分享聲音。
• Fugue Music — 為您的影片下載免費背景音樂。
• Max — 使用虛擬跳線連接物件以建立互動式聲音、圖形和自訂效果。
• Reaper — 匯入任何音訊和 MIDI，合成、取樣、作曲、編排、編輯、混音和掌握歌曲或任何其他音訊專案。
• Sonic Pi — 現場編碼音樂合成器。  com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg)
• SoundKit — 一個 UI 聲音庫，專為滿足您的所有介面需求而設計。
• UI Sounds — 透過範例學習使用者介面的聲音設計。
• Wistia Music — 下載一些免費的背景曲目，為您的影片增添活力和情感。
• WOWA — 下載 YouTube 影片、播客和應用程式的免版稅音樂。無版權 CC0。音樂靈感來自 Unsplash。
• YouTube 音訊庫 — 瀏覽並下載適合您專案的免費音樂。

庫存照片工具

需要 iOS 應用程式的高品質照片或新橫幅嗎？您始終可以自己拍攝或從庫存照片網站借用。幸運的是，有數百張美麗的免費庫存照片和免版稅圖片可用於任何項目：

• Burst — 用於網站和商業用途的免費庫存照片。
• Duotone — 可在任何專案中使用的免費雙色調影像，或製作自訂雙色調影像。
• Death to Stock — 付費庫存照片服務，偶爾會提供免費包的郵件列表，並且注重看起來不像庫存攝影。
• FoodiesFeed — 數千張美麗逼真的高解析度免費食物圖片。
• FreePhotos.cc — 免費庫存照片用於商業用途。
• Freestocks.org — 高品質照片皆在 Creative Commons CC0 下發布。
• Gratisography — 免費高解析度圖片的集合。
• Jay Mantri — 每個星期四在知識共享 CC0 下發布 7 張新照片。
• Kaboom Pics — 圖庫照片包括抽象、城市/建築、時尚、美食和風景。
• LandingStock — 登陸頁的免費圖片集合。
• Life of Pix — 免費高解析度照片，由 LEEROY 團隊創作。
• LoremPixel — 一種 API，提供指定尺寸和類別的庫存照片。非常適合佔位符/用戶生成的內容。
• Magdeleine — 免費的高品質庫存照片，為您提供靈感。
• Moose — 不要搜尋庫存照片，而是創建它們。
• MMT STock — 由 Jeffrey Betts 與 Creative Commons CC0 提供的高解析度照片。
• New Old Stock — 來自公共檔案館的老式照片，不受已知的版權限制。
• Pexels — 許多免費庫存照片資源的集合。
• 照片創作器 — 一個免費工具，可根據您的需求創建逼真的庫存照片。
• Picography — 由 Dave Meier 和其他各種攝影師使用 Creative Commons CC0 提供的免費庫存照片。
• Pixabay — 在專有許可下分享照片、插圖、向量圖形和影片片段。
• Picjumbo — 完全免費的商業和個人作品照片集。
• Pngtree — 數百萬張 PNG 圖片、背景和向量可供免費下載。
• pxhere — 免費圖片庫。
• Reshot — 一個海量的精選免費庫存照片庫，您在其他地方找不到。
• ShotStash — 數以千計的免費高解析度 CC0 照片和影片。
• SkitterPhoto — 各種各樣的庫存照片，並在知識共享 CC0 下發布。
• Startup Stock Photos — 為新創公司、部落客和出版商提供的免費照片。
• StockSnap.io — 大量免費庫存照片和高解析度圖片。
• StyledStock — 為每位女性創業家提供免費的女性圖庫攝影。
• The Gender Spectrum Collection — 一個庫存照片庫，其中包含超越陳詞濫調的跨性別和非二元模特的圖像。
• UI Faces — 一個聚合器，可索引您可以在設計模型中使用的各種免費頭像來源。
• Unsplash — 免費使用庫存照片。
• #WOCinTech 聊天照片 — 不同背景的女性技術人員的免費庫存照片。
• Zoommy — 幫助您為您的創意產品或靈感找到精彩的免費庫存照片。

庫存視頻

如果您使用影片內容，您將喜歡這些高品質、手工策劃的庫存影片。您將在下面找到許多優質且免費的庫存影片網站，您可以在您的網站、廣告活動或社交媒體中使用它們：

• Coverr — 適合您主頁的精美免費庫存影片片段。
• Life of Vids — 提供免費的庫存影片、剪輯和循環。
• Mazwai — 免費創意分享高清影片剪輯和片段的精彩集合。
• Mixkit — 非凡的免費高清影片。供您使用，完全免費。
• Motion Places — 精選的精美素材集合，可用於您的專案。
• Pixabay — 它擁有超過 150 萬個由創作者社群分享的免版稅庫存影片和照片。
• Pexels 影片 — 讓您輕鬆為您的網站、宣傳影片或其他任何內容找到免費素材。
• Videezy — 立即下載數百萬個免費和優質素材和動態圖形。
• Videvo — 提供大量高畫質影片剪輯、動態圖形和免費素材庫。
• 123RF — 每日超過 100,000 個新內容和 24/7 線上支援。

學習設計的工具

• Design Better — 發現世界頂級設計團隊和領導者的最佳實踐、故事和見解。
• 設計+程式碼 — 最佳工具和設計系統的完整課程。
• DesignerUp — 一系列自訂進度的課程和指導，可協助您掌握產品設計 (UI/UX)。
• Figma Training — 針對 UI 設計師的 Figma 的速成課程。
• Interaction Design Foundation — 業界知名的學習 UX/UI 技能的網站。
• 使用者體驗法則 — 設計師在建立使用者介面時可以考慮的格言和原則的集合。
• 學習 UX — 學習 UI 和 UX 工具的完整方法。
• Sketch Master — 專業人士學習 Sketch 的視訊訓練課程集合。

UI 設計工具

2019 年最好的 UI 設計工具是什麼？您可以選擇下面的任何工具，它可以讓您完成數十種設計任務——網站或行動裝置的 UI、線框、原型、動畫、標誌。對於 UX 和 UI 設計師來說，這些都是很棒且功能齊全的工具：

• Adobe XD — 設計、製作原型並分享從網站和行動應用程式到語音互動的任何使用者體驗。
• Affinity Designer — 適用於 macOS、iOS 和 Microsoft Windows 的向量圖形編輯器。
• Akira — 在 Vala 和 Gtk 中建立的用於 UI 和 UX 設計的原生 Linux 應用程式。
• Botmock — 設計、原型設計和測試語音和文字對話應用程式。支援多個平台。
• CleverBrush — 一個基於瀏覽器的線上向量編輯器和數位發布工具，可以作為 JS 元件整合到頁面中。
• Figma — 一種基於瀏覽器的設計工具，允許即時協作進行設計和原型製作。
• GIMP — 免費開源成像和圖形設計軟體。 
• Gravit — 一款免費的向量設計應用程序，適用於 macOS、Windows、Linux、ChromeOS 和瀏覽器。
• Illustrator — 為印刷品、網路、視訊和行動裝置建立標誌、圖示、繪圖、排版和插圖。由 Adob​​e 製作。
• Inkscape — 一個免費的開源向量圖形編輯器。它可以創建或編輯向量圖形，例如插圖、圖表、線條藝術、圖表、標誌和複雜的繪畫。 
• Krita — 一款免費的繪畫和圖形設計軟體，被認為是 Adob​​e Photoshop 的良好替代品。 
• Lunacy — 一款免費的本機 Windows 應用程序，可離線工作並支援 .sketch 檔案。靈活且重量輕。直覺且易於使用。加速並增強 UI 和 UX 設計師的能力。必須產生令人驚嘆的設計。
• Photopea — 一款基於瀏覽器的免費圖形設計應用程序，可取代 Photoshop。
• Photoshop — 由 Adob​​e 開發的圖像和圖形設計軟體。
• Pixelixe — 一款圖形設計工具，專為需要在幾分鐘內創建令人驚嘆且獨特的圖像、圖形或靜態網頁的營銷人員、博客和小型企業而設計。
• Sketch — 專為 Mac 建置的設計工具包。
• Studio — 將設計、原型製作和協作整合到一個和諧的工作流程中。由 InVision 製造。
• TwitPile — 根據 Twitter 追蹤者、興趣和清單建立平鋪圖像。
• Vectr — 一個簡單的 Web 和桌面跨平台工具，可輕鬆直觀地創建向量圖形。
• Voiceflow — 為 Amazon Alexa 和 Google Home 製作原型、設計和部署真實應用程式。

使用者流程工具

使用者流程是使用者為實現有意義的目標所採取的一系列步驟。這是規劃客戶旅程路徑和改善使用者體驗的快速方法。因此，如果您需要製作使用者流程圖、使用者流程圖或網站地圖，請看看這些工具：

• Draw.io — 一款免費的線上圖表軟體，用於製作流程圖、流程圖、組織架構圖、UML、ER 和網路圖。
• Flowmapp — 一個用於建立網站地圖和使用者流程的線上工具，可協助您有效地設計和規劃使用者體驗。
• Google Drawings — 免費建立圖表；全部在 Google 文件中。- Lucidchart — 用於建立圖表、流程圖、網站地圖等的 線上工具。
• MindNode — 一款心智圖應用程序，可讓腦力激盪變得簡單輕鬆。
• NinjaMock — 線框與使用者流程線上工具。連結您的視圖並建立邏輯流原型。全部具有寫意的視覺風格。
• OmniGraffle — 適用於 macOS 和 iOS 的圖表和數位插圖應用程式。
• Overflow — 將您的設計轉變為可播放的敘述故事的使用者流程圖。
• Sketch.systems — 使用互動式狀態機進行 UI 和流程設計。
• SQUID — 只需幾分鐘即可在 Sketch 中建立漂亮的使用者流程。
• WebSequenceDiagrams — 一個簡單的 Web 應用程序，用於計算按時間順序排列的物件互動。
• Whimsical — 輕鬆建立流程圖、線框和便條紙。
• Wireflow — 免費、線上和開源工具，用於建立漂亮的使用者流程原型。[](https://github.com/vanila- io/wireflow)
• XMind: ZEN — 腦力激盪與心智圖工具，可在大綱與樹狀圖之間切換。將主題與其他圖表連結。
• yEd — 用於製作圖表的免費桌面工具。可用於各種用例。自動佈局在製作流程圖時有很大幫助。

使用者研究工具

使用者研究透過各種定性和定量方法（訪談、觀察、表格等）幫助您了解使用者行為、需求和動機。這些使用者研究工具可能對您有用：

• Appoint.ly — 一個基於網路的日程安排工具，可透過與線上行事曆整合來協助快速安排會議。
• Calendly — Calendly 可以幫助您安排會議，而無需來回發送電子郵件。
• Crowd Signal — 收集、組織和分析來自各種來源（包括社群媒體和行動裝置）的資料。
• Doodle — 用於時間管理和協調活動、會議、約會的線上日曆工具
• Evolt — 以乾淨、現代的方式創建使用者角色、故事板、商業模式畫布、體驗地圖、腦力激盪板和情緒板。
• Feedback Lite — 使用旨在提高網站效能並提高客戶參與度的客戶之聲解決方案收集高品質的客戶回饋。
• GoToMeeting — 一個簡單、功能極為強大的網路會議服務。
• Handrail — 端到端、協作式使用者研究與見解平台 — 規劃研究、收集和分析資料並分享您的發現。
• JotForm — 建立線上表單，為每個回覆取得一封電子郵件，收集資料。
• Lookback — 使用即時產品或原型遠端運行、記錄和記錄使用者研究會話。
• MineTime — 一款免費的日曆應用程序，具有智慧調度和時間分析功能。
• Reflector — Reflector 是一種基本的螢幕鏡像和記錄工具，因此您可以使用任何現有的線框或原型遠端進行使用者測試。
• Reframer — 一種研究工具，可協助您的團隊擷取、標記（程式碼）和識別多位研究參與者的質性資料中的模式。
• Sticktail — 用於在組織內集中、尋找和分享使用者見解的平台。
• Survey Monkey — 線上調查工具，用於捕捉對您最重要的人的聲音和意見。
• Typeform — 使用簡單的拖放介面建立任何類型的表單、調查或問卷，甚至接受信用卡付款。
• Wufoo — 建立表單、收集資料和付款並自動化您的工作流程。
• YesInsights — 簡單的問題和 NPS 調查可改善您的業務。
• UserBit — 為您的團隊提供即時研究工具的平台。標記/編碼訪談和回饋、捕捉見解、創建角色、視覺化網站地圖等。
• 使用者訪談 — 根據職業、人口統計、地理等因素，從擁有 125,000 名成員的社群中招募參與者，進行任何類型的研究。
• Zoom — 這是最好的線上會議服務之一。

視覺化偵錯工具

• LogRocket — 一種記錄使用者在您網站上執行的操作的工具，以便您可以更快地重現錯誤並修復問題。
• PixelSnap — 測量螢幕上所有內容的神奇方法。
• VisBug — 在任何網頁上：視覺化偵錯、快速檢查樣式和 a11y、視覺化變更 CSS、點擊並拖曳元素等等。[](https://github.com/GoogleChromeLabs/ ProjectVisBug)
• Visual Inspector — 用於網站回饋和修復設計錯誤的協作工具。

<文章 id="線框工具">

線框工具

線框是一種視覺模型，概述了網站或應用程式的基本結構。它包含了最基本的元素和內容，可幫助您輕鬆解釋設計想法。線框是一種低保真度的設計展示方式。本節介紹了適用於各種用例的最佳線框圖工具。

• Balsamiq Cloud — 輕鬆繪製 UI 草圖。捕捉您的想法，協作設計，讓每個人都參與其中。
• BLOKK — 一種為不懂拉丁語的顧客提供快速模型和線框圖的字體。
• CSS Grid Builder — 使用此工具，網格中沒有 HTML 部分。只有在根據網格規則新增和定位內容（元素）時，網格才會變得明顯。
• Gliffy — 用於建立框架、UML 圖、流程圖、線框圖等的工具。
• Gridzzly — 建立可列印的自訂網格紙最簡單的方法。
• Layoutit — CSS Grid 和 Bootstrap 的介面建構器，希望成為前端開發的開始。
• Pidoco — 此軟體可讓您快速建立點擊式線框和完全互動式的 UX 原型。
• Wireframe.cc — 一個簡單的線框工具，不會妨礙您。
• 異想天開的線框 — 即時線框觸手可及。豐富的可配置元素庫，如按鈕、輸入、複選框。
• 1200px 網格系統 — 幫助您建立比 960 像素樣式更廣泛的網站設計網格系統。

三維建模軟體

3D 圖形用於遊戲、電影製作、建築、工程和 3D 列印。3D 藝術家和設計師使用本節中提到的特定 3D 建模軟體。

• Autodesk — 整合 CAD、CAM 和 CAE 軟體。將設計、工程和製造統一到一個平台。
• Blender — 免費開源 3D 創建軟體。 
• FreeCAD — 一款免費、開源的多平台 3D 參數化建模器。 
• MatterControl — 一款免費、開源、一體化軟體包，可讓您設計、切片、組織和管理您的3D列印作品。 
• Maya — 在一個工具集中製作動畫、環境、運動圖形、虛擬實境和角色創建。
• Onshape－專門針對科技與零配件設計的建模軟體，是首款全雲3D軟體。
• OpenSCAD — 用於建立實體 3D CAD 物件的軟體。
• Rhino — 一款基於曲線的 3D 建模軟體，可建立數學上精確的 3D 曲面模型。
• SketchUp — 真正為每個人製作 3D 建模的 3D 設計軟體，具有簡單易學且功能強大的工具集。
• Tinkercad — 一款免費且易於使用的應用程序，適用於 3D 設計、電子產品和編碼。
• Vectary — 使用我們的拖放 3D 建模工具創建精美的 3D 模型。
• 3D Slash — 3D 建模工具，可在所有裝置和所有作業系統上使用，線上和離線。

附錄（參考與啟發）

Awesome Design Tools & Plugins 由 Flawless 團隊的 Lisa Dziuba 和 Valia Havruliyk 策劃。它的靈感來自於設計社群的文章和我們的好朋友 Graeme Fulton 製作的 Prototypr.io Toolbox。如果您發現一些很棒的設計工具，請建議。感謝您讓這個專案變得很棒:)