Awesome Design Tools
<p對齊=“中心”> 
Flawless App 是我們的第一家公司，我們為我們的 5 人團隊所取得的一切感到自豪。
自 2015 年以來，我們為設計師和開發人員推出了強大的工具——其中包括 Flawless App、Reduce、[Flawless Feedback ]（https://flawlessapp.io/feedback）。我們還在社區驅動的計劃中投入了大量的愛心和關懷。Awesome Design Tools 就是其中之一。
＃＃＃＃ 下一個是什麼？ 我們的團隊加入了 Abstract 並專注於構建 Abstract SDK，將開發人員的體驗向前推進。一段不可思議的旅程已經結束，新的旅程才剛剛開始。如果您想了解更多關於 Awesome Design Tools 的未來，請繼續閱讀我們的常見問題解答。
- 現在您在 Awesome Design Tools 部分，如果您需要插件 - 轉到 [Awesome Design Plugins](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Awesome-設計插件.md）。
- 要查找該工具，請瀏覽目錄或搜索關鍵字（例如，“動畫”、“原型製作”）。
如果你發現了一些很棒的設計工具或插件，只需發送關於我們的 貢獻指南 的拉取請求（他們'很簡單，請看一下）。設計工具應在此處提交，插件應在 Awesome Design Plugins 文件中提交。我們免費使用這些標籤！free.svg，開源！[open-source.svg] (https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/open-source.svg) 和 Mac 版！[mac.svg](https://github.com/LisaDziuba/Awesome -Design-Tools/blob/master/Media/mac.svg) 工具，不要忘記添加它們。現在我很想看看你的建議！
＃＃ 表中的內容
<主>
可訪問性是創建可供所有人使用的網站和應用程序的做法，包括有視覺、運動、聽覺、言語或認知障礙的個人。在這裡，您將找到適用於開發人員和設計人員的 Web 可訪問性工具、可訪問性測試工具和可訪問性應用程序：
- A11ygator — 根據 WCAG 規則分析網站的網絡工具。也可用作 Google Chrome 瀏覽器擴展程序和 Twitter 機器人。
- Accessible Palette Builder — 基於 Elm 的原型，可幫助設計師構建可訪問的調色板。
- ANDI — 網頁內容的可訪問性測試工具（書籤）。它將自動檢測可訪問性問題，提供改進在線可訪問性的建議並檢查 508 合規性。
- Axe — 可訪問性引擎設計用於所有現代瀏覽器以及您今天使用的任何工具、框架、庫和環境。它是面向開發人員的自動化可訪問性測試工具。
- Leonardo - 通過所需的 WCAG 對比度生成調色板。面向設計師和工程師的開源網絡工具和 npm 模塊。由 Adobe 製作。
- PA11Y — 用於查找網頁問題的可訪問性測試工具。它從命令行運行 HTML CodeSniffer 以進行編程可訪問性報告。它是一個可訪問性開發工具。
- Sim Daltonism — 適用於 macOS 和 iOS 的色盲模擬器，可讓您在各種類型的色盲中可視化顏色。
</文章>
動畫引導人們友好而流暢地完成產品。實時交互式 UI 讓用戶對即時反饋和情感觸感感到高興。這些免費和付費工具旨在簡化動畫製作。如果您打算製作動畫過渡、微交互或基於滾動的動畫，請使用以下工具：
- LightBox — 2D，手繪動畫包。
- Lottie — 一個適用於 Android 和 iOS 的移動庫，它解析 Adobe After Effects 動畫，使用 Bodymovin 導出為 JSON，並在移動設備和 Web 上本地呈現它們。
- StorySwag — 只需輕點幾下，即可為 Instagram 和 Facebook 創建時尚的動畫帖子，全部來自您的手機。
Drama、Principle、Framer、Invision Studio、Flinto 也屬於 UI 和 UX 動畫應用程序和軟件動畫工具。
</文章>
＃＃＃ 增強現實
增強現實是一種通過向現實世界添加一層數字信息來升級現實世界的技術。隨著數十種新的 AR 應用程序、開發工具包和 AR 框架的出現，AR 的使用與日俱增。因此，本節收集了不同的增強現實工具，用於創建、投影和原型設計專注於 AR 的應用程序：
- Spark AR Studio — 為 Instagram 創造 AR 體驗，無需代碼。
- Torch — 一款專注於移動 AR 的基於雲的 3D 設計和原型製作應用程序。
</文章>
想要嘗試一些用於敏捷設計和開發協作的工具？好主意，因為此類工具使設計師和開發人員的生活變得更加輕鬆，節省了時間並提高了生產力。好吧，在 Slack 驅動的時代，你知道所有這些。在這裡，您將找到適合產品團隊的最佳協作工具： - [Airtable](https://airtable.com/) — 部分電子表格、部分數據庫和完全靈活的團隊使用 Airtable 以他們的方式組織他們的工作。 - [Asana](https://asana.com/) — 團隊用來保持專注於發展業務的目標、項目和日常任務的工作管理平台。 - [Basecamp](https://basecamp.com/) — 旨在從一個地方組織員工、委派任務和監控進度的項目管理套件。 - [Freedcamp](https://freedcamp.com/) — 最創新的項目管理方式，完全免費......永遠。 - [Droplr](https://droplr.com/) — 屏幕截圖、文件共享和截屏視頻，幫助您捕捉和解釋您的想法。 - [Excalidraw](https://excalidraw.com/) — 一種白板工具，可讓您輕鬆繪製具有手繪感的圖表。  - [Filestage](https://filestage.io/) — 一款敏捷的內容審批軟件，可幫助您與客戶和同事一起審閱視頻、設計和文檔。 - [Float](https://www.float.com/) — 一種在一個地方規劃項目和安排團隊時間的工具。 - [Gallery](https://material.io/tools/gallery/) — 用於上傳設計作品、獲取反饋和跟踪修訂的協作工具。  - [HiveDesk](https://www.hivedesk.com/) — 帶有屏幕截圖的遠程員工自動時間跟踪。它使監控遠程員工的生產力和管理項目變得更加容易。 - [Jira](https://www.atlassian.com/software/jira) — 敏捷團隊使用的軟件開發工具。 - [Jitsi](https://jitsi.org/) — 多平台開源視頻會議，您可以自己安裝或在他們的服務器上使用。  - [Keybase](https://keybase.io) — 一個免費的協作應用程序，內置端到端加密聊天、文件共享、git 存儲庫等！[free.svg](https://github .com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg)  - [Lumeer](https://www.lumeer.io/) - 一個簡單的可視化協作工具，可以隨時隨地計劃、組織和跟踪任何事情。 - [Mattermost](https://mattermost.com/) — 一個靈活的開源消息傳遞平台，甚至可以滿足最苛刻的隱私和安全標準。 - [Milanote](https://milanote.com/) — 一種易於使用的協作工具，可將您的想法和項目組織到可視板中。 - [Mixed](https://mixed.io) — 分佈式團隊的實時白板和協作工具。 - [Moqhub](https://moqhub.com) — 創意項目的快速在線打樣。獲取圖像和 PDF 的反饋。 - [MURAL](https://mural.co/) — 以視覺方式思考和協作。隨時隨地。 - [Nextcloud](https://nextcloud.com) — 用於文件、看板、聊天和通話、日曆等的開源協作平台。  - [Notion](https://www.notion.so) — 寫作、計劃、協作和組織起來。概念就是您所需要的——在一個工具中。 - [ProofHub](https://www.proofhub.com/) — 您的所有項目、團隊和交流的一個地方。 - [RealtimeBoard (Miro)](https://www.realtimeboard.com/) — 跨職能團隊協作的白板平台。它最近更名為米羅。 - [Slack](https://slack.com/) — 工作協作中心，無論您從事什麼工作。這是一個進行對話、做出決定並且信息始終觸手可及的地方。 - [Sunsama](https://sunsama.com/) — 一個設計精美、面向團隊的任務管理器，將 Trello/Jira/Asana 票證整合到一個單一的、面向日曆的視圖中。 - [Taskade](https://taskade.com/) — 團隊生產力變得簡單、有趣，專為遠程團隊設計。Taskade 具有協作性，可在 Web、移動設備和桌面上實時同步。 - [Trello](https://trello.com/) — 一個基於 Web 的項目管理應用程序，使您能夠以有趣、靈活和有益的方式組織和優先處理您的項目。 - [Witeboard](https://www.witeboard.com/) — 用於協作工作的簡單實時白板。 - [Workzone](https://www.workzone.com/) — 一個簡單、強大的項目管理軟件。 - [Wrike](https://www.wrike.com/) — 一款在線項目管理軟件，可讓您全面了解和控制您的任務。 - [Zenkit](https://zenkit.com/) — 用於安排會議、跟踪項目進度和集思廣益的工具。 - [zipBoard](https://zipboard.co) — 一個在線視覺錯誤跟踪和網站註釋工具 - [Zulip](https://zulipchat.com/) - 將實時聊天的即時性與電子郵件線程模型相結合，有助於專注於重要對話，同時忽略不相關的對話。您還可以在 [InVision Freehand](https://www.invisionapp.com/feature/freehand) 工具中進行設計協作。### 顏色選擇器工具 如果您正在尋找吸管工具、顏色識別器或顏色捕捉工具，請查看此部分。使用此處提到的顏色選擇器，您將能夠創建新的顏色組合併定義出色的顏色組合。幾乎所有這些工具都是免費的： - [BrandColors](https://brandcolors.net/) — 最大的官方品牌顏色代碼集合。 - [Calcolor](https://calcolor.co) — 一個基於 Web 的調色板管理工具，它提供了一種與數字顏色交互的新方式。 - [色度](https://chroma.spencerhamm.com/) — 免費的網絡應用程序，可讓您識別顏色。 - [顏色](https://color.adobe.com/explore/?filter=most-popular&time=month) — 使用色輪創建配色方案或瀏覽來自顏色社區的數千種顏色組合。由 Adobe 製作。 - [Color by Cloudflare](https://cloudflare.design/color/) — 一種工具，用於根據 UI 元素預覽調色板、循環訪問可訪問的顏色組合併手動、通過 URL 導入或生成式創建調色板。 - [Color Deck](https://color.obscuredetour.com/) — HSL 驅動的調色板集合。它也是開源的。 [](https://github.com/obscuredetour/color-deck) - [Color Hexa](https://www.colorhexa.com/) — 免費的顏色工具，提供有關任何顏色的信息並為設計生成匹配的調色板。 - [Color Hex Picker](http://colorhexpicker.com/) - 從任何圖像中獲取任何顏色名稱的工具。您還可以獲得顏色的 HEX 代碼和 RGB 值。 - [Color Hunt](https://colorhunt.co/) — 免費開放的色彩靈感平台，擁有數千種精選的時尚調色板。 - [ColorKit](https://colorkit.io) — 一種用於混合顏色和生成顏色明暗度和色調的工具。 - [Color Leap](https://colorleap.app) — 穿越時空，看到歷史的顏色。 - [Colorpicker](https://colorpicker.crea-th.at/) — 一個完整的開源顏色操作工具，帶有拾取功能。  - [ColorSlurp](http://colorslurp.com/) — 設計師和開發人員的終極色彩生產力助推器。  - [ColorsWall/](https://colorswall.com/) — 存儲您的調色板或輕鬆生成的地方。 - [Colorwise](https://www.colorwise.io/) — 搜索 Product Hunt 上投票最多的產品的調色板。 - [Colour Cafe](https://www.instagram.com/colours.cafe/) — 在 Instagram 上選擇現代調色板的色彩靈感。 - [顏色代碼](https://colourco.de/) — 一個在線設計工具，讓您可以輕鬆直觀地組合顏色。 - [Coolors](https://coolors.co/) — 超快速配色方案生成器。  - [Culrs](https://culrs.com/#/) — 精心製作且易於使用的調色板。 - [Geenes](https://geenes.app) — 通過代碼和草圖文件導出創建和諧色彩主題的工具。！[free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools /blob/master/Media/free.svg) - [圖像顏色選擇器](https://image-color.com) — 圖像顏色選擇器和配色方案生成器。 - [Instant Eyedropper](http://instant-eyedropper.com/) — Windows 的極簡滴管工具，支持設計師和開發人員的多種顏色格式。 - [Just Color Picker](http://annystudio.com/software/colorpicker/) — 免費的便攜式離線顏色選擇器和顏色編輯器。 - [Khroma](http://khroma.co/) — 基於 AI 的工具，可根據您的喜好生成調色板。 - [Material Colors Native](https://github.com/BafS/Material-Colors-native) — Mac 應用形式的 Google 材質設計調色板。   - [Material Design Palette Generator](https://materialpalettes.com/) — 從任何十六進制顏色中獲得完美的 Material Design 調色板。  - [Paletton](https://paletton.com) — 一種設計工具，用於創建協同工作的顏色組合。 - [Picular](https://pical.co/) — 使用 Google 圖像搜索的火箭快速原色生成器。 - [Pigment](https://pigment.shapefactory.co/) — 一個調色板生成器，具有應用程序建議的無數顏色配置。 - [Pikka](https://itunes.apple.com/us/app/pikka-color-picker/id1195076754) — macOS 的顏色選擇器和配色方案生成器。 - [React Color](http://casesandberg.github.io/react-color/) — 來自 Sketch、Photoshop、Chrome 的顏色選擇器集合。它是免費和開源的。 [](https://github.com/casesandberg/react-color/) - [Sip](https://sipapp.io/) — 收集、整理和分享顏色的更好方式。適用於 macOS 的全局吸管工具。 - [Skala Color](https://bjango.com/mac/skalacolor/) - 適用於多種格式，涵蓋了 Web、iOS、Android 和 macOS 開發可能需要的一切。  - [Swatches](https://swatchesapp.io/) — iOS 應用程序可讓您收集、檢查和分享在日常生活中激發您靈感的顏色。  - [色調和陰影生成器](https://maketintsandshades.com/) — 以 10% 的增量顯示給定十六進制顏色的色調和陰影。  - [Viz Palette](https://projects.susielu.com/viz-palette) — 用於數據可視化的顏色選擇器。您還可以使用 [輔助工具部分](#accessibility-tools) 中提到的 Leonardo 創建調色板。### 設計反饋工具 在開發過程中如何提供和獲得反饋？對於許多產品團隊來說，這個過程通常非常混亂，這會導致產品延遲和來回溝通的時間浪費。因此，如果您希望獲得有關 UI 問題或視覺錯誤的快速和結構化的反饋，請查看此工具： - [完美反饋](https://flawlessapp.io/feedback) — 查看和註釋 iOS 應用程序，然後在 Jira 或 Trello 中分享您的反饋。 - [GoVisually](https://govisually.com) — 在線打樣、設計審查和批准軟件。### 設計交接工具
當設計師完成工作並需要將設計交付給具有所有規格和資產的開發人員時，就會發生設計交接。設計移交工具允許自動生成樣式指南、對設計進行評論、檢查元素。這些工具可以最大程度地減少猜測並提高設計過程的有效性。
- Sketch Measure — 草圖紅線插件。註釋元素的距離和大小。
</文章>
創作過程可能很艱難。因此，如果您沒有立即想到想法，請嘗試從其他設計師的作品中尋找靈感。這些設計靈感網站以流行公司和優秀產品的設計模式、用戶流程、電子郵件標記和創意解決方案為特色：
- Design Hunt — 每日收集所有創意的最佳產品、應用程序和靈感。
</文章>
我打賭你聽說過設計系統，因為它是一個非常流行的話題。設計系統提供一致、健壯的設計模式，以保持設計和開發同步。它們本質上是在設計和代碼中實現的規則、約束和原則的集合。在這裡，您可以找到構建、維護和組織設計系統的工具。
</文章>
每個人都可以學習發展，但這需要時間和精力。如果您現在需要一個網站或應用程序並且您不想僱用開發人員，請注意網站建設者。這種從設計到代碼的工具將幫助您快速和漂亮地製作投資組合、簡單的登陸或應用程序。
- EasyLogic Studio — 很棒的 css+svg 設計工具，還可以轉換成代碼如圖。！[free.svg](https://github.com/LisaDziuba /Awesome-Design-Tools/blob/master/Media/free.svg)
</文章>
開發人員長期積極使用版本控制工具，可能是從 2005 年（Git 首次發布）開始。使用版本控制系統對開發團隊來說是輕而易舉的事，而設計版本控制系統是最近才出現的。這個市場正在迅速發展，我們希望在設計師的版本控制方面看到更多：
- Kactus — 在不改變工具的情況下設計版本控制。管理更改、記錄工作並讓您的團隊保持同步。
</文章>
本節提到了開發工具和瀏覽器。開發瀏覽器具有幫助開發人員和設計人員創建和測試網站和應用程序的功能。
- Storybook — 一個開源工具，用於為 React、Vue 和 Angular 單獨開發 UI 組件。它使構建令人驚嘆的 UI 變得井井有條且高效。
- Styleguidist — 帶有生活方式指南的隔離 React 組件開發環境。
</文章>
傾聽用戶的意見很重要，但看到實際使用情況更為重要。對於這些，您需要安裝不同的分析工具、體驗監控軟件和用戶行為應用程序。只需使用那些有關用戶數據的分析解決方案：
</文章>
字體通常用於使網絡成為一個更美麗的地方。它是任何設計的重要組成部分。在本節中，您將找到允許您管理和使用字體的字體生成器和字體查找工具：
- Font Squirrel — 下載具有廣泛收藏的免費字體。！[free.svg](https://github.com/LisaDziuba/Awesome-Design -工具/blob/master/Media/free.svg)
- Google Webfonts Helper — 一種自託管 Google 字體的麻煩方式。它是免費和開源的。
- Web 字體預覽 — 預覽 Google 字體與組件和站點模板的配對。
- Webfont — 創建和維護自定義 SVG 圖標字體，製作了一個共享的圖標庫。
</文章>
你可以看到漸變色無處不在——UI、品牌、插圖、排版。漸變是通過使用兩種或多種不同的顏色來繪製一個元素同時在它們之間逐漸淡化來創建的。它可能看起來是一種令人難忘、新鮮和獨特的顏色。要為您的設計製作這樣的漸變，請使用這些漸變調色板。
- 顏色和字體 — 為數字設計師和 Web 開發人員設計的顏色、漸變和字體庫。！[free.svg](https://github.com/ LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg)
- GradientsList — 最大的梯度眾包集合，用戶在 [Gradients Maker for iOS](https://itunes.apple.com/app/apple- store/id1442380225?pt=117877769&ct=gh&mt=8)
- Gradient Hunt — 一個免費開放的色彩靈感平台，擁有數千種流行的手工色彩漸變。
</文章>
除了字體，每個設計都使用圖標。這些基本元素支持和指導產品內部的許多用戶操作。毫無疑問，圖標是用戶導航中的重要元素。雖然製作這些小的設計元素既困難又耗時，但您可以獲得數千個用於個人和商業用途的矢量圖標。
- 羽毛圖標 — 每個圖標都設計在 24x24 網格上，強調簡單性、一致性和可讀性。
- Material Design Icons — 通過開源貢獻實現的免費材料設計圖標。
</文章>
插圖可用於您的登錄頁面、博客文章、應用程序內部或電子郵件活動。它們使您的設計生動有趣。雖然繪製好的插圖是熟練的圖形設計師的任務，但您可以從我們社區中非常友善的人那裡獲取免費的 SVG 圖像和插圖：
- Mega Doodles Pack — 帶有手繪塗鴉的大型矢量包，用於演示、社交媒體、博客文章等。
- Open Doodles — Pablo Stanley 的一組免費插圖，包含開放設計的理念。您可以出於任何目的複制、編輯、重新混合、共享或重繪這些圖像，而不受版權或數據庫法（CC0 許可）的限制。
</文章>
信息架構幫助設計師在網站、移動應用程序和其他軟件中組織和構建內容。因此，用戶將了解產品功能並找到所需的一切。這些信息架構工具應該允許您創建可視站點地圖並改善您的網站內容結構：
- OmniGraffle — 用這個功能強大且易於使用的應用程序創建漂亮的圖表和設計。！[mac.svg](https://github.com/LisaDziuba/ Awesome-Design-Tools/blob/master/Media/mac.svg)