最佳设计工具、插件、组件资源宝典

可访问性工具

可访问性是指创建对所有人（包括有视觉、运动、听觉、言语或认知障碍的个体）都适用的网站和应用程序的实践。在这里，您可以找到面向开发人员和设计师的网站可访问性工具、可访问性测试工具和可访问性应用程序：

• A11ygator- 一个用于根据 WCAG 规则分析网站的网页工具。同时提供 Google Chrome 浏览器扩展和 Twitter 机器人版本。
• Accessibility Insights- 帮助开发人员快速发现和修复可访问性问题。
• Accessible Palette Builder- 基于 Elm 的原型，帮助设计师构建可访问性颜色调色板。
• AChecker- 用于评估 HTML 内容可访问性问题的可访问性测试 Web 应用。
• ANDI- 用于 Web 内容的可访问性测试工具（书签工具）。它将自动检测可访问性问题，提供改进在线可访问性的建议，并检查 508 合规性。
• Axe- 一个可在所有现代浏览器上运行，并与您当前使用的任何工具、框架、库和环境配合使用的无障碍性引擎。它是一个为开发者设计的自动化无障碍性测试工具。
• ColorBox- 一个通过算法构建无障碍性色彩系统的网络应用程序。由 Lyft 设计团队完成。
• Colorable- 一个免费的基于网络的对比度工具。
• Color Oracle- 一个免费的颜色盲模拟器。
• Contrast- 一款为设计师和开发者准备的 macOS 应用，可快速获取 WCAG 色彩对比比例。
• Contrast Checker- 帮助检查元素背景与页面之间的对比度。
• Contraste- 一款用于检查文本是否符合 Web 内容可访问性指南 (WCAG) 的应用。
• Inclusive Design- 由微软团队提供的一种方法论和工具集。
• Hex Naw- 帮助您测试整个配色方案，以检查对比度和可访问性。
• Leonardo- 根据所需的 WCAG 对比度比例生成配色方案。为设计师和工程师提供开源网络工具和 npm 模块。由 Adobe 开发。
• PA11Y- 用于检查网页问题的可访问性测试工具。它从命令行运行 HTML CodeSniffer，以进行程序化可访问性报告。这是一款可访问性开发者工具。
• Sim Daltonism- 一个用于 macOS 和 iOS 的色盲模拟器，让你能够模拟不同类型色盲用户所看到的颜色。
• Stark- 一个付费的 Sketch 插件，可以模拟不同类型的色盲。
• Toptal’s Color Filter- 可以测试你的网站，并展示不同色盲用户将如何看到你的页面。
• tota11y- 一个无障碍性可视化工具包。有趣的事实：工具名称中可以看到"a11y"。它是"accessibility"（无障碍性）的缩写，即一个"a"后面跟着 11 个字母，然后是"y"。
• WAVE- 允许您在 Chrome 和 Firefox 中直接评估网页内容的无障碍性问题。它是一个网页无障碍性检查器。
• 90 Examples- 一个免费的无障碍性配色方案集合。

动画工具

动画引导用户友好且流畅地了解产品。实时交互式 UI 让用户因即时反馈和情感触动感到愉悦。这些免费和付费工具旨在使动画创作更简单。如果您计划制作动画过渡、微交互或基于滚动的动画，请使用这些工具：

• After Effects- 由 Adobe 开发的数字视觉特效、运动图形和合成应用程序。
• 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 手绘动画套件。
• Lottie- Android 和 iOS 的移动库，用于解析 Adobe After Effects 导出的 JSON 动画（使用 Bodymovin），并在移动设备和网页上原生渲染。
• Mantra- 基于网页的时间轴动画工具。
• Meteoritic- iOS 和 Android 的动画愉悦库。从多种适合不同应用风格的动画中进行选择。
• Naker.Back- 免费集成交互式背景，以吸引更多注意力到您的网站。
• Naker.Story- 感谢 3D 技术，让您的网页内容更具互动性，以前所未有的方式吸引访客。
• OFFEO- 为中小企业打造在线视频制作工具，无需高昂预算即可制作出像大品牌一样的视频广告。
• StorySwag- 只需几次点击，即可在您的手机上为 Instagram 和 Facebook 创建时尚的动画帖子。
• Spirit- 帮助您在浏览器中实时创建和管理动画的工具。
• Stylie- 一个基于网络的图形 CSS3 动画工具。
• Tumult Hype- 用于 macOS 的 HTML5 动画/交互式创建应用程序。

增强现实

增强现实是一种升级我们真实世界的技术，通过向其中添加一层数字信息。随着数十款新的 AR 应用程序、开发套件和 AR 框架的日益增多，AR 的使用也越来越普遍。因此，在本节中收集了不同的增强现实工具，用于创建、投影和原型设计以 AR 为焦点的应用程序：

• Daqri- 通过将数字信息叠加到物理环境中，为工作场所提供专业级的增强现实。
• EasyAR- 一款移动应用程序和增强现实引擎，让 AR 更简单。
• HP Reveal- 通过视觉互动为印刷内容增添价值。
• Layar- 基于增强现实技术查找各种物品。
• Lens Studio- 使用代码或不使用代码创建、发布和分享您自己的 Snapchat AR 体验。
• Lightform- 一种用于投影 AR 的设计工具。
• Spark AR Studio- 无需代码为 Instagram 创建 AR 体验。
• Torch- 一种基于云的 3D 设计和原型设计应用程序，专注于移动 AR。
• Unity- 构建高质量的 3D 和 2D 游戏，并在移动设备、桌面和 VR/AR 上部署它们。
• Vectary- 为您的网站创建 3D 和 AR。
• Vuforia- 移动设备的 SDK，能够创建增强现实应用程序。
• Wikitude- 为您的 iOS、Android 和智能眼镜应用程序提供图像和物体追踪、即时追踪（SLAM）、地理 AR 等功能。

协作工具

想要尝试一些用于敏捷设计和开发协作的工具吗？这是个好主意，因为这些工具能让设计师和开发人员的生活更加轻松，节省时间并提高生产力。在 Slack 驱动的时代，你知道所有这些。在这里，你会找到最适合产品团队的协作工具：

• Airtable- 部分电子表格，部分数据库，完全灵活，团队使用 Airtable 来按自己的方式组织工作。
• Asana- 团队使用的工作管理平台，用于专注于增长业务的目标、项目和日常任务。
• Basecamp- 一款项目管理套件，旨在从单一平台组织员工、分配任务和监控进度。
• Freedcamp- 最具创新性的项目管理方式，完全免费，永远免费。
• Droplr- 截图、文件共享和屏幕录制工具，帮助您捕捉和解释您的想法。
• Excalidraw- 一款白板工具，让您轻松绘制手绘风格的图表。
• Filestage- 一款敏捷的内容审批软件，帮助您与客户和同事一起审查视频、设计和文档。
• Float- 一个集成项目管理与团队时间安排的工具。
• Gallery- 一个用于上传设计作品、获取反馈和跟踪修订的协作工具。
• HiveDesk- 一款为远程员工设计的自动时间追踪工具，支持截图功能。它能够帮助管理者更轻松地监控远程员工的工作效率，并有效管理项目。
• Jira- 敏捷团队使用的软件开发工具。
• Jitsi- 可自行安装的多平台开源视频会议软件，或使用其服务器。
• Keybase- 一款免费的协作应用，内置端到端加密聊天、文件共享、git 仓库等功能
• Lumeer- 一个易于使用的可视化协作工具，可以随时随地规划、组织和跟踪任何事物。
• Mattermost- 一个灵活、开源的消息平台，满足最严格的隐私和安全标准。
• Milanote- 一个易于使用、协作工具，将您的想法和项目组织成可视化看板。
• Mixed- 分布式团队的实时白板和协作工具。
• Moqhub- 创意项目的快速在线校样。获取图像和 PDF 的反馈。
• MURAL- 可视化思考与协作。随时随地。
• Nextcloud- 开源协作平台，用于文件、看板、聊天与通话、日历等。
• Notion- 写作、规划、协作和整理。Notion 是你需要的全部——在一个工具中。
• ProofHub- 您所有项目、团队和沟通的一站式平台。
• RealtimeBoard (Miro)- 跨职能团队协作的白板平台。它最近更名为 Miro。
• Slack- 一个适用于任何类型工作的协作中心。这里是对话发生、决策制定和信息随时触手可及的地方。
• Sunsama- 一个设计精美、以团队为导向的任务管理器，将 Trello/Jira/Asana 的工单整合到一个以日历为导向的视图中。
• Taskade- 让团队生产力变得简单、有趣，专为远程团队设计。Taskade 具有协作性，并在网络、移动设备和桌面之间实时同步。
• Trello- 一款基于网络的项目管理应用程序，让您以有趣、灵活和有益的方式组织和管理您的项目。
• Witeboard- 简单的实时协作白板。
• Workzone- 一款简单而强大的项目管理软件。
• Wrike- 一款在线项目管理软件，为您提供对任务的全面可见性和控制。
• Zenkit- 一个用于安排会议、跟踪项目进度和激发新想法的工具。
• zipBoard- 一个在线的视觉错误跟踪和网站标注工具。
• Zulip- 结合了实时聊天的即时性和电子邮件的线程模型，帮助专注于重要对话，同时忽略无关信息。

颜色选择工具

如果您正在寻找吸管工具、颜色识别器或颜色捕捉工具，请查看本节。使用这里提到的颜色选择器，您将能够创建新的颜色组合并定义出色的颜色。这些工具中几乎所有都是免费的：

• BrandColors- 周围最大的官方品牌颜色代码集合。
• Calcolor- 一种基于网络的调色板管理工具，提供了一种与数字颜色交互的新方式。
• Chroma- 免费网络应用程序，允许您识别颜色。
• Color- 使用色轮创建配色方案，或从 Color 社区浏览数千种配色组合。由 Adobe 制作。
• Color by Cloudflare- 一个用于预览色板与 UI 元素的工具，循环浏览可访问的配色组合，以及手动创建、通过 URL 导入或生成色板。
• Color Deck- 一个基于 HSL 的色板集合。它也是开源的。
• Color Hexa- 一个免费的颜色工具，提供任何颜色的信息，并为设计生成匹配的色板。
• Color Hex Picker- 一个从任何图像中获取任何颜色名称的工具。您还可以获得该颜色的 HEX 代码和 RGB 值。
• Color Hunt- 免费且开放的颜色灵感平台，拥有数千种时尚的手选调色板。
• ColorKit- 一个用于混合颜色并生成颜色阴影和色调的工具。
• Color Leap- 穿越时空，查看历史中的颜色。
• Colorpicker- 一个完整且开源的颜色操作工具，支持颜色选择。
• ColorSlurp- 设计师和开发者的终极颜色生产力助推器。
• ColorsWall/- 用于存储您的调色板或轻松生成的地方。
• Colorwise- 在 Product Hunt 上搜索最受欢迎产品的调色板。
• 色彩咖啡馆- 在 Instagram 上精选现代色彩搭配的色彩灵感。
• Colourcode- 一个在线设计工具，让您轻松直观地组合颜色。
• Coolors- 超快色彩方案生成器。
• Culrs- 精心设计且易于使用的色彩搭配。
• Geenes- 一个使用代码和草图文件导出创建和谐配色方案的工具。
• Image Color Picker- 图像颜色选择器和配色方案生成器。
• Instant Eyedropper- 一个简约的 Windows 颜色吸管工具，支持多种颜色格式，适用于设计师和开发者。
• Just Color Picker- 免费便携离线颜色选择器和颜色编辑器。
• Khroma- 基于人工智能的工具，可根据您的偏好生成调色板。
• Material Colors Native- Google 的材质设计调色板，以 Mac 应用程序的形式提供。
• Material Design Palette Generator- 从任何十六进制颜色获取完美的材质设计调色板。
• Paletton- 一款设计工具，用于创建协调良好的颜色组合。
• Picular- 使用 Google 图像搜索的快速主要颜色生成器。
• Pigment- 具有无数颜色配置建议的应用程序的颜色调色板生成器。
• Pikka- macOS 的颜色选择器 & 颜色方案生成器。
• React Color- 来自 Sketch、Photoshop、Chrome 的颜色选择器集合。它是免费且开源的。
• Sip- 一种更好的方式来收集、组织和分享颜色。macOS 的全局吸管工具。
• Skala Color- 支持多种格式，涵盖您在网页、iOS、Android 和 macOS 开发中可能需要的所有内容。
• Swatches- 一款 iOS 应用，让您可以收集、检查和分享日常生活中激发灵感的颜色。
• 色调与阴影生成器- 以 10%的增量显示给定十六进制颜色的色调和阴影。
• Viz Palette- 数据可视化的颜色选择器。

设计反馈工具

在开发过程中，你如何提供和获取反馈？这个过程对许多产品团队来说通常非常混乱，导致产品延误和沟通上的时间浪费。所以，如果你希望快速、结构化地获取 UI 问题或视觉错误的反馈——请查看这个工具：

• 完美反馈- 审查和注释 iOS 应用，然后将您的反馈分享到 Jira 或 Trello。
• GoVisually- 在线校对、设计审查与批准软件。

<div class="banner banner--yellow">

设计交接工具

设计交接发生在设计师完成工作并需要将设计连同所有规格和资源交付给开发人员时。设计交接工具允许自动生成风格指南、评论设计、检查元素。这些工具减少了猜测的工作量，并提高了设计过程的有效性。

• Avocode- 无需设计工具即可打开设计。无需准备图层即可导出图像。点击图层即可获取代码。
• Flawless App- 一个工具，可以在 iOS 模拟器中直接比较预期设计和实际应用（对使用 Xcode 的设计师或移动开发人员很有用）。
• Inspect- 为开发准备设计。由 Invision 制作。
• Sketch Measure- Sketch 红线插件。标注元素的距离和尺寸。
• Specctr- 如果不幸你在 PS、AI 或 ID 中设计 UI，这个工具会创建红线注释。
• Sympli- 从 Sketch、Photoshop 和 Adobe XD 自动生成规格和资源。与 Jira、Xcode 和 Android Studio 集成。
• Zeplin- 自动传递设计和风格指南，包含精确的规格、资源、代码片段。

设计灵感

创意过程可能很困难。如果一开始没有想法，可以尝试从其他设计师的作品中寻找灵感。这些设计灵感网站展示了流行公司和优秀产品的设计模式、用户流程、电子邮件标记和创意解决方案：

• Behance- 一个展示和发现创意作品的在线平台。
• CodeMyUI- 精选的网页设计和 UI 灵感集合，附带代码片段。
• 收集 UI- 一个从 Daily UI 及以外收集你每日灵感的平台。基于 Dribbble 快照，14419 个精心挑选的设计。
• 创意作品集- 设计师和开发者制作的创意作品集的精选。
• 设计猎手- 为所有创意人士收集的每日最佳产品、应用程序和灵感。
• Dribbble- 一个展示用户创作的艺术作品的在线社区。一个获取灵感的好资源。
• Ficture- 一个会激发你灵感的字体使用档案库。
• Inspiration UI- 一个旨在为网络创作者提供最佳设计资源的社区。
• Hover States- 展示来自数字文化前沿的杰出作品，为创意社区而创作。
• Httpster- 一个灵感资源，展示世界各地人们制作的精彩网站。
• H69.Design- 设计师着陆页集合 & 免费资源。
• Lapa Ninja- 来自全球的着陆页设计灵感。1800 多个着陆页示例，每日更新。
• Mobile Patterns- 一个展示最佳 UI/UX 模式的灵感库（iOS 和 Android）。
• Mobbin- 浏览流行应用的设计模式。探索常见的用户流程，如引导、账户注册和登录、核心功能等。
• One Page Love- 收集了为网站设计灵感而设计的精美独特的单页网站。
• Owwly- 热爱设计的数字产品的家园。
• Page Flows- 当你卡住时，用户流程视频和截图将给你灵感。发现适用于 160 多种不同任务的移动和网页设计模式。
• pttrns- 流行移动应用的设计模式。
• Really Good Emails- 4,150+ 精选电子邮件设计。
• ReallyGoodUX- 来自真实移动和网页产品的优秀 UX 截图和示例。发现最佳的 UX 示例，包括引导教程和操作指南。
• Saas Landing Page- 探索顶级 SaaS 公司创建的最佳着陆页示例，为您的下一个设计项目获取灵感和创意。
• Saas Pages- 专注于文案和设计的最佳着陆页集合。
• 设计团队- 关于硅谷一家科技创业公司设计团队的漫画。
• Typewolf- 帮助设计师为他们的下一个设计项目选择完美的字体组合。
• UI Garage- 设计师、开发者和营销人员的一站式商店，用于寻找灵感、工具和最佳资源。
• UI Sources- 来自今天 App Store 上设计最佳和收入最高的应用程序的 500 多个交互。
• UI Recipes- 每周 15 分钟的热门应用 UI 设计课程。
• UX Archive- 浏览超过 400 个用户流程，涵盖 120 款移动应用。考察诸如预订、登录、引导、购买、搜索等任务。[]
• Waveguide- 一个设计知识库，包含数千个经过人工丰富化的产品和品牌体验示例（如移动应用、着陆页、电子商务、CX/UX 模式）。
• Web Design Museum- 拥有超过 1,200 个精心挑选的网站，展示了 1994 年至 2006 年间网页设计趋势。

设计系统工具

我敢打赌你听说过设计系统，因为这是一个相当热门的话题。设计系统提供一致、强大的设计模式，以保持设计和开发同步。它们本质上是规则、约束和原则的集合，在设计代码中实现。在这里，你可以找到构建、维护和组织你的设计系统的工具。

• Cabana- Sketch 的 Premium 设计系统，帮助你比以往任何时候都更快地创建出色的产品。
• Catalog- 数字产品的活样式指南，将设计文档与真实的实时组件相结合。
• 设计系统管理器- Invision 的设计系统管理器。
• DSK- “设计系统工具包”的缩写——一个用于协作创建设计系统的工坊。
• EOS Design System- 一个基于 Bootstrap 并遵循原子设计概念的开源和可定制设计系统。
• Eva Design System- 可定制的设计系统，适用于 Sketch，并提供移动端和 Web 组件库。
• Frontify- 创建图形指南、模式库、设计系统。
• Interplay- 围绕单一事实来源连接设计和工程。该工具尚未公开可用（测试版）。
• Lingo- 与您的整个团队创建共享资源库。
• Lucid- 用于创建、管理和共享设计系统的工具。从简单的组件库到详细的设计样式说明。
• Modulz- 设计、构建、文档化并发布您的组件库——无需编写代码。
• Prime Design System Kit- 它包括设备模板、图表、UI 套件，甚至插画套件。
• Specify- 一个用于创建、扩展和维护组件库的工具。
• Storybook- 一个用于在隔离环境中开发 React、Vue 和 Angular UI 组件的开源工具。
• Symbol Design System- 基于原子元素的 Sketch 设计系统。
• Toolabs- 基于设计系统和组件设计，原型和开发工具。目前尚未公开，但您可以申请早期访问。
• Zeroheight- 由设计师创建、由开发者扩展、可供所有人编辑的风格指南。

设计转代码工具

每个人都可以学习开发，但这需要时间和精力。如果你现在需要一个网站或一个应用程序，并且不想雇佣一个开发者，请关注网站构建工具。这类设计转代码工具将帮助你快速且美观地制作作品集、简单落地页或应用程序。

• Anima- 一个带有 Sketch 插件的网页应用程序，可以将 Sketch 转换为 HTML。
• Blocs- 一个快速、易于使用且功能强大的可视化网页设计工具，让你无需编写代码即可创建响应式网站。
• Bootstrap Studio- 一个强大的网页设计工具，使用 Bootstrap 框架创建响应式网站。
• Draftbit- 直接从浏览器中通过可视化设计构建移动应用。
• EasyLogic Studio- 极佳的 CSS+SVG 设计工具，同时它也转换为代码，如下所示。
• Grapedrop- 设计您的组件、网页项目并立即在线发布，使用易于使用的编辑器。
• Mobirise- 基于 Bootstrap 3/4 和 AMP 的离线拖放式网站构建软件。
• PageCloud- 速度最快且最可定制的网站构建工具，允许任何人创建他们理想的网站。
• PaintCode- 矢量绘图应用，可即时将绘图转换为 Swift、Objective-C、JavaScript 或 Java 代码。
• Pinegrow- 专业的可视化编辑器，支持 CSS Grid、Bootstrap 4 和 3、Foundation、响应式设计、HTML 和 CSS。
• px.div- 开发者和设计师的网站构建工具。
• Readymag- 一个视觉上令人愉悦的在线设计工具，可用于设计从着陆页到多媒体长文、演示文稿和作品集。
• Sparkle- 最简单的方式创建真实网站，无需代码，无需术语。
• STUDIO- 从零开始设计，实时协作并发布网站。
• Supernova Studio- 从 Sketch 导入设计，并将其转换为 Android、iOS 或 React Native 代码。
• Tilda- 使用 Tilda 模块免费创建网站、落地页或在线商店，并在同一天发布。
• Wix- 最简单且功能最全面的网站构建器，允许您创建高度定制的网站。
• Webflow- 在浏览器中构建响应式网站，然后选择在我们这里托管或导出代码到任何地方托管。

设计版本控制

开发者长期以来积极使用版本控制工具，可能从 2005 年（Git 首次发布）开始。对于开发团队来说，使用版本控制系统是理所当然的，而设计版本控制系统则最近才出现。这个市场正在迅速发展，我们期待在设计领域看到更多版本控制工具：

• Abstract- 一个供设计团队版本管理、协作处理 Sketch 文件的平台。
• Folio- 基于 Git 的简单设计团队版本控制系统。
• Kactus- 无需更改现有工具的设计版本控制。管理变更、记录工作并保持团队同步。
• Plant- Mac 应用程序和 Sketch 插件，为设计师和团队提供完整的版本控制。
• Relay for Figma- Relay 直接将您在 Figma 中的最新资源推送到您的代码库（尚未发布）。
• Versions- 一款为设计师设计的版本控制工具，具有可视化差异、合并和冲突解决功能。支持 GitHub、Bitbucket、GitLab 和 Azure DevOps。

开发工具

本节介绍了开发工具和浏览器。开发浏览器具有帮助开发者和设计师创建和测试网站和应用程序的功能。

• Blisk- 提供一个开发工作区，可以比平时快两倍地开发和测试现代 Web 应用程序。
• Firefox developer edition- Firefox 浏览器的开发者版本。
• Litmus- 一个电子邮件活动创建平台，它允许您在各种电子邮件客户端中查看 HTML 电子邮件的显示效果。
• Polypane- 一个从零开始构建的浏览器，用于创建和测试网站和应用程序。
• Storybook- 一个用于在隔离状态下为 React、Vue 和 Angular 开发 UI 组件的开源工具。它使构建出色的 UI 变得有组织且高效。
• Styleguidist- 隔离式 React 组件开发环境，具有动态样式指南。

体验监控

倾听用户很重要，但看到实际使用情况更为关键。为此，你需要安装不同的分析工具、体验监控软件和用户行为应用。只需使用以下与用户数据相关的分析解决方案：

• Amplitude- 了解你的用户，快速发布更好的产品体验，并促进你的业务增长。
• Chalkmark- 通过在设计实施前快速获取反馈，提高客户转化率和任务导向的成功率。
• Fathom- 提供简单实用的网站统计数据，而无需跟踪或存储用户的个人数据。
• FullStory- 一个强大的、易于使用的平台，可捕获您所有的客户体验数据。
• Google Analytics- 测量您的广告投资回报率并跟踪您的网站和应用程序。
• Heap- 自动捕获所有网络、移动和云交互，无需编写代码即可事后分析您的数据。
• Heatly- 免费热力图工具，帮助您更好地理解网站的用户体验。
• Hotjar- 查看访客如何使用您的网站并收集用户反馈。
• Inspectlet- 记录访客使用您网站时的视频，以便您可以看到他们所做的一切。
• LiveSession- 高质量用户会话回放分析。
• LogRocket- 查看用户在您的网站上的操作，帮助您更快地复现错误和解决问题。
• Mixpanel- 获取您以用户为中心的所有数据的洞察，以便做出更明智的决策，并根据客户如何使用您的产品或网站更快地采取行动。
• Mouseflow- 记录鼠标光标移动。
• Pendo- 衡量并提升其应用程序中的客户体验。
• Smartlook- 用户会话回放和用户参与度分析。
• Usabilla- 通过在正确的时间提出正确的问题，构建面向未来的客户体验。

字体工具

字体是使网络更美好的常用元素。它是任何设计的重要组成部分。在本节中，您将找到字体生成器和字体查找工具，允许您管理和使用字体：

• BeFonts- 一个不错的免费字体集合。
• Behance Free Fonts- Behance 上上传的免费字体列表。
• DaFont- 可自由下载的字体存档。可按字母顺序、风格、作者或流行度浏览。
• Emotype- 帮助您根据网站想要传达的情绪轻松找到字体。
• Fontbase- 让字体管理变得简单。
• FontFabric- 美丽的界面和丰富的字体收藏。
• Fontface Ninja- 浏览器扩展，用于发现任何网站上使用的字体。
• FontPair- 一个简单的工具，帮助你将 Google Fonts 一起搭配使用。
• Fontown- 一个不断增长的字体目录的排版工具，有助于设计师的工作流程。
• 字体- Adobe 提供的成千上万种精美字体。
• Fonts Arena- 高质量免费字体、现成研究文章、高级字体免费替代品、新闻等的专业排版网站。
• FontGet- 各种字体整齐分类并带有标签。
• FontSelf- Adobe Illustrator 和 Photoshop CC 的扩展程序，可在几分钟内将任何文字转换为 OpenType 字体！
• FontSpark- 一个简单的工具，帮助设计师快速找到他们项目中最合适的字体。
• Font Squirrel- 下载免费字体，拥有丰富的字体收藏。
• Google Fonts- 通过优秀的排版使网络更美观、更快、更开放。
• Google Webfonts Helper- 一种轻松自托管 Google Fonts 的方式。它是免费且开源的。
• LostType- 首家提供按需付费字体服务的字体铸造厂。
• Measure- 使用这款 Chrome 浏览器扩展测量排版行长度。
• RightFont- 字体管理应用，帮助预览、同步、安装和组织 iCloud、Dropbox 或 Google Drive 中的字体。
• Sans Forgetica- 一款可下载的字体，科学设计以帮助您记住学习笔记。
• 尺寸计算器- 通过观看距离和印刷字体的实际尺寸来计算感知尺寸。
• 字体管理器- 通过实时字体预览和灵活的标签改进您的设计工作流程。
• Wakamai Fondue- 回答“我的字体能做什么？”问题的工具。
• 网络字体预览- 预览 Google 字体搭配及其组件和网站模板。
• Webfont- 创建和维护自定义 SVG 图标字体，制作图标共享库。
• WordMarkIt- 显示您书写的单词/短语，以及您计算机上已安装的所有字体。

渐变工具

您可以看到渐变色无处不在——UI、品牌、插画、排版。渐变是通过使用两种或多种不同颜色来绘制一个元素，并在它们之间逐渐过渡而创建的。它可能看起来像一种令人难忘、新鲜且独特的颜色。要为您的设计制作这样的渐变，请使用这些渐变色调板。

• Blend- 创建和自定义漂亮的 CSS3 渐变。
• Colorffy- 获取 CSS、图像、UI 预览或创建自己的渐变。
• Colors & Fonts- 为数字设计师和网页开发者提供的精选颜色、渐变和字体库。
• ColorSpace- 为您的下一个项目提供完美的配色方案！生成漂亮的调色板。
• ColorSpark- 帮助设计师找到独特的颜色和引人注目的渐变组合。
• Cool Backgrounds- 探索精心挑选的酷炫背景，可以添加到博客、网站。
• CoolHue- 精选的渐变调色板和色板，用于您的下一个超级酷炫作品。
• CSS Gradient- 免费的 CSS 渐变生成工具，该网站让您创建彩色渐变背景。
• Egg Gradients- 一个包含 12 种不同颜色阴影的颜色集合页面。
• Grabient- 美观简洁的 UI，用于生成网页渐变。
• Gradienta- 多色 CSS 渐变，JPG 下载，100%免费！
• GradientsList- 最大的用户众包渐变集合，每天都有用户通过 Gradients Maker for iOS 进行贡献。
• Gradient Generator- 一个在两种颜色之间生成阶跃渐变色的工具。
• Gradient Hunt- 一个免费且开放的平台，提供成千上万的手工制作潮流颜色渐变，用于颜色灵感。
• Gradients Guru- 为您的 UI 提供混合模式背景图像和美丽的背景渐变。
• HtmlColours- 通过这个渐变生成器，您可以轻松地创建美丽的渐变。
• UI Gradients- 精选的美丽颜色渐变集合，适用于设计师和开发者。
• Web Gradients- 免费提供的 180 种线性渐变集合，可用于网站任何部分的背景。

图标工具

除了字体，图标在每项设计中都得到使用。这些基本元素支持和引导产品内部许多用户操作。毫无疑问，图标是用户导航中至关重要的元素。虽然制作这些小型设计元素既困难又耗时，但你可获得数千个可用于个人和商业用途的矢量图标。

• Animaticons- 一套不断增长的精美、高分辨率的动画 GIF 图标，您可以自定义。
• CoreUI Icons- 精心设计的免费图标集，包含 SVG、Webfont 和光栅格式。
• Digital Nomad Icons- 适用于您下一个项目的时尚图标 & 表情符号套件。25 个高分辨率扁平图标。
• Essential Glyphs- 为满足您对完美形状图标的需要而创建。适用于小尺寸和大尺寸。
• Feather Icons- 每个图标都设计在 24x24 网格上，强调简洁、一致性和可读性。
• Flaticon- 1593000+ 矢量图标，支持 SVG、PSD、PNG、EPS 格式或作为图标字体。
• Font Awesome- 网络上最受欢迎的图标集和工具包，也是开源的。
• Fontello- 用于构建带图标的自定义字体的工具，也是开源的。
• Freepik- 提供专属免费资源及您项目所需的所有图形资源。
• Iconscout- 在一个平台上获取高质量的图标、插图和库存照片。
• Iconfinder- 一个矢量图标（SVG）的市场，IconJar 格式的图标集可用。
• IconJar- 在一个图标管理器中存储所有您的图标。
• Iconmonstr- 发现 4412+ 个免费图标，分布在 305 个集合中。一个庞大且持续增长的最简单的图标资源库。
• Iconset- 免费跨平台的 SVG 图标组织工具，适用于 Mac 和 Windows。
• Icon Store- 个人和商业项目的免费矢量图标库，由一流设计师设计。
• 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- 具有高级交互式网页应用功能的 SVG 矢量图标。
• Simple Icons- 免费 SVG 图标，适用于流行品牌。只需点击您想要的图标，下载应自动开始。
• 分享图标- 提供超过 300,000 个免费下载的图标，支持多种格式。
• Streamline Emoji- 提供 850 多个矢量 emoji 的免费集合。风格灵感来源于日本的“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- 一个免费的混合搭配人物插图的库。
• Illustration by Pngtree- 超过 13142 个不同风格的专业设计插图。
• IRA Design- 使用手绘草图组件、酷炫的 5 种渐变和 AI，创建令人惊叹的插图，支持 svg 或 png 格式。
• JoeSchmoe- 为开发者和设计师提供的插图头像集合，完美用作占位符或在线站点。
• LukaszAdam- 免费矢量艺术插图和图标。可用于个人和商业用途。
• ManyPixels- 免版税插图，为您的项目增添动力。
• Mega Doodles Pack- 大型矢量包，包含手绘涂鸦，适用于演示文稿、社交媒体、博客文章等。
• Open Doodles- Pablo Stanley 提供的一套免费插图，体现了开放设计的理念。您可以在版权或数据库法限制下，为任何目的复制、编辑、混编、分享或重绘这些图像（CC0 许可）。
• 哎哟- 矢量插图，让你的项目更上档次。个人和商业用途均免费。
• Squircley- 你需要的一切，开始创建美丽的 SVG 圆角矩形。
• unDraw- 一系列美丽的 SVG 图片集合。
• Wannapik- 提供免费的插图、矢量图像、照片和动画，适用于任何用途。

信息架构

信息架构帮助设计师组织和管理网站、移动应用和其他软件中的内容。这样用户就能理解产品功能，并找到所需的一切。这些信息架构工具应允许您创建视觉网站地图并改进您的网站内容结构：

• DYNO Mapper- 使用视觉网站地图、内容清单、内容审核、内容规划、每日关键词跟踪和网站可访问性测试来组织网站项目。
• Octopus.do- 视觉网站地图构建器。实时构建您的网站结构，并快速分享以与您的团队或客户协作。
• OmniGraffle- 使用这款强大且易于使用的应用程序创建精美的图表和设计。
• OptimalSort- 一种卡片分类工具，让您了解用户如何在您的 UI 中对内容进行分类。
• Treejack- 上传您的建议网站地图，查看用户将如何浏览您的网站。
• WriteMaps- 创建令人印象深刻的网站地图！以直观、有趣和美观的方式规划您下一个网站项目的页面和内容。

Logo Design

Logo 是品牌身份的起点。它反映了产品的使命、功能性和品牌信息。理想情况下，Logo 能在产品与用户之间建立强烈的联系。Logo 设计是一门艺术，也是许多其他设计学科的一部分。有了合适的 Logo 设计工具，这门艺术可以更快地完成。

• Design Evo- 大量的矢量图标和形状集合，帮助你轻松设计定制 Logo。
• Free Logo Design- 在几秒钟内创建令人惊叹的专业 Logo。
• Graphic Springs- 可从矢量格式 logo 模板库中选择，按行业分类。编辑您的模板中的图形和文字，然后下载。
• Logo Design Team- 提供价格实惠的专业定制标志设计和品牌设计服务。
• Logojoy- 利用人工智能即时为您的企业生成独特的标志创意。
• Logo Lab- 使用自动化视觉实验测试您的标志。
• Logo Maker- 允许您在几秒钟内免费制作一个标志。从空白画布开始，添加文本和图标，然后进行自定义。
• Logo Makerby Designhill - 仅需几分钟即可生成数千个独特的标志，无需设计专业知识。
• Logo Makr- 免费设计标志，选择数百种字体和图标，然后将标志保存到电脑上。
• Logo My Way- 从全球创意设计师提供的 600 个定制标志设计中进行选择。
• Logo Package Express- 自动在 5 分钟内为客户导出和打包数十种标志变体和文件类型。
• Logo Rank- 上传您的标志，查看它在多个客观指标上的评分。
• Wizlogo- 使用一个简单且价格合理的工具创建标志，该工具由专业设计师支持。

模型图是一种展示产品的视觉方式。虽然线框图主要表示产品的结构，但模型图展示了产品将如何看起来。这些帮助您创建和协作模型图、线框图、图表和原型的工具：

• Artboard Studio- 主要专注于产品原型的在线图形设计应用程序。
• Cleanmock- 使用最新的设备框架（如 iPhone）和自定义背景创建令人惊叹的原型。
• Craftwork Design- 提供免费和高级的高品质数字产品，使您的工作更快、更简单。
• Device Shots- 一个免费的工具，帮助您使用网站或移动应用程序的截图创建精美的设备原型。
• Facebook 的设备- 流行设备的图片和 Sketch 文件。
• Dimmy.club- 用于网站和应用截图的设备模型生成器。
• Frrames- Frrames 模型是为您的理想演示完美制作的响应式窗口模型。
• Lstore Graphics- 免费和高级模型、UI/UX 工具、场景创建器，供忙碌的设计师使用。
• Mediamodifier- 在几秒钟内创建令人印象深刻的产品模型。
• Mockflow- 最快的方法来构思用户界面想法。
• Mockup World- 大量免费且合法、完全分层、易于定制的照片级真实 PSD 文件。
• Mockups For Free- 免费设计资源，图形和网页设计师的 PSD 文件。
• Mockuuups- 拖拽式工具，用于创建精美的应用预览或任何营销材料。
• Mock Video- 通过为您的视频添加设备框架，即时创建模型。
• Moqups- 帮助您实时创建和协作线框图、模型、图表和原型。
• Original Mockups- 高质量的 Photoshop 模型，使您的设计脱颖而出。
• Overframe for Mac- 使用设备框架覆盖层录制您的原型与应用程序。
• PixelBuddha- 为网页设计师和开发者提供免费和高级的高质量资源。
• Ramotion Store- 为 Sketch 和 Photoshop 精心制作的 Apple 和 Android 模型。
• Rotato- 为您的应用程序设计制作动画 3D 模型。
• SceneLab- 在线创建逼真的模型和定制品牌设计。
• Screely- 快速将网页设计框入极简浏览器窗口。
• ScreenSpace- 运动设计师的 3D 设备视频。
• Screenzy- 即时将您的照片和截图转换为可用于社交媒体分享的精美模型。
• Screeener- 使用此应用程序将一组图像插入到演示文稿文件中，使用您选择的模拟图。
• 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- 无需编写代码或雇佣工程师团队即可构建和托管网络应用程序。
• Carrd- 简单、免费、完全响应式的单页网站，适用于几乎所有事物。
• Coda- 一种新型文档，将文档的灵活性、电子表格的强大功能和应用程序的实用性融合在一个新的画布中。
• Kodika.io- 使用 Kodika 无代码应用构建器（适用于 Mac & iPad）为 iOS 应用，能够通过拖放创建强大的应用。
• PageXL- 一个简单的单页网站构建器，用于快速创建着陆页和在线商店。
• Remove.bg- 一个免费服务，用于移除任何照片的背景。
• Retool- 提供构建模块，让你能够更快地构建工具。
• sheet2api- 从 Google Sheets 或 Excel 在线电子表格创建 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 色绘图。
• GraphicsGale- 具备许多像素艺术专用功能，包括调色板控制、选择性擦除颜色，以及快速替换和尝试新颜色的工具。
• Goya- 基于 ClojureScript 和 Om 构建的像素艺术编辑器。
• Make 8 bit art- 一个开源的浏览器内像素艺术绘图工具。
• Piskel- 在线动画精灵和像素艺术编辑器。
• Pixel art to CSS- 基于 React 的像素艺术动画和绘图网络应用。
• Poxi- 一个扁平化像素艺术编辑器。
• Pyxel Edit- 一个设计得既有趣又容易使用的像素艺术编辑器，用于制作瓦片集、关卡和动画。

原型设计工具

原型是一个简单的实验性设计，用于测试所提出的解决方案。它应该以快速且经济的方式帮助测试想法、设计假设和假设。原型设计工具允许设计师和客户看到产品在现实世界中的功能，并就这一解决方案进行协作。许多现代原型设计工具可用于线框图设计、原型设计和协作：

• Alva- 使用代码组件创建可交互的原型。它也是开源的。
• Axure RP- 线框图设计、原型设计、协作与规范生成。
• SAP Build- 一套完整的云端工具，用于设计和构建您的企业应用程序。
• Creo- 原型设计、代码导出和内置移动应用程序构建器。
• Drama- 在单个 Mac 应用程序中原型设计、动画制作和设计。
• InVision- 原型设计、协作与工作流平台。
• Flinto- 一款 Mac 应用程序，用于创建应用程序设计的交互式和动画原型。
• Framer X- 一款用于视觉设计逼真交互原型的工具。
• Keynote- Mac 系统内置的应用程序，用于创建演示文稿，也可用于快速原型设计（查看 Apple 设计师在 WWDC 2014 会议中的 "Prototyping: Fake It Till You Make It" 环节中如何使用它来验证设计概念）。
• Lightwell- 用于构建移动布局和动画的可视化工具和 SDK，可转换为原生 iOS 元素。
• Marvel App- 协作式设计平台。在线绘制线框图、原型设计，并在一处创建设计规范。
• Maze- 为设计师和开发者提供工具，为您的 Invision 原型提供分析结果和可操作的 KPI。
• Origami- 免费设计现代用户界面的工具。快速搭建原型，在您的 iPhone 或 iPad 上运行，进行迭代，并导出工程师可使用的代码片段。
• Pencil- 带有许多内置组件的原型设计工具，用户可以轻松安装和使用，在流行的桌面平台上创建模型。
• Principle- 让设计动画和交互式用户界面变得轻松。
• ProtoPie- 快速组合高保真交互，构建传感器辅助原型，并在几分钟内分享您的精彩创作。
• Proto.io- 一款创建完全交互式高保真原型的工具，外观和工作方式与您的应用程序完全一致。
• Prott- 一款易于使用且直观的原型设计工具，促进团队协作。
• Uizard- 将线框图转换为高保真交互式原型，自定义样式系统，导出到 Sketch，导出到 HTML/CSS 代码。
• Useberry- 一款可用性测试工具，允许从 InVision、Adobe XD、Sketch、Marvel 导入原型，并通过热力图、视频录制、用户流程、时间条和后续问题的答案获取用户行为洞察。
• UXPin- 构建感觉真实的原型，具有代码组件、逻辑、状态和设计系统的功能。

屏幕截图软件

截屏是设计开发工作流程中的一个典型任务。因此，这些免费且功能齐全的截屏应用可以帮助您轻松捕捉屏幕。有些截屏应用仅支持 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，注释，编辑和分享。
• Snipping Tool- Windows 免费截图工具。
• Snappy- 快速捕捉并为您整理成集合。
• Teampaper Snap- 允许您捕捉选定区域的截图。

绘图工具

有时你只需要一支笔和一张纸就能开始创建你的应用程序或网站。因此，这里有一些提供优质绘图模板的在线绘图工具，可以加速你的创意过程：

• Responsive Sketchsheets- 提供响应式预设计模板。这些模板将自动适应任何屏幕尺寸，并包含整洁的功能。
• Sketchsheets- 一个致力于提供最新设备和平台免费打印模板的开源项目，用于线框图设计。
• Sneakpeekit- 打印笔记网格和设备框架。
• Sketchize- 只需选择适合您项目的任何草图纸，打印出来，开始绘制您的梦想。

社交媒体设计工具

通常营销团队需要设计良好的材料。这可能包括不同的横幅、促销视觉效果、图标、动画或只是用于社交媒体（如 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- 一款实时编程音乐合成器。
• SoundKit- 一个为您的界面需求设计的 UI 声音库。
• UI Sounds- 通过实例学习用户界面的声音设计。
• Wistia Music- 下载一些免费背景音乐，为你的视频增添活力和情感。
• WOWA- 下载用于 YouTube 视频、播客和应用程序的无版权音乐。无版权 CC0。音乐灵感来自 Unsplash。
• YouTube 音频库- 浏览和下载免费音乐用于您的项目。

库存照片工具

需要为 iOS 应用或新横幅的高质量照片？您可以自己拍摄或从库存照片网站借用。幸运的是，有数百张美丽的免费库存照片和免版税图像可供任何项目使用：

• Burst- 免费库存照片用于网站和商业用途。
• Duotone- 可用于任何项目中的免费 duotone 图片，或制作自定义 duotone 图片。
• Death to Stock- 付费的股票照片服务，提供邮件订阅以获取偶尔免费的照片包，并专注于照片看起来不像是股票照片。
• FoodiesFeed- 数千张高分辨率的精美逼真免费食物图片。
• FreePhotos.cc- 可用于商业的免费股票照片。
• Freestocks.org- 高质量照片全部在 Creative Commons CC0 下发布。
• Gratisography- 免费高分辨率图片集合。
• Jay Mantri- 每周四发布 7 张新照片，均在 Creative Commons CC0 下。
• Kaboom Pics- 包括抽象、城市/建筑、时尚、食物和风景的库存照片。
• LandingStock- 用于您着陆页面的免费图片集合。
• Life of Pix- 由 LEEROY 团队创建的免费高分辨率照片。
• LoremPixel- 一个 API，按指定尺寸和类别提供库存照片。非常适合占位符/用户生成内容。
• Magdeleine- 用于您灵感的免费高质量库存照片。
• Moose- 不要搜索库存照片，创建它们。
• MMT STock- 由 Jeffrey Betts 提供的高分辨率照片，采用 Creative Commons CC0 许可。
• New Old Stock- 来自公共档案的复古照片，已知无版权限制。
• Pexels- 汇集了多个免费库存照片资源。
• Photo Creator- 一个免费的工具，可以根据您的需求创建逼真的库存照片。
• Picography- 由 Dave Meier 和其他摄影师提供的免费库存照片，使用 Creative Commons CC0 许可。
• Pixabay- 在专有许可下共享照片、插图、矢量图形和电影片段。
• Picjumbo- 为您的商业和个人作品提供的完全免费照片集合。
• Pngtree- 数百万张 PNG 图片、背景和矢量图供免费下载。
• pxhere- 免费图片库。
• Reshot- 一个巨大的精选免费照片库，你 elsewhere 找不到。
• ShotStash- 数千张免费高分辨率 CC0 照片和视频。
• SkitterPhoto- 提供多种类型的库存照片，并遵循知识共享 CC0 协议。
• Startup Stock Photos- 为初创公司、博主和发布者提供免费照片。
• StockSnap.io- 提供大量免费库存照片和高分辨率图像。
• StyledStock- 为每位女性企业家提供免费的优雅库存摄影。
• 性别光谱收藏- 一个特色展示跨性别和非二元性别模特照片的图库，超越了陈词滥调。
• UI Faces- 一个聚合器，索引了各种可用于设计原型中的免费头像资源。
• Unsplash- 可免费使用的图库照片。
• #WOCinTech Chat Photos- 来自不同背景的女性技术人员的免费图库照片。
• Zoommy- 帮助您为您的创意产品或灵感找到精彩的免费股票照片。

股票视频

如果您处理视频内容，您将喜欢这些高质量、精心挑选的股票视频。以下是一些许多良好且免费的股票视频网站，您可以在您的网站、广告活动或社交媒体中使用：

• Coverr- 为您的主页提供美丽、免费的股票视频素材。
• Life of Vids- 提供免费的股票视频、片段和循环。
• Mazwai- 优秀的创意公共领域高清视频片段和素材收藏。
• Mixkit- 非凡的免费高清视频。供您使用，完全免费。
• Motion Places- 精心挑选的美丽素材集合，可用于您的项目。
• Pixabay- 它拥有超过 150 万部免版税的库存视频和照片，由其创作者社区共享。
• Pexels Videos- 让您轻松找到免费库存视频，用于您的网站、宣传视频或其他任何用途。
• Videezy- 立即下载数百万部免费和高级库存视频及动态图形。
• Videvo- 提供大量高清视频片段、动态图形和免费库存视频。
• 123RF- 每日超过 10 万新内容 & 24/7 在线支持。

学习设计工具

• Design Better- 探索全球顶尖设计团队和领导者的最佳实践、故事和见解。
• Design+Code- 关于最佳工具和设计系统的完整课程。
• DesignerUp- 提供自我学习课程和导师指导，帮助你掌握产品设计（UI/UX）。
• Figma Training- 专为 UI 设计师设计的 Figma 快速入门课程。
• Interaction Design Foundation- 行业知名的学习 UX/UI 技能的网站。
• Laws of UX- 收集了设计师在构建用户界面时可以参考的格言和原则。
• 学习 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- 用于创建用于印刷、网络、视频和移动设备的标志、图标、绘图、排版和插图。由 Adobe 公司制作。
• Inkscape- 一款免费且开源的矢量图形编辑器。它可以创建或编辑插图、图表、线条艺术、图表、标志和复杂绘画等矢量图形。
• Krita- 一款免费绘画和图形设计软件，被认为是 Adobe Photoshop 的一个良好替代品。
• Lunacy- 一款免费的本地 Windows 应用程序，支持离线使用，并兼容 .sketch 文件。灵活且轻量级。直观易用。提升和赋能 UI 及 UX 设计师。制作惊艳设计的必备工具。
• Photopea- 一款免费的基于浏览器的图形设计应用程序，是 Photoshop 的替代品。
• Photoshop- 由 Adobe 开发的图像处理和图形设计软件。
• Pixelixe- 一款专为市场营销人员、博主和小型企业设计的图形设计工具，需要快速创建惊艳且独特的图像、图形或静态网页。
• Sketch- 一款专为 Mac 设计的绘图工具包。
• Studio- 将设计、原型设计和协作整合到一个和谐的工作流程中。由 InVision 公司制作。
• TwitPile- 从 Twitter 关注者、兴趣和列表中创建马赛克图像。
• Vectr- 一个简单的跨平台网络和桌面工具，可以轻松直观地创建矢量图形。
• Voiceflow- 用于为 Amazon Alexa 和 Google Home 原型设计并部署真实应用程序。

用户流程工具

用户流程是指用户为达成一个有意义的目的一系列步骤。它是规划客户旅程路径和提高用户体验的快速方式。因此，如果您需要制作用户流程图、用户流程地图或站点地图，请查看这些工具：

• Draw.io- 免费在线图表软件，用于制作流程图、流程图、组织结构图、UML、ER 和网络图。
• Flowmapp- 一个用于创建网站地图和用户流程的在线工具，帮助您有效地设计和规划用户体验。
• Google Drawings- 创建图表和图形，免费；全部在 Google Docs 中。
• Lucidchart- 一个用于创建图表、流程图、网站地图等的在线工具。
• MindNode- 一个思维导图应用程序，使头脑风暴变得简单易行。
• NinjaMock- 在线线框图和用户流程设计工具。连接你的视图并创建逻辑流程原型。全部采用自由手绘风格。
• OmniGraffle- macOS 和 iOS 的绘图和数字插画应用程序。
• Overflow- 将你的设计转化为可交互的用户流程图，讲述一个故事。
• Sketch.systems- 使用交互状态机进行 UI 和流程设计。
• SQUID- 在 Sketch 中只需几分钟即可创建精美的用户流程。
• WebSequenceDiagrams- 一个简单的网络应用程序，用于处理按时间顺序排列的对象交互。
• Whimsical- 轻松创建流程图、线框图和便签。
• 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- 一个为您的团队提供实时研究工具的平台。标记/编码访谈和反馈，捕捉洞察，创建用户画像，可视化网站地图等。
• User Interviews- 根据职业、人口统计、地理位置等，从拥有 12.5 万名成员的社区中招募参与者，适用于任何类型的研究。
• Zoom- 它是最佳的在线会议服务之一。

视觉调试工具

• LogRocket- 一个记录用户在您的网站上所做操作的工具，以便您可以更快地重现错误并解决问题。
• PixelSnap- 屏幕上所有内容的神奇测量方式。
• VisBug- 在任何网页上：可视化调试、快速检查样式和无障碍性，可视化更改 CSS，点击并拖动元素，以及更多。
• Visual Inspector- 用于网站反馈和修复设计错误的协作工具。

线框图工具

线框图是一个视觉模型，概述了网站或应用程序的基本结构。它包含最基本元素和内容，帮助您轻松解释设计想法。线框图是一种低保真度的设计展示方式。本节介绍了适用于各种用例的最佳线框图工具。

• Balsamiq Cloud- 轻松绘制 UI 素描。捕捉您的想法，协作设计，让每个人都参与进来。
• BLOKK- 专为不懂拉丁文的客户准备的快速原型和线框图字体。
• CSS Grid Builder- 使用此工具，网格没有 HTML 部分。当内容（元素）根据网格规则添加和定位时，网格才会显现。
• Gliffy- 用于创建框架、UML 图、流程图、线框图等工具。
• Gridzzly- 创建自定义网格纸的最简单方式。
• Layoutit- 用于 CSS Grid & Bootstrap 的界面构建器，希望成为您前端开发的起点。
• Pidoco- 一款让您能够快速创建点击式线框图和完全交互式 UX 原型的软件。
• Wireframe.cc- 一个简洁的线框图工具，不会干扰您的工作。
• Whimsical Wireframes- 指尖上的即时线框图。丰富的可配置元素库，如按钮、输入框、复选框。
• 1200px Grid System- 帮助你构建比 960 像素风格更宽的网站设计的网格系统。

三维建模软件

3D 图形用于游戏、电影制作、建筑、工程和 3D 打印。3D 艺术家和设计师使用本节中提到的特定 3D 建模软件。

• Autodesk- 集成 CAD、CAM 和 CAE 软件。将设计、工程和制造统一到一个平台。
• Blender- 免费开源的 3D 创作软件。
• FreeCAD- 一款免费且开源的多平台三维参数化建模软件。
• MatterControl- 一款免费、开源的集成式软件包，允许您设计、切片、组织和管理您的 3D 打印。
• Maya- 一站式工具集，用于制作动画、环境、运动图形、虚拟现实和角色创建。
• Onshape- 一款专门面向设计技术零件和备件的三维建模软件，是首个完全基于云的 3D 软件。
• OpenSCAD- 一种用于创建实体 3D CAD 对象的软件。
• Rhino- 一款基于曲线的 3D 建模软件，可创建数学精确的 3D 曲面模型。
• SketchUp- 一款真正让每个人都能进行 3D 建模的 3D 设计软件，具有简单易学且功能强大的工具集。
• Tinkercad- 一款免费、易于使用的 3D 设计、电子和编程应用。
• Vectary- 使用我们的拖放式 3D 建模工具创建精美的 3D 模型。
• 3D Slash- 一款 3D 建模工具，可在所有设备和所有操作系统上使用，支持在线和离线模式。