Comment on page
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 版 工具,不要忘記添加它們。現在我很想看看你的建議!
## 表中的內容
<主>
可訪問性是創建可供所有人使用的網站和應用程序的做法,包括有視覺、運動、聽覺、言語或認知障礙的個人。在這裡,您將找到適用於開發人員和設計人員的 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 存儲庫等  - [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) — 通過代碼和草圖文件導出創建和諧色彩主題的工具。 - [圖像顏色選擇器](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 — 草圖紅線插件。註釋元素的距離和大小。
</文章>
創作過程可能很艱難。因此,如果您沒有立即想到想法,請嘗試從其他設計師的作品中尋找靈感。這些設計靈感網站以流行公司和優秀產品的設計模式、用戶流程、電子郵件標記和創意解決方案為特色: