Awesome Design Tools
<p對齊=“中心”>
<p對齊=“中心”>

Awesome Design Tools 作為 Flawless App 系列的一部分加入了 Abstract!

今天,我們很高興地宣布,Flawless App 已加入 Abstract,這是一個設計交付平台,可為設計帶來可見性、問責性、可測量性和可預測性。
Flawless App 是我們的第一家公司,我們為我們的 5 人團隊所取得的一切感到自豪。
自 2015 年以來,我們為設計師和開發人員推出了強大的工具——其中包括 Flawless AppReduce、[Flawless Feedback ](https://flawlessapp.io/feedback)。我們還在社區驅動的計劃中投入了大量的愛心和關懷。Awesome Design Tools 就是其中之一。
#### 下一個是什麼? 我們的團隊加入了 Abstract 並專注於構建 Abstract SDK,將開發人員的體驗向前推進。一段不可思議的旅程已經結束,新的旅程才剛剛開始。如果您想了解更多關於 Awesome Design Tools 的未來,請繼續閱讀我們的常見問題解答
<p對齊=“中心”>

如何使用和貢獻

  • 現在您在 Awesome Design Tools 部分,如果您需要插件 - 轉到 [Awesome Design Plugins](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Awesome-設計插件.md)。
  • 要查找該工具,請瀏覽目錄或搜索關鍵字(例如,“動畫”、“原型製作”)。
  • 在 Twitter 上詢問 Lisa
如果你發現了一些很棒的設計工具或插件,只需發送關於我們的 貢獻指南 的拉取請求(他們'很簡單,請看一下)。設計工具應在此處提交,插件應在 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 可訪問性工具、可訪問性測試工具和可訪問性應用程序:
VisBug 中的 Visual Debugging Tools 類別中也提供了可訪問性檢查功能。
</文章>

動畫工具

動畫引導人們友好而流暢地完成產品。實時交互式 UI 讓用戶對即時反饋和情感觸感感到高興。這些免費和付費工具旨在簡化動畫製作。如果您打算製作動畫過渡、微交互或基於滾動的動畫,請使用以下工具:
  • After Effects — Adob​​e 開發的數字視覺效果、動態圖形和合成應用程序。
  • BeatFlyer — 一種網絡工具,可讓您從多層合成中快速創建循環且引人入勝的動畫。
  • Dokyu Motion — 簡化 After Effects 中的動作設計,因此任何編輯都可以講述不會被忽視的故事。
  • Flare — 一個強大的設計和動畫工具,允許設計師和開發人員為他們的應用程序或遊戲創建動畫。
  • Flow — 用於 Sketch 設計的專業動畫工具,還可以為 iOS、Web 或 SVG 文件導出可用於生產的代碼。
  • GSAP — 一套用於所有主流瀏覽器中的腳本化、高性能 HTML5 動畫的工具。
  • Haiku Animator — 基於關鍵幀的動畫將您的 UI 工具連接到開發人員可以輕鬆使用的代碼。
  • Keyshape — 允許動畫 SVG 導出的 2D 動畫工具。
  • Kite Compositor — 適用於 Mac 和 iOS 的強大動畫和原型製作應用程序。
  • LightBox — 2D,手繪動畫包。
    ![free.svg](https://github.com/LisaDziuba/ Awesome-Design-Tools/blob/master/Media/free.svg)
  • Lottie — 一個適用於 Android 和 iOS 的移動庫,它解析 Adob​​e After Effects 動畫,使用 Bodymovin 導出為 JSON,並在移動設備和 Web 上本地呈現它們。
  • Mantra — 基於網絡的時間線動畫工具。
  • Meteoritic — 適用於 iOS 和 Android 的動畫樂趣庫。從適合不同應用風格的各種動畫中進行選擇。
  • Naker.Back — 免費集成交互式背景,讓更多人關注您的網站。
  • Naker.Story — 借助 3D,讓您的 Web 內容具有互動性,以前所未有的方式吸引訪問者。
  • OFFEO — 一個在線視頻製作器,供小型企業在沒有大預算的情況下製作像大品牌這樣的視頻廣告。
  • StorySwag — 只需輕點幾下,即可為 Instagram 和 Facebook 創建時尚的動畫帖子,全部來自您的手機。
    ![mac.svg](https://github.com/LisaDziuba/ Awesome-Design-Tools/blob/master/Media/mac.svg)
  • 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 體驗,無需代碼。
    ![mac.svg](https://github.com/LisaDziuba/ Awesome-Design-Tools/blob/master/Media/mac.svg)
  • Torch — 一款專注於移動 AR 的基於雲的 3D 設計和原型製作應用程序。
    ![mac.svg](https://github.com/LisaDziuba/ Awesome-Design-Tools/blob/master/Media/mac.svg)
  • Unity — 構建高質量的 3D 和 2D 遊戲,將它們部署在移動設備、桌面和 VR/AR 上。
  • Vectary — 為您的網站創建 3D 和 AR。
  • Vuforia — 支持創建增強現實應用程序的移動設備 SDK。
  • Wikitude — 為您的 iOS、Android 和智能眼鏡應用程序提供圖像和對象跟踪、即時跟踪 (SLAM)、Geo AR 等功能。
</文章>

協作工具

想要嘗試一些用於敏捷設計和開發協作的工具?好主意,因為此類工具使設計師和開發人員的生活變得更加輕鬆,節省了時間並提高了生產力。好吧,在 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/) — 一種白板工具,可讓您輕鬆繪製具有手繪感的圖表。![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/Media/open-source.svg) - [Filestage](https://filestage.io/) — 一款敏捷的內容審批軟件,可幫助您與客戶和同事一起審閱視頻、設計和文檔。 - [Float](https://www.float.com/) — 一種在一個地方規劃項目和安排團隊時間的工具。 - [Gallery](https://material.io/tools/gallery/) — 用於上傳設計作品、獲取反饋和跟踪修訂的協作工具。![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/Media/open-source.svg) - [HiveDesk](https://www.hivedesk.com/) — 帶有屏幕截圖的遠程員工自動時間跟踪。它使監控遠程員工的生產力和管理項目變得更加容易。 - [Jira](https://www.atlassian.com/software/jira) — 敏捷團隊使用的軟件開發工具。 - [Jitsi](https://jitsi.org/) — 多平台開源視頻會議,您可以自己安裝或在他們的服務器上使用。![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/Media/open-source.svg) - [Keybase](https://keybase.io) — 一個免費的協作應用程序,內置端到端加密聊天、文件共享、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/媒體/open-source.svg) - [Lumeer](https://www.lumeer.io/) - 一個簡單的可視化協作工具,可以隨時隨地計劃、組織和跟踪任何事情。![open-source.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/open-source.svg) - [Mattermost](https://mattermost.com/) — 一個靈活的開源消息傳遞平台,甚至可以滿足最苛刻的隱私和安全標準。![open-source.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/open-source.svg) - [Milanote](https://milanote.com/) — 一種易於使用的協作工具,可將您的想法和項目組織到可視板中。 - [Mixed](https://mixed.io) — 分佈式團隊的實時白板和協作工具。![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Moqhub](https://moqhub.com) — 創意項目的快速在線打樣。獲取圖像和 PDF 的反饋。 - [MURAL](https://mural.co/) — 以視覺方式思考和協作。隨時隨地。 - [Nextcloud](https://nextcloud.com) — 用於文件、看板、聊天和通話、日曆等的開源協作平台。![open-source.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/open-source.svg) ![free.svg](https://github. com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [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/) — 用於協作工作的簡單實時白板。![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Workzone](https://www.workzone.com/) — 一個簡單、強大的項目管理軟件。 - [Wrike](https://www.wrike.com/) — 一款在線項目管理軟件,可讓您全面了解和控制您的任務。 - [Zenkit](https://zenkit.com/) — 用於安排會議、跟踪項目進度和集思廣益的工具。 - [zipBoard](https://zipboard.co) — 一個在線視覺錯誤跟踪和網站註釋工具 - [Zulip](https://zulipchat.com/) - 將實時聊天的即時性與電子郵件線程模型相結合,有助於專注於重要對話,同時忽略不相關的對話。![open-source.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/open-source.svg)您還可以在 [InVision Freehand](https://www.invisionapp.com/feature/freehand) 工具中進行設計協作。### 顏色選擇器工具 如果您正在尋找吸管工具、顏色識別器或顏色捕捉工具,請查看此部分。使用此處提到的顏色選擇器,您將能夠創建新的顏色組合併定義出色的顏色組合。幾乎所有這些工具都是免費的: - [BrandColors](https://brandcolors.net/) — 最大的官方品牌顏色代碼集合。![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Calcolor](https://calcolor.co) — 一個基於 Web 的調色板管理工具,它提供了一種與數字顏色交互的新方式。![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [色度](https://chroma.spencerhamm.com/) — 免費的網絡應用程序,可讓您識別顏色。![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [顏色](https://color.adobe.com/explore/?filter=most-popular&time=month) — 使用色輪創建配色方案或瀏覽來自顏色社區的數千種顏色組合。由 Adob​​e 製作。![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Color by Cloudflare](https://cloudflare.design/color/) — 一種工具,用於根據 UI 元素預覽調色板、循環訪問可訪問的顏色組合併手動、通過 URL 導入或生成式創建調色板。 - [Color Deck](https://color.obscuredetour.com/) — HSL 驅動的調色板集合。它也是開源的。![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/Media/open-source.svg)](https://github.com/obscuredetour/color-deck) - [Color Hexa](https://www.colorhexa.com/) — 免費的顏色工具,提供有關任何顏色的信息並為設計生成匹配的調色板。 - [Color Hex Picker](http://colorhexpicker.com/) - 從任何圖像中獲取任何顏色名稱的工具。您還可以獲得顏色的 HEX 代碼和 RGB 值。![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Color Hunt](https://colorhunt.co/) — 免費開放的色彩靈感平台,擁有數千種精選的時尚調色板。![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [ColorKit](https://colorkit.io) — 一種用於混合顏色和生成顏色明暗度和色調的工具。![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Color Leap](https://colorleap.app) — 穿越時空,看到歷史的顏色。![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Colorpicker](https://colorpicker.crea-th.at/) — 一個完整的開源顏色操作工具,帶有拾取功能。![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/Media/open-source.svg) - [ColorSlurp](http://colorslurp.com/) — 設計師和開發人員的終極色彩生產力助推器。![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) ![mac.svg](https://github.com/LisaDziuba/ Awesome-Design-Tools/blob/master/Media/mac.svg) - [ColorsWall/](https://colorswall.com/) — 存儲您的調色板或輕鬆生成的地方。![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Colorwise](https://www.colorwise.io/) — 搜索 Product Hunt 上投票最多的產品的調色板。![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Colour Cafe](https://www.instagram.com/colours.cafe/) — 在 Instagram 上選擇現代調色板的色彩靈感。![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [顏色代碼](https://colourco.de/) — 一個在線設計工具,讓您可以輕鬆直觀地組合顏色。![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Coolors](https://coolors.co/) — 超快速配色方案生成器。![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) ![mac.svg](https://github.com/LisaDziuba/ Awesome-Design-Tools/blob/master/Media/mac.svg) - [Culrs](https://culrs.com/#/) — 精心製作且易於使用的調色板。![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Geenes](https://geenes.app) — 通過代碼和草圖文件導出創建和諧色彩主題的工具。![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools /blob/master/Media/free.svg) - [圖像顏色選擇器](https://image-color.com) — 圖像顏色選擇器和配色方案生成器。![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Instant Eyedropper](http://instant-eyedropper.com/) — Windows 的極簡滴管工具,支持設計師和開發人員的多種顏色格式。![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Just Color Picker](http://annystudio.com/software/colorpicker/) — 免費的便攜式離線顏色選擇器和顏色編輯器。![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Khroma](http://khroma.co/) — 基於 AI 的工具,可根據您的喜好生成調色板。 - [Material Colors Native](https://github.com/BafS/Material-Colors-native) — Mac 應用形式的 Google 材質設計調色板。![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/Media/open-source.svg) ![mac.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/mac .svg) - [Material Design Palette Generator](https://materialpalettes.com/) — 從任何十六進制顏色中獲得完美的 Material Design 調色板。![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/Media/open-source.svg) - [Paletton](https://paletton.com) — 一種設計工具,用於創建協同工作的顏色組合。![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Picular](https://pical.co/) — 使用 Google 圖像搜索的火箭快速原色生成器。![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Pigment](https://pigment.shapefactory.co/) — 一個調色板生成器,具有應用程序建議的無數顏色配置。![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) - [Pikka](https://itunes.apple.com/us/app/pikka-color-picker/id1195076754) — macOS 的顏色選擇器和配色方案生成器。![mac.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/mac.svg) - [React Color](http://casesandberg.github.io/react-color/) — 來自 Sketch、Photoshop、Chrome 的顏色選擇器集合。它是免費和開源的。![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/Media/open-source.svg)](https://github.com/casesandberg/react-color/) - [Sip](https://sipapp.io/) — 收集、整理和分享顏色的更好方式。適用於 macOS 的全局吸管工具。![mac.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/mac.svg) - [Skala Color](https://bjango.com/mac/skalacolor/) - 適用於多種格式,涵蓋了 Web、iOS、Android 和 macOS 開發可能需要的一切。![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) ![mac.svg](https://github.com/LisaDziuba/ Awesome-Design-Tools/blob/master/Media/mac.svg) - [Swatches](https://swatchesapp.io/) — iOS 應用程序可讓您收集、檢查和分享在日常生活中激發您靈感的顏色。![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) ![mac.svg](https://github.com/LisaDziuba/ Awesome-Design-Tools/blob/master/Media/mac.svg) - [色調和陰影生成器](https://maketintsandshades.com/) — 以 10% 的增量顯示給定十六進制顏色的色調和陰影。![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/Media/open-source.svg) - [Viz Palette](https://projects.susielu.com/viz-palette) — 用於數據可視化的顏色選擇器。![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg)您還可以使用 [輔助工具部分](#accessibility-tools) 中提到的 Leonardo 創建調色板。### 設計反饋工具 在開發過程中如何提供和獲得反饋?對於許多產品團隊來說,這個過程通常非常混亂,這會導致產品延遲和來回溝通的時間浪費。因此,如果您希望獲得有關 UI 問題或視覺錯誤的快速和結構化的反饋,請查看此工具: - [完美反饋](https://flawlessapp.io/feedback) — 查看和註釋 iOS 應用程序,然後在 Jira 或 Trello 中分享您的反饋。![mac.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/mac.svg) - [GoVisually](https://govisually.com) — 在線打樣、設計審查和批准軟件。### 設計交接工具
當設計師完成工作並需要將設計交付給具有所有規格和資產的開發人員時,就會發生設計交接。設計移交工具允許自動生成樣式指南、對設計進行評論、檢查元素。這些工具可以最大程度地減少猜測並提高設計過程的有效性。
  • Avocode — 無需設計工具即可開放設計。無需準備圖層即可導出圖像。單擊圖層以獲取代碼。
  • Flawless App — 在 iOS 模擬器中比較預期設計和真實應用程序的工具(對使用 Xcode 的設計師或移動開發人員有用)。
  • 檢查 — 為開發準備設計。由 Invision 製造。
  • Sketch Measure — 草圖紅線插件。註釋元素的距離和大小。
    ![open-source.svg](https://github.com/ LisaDziuba/Awesome-Design-Tools/blob/master/Media/open-source.svg)
  • Specctr — 如果您在 PS、AI 或 ID 中設計 UI,此工具會創建紅線註釋。
  • Sympli — 來自 Sketch、Photoshop 和 Adob​​e XD 的自動規格和資產移交。與 Jira、Xcode 和 Android Studio 集成。
  • Zeplin — 自動傳遞具有準確規格、資產、代碼片段的設計和風格指南。
您還可以在 設計版本控制 部分中提到的 Relay 中進行設計移交。
</文章>

設計靈感

創作過程可能很艱難。因此,如果您沒有立即想到想法,請嘗試從其他設計師的作品中尋找靈感。這些設計靈感網站以流行公司和優秀產品的設計模式、用戶流程、電子郵件標記和創意解決方案為特色:
  • Behance — 一個展示和發現創意作品的在線平台。
  • CodeMyUI — 精選的網頁設計和 UI 靈感與代碼片段集合。
  • 收集 UI — 從 Daily UI 及其他地方收集您的日常靈感的平台。基於 Dribbble 投籃,14419 個精心挑選的設計。
  • 創意作品集 — 由設計師和開發人員製作的最具創意的作品集的策展。
  • Design Hunt — 每日收集所有創意的最佳產品、應用程序和靈感。
    ![mac.svg](https://github.com/LisaDziuba/ Awesome-Design-Tools/blob/master/Media/mac.svg)
  • Dribbble — 一個展示用戶製作藝術品的在線社區。一個很好的資源,可以從其他人的工作中獲得靈感。
  • 圖片 — 一個使用中的字體檔案,會激發您的靈感。
  • Inspiration UI — 一個旨在為網絡創作者提供最佳設計資源的社區。
  • 懸停狀態 - 展示來自數字文化前沿的偉大作品,並與創意社區一起。
  • Httpster — 一個靈感資源,展示來自世界各地的人們製作的搖滾網站。
  • H69.Design — 為設計師設計的登陸頁面集合和免費資源。
  • Lapa Ninja — 來自網絡的登陸頁面設計靈感。1800 多個登陸頁面示例,每天更新。
  • Mobile Patterns — 一個具有最佳 UI UX 模式(iOS 和 Android)的設計靈感庫。
  • Mobbin — 瀏覽流行應用的移動設計模式。探索常見的用戶流程,例如入職、帳戶註冊和登錄、核心功能等。
  • One Page Love — 一系列精美獨特的 One Page 網站,為網站設計提供靈感。
  • Owwly — 以設計熱情打造的數字產品的家園。
  • 頁面流 — 用戶流視頻和屏幕截圖可在您遇到困難時激發您的靈感。發現超過 160 種不同任務的移動和網頁設計模式。
  • pttrns — 流行移動應用程序的設計模式。
  • 非常好的電子郵件 — 4,150 多個精心挑選的電子郵件設計。
  • ReallyGoodUX — 來自真實移動和網絡產品的屏幕截圖和出色 UX 示例。發現最佳 UX 示例——包括入職導覽和演練。
  • Saas Landing Page — 發掘頂級 SaaS 公司打造的最佳落地頁示例,為您的下一個設計項目獲取創意和靈感。
  • Saas Pages — 以文案和設計為重點的最佳登錄頁面集合。
  • The Design Team — 關於矽谷一家科技初創公司的設計團隊的漫畫。
  • Typewolf - 幫助設計師為他們的下一個設計項目選擇完美的字體組合。
  • UI Garage — 為設計師、開發人員和營銷人員尋找靈感、工具和最佳資源的一站式商店。
  • UI Sources — 來自當今 App Store 上設計最好和最暢銷的應用程序的 500 多個交互。
  • UI 食譜 — 每週 15 分鐘來自最熱門應用的 UI 設計課程。
  • UX Archive — 瀏覽 120 個移動應用程序中的 400 多個用戶流。檢查預訂、登錄、入職、購買、搜索等任務。
  • Waveguide — 一個設計知識庫,擁有數千個人工豐富的產品和品牌體驗示例(移動應用程序、登陸頁面、電子商務、CX/UX 模式示例)。
  • 網頁設計博物館 — 超過 1,200 個精心挑選的網站,展示了 1994 年至 2006 年間的網頁設計趨勢。
</文章>

設計系統工具

我打賭你聽說過設計系統,因為它是一個非常流行的話題。設計系統提供一致、健壯的設計模式,以保持設計和開發同步。它們本質上是在設計和代碼中實現的規則、約束和原則的集合。在這裡,您可以找到構建、維護和組織設計系統的工具。
  • Cabana — 用於 Sketch 的高級設計系統,可幫助您比以往更快地創建令人驚嘆的產品。
  • 目錄 — 數字產品的生活方式指南,將設計文檔與真實的實時組件相結合。
  • 設計系統管理器 — Invision 的設計系統管理器。
  • DSK——“Design System Kit”的縮寫——用於協作創建設計系統的工作台。
    ![free.svg](https://github. com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg)
  • EOS 設計系統 — 一個開源和可定制的構建在 Bootstrap 之上,遵循原子設計概念。
  • Eva 設計系統 — 可定制的設計系統,可用於帶有移動和 Web 組件庫的 Sketch。
    ![free.svg](https://github. com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg)
  • Frontify — 創建圖形指南、模式庫、設計系統。
  • Interplay — 圍繞單一事實來源連接設計和工程。該工具尚未公開(測試版)。
  • Lingo — 與您的整個團隊創建一個共享資源庫。
  • Lucid — 用於創建、管理和共享設計系統的工具。從簡單的組件庫到樣式的詳細描述。
  • Modulz — 設計、構建、記錄和發布您的設計系統 — 無需編寫代碼。
  • Prime Design System Kit — 它包括設備模板、圖表、UI 套件甚至插圖套件。
  • Specify — 創建、擴展和維護設計系統的工具。
  • Storybook — 一個開源工具,用於為 React、Vue 和 Angular 獨立開發 UI 組件。
  • 符號設計系統 — 基於原子元素的 Sketch 設計系統。
  • Toolabs — 設計系統和基於組件的設計、原型和開發工具。它尚未公開,但您可以申請搶先體驗。
  • Zeroheight — 由設計師創建、由開發人員擴展、所有人可編輯的樣式指南。
我們還可以在 Sketch、Figma、UXPin 和 Framer X(Framer X Team Store)中添加此功能。
</文章>

設計到代碼工具

每個人都可以學習發展,但這需要時間和精力。如果您現在需要一個網站或應用程序並且您不想僱用開發人員,請注意網站建設者。這種從設計到代碼的工具將幫助您快速和漂亮地製作投資組合、簡單的登陸或應用程序。
  • Anima — 帶有 Sketch 插件的 Web 應用程序,可將 Sketch 轉換為 HTML。
  • Blocs — 一個快速、易於使用且功能強大的可視化網頁設計工具,讓您無需編寫代碼即可創建響應式網站。
  • Bootstrap Studio — 一個強大的網頁設計工具,用於使用 Bootstrap 框架創建響應式網站。
  • Draftbit — 直接從您的瀏覽器直觀地設計和構建移動應用程序。
  • EasyLogic Studio — 很棒的 css+svg 設計工具,還可以轉換成代碼如圖。![free.svg](https://github.com/LisaDziuba /Awesome-Design-Tools/blob/master/Media/free.svg)
  • Grapedrop — 使用易於使用的編輯器設計您的組件、Web 項目並立即在線發布它們。
  • Mobirise — 基於 Bootstrap 3/4 和 \AMP 的離線拖放建站軟件。
  • PageCloud — 最快、最可定制的網站構建器,任何人都可以創建自己理想的網站。
  • PaintCode — 矢量繪圖應用程序,可立即將繪圖轉換為 Swift、Objective-C、JavaScript 或 Java 代碼。
  • Pinegrow — CSS Grid、Bootstrap 4 和 3、Foundation、響應式設計、HTML 和 CSS 的專業可視化編輯器。
  • px.div — 適合開發人員和設計人員的網站構建工具。
  • Readymag — 一種視覺上令人愉悅的工具,用於在 Web 上進行從登錄頁面到多媒體長讀物、演示文稿和作品集的設計。
  • Sparkle — 製作真正網站的最簡單方法,無需代碼,無需行話。
  • STUDIO — 從頭開始設計,實時協作並發佈網站。
  • Supernova Studio — 從 Sketch 導入設計並將其轉換為 Android、iOS 或 React Native 代碼。
  • Tilda — 借助 Tilda 模塊免費創建網站、登陸頁面或在線商店,並在同一天發布。
  • Wix — 最簡單、功能最齊全的網站構建器,可讓您創建自己的高度定制化網站。
  • Webflow — 在您的瀏覽器中構建響應式網站,然後與我們一起託管或將您的代碼導出到任何地方託管。
</文章>

設計版本控制

開發人員長期積極使用版本控制工具,可能是從 2005 年(Git 首次發布)開始。使用版本控制系統對開發團隊來說是輕而易舉的事,而設計版本控制系統是最近才出現的。這個市場正在迅速發展,我們希望在設計師的版本控制方面看到更多:
  • Abstract — 一個供設計團隊對 Sketch 文件進行版本、管理和協作的平台。
  • Folio — 基於 Git 的設計團隊的簡單版本控制系統。
  • Kactus — 在不改變工具的情況下設計版本控制。管理更改、記錄工作並讓您的團隊保持同步。
    ![mac.svg](https://github. com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/mac.svg)
  • Plant — Mac 應用程序和 Sketch 插件,為設計師和團隊提供完整的版本控制。
  • Relay for Figma — Relay 將您的最新資產從 Figma 直接推送到您的代碼庫(尚未發布)。
  • Versions — 為設計師提供視覺差異、合併和衝突解決的版本控制工具。適用於 GitHub、Bitbucket、GitLab 和 Azure DevOps。
</文章>

開發工具

本節提到了開發工具和瀏覽器。開發瀏覽器具有幫助開發人員和設計人員創建和測試網站和應用程序的功能。
  • Blisk — 提供了一個開發工作區,可將現代 Web 應用程序的開發和測試速度提高兩倍。
  • Firefox 開發者版 — Firefox 瀏覽器的開發者版。
  • Litmus — 一個電子郵件活動創建平台,除其他外,您可以查看 HTML 電子郵件將如何出現在各種電子郵件客戶端中。
  • Polypane — 從頭開始構建的瀏覽器,用於創建和測試網站和應用程序。
  • Storybook — 一個開源工具,用於為 React、Vue 和 Angular 單獨開發 UI 組件。它使構建令人驚嘆的 UI 變得井井有條且高效。
    ![free.svg](https://github. com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg)
  • Styleguidist — 帶有生活方式指南的隔離 React 組件開發環境。
    ![free.svg](https://github. com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg)
</文章>

體驗監控

傾聽用戶的意見很重要,但看到實際使用情況更為重要。對於這些,您需要安裝不同的分析工具、體驗監控軟件和用戶行為應用程序。只需使用那些有關用戶數據的分析解決方案:
  • Amplitude——了解您的用戶,快速發布更好的產品體驗,發展您的業務。
  • Chalkmark — 通過在實施之前獲得有關設計的快速反饋來提高客戶轉化率和以任務為導向的成功率。
  • Fathom — 提供簡單、有用的網站統計信息,無需跟踪或存儲用戶的個人數據。
  • FullStory — 一款在一個強大且易於使用的平台中捕獲所有客戶體驗數據的應用程序。
  • Google Analytics — 衡量您的廣告投資回報率並跟踪您的網站和應用程序。
  • Heap — 自動捕獲每個 Web、移動設備和雲交互,然後在不編寫代碼的情況下追溯分析您的數據。
  • Heatly — 免費的熱圖工具,可以更好地了解網站的用戶體驗。
  • Hotjar — 查看訪問者如何使用您的網站並收集用戶反饋。
  • Inspectlet — 在訪問者使用您的網站時錄製他們的視頻,這樣您就可以看到他們所做的一切。
  • LiveSession - 高質量的用戶會話回放分析。
  • LogRocket — 查看用戶在您的網站上做了什麼,幫助您重現錯誤並更快地修復問題。
  • Mixpanel — 深入了解所有以用戶為中心的數據,以便根據客戶使用您的產品或網站的方式做出更明智的決策並更快地採取行動。
  • Mouseflow — 記錄鼠標光標移動。
  • Pendo — 衡量和提升應用程序中的客戶體驗。
  • Smartlook — 用戶會話回放和用戶參與度分析。
  • Usabilla — 通過在正確的時間提出正確的問題來建立面向未來的客戶體驗。
</文章>

字體工具

字體通常用於使網絡成為一個更美麗的地方。它是任何設計的重要組成部分。在本節中,您將找到允許您管理和使用字體的字體生成器和字體查找工具:
  • 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 — 下載具有廣泛收藏的免費字體。![free.svg](https://github.com/LisaDziuba/Awesome-Design -工具/blob/master/Media/free.svg)
  • Google 字體 — 通過出色的排版讓 Web 更加美觀、快速和開放。
  • Google Webfonts Helper — 一種自託管 Google 字體的麻煩方式。它是免費和開源的。
    ![open-source.svg](https://github.com /LisaDziuba/Awesome-Design-Tools/blob/master/Media/open-source.svg)
  • LostType — 第一個按需付費類型鑄造廠。
  • 測量 - 使用此 Chrome 瀏覽器擴展程序測量印刷行長度。
  • RightFont — 字體管理應用程序,幫助通過 iCloud、Dropbox 或 Google Drive 預覽、同步、安裝和組織字體。
  • Sans Forgetica — 一種科學設計的可下載字體,可幫助您記住學習筆記。
  • 尺寸計算器 — 使用查看距離和印刷字體的物理尺寸計算感知尺寸。
  • Typeface — 字體管理器,通過實時字體預覽和靈活的標記改進您的設計工作流程。
  • Wakamai Fondue — 回答“我的字體能做什麼?”問題的工具。
  • Webfont — 創建和維護自定義 SVG 圖標字體,製作了一個共享的圖標庫。
    ![mac.svg](https://github.com/LisaDziuba/ Awesome-Design-Tools/blob/master/Media/mac.svg)
  • WordMarkIt — 顯示您的書面文字/短語以及您計算機上已安裝的所有字體。
您還可以使用指定處理字體,這在 設計系統工具 部分中有所提及。
</文章>

漸變工具

你可以看到漸變色無處不在——UI、品牌、插圖、排版。漸變是通過使用兩種或多種不同的顏色來繪製一個元素同時在它們之間逐漸淡化來創建的。它可能看起來是一種令人難忘、新鮮和獨特的顏色。要為您的設計製作這樣的漸變,請使用這些漸變調色板。
  • Blend — 創建和自定義漂亮的 CSS3 漸變。
  • Colorffy — 獲取 CSS、圖像、UI 預覽或創建自己的漸變。
  • 顏色和字體 — 為數字設計師和 Web 開發人員設計的顏色、漸變和字體庫。![free.svg](https://github.com/ LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg)
  • ColorSpace — 您下一個項目的完美配色方案!生成漂亮的調色板。
  • ColorSpark — 幫助設計師找到獨特的顏色和引人注目的漸變組合。
  • 酷背景 — 探索精美精選的酷背景,您可以將它們添加到博客、網站。
  • CoolHue — 精心挑選的漸變調色板和样本,為您的下一個超級神奇的東西。
  • CSS Gradient — 免費的 CSS 漸變生成器工具,本網站可讓您創建彩色漸變背景。
  • Egg Gradients — 包含 12 種不同顏色深淺的顏色收集頁面。
  • Grabient — 用於生成 Web 漸變的漂亮而簡單的 UI。
  • Gradienta — 多色 CSS 漸變,JPG 下載,100% 免費!
  • GradientsList — 最大的梯度眾包集合,用戶在 [Gradients Maker for iOS](https://itunes.apple.com/app/apple- store/id1442380225?pt=117877769&ct=gh&mt=8)
  • 漸變生成器 — 一種在兩種顏色之間生成階梯漸變的工具。
  • Gradient Hunt — 一個免費開放的色彩靈感平台,擁有數千種流行的手工色彩漸變。
    ![open-source.svg](https://github.com/ LisaDziuba/Awesome-Design-Tools/blob/master/Media/open-source.svg)
  • Gradients Guru — 為您的 UI 混合模式背景圖像和漂亮的背景漸變。
  • HtmlColours — 意識到使用這個漸變生成器創建漸變是多麼容易和美麗。
  • UI Gradients — 為設計師和開發人員精心挑選的漂亮顏色漸變集合。
  • Web Gradients — 180 種線性漸變的免費集合,您可以將其用作網站任何部分的內容背景。
您還可以使用 Leonardo 創建和審核漸變,這在 輔助功能工具部分 中有所提及。
</文章>

圖標工具

除了字體,每個設計都使用圖標。這些基本元素支持和指導產品內部的許多用戶操作。毫無疑問,圖標是用戶導航中的重要元素。雖然製作這些小的設計元素既困難又耗時,但您可以獲得數千個用於個人和商業用途的矢量圖標。
  • Animaticons — 越來越多的精美、高分辨率、動畫 GIF 圖標,您可以自定義這些圖標。
  • CoreUI 圖標 — 高級設計的免費圖標集,帶有 SVG、Webfont 和光柵格式的標記。
  • Digital Nomad Icons — 適合您下一個項目的生活方式圖標和表情包。25 個高分辨率平面圖標。
  • Essential Glyphs — 以完美形狀的圖標滿足您的需求。適用於小尺寸和大尺寸。
  • 羽毛圖標 — 每個圖標都設計在 24x24 網格上,強調簡單性、一致性和可讀性。
    ![open-source.svg](https://github.com/ LisaDziuba/Awesome-Design-Tools/blob/master/Media/open-source.svg)
  • Flaticon — 1593000+ 個 SVG、PSD、PNG、EPS 格式或作為圖標字體的矢量圖標。
  • Font Awesome — 網絡上最流行的圖標集和工具包,也是開源的。[
    ](https://github.com/FortAwesome/字體真棒)
  • Freepik — 獨家免費贈品和項目所需的所有圖形資源的集合。
  • Iconscout — 在一處獲取高質量的圖標、插圖和股票照片。
  • Iconfinder — 矢量圖標 (SVG) 市場。IconJar 格式的圖標集。
  • IconJar — 將所有圖標存儲在一個圖標管理器中。
  • Iconmonstr — 發現 305 個集合中的 4412 多個免費圖標。簡單圖標的龐大且不斷增長的來源。
  • Iconset — 適用於 Mac 和 Windows 的免費、跨平台和快速的 SVG 圖標管理器。
  • 圖標商店 — 由一流設計師設計的用於個人和商業項目的免費矢量圖標庫。
  • ICONSVG — 一種簡化為您的項目查找和生成常用圖標的過程的工具。
  • Icons8 — 免費的 iOS、Android 和 Windows 風格的圖標。
  • Ikonate — 自定義、調整和下載免費矢量圖標。
  • illustrio — 更智能的圖標庫。使用 100% 可自定義的圖標構建偉大的東西。
  • Ionicons — 製作精美的開源圖標。
  • Material Design Icons — 通過開源貢獻實現的免費材料設計圖標。
    ![open-source.svg](https://github.com/ LisaDziuba/Awesome-Design-Tools/blob/master/Media/open-source.svg)
  • 材質圖標庫 — 免費收集 1000 多個流行圖形工具的圖標。
  • Motion — 免費、簡單的動畫圖標編輯器。
  • Norde Source — mac、Windows 和 Linux 應用程序可用於著色和自定義圖標集以適合您的品牌。
  • 名詞項目 — 一切的圖標。
  • Nucleo — 一個 Mac 和 Windows 應用程序,用於收集、自定義和導出您的所有圖標。
  • Orion Icons — 帶有高級交互式網絡應用程序的 SVG 矢量圖標。
  • 簡單圖標 — 流行品牌的免費 SVG 圖標。只需單擊所需的圖標,下載就會自動開始。
  • 分享圖標 — 超過 300 000 個不同格式的免費下載圖標。
  • Streamline Emoji——850+矢量表情的免費合集。這種風格的靈感來自日本的“Kawaii”(可愛)風格。
  • Svgsus — SVG 圖標管理工具。
  • SVG Colorizer — 一種自動更改任何給定 SVG 圖標包的整個調色板的工具,智能地保持陰影、高光和陰影。
  • SVGRepo — 一個擁有 300.000 多個 SVG 矢量和圖標的網站。
  • Tilda Icons — 下載登陸頁面的免費圖標。超過 700 個矢量圖標,收集在 43 套用於商業。
  • Twemoji — Twitter 的開源表情符號可以滿足您項目的所有表情符號需求。
  • Unicons — 為您的下一個項目提供 1000 多個像素完美的矢量圖標。
  • VisualPharm — 具有超快速搜索和免費可樂的免費 SVG 圖標。由 Icons8 為樂趣而打造。
  • Xicons — 免費矢量圖標,每 10 天更新一次。
  • Zwicon — 為您的下一個項目手工製作的圖標集。
您還可以使用指定處理圖標,這在 設計系統工具 部分中有所提及。
</文章>

插圖

插圖可用於您的登錄頁面、博客文章、應用程序內部或電子郵件活動。它們使您的設計生動有趣。雖然繪製好的插圖是熟練的圖形設計師的任務,但您可以從我們社區中非常友善的人那裡獲取免費的 SVG 圖像和插圖:
  • Absurd Design — 為您的項目提供免費的超現實主義插圖。
  • Blobmaker — 在瀏覽器中創建具有不同顏色、複雜性和對比度的矢量 blob 插圖。
  • Blush — 創建、混合和自定義由世界各地的藝術家製作的插圖。
  • Humaaans — 一個免費的圖書館,用於混合搭配人物插圖。
  • Pngtree 插圖 — 超過 13142 種不同風格的專業設計插圖。
  • IRA 設計 — 使用手繪草圖組件、5 種漸變和 ai.、svg 的酷炫選擇創建令人驚嘆的插圖。或.png。格式。
  • JoeSchmoe — 為開發人員和設計師設計的插圖頭像集合,非常適合用作佔位符或實時站點。
  • LukaszAdam — 免費矢量藝術插圖和圖標。它們可用於個人和商業用途。
  • ManyPixels — 免版稅插圖為您的項目提供動力。
  • Mega Doodles Pack — 帶有手繪塗鴉的大型矢量包,用於演示、社交媒體、博客文章等。
    ![open-source.svg](https://github.com/ LisaDziuba/Awesome-Design-Tools/blob/master/Media/open-source.svg)
  • Open Doodles — Pablo Stanley 的一組免費插圖,包含開放設計的理念。您可以出於任何目的複制、編輯、重新混合、共享或重繪這些圖像,而不受版權或數據庫法(CC0 許可)的限制。
  • Ouch — 矢量插圖對您的項目進行分類。免費供個人和商業使用。
  • Squircley - 開始創建漂亮的 SVG 松鼠所需的一切。
  • unDraw — 一組精美的 SVG 圖像。
  • Wannapik — 任何用途的免費插圖、矢量圖像、照片和動畫的集合。
</文章>