干货!最好的设计工具集合

干货!最好的设计工具集合,就算你不是设计师,也能轻松搞定所有设计。适合一切的最佳设计工具 👉 https://flawlessapp.io/designtools

设计工具类型

辅助功能工具

可访问性是创建可供所有人使用的网站和应用程序的做法,包括具有视觉,运动,听觉,语言或认知障碍的个人。在这里,您将找到适用于开发人员和设计人员的Web辅助功能工具,辅助功能测试工具和辅助功能应用程序:

https://accessibilityinsights.io - 帮助开发人员快速查找和修复辅助功能问题。

https://achecker.ca - 可访问性测试Web应用程序,用于评估HTML内容的可访问性问题。

https://www.ssa.gov/accessibility/andi/help/install.html - 用于Web内容的可访问性测试工具(bookmarklet)。它将自动检测可访问性问题,提供改进在线可访问性的建议并检查508合规性。

https://www.deque.com/axe - 可访问性引擎,适用于所有现代浏览器以及您当前使用的任何工具,框架,库和环境。它是开发人员的自动化可访问性测试工具。

http://www.colorbox.io - 一种通过算法构建可访问颜色系统的Web应用程序。由Lyft Design团队完成。

https://contrasteapp.com - 一个根据Web内容可访问性指南(WCAG)检查文本可访问性的应用程序。

https://usecontrast.com - 一个macOS应用程序,供设计人员和开发人员快速访问WCAG色彩对比度。

https://hexnaw.com - 帮助您测试整个颜色系统的对比度和可访问性。

http://pa11y.org - 用于查找网页问题的辅助功能测试工具。它从命令行运行HTML CodeSniffer,用于编程可访问性报告。它是辅助功能开发人员工具。

https://michelf.ca/projects/sim-daltonism - 用于macOS和iOS的色盲模拟器,让色盲用户也能辨识不同颜色

http://khan.github.io/tota11y - 一个辅助功能可视化工具包。

https://wave.webaim.org - 允许您直接在Chrome和Firefox中评估Web内容的可访问性问题。这是一个Web辅助功能检查器。

可视化调试工具类别的VisBug中也提供了辅助功能检查功能。

动画工具

动画引导人们通过产品友好和顺利。实时交互式UI使用户对即时反馈和情感触摸感到高兴。这些免费和付费工具旨在使动画创作更容易。如果您打算制作动画过渡,微交互或基于滚动的动画,请浏览以下工具:

https://www.adobe.com/products/aftereffects.html- Adobe开发的数字视觉效果,动态图形和合成应用程序。

https://beatflyer.com/ - 一个可让您从多层合成中快速创建循环且引人入胜的动画web工具。

https://www.2dimensions.com/about-flare - 一种功能强大的设计和动画工具,允许设计人员和开发人员为他们的应用或游戏创建动画。

https://createwithflow.com/- Sketch设计的专业动画工具

https://www.haikuforteams.com/- 基于关键帧的动画,将您的UI工具连接到开发人员可以轻松使用的代码。

https://www.keyshapeapp.com/- 允许动画SVG导出的2D动画工具

https://kiteapp.co/- 适用于Mac和iOS的强大动画和原型设计应用程序。

https://uselightbox.com/- 2D,手绘动画包。

https://airbnb.io/lottie/- 适用于Android和iOS的移动库,用于解析使用Bodymovin导出为json的Adobe After Effects动画,并在移动设备和网络上呈现

https://jeremyckahn.github.io/mantra/ - 基于网络的时间线动画工具。

https://meteoritic.io/- 适用于iOS和Android的动画娱乐库。

https://offeo.com/ - 一家小型企业的在线视频制作商,可以在没有大预算的情况下制作大品牌等视频广告。

https://sliderapp.co/- 只需轻点几下,即可通过手机为Instagram和Facebook创建漂亮的动画帖。

https://spiritapp.io/- 动画工具,可帮助您在浏览器中实时创建和管理动画。

https://jeremyckahn.github.io/stylie/- 基于Web的CSS3动画工具。

https://tumult.com/hype/- 用于macOS的HTML5动画/交互式创建应用程序。

Principle,Framer,Invision Studio,Flinto也是UI&UX动画应用和软件动画工具之一。

增强现实

增强现实技术通过向其添加一层数字信息来升级我们的现实世界。AR的使用日益增加,有数十种新的AR应用程序,开发工具包和AR框架。因此,本节将收集不同的增强现实工具,用于创建,投影和专注于AR的应用程序原型:

https://daqri.com/- 通过将数字信息叠加到物理环境中,提供专业级的增强现实。

https://www.easyar.com/ - 移动应用程序和增强现实引擎,使AR更容易。

https://www.hpreveal.com/- 通过视觉交互为印刷内容增加价值。

https://www.layar.com/- 根据增强现实技术找到各种物品。

https://lensstudio.snapchat.com/- 为Snapchat创建,分享您自己的AR体验。

https://lightform.com/- 投影AR的设计工具。

https://www.sparkar.com/- 无需代码为Instagram提供AR体验。

https://www.torch.app/- 基于云的3D设计和原型应用程序,专注于移动AR。

https://unity.com/- 构建高质量的3D和2D游戏,在移动,桌面和VR / AR上进行部署。

https://www.vectary.com/- 为您的网站创建3D动画和AR效果。

https://www.vuforia.com/ - 用于移动设备的SDK,可用于创建增强现实应用程序。

https://www.wikitude.com/ - 使用图像和对象跟踪,即时跟踪(SLAM),Geo AR等功能为您的iOS,Android和智能眼镜应用程序提供支持。

协作工具

希望尝试一些敏捷设计和开发协作工具?好主意,因为这些工具使设计人员和开发人员的生活更加轻松,节省时间并提高生产力。好吧,你知道Slack驱动时代的一切。在这里,您将找到产品团队的最佳协作工具:

https://airtable.com/ -最强大的免费线上表格,能整理任何资料

Appear.in - 一个简单的视频协作工具。

https://asana.com/ - 一款团队任务管理工具。目标是将自己打造成可替代邮箱的更为高效的团队任务协作工具。

https://basecamp.com/ - 基于Web的项目管理工具。

https://filestage.io/- 一种灵活的内容审批软件,可帮助您与客户和同事一起审查视频,设计和文档。

https://material.io/tools/gallery/ - 用于上传设计工作,获取反馈和跟踪修订的协作工具。

https://www.hivedesk.com/ - 通过屏幕截图为远程员工提供自动时间跟踪。它可以更轻松地监控远程员工的生产效率并管理项目。

https://www.atlassian.com/software/jira - 敏捷团队使用的软件开发工具。

https://keybase.io/ - 一个免费的协作应用程序,内置端到端加密聊天,文件共享,git存储库等

https://mattermost.com/- 一个灵活的开源消息传递平台,可满足最严格的隐私和安全标准。

https://milanote.com/ - 一种易于使用的协作工具,可将您的想法和项目组织到面板中。

https://mixed.io/ 实时白板和协作工具,适用于分布式团队。

https://mural.co/ - 在视觉上思考和协作。

https://www.notion.so/ - 加入表格、看板和日历,更全能的数字笔记工具

https://www.proofhub.com/ - 使用最简洁的平台界面,来管理团队的协作,它能提供统一通信、电子邮件项目管理和多语言界面

https://www.realtimeboard.com/ - 一个视觉化的协同合作白板。但是在功能上更丰富,可以插入更多类型文件图表,有更多编辑、讨论工具,速度更流畅

https://slack.com/ - 可以说是团队协作工具里面,减少沟通干扰处理得最好的服务。

https://sunsama.com/ - 是一款新推出的任务管理应用,结合了 Google 日历和 Trello 的看板模式。

https://taskade.com/ - 一款非常实用的轻量级云待办事情软件

https://trello.com/ - 一款能够帮你把想法、任务、资料等内容都放在一块块看板上,并且可以随意移动到另外一块看板的在线内容管理工具

https://www.witeboard.com/ - 用于协作工作的简单实时白板。

https://www.workzone.com/ - 一个简单,功能强大的项目管理软件。

https://www.wrike.com/- 一个在线项目管理软件,可让您全面了解和控制您的任务。

https://zenkit.com/ - 安排会议,跟踪项目进展和集思广益的新工具。

您还可以与InVision Freehand工具进行设计协作。

拾色器工具

如果您正在寻找吸管工具,颜色标识符或颜色捕获,请查看此部分。使用这里提到的颜色选择器,您将能够创建新的颜色组合并定义非常好的颜色组合。几乎所有这些工具都是免费的:

https://chroma.spencerhamm.com/ -免费识别颜色应用程序

https://color.adobe.com/explore/ - 由Adobe制作的颜色搭配绝妙工具实时提供全球最受欢迎的配色方案,如果你懒得自己配色那就直接照搬全球最受欢迎的配色吧,绝对不会被潮流甩到身后。

https://www.colorwise.io/ - ph上投票最多的调色板。

https://colourco.de/ - 在线设计师工具,可让您轻松直观地组合颜色。

https://color.obscuredetour.com/- HSL驱动的调色板系列。它也是开源的。

https://www.colorhexa.com/- 免费颜色工具,提供有关任何颜色的信息并为设计生成匹配的调色板。

https://colorpicker.crea-th.at/- 一个完整的开源颜色处理工具,带有拾取功能。

https://cloudflare.design/color/ - 根据用户界面元素预览调色板、循环浏览可访问的颜色组合并手动创建调色板、通过网址导入或生成调色板的工具。

https://www.instagram.com/colours.cafe/ - 在Instagram中选择现代色调的色彩灵感。

https://coolors.co/- 超快速配色方案生成器。

https://culrs.com/ - 精心制作且易于使用的调色板。

https://geenes.app/ - 通过代码和草图文件导出创建和谐色彩主题的工具。

http://instant-eyedropper.com/ - 一种基于Windows的极简吸管工具,为设计人员和开发人员提供多种颜色格式。

http://annystudio.com/software/colorpicker/ - 免费便携式离线拾色器和颜色编辑器。

http://khroma.co/ - 基于AI的工具,可根据您的喜好生成调色板。

https://github.com/BafS/Material-Colors-native - Google材料设计调色板mac应用程序。

https://paletton.com/ - 一种用于创建可以很好地协同工作的颜色组合的设计工具。

https://picular.co/- 使用谷歌图像搜索的快速原色发生器。

https://itunes.apple.com/us/app/pikka-color-picker/id1195076754 - macOS的颜色选择器和配色方案生成器。

http://casesandberg.github.io/react-color/-
免费开源的Sketch,Photoshop,Chrome的颜色选择器集合。

https://sipapp.io/ - 收集,整理和分享颜色的更好方法。适用于MacOS的全球吸管工具。

https://bjango.com/mac/skalacolor/- 适用于各种格式,涵盖了您在Web,iOS,Android和macOS开发中可能需要的所有内容。

https://swatchesapp.io/ - iOS应用程序,可让您收集,检查和分享在日常生活中激发你灵感的颜色。

设计反馈工具

您如何在开发过程中提供并获得反馈?对于许多产品团队来说,这个过程通常非常混乱,导致产品延迟和时间浪费在来回沟通上。因此,如果您希望获得有关UI问题或可视错误的快速结构反馈,请查看此工具:

https://flawlessapp.io/feedback- 一款专为UI设计师及开发者打造的一款UI原型矫正工具。

设计切换工具

当设计师完成工作并需要向具有所有规格和资产的开发人员提供设计时,就会发生设计切换。设计切换工具允许自动生成样式指南,评论设计,检查元素。这些工具可最大限度地减少猜测并提高设计过程的有效性。

https://avocode.com/ - 一个很好用的前端切图神器,就是把设计师的设计稿还原成前端页面

https://flawlessapp.io/ - 一款UI原稿矫正工具,内置iOS模拟器,你可以选择分屏或者叠加的方式对UI原稿进行对比,支持导入Sketch、jpeg、png、tiff等格式的文件。

https://www.invisionapp.com/feature/inspect/ - 在线产品原型交互设计协作软件

https://github.com/utom/sketch-measure - 草绘插件。注释元素的距离和大小。

https://specctr.com/ - 一款尺寸标注类插件,主要用于标注设计内容中对象的尺寸、间距、样式等

https://sympli.io/ - 在线标注和协作工具。但支持直接集成到Xcode和Android Studio

https://zeplin.io/ -自动标注协作工具,从 Adobe XD 导出到 Zeplin后可在线查看标注、生成代码片段、导出切图、沟通协作。

设计灵感

创作过程可能很艰难。因此,如果想法不会立即出现在您的脑海中,请尝试在其他设计师的工作中寻找灵感。这些设计灵感网站的特色是设计模式,用户流程,电子邮件标记以及受欢迎公司和优秀产品的创意解决方案:

https://www.behance.net/ - 一个展示和发现创意作品的在线平台。

https://codemyui.com/ -通过代码片段精心挑选网页设计和UI灵感。

http://collectui.com/ - 一个提供网页设计师灵感设计案例作品的站点

http://www.creative-portfolios.com/ - 由设计师和开发人员制作的最具创意集合。

https://dribbble.com/ - 在线艺术设计创作社区是一个集创意、设计、艺术为一体的在线服务平台

http://inspirationui.com/ - 旨在为网络创作者提供最佳设计资源的社区。

https://hoverstat.es/ - 展示来自创意社区和数字文化前沿的伟大作品。

https://httpster.net/ - 一个收集世界各地优秀的网页设计作品的站点,帮助网页设计师们从优秀的网页设计作品中汲取灵感。

https://www.h69.design/ - 设计师的登陆页面收集和免费资源。

https://www.lapa.ninja/ - 登陆页设计灵感集合。1800多个登陆页示例并每日更新。

https://www.microcopyinspirations.com/ - 关于网站和应用程序上精心制作的微文案示例。

https://www.mobile-patterns.com/ - 一个设计灵感库,具有最好的UI UX模型(iOS和Android)。里面针对列表、登录、日历、地图、搜索、设置等等常见的功能进行分类,搜集了大量的APP的截图。

https://mobbin.design/- 移动app最新设计样式库。

https://onepagelove.com/gallery - 单页面网站设计欣赏,模版下载、交易。

https://owwly.com/feed/inspirations--顶级数字产品和设计趋势网。

https://pageflows.com/ - 用户流视频和屏幕截图,以便在您遇到困难时激发您的灵感。发现超过160种不同任务的移动和网页设计模式。

https://pttrns.com/ - 流行移动应用程序的设计模式。

https://reallygoodemails.com/ - 4150+精心挑选的电子邮件设计。

https://www.reallygoodux.io/ - 一个分享UX灵感截图作品的图库网站

https://thedesignteam.io/ - 关于硅谷科技创业公司设计团队的漫画。

https://www.typewolf.com/ - 收录了大量来自不同网站的字体组合灵感。

https://uigarage.net/ - UI灵感搜罗聚集地。

https://www.uisources.com/ - App Store上设计最好且收入最高的应用程序超过500种互动。

https://uirecipes.com/- 每周15分钟的最热门应用程序UI设计课程。

http://uxarchive.com/ - 国外移动APP交互设计灵感平台。一个国外专门收集优秀APP的界面设计作品和APP交互设计界面网站。帮助UI设计师如何去更新好的设计产品,帮助设计师分析成功的UI设计案例,引导设计师设计更加优秀的产品。

https://www.waveguide.io/ - 一个设计知识库,拥有数以千计的产品和品牌体验示例。

https://www.webdesignmuseum.org/ - 超过1,200个精心挑选的网站,展示了1994年至2006年间的网页设计趋势。

设计系统工具

我打赌你听说过Design Systems,因为它是一个非常时髦的主题。设计系统提供一致,稳健的设计模式,以保持设计和开发的同步。它们本质上是规则,约束和原则的集合,在设计和代码中实现。在这里,您可以找到构建,维护和组织自己的设计系统的工具。

https://cabanadesignsystem.com/ - Sketch的高级设计系统,可帮助您以前所未有的速度创建出色的产品。

https://www.invisionapp.com/design-system-manager/ - Invision的设计系统管理器。

https://www.eosdesignsystem.com/ - 遵循原子设计理念构建在Bootstrap之上的开源可定制系统。

https://frontify.com/ - 可以让你在5分钟内创建一套漂亮而完备的风格指南!这个在线工具有趣而简单,让你维护品牌风格和样式快速而方便。

https://www.lingoapp.com/ - 与团队一起创建共享资产库,适合您的品牌和产品的现代数字资产管理器

https://lucid.style/ - 用于创建,管理和共享设计系统的工具。从简单的组件库到样式的详细描述。

https://www.primedesignsystem.com/ - 最好的额sketch设计系统工具箱它包括设计模板,图表,UI工具包甚至插图套件。

https://www.specifyapp.com/ - 用于创建,缩放和维护设计系统的工具。

https://symboldesign.co/ - 基于原子元素的草图设计系统。

https://www.zeroheight.com/- 设计者创建的样式指南,开发人员扩展的样式指南,每个人都可以编辑。

我们还可以在Sketch,Figma,UXPin和Framer X(Framer X Team Store)中添加它。

设计代码工具

每个人都可以学习开发,但需要时间和精力。如果您现在需要网站或应用程序,并且您不想聘请开发人员,请关注网站构建者。这种代码工具设计将帮助您创建一个投资组合,简单的登陆或应用程序非常快速和美观。

https://blocsapp.com/ - 一种快速,易用且功能强大的可视化网页设计工具,可让您无需编写代码即可创建自适应网站。

https://bootstrapstudio.io/ - 一个功能强大的网页设计工具,用于使用Bootstrap框架创建响应式网站。

https://grapedrop.com/ - 使用易于使用的编辑器设计您的组件,Web项目并立即在线发布。

https://www.trymason.com/core - 是一个功能构建平台,现代产品团队可以将前端功能设计,构建和部署在一起。

https://mobirise.com/ - 一个基于Bootstrap 3/4和\ AMP的离线拖放网站构建器软件。

https://www.pagecloud.com/ - 通过简单的拖拽快速创建理想的网站。

https://pinegrow.com/ - CSS Grid,Bootstrap,Foundation,响应式设计,HTML和CSS的专业可视化编辑器。

https://www.pxdiv.com/ - 适合开发人员和设计人员的站点构建工具。

https://readymag.com/ - 在线数字出版制作平台,提供最强大,多功能,视觉上令人愉悦的网上设计工具。

https://sparkleapp.com/ - 无需代码快速建立网站

https://studio.design/ - 从头开始设计,实时协作并发布网站。

https://tilda.cc/ - 借助Tilda模块免费创建网站

https://www.wix.com/ - 制作免费网站与网页。选一个绝美的免费网页与网站范本,并用Wix网站帮手自订一切,完全不用编码技能。

https://webflow.com/ - 响应式网页设计工具,CMS和托管平台

设计版本控制

开发人员长期以来积极使用版本控制工具,可能是自2005年以来(Git首次发布)。对于开发团队来说,使用版本控制系统并不是一件容易的事,而设计版本控制系统最近才出现。这个市场正在快速发展,我们期望在设计师的版本控制中看到更多:

https://www.abstract.com/ - 为设计师和设计团队打造的版本控制工具

http://folioformac.com/ - 一款macOS平台的简单易用的可视化Git客户端工具,让我们在Mac电脑上创建和共享设计版本,并使用任何标准Git服务器(如Github.com或Gitlab.com)自动使其与您的团队保持同步,保留所有版本的完整历史记录,并允许您轻松创建和恢复特定版本,软件会存储所有版本的预览,因此找到合适的版本非常快。

https://kactus.io/ - 一个针对设计人员的真正版本控制工具(如Git)它将整个git流程带到sketch包括:分支,拉请求,团队协作(您可以在同一个文件上工作并自动合并更改)等。

https://plantapp.io/ - Mac应用程序提供Sketch插件,为设计师和团队提供完整的版本控制。

https://relay.graphics/ - 将最新设计文件从Figma直接推送到您的代码库(尚未发布)。

https://versions.sympli.io/ - 为设计人员提供的版本控制工具,具有视觉差异、合并和冲突解决功能。适用于GitHub,Bitbucket,GitLab和Azure Devops。

体验监测

倾听用户的意见非常重要,但看到实际使用情况更为重要。对于这些,您需要安装不同的分析工具,体验监控软件和用户行为应用程序。只需对用户数据使用这些分析解决方案:

https://amplitude.com/ - 了解您的用户,快速发布更好的产品体验,拓展业务。

https://www.optimalworkshop.com/chalkmark - 提供多个线上调研工具和数据追踪工具。在实施之前快速获得设计反馈,从而提高客户转换率。

https://usefathom.com/ - 提供简单实用的网站统计数据,无需跟踪或存储用户的个人数据。

https://www.fullstory.com/ - 在一个功能强大、易于使用的平台上捕获所有客户体验数据的应用程序。

https://analytics.google.com/analytics/web/ - 衡量广告投资回报率并跟踪您的网站和应用。

https://heapanalytics.com/ - 自动捕获每个Web,移动和云交互,然后追溯分析您的数据,而无需编写代码。

https://www.hotjar.com/ - 了解访问者如何真正使用您的网站并收集用户反馈。

https://www.inspectlet.com/ - 记录访问者在使用您网站时的视频,以便您可以看到他们所做的一切。

https://www.logrocket.com/ - 查看用户在您的网站上执行的操作,帮助您更快地修复错误并解决问题。

https://mixpanel.com/- 深入了解所有以用户为中心的数据,以便根据客户使用产品或网站的方式做出更明智的决策快速改进产品。

https://mouseflow.com/ - 记录鼠标光标移动。

https://www.pendo.io/ - 衡量并提升其应用程序的用户体验。

字体工具

字体通常用于使网络成为更美丽的地方。它是任何设计的重要组成部分。在本节中,您将找到允许您管理和使用字体的字体生成器和字体查找工具:

https://fontba.se/ - 字体管理变得简单。

https://fontpair.co/ - 一个简单的工具,可以帮助您将Google字体组合在一起。

https://fontface.ninja/ - 浏览器扩展,用于发现在任何网站上使用的字体。

https://fonts.adobe.com/fonts - Adobe的数千种漂亮字体。

https://fontspark.app/ - 一个简单的工具,可以帮助设计人员快速找到他们项目的最佳字体。

https://www.fontsquirrel.com/fonts/acherus-grotesque - 下载广泛收藏的免费字体。

https://fonts.google.com/ - google字体。

https://google-webfonts-helper.herokuapp.com/ - 免费开源自行托管Google字体的方式。

https://rightfontapp.com/ - 字体管理应用程序,帮助预览,同步,安装和组织字体通过iCloud,Dropbox或谷歌硬盘。

http://sansforgetica.rmit/ - 一种科学设计的可下载字体,帮助你记住学习笔记。

https://typefaceapp.com/ - 字体管理器,通过实时字体预览和灵活标记改进您的设计工作流程。

https://wakamaifondue.com/ - 一个免费的在线工具,可以轻松解锁字体的全部潜力。这是一个回答“我的字体能做什么?”的问题的工具。

https://webfontapp.com/ - 创建和维护自定义SVG图标字体,创建一个共享的图标库。

您还可以使用“ 设计系统工具”部分中提到的“指定”处理字体。

渐变工具

你可以看到渐变色到处都是 - UI,品牌,插图,排版。通过使用两种或更多种不同的颜色来绘制一个元素,同时逐渐淡化它们,从而创建渐变。它可能看起来像一个令人难忘,清新和独特的颜色。要为您的设计制作此类渐变,请使用这些渐变调色板。

http://www.colinkeany.com/blend/ - 创建和自定义漂亮的CSS3渐变。

https://www.colorffy.com/- 获取css,图像,ui预览或创建自己的渐变。

https://mycolor.space/ - 下一个项目的完美配色方案!生成漂亮的调色板。

https://colorspark.app/gradient - 帮助设计师找到独特的颜色和醒目的渐变组合。

https://coolbackgrounds.io/ - 探索一系列精选酷背景,您可以添加到博客,网站中。

https://webkul.github.io/coolhue/ - 为你的下一个超级惊人的作品精心挑选的渐变调色板

https://cssgradient.io/ - 一个免费的css渐变生成器工具,这个网站可以让你创建丰富多彩的渐变背景。

https://www.eggradients.com/ - 一个颜色收集页面,包括12种不同颜色的阴影。

https://www.grabient.com/ - 用于生成Web渐变的漂亮简单的UI。

https://cssgradient.io/gradient-backgrounds/ - 从渐变网站列表集合中发现最佳渐变背景。

https://gradienthunt.com/ - 一个免费开放的色彩灵感平台,拥有数千种时尚手工制作的色彩渐变色。

http://gradientsguru.com/ -UI设计混合模式背景图像和漂亮的背景渐变

https://htmlcolors.com/ - 简单易用的渐变生成器

https://uigradients.com/ - 为设计师和开发人员精心挑选的美丽颜色渐变集合。

https://webgradients.com/ - 180个线性渐变的免费集合

图标工具

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

http://animaticons.co/ - 提供了不少优质精致、可自定义化的动态 GIF 图标让用户免费下载

http://digitalnomadicons.com/ - 下一个项目的生活方式图标和表情包。25个高分辨率平面图标。

https://interface.market/essential/basic-pack - 创建完美形状的图标来满足您的需求。适用于小型和大型尺寸。

https://feathericons.com/ - 每个图标都是在24x24网格上设计的,强调简洁性,一致性和可读性。

https://www.flaticon.com/ -1593000+矢量图标在SVG,PSD,PNG,EPS格式或图标字体显示。

https://fontawesome.com/ - 网络上最受欢迎的图标集和工具包,也是开源的。

http://fontello.com/ - 一种快速将矢量图像打包为网络字体的免费开源的工具

https://iconscout.com/ - 免费高质量图标库。

https://www.iconfinder.com/ - 免费图标搜索引擎,收录大量丰富的图标,在 Iconfinder 可找到适合各种设计配色的图案

https://www.geticonjar.com/- 一个可以帮助设计师搜索、收集、管理的素材工具

https://iconmonstr.com/ -免费简约素材图标下载站是一个提供免费的PNG/SVG格式的素材下载站点。

https://iconstore.co/ - 一个提供一流的免费图标包素材的站点,汇集了很多优质的icon素材,设计师可以自由下载使用

https://iconsvg.xyz/ - 简化查找和生成项目常用图标的过程的工具。

https://icons8.com/icons - 免费的iOS,Android和Windows风格的图标。

https://www.ikonate.com/ - 自定义,调整和下载免费矢量图标。

https://illustrio.com/ - 一个更智能的图标库。「100% 免费!」100% 可自定义的免费图标库

https://ionicons.com/ - 精心制作的开源图标。

https://materialdesignicons.com/ - 免费材料设计图标由开源贡献者实现。

https://icons.pixsellz.io/ - 免费收集1000多个流行图形工具的图标。

https://thenounproject.com/ - 免费提供高度可辨识符号图标

https://nucleoapp.com/ - Mac和Windows应用程序。用于收集,自定义和导出所有图标

https://simpleicons.org/ - 流行品牌的免费SVG图标。

http://emoji.streamlineicons.com/ - 850 +矢量表情符号的免费集合。风格的灵感来自日本的“卡哇伊”(可爱)风格。

http://www.svgs.us/ - SVG图标管理工具。

https://tilda.cc/free-icons/ - 下载登陆页面的免费图标。超过700个矢量图标免费下载。

https://iconscout.com/unicons -一个超过1000+个矢量图标素材的网站,提供免费下载使用,即使放大缩小也不影响解析度,提供SVG向量图示和图示字型(Iconfont)格式,使用者可以自订每个图示大小、颜色和颜色。

https://visualpharm.com/ - 免费的SVG图标

https://www.xicons.co/ - 免费(做你想做的任何)矢量图标。每10天更新一个新的图标包。

https://www.zwicon.com/ - 手工制作的图表集。

您还可以使用“指定”处理图标,“ 设计系统工具”部分中提到了这些图标。

插图

插图可用于您的目标网页,博客文章,应用内容或电子邮件广告系列。它们使您的设计生动有趣。虽然绘制好插图是熟练的平面设计师的任务,但您可以从我们社区中非常善良的人那里获取免费的SVG图像和插图:

https://absurd.design/ - 为您的项目提供免费的超现实主义插图。

https://www.drawkit.io/ - 一个完全可定制的SVG插图集合

https://lukaszadam.com/illustrations-免费矢量艺术插图和图标。它们可用于个人和商业用途。

https://gallery.manypixels.co/ - 免版税插图

https://icons8.com/ouch - 矢量插图来对你的项目进行分类。免费用于个人和商业用途。

https://undraw.co/ - 漂亮的SVG图像集合。

信息架构

信息架构可帮助设计人员组织和构建网站,移动应用程序和其他软件内的内容。因此,用户将了解产品功能,并将找到所需的一切。这些信息架构工具应该允许您创建可视站点地图并改善您的网站内容结构:

https://dynomapper.com/ - 使用可视化站点地图,内容清单,内容审核,内容规划,每日关键字跟踪和网站可访问性测试来组织网站项目。

https://www.omnigroup.com/omnigraffle/ - 使用这款功能强大且易于使用的应用程序,创建漂亮的图表和设计。

https://www.optimalworkshop.com/optimalsort - 卡片分类工具,可让您了解人们如何在UI中对内容进行分类。

https://www.optimalworkshop.com/treejack - 上传您提议的站点地图,以查看用户在网站的行为。

logo设计

徽标是您品牌标识的起点。它反映了产品使命,功能和品牌信息。理想情况下,徽标会在您的产品和用户之间建立强大的联系。标志设计是一门艺术,以及许多其他设计学科。使用正确的徽标设计工具,这项技术可以更快地完成。

https://www.designevo.com/ -一款专业制作Logo的免费软件。无须任何设计经验,即可快速的制作出满足你需求的Logo作品。内置8000+精美的Logo模板,数百万图标和100+字体资源任你选择

https://www.freelogodesign.org/ - 在几秒钟内创建令人惊叹的专业logo。

https://www.graphicsprings.com/ - 在线免费Logo设计为用户提供定制服务。众多图形、字体、颜色和矢量形状可供挑选,使Logo设计拥有无限可能性。

https://www.logodesignteam.com/ - 提供价格实惠的专业定制logo设计和品牌设计服务。

https://logojoy.com/ - 基于人工智能即时生成独特的创意logo。

https://logolab.app/home - 一个在线工具,用来帮你在设计好 Logo 之后,检测其可用性,包括颜色、尺寸、作为应用图标、和其他 logo 在一起,以及无障碍化等多个方面的实际效果。

https://www.ucraft.com/free-logo-maker - 快速制作免费logo

https://www.designhill.com/tools/logo-maker - 只需几分钟即可生成1000个独特的logo,无需专业设计。

https://logomakr.com/- 免费设计logo,从数百种字体和图标中选择

https://www.logomyway.com/ - 从全球创意设计师的600种自定义logo设计中进行选择。

http://thelogopackage.com/ - 在5分钟内自动为您的客户导出和打包数十种logo变体和文件类型。

https://brandmark.io/logo-rank/ - 上传您的logo,根据一系列客观指标进行评分。

https://wizlogo.com/ - 使用专业设计师支持的简单且价格合理的工具创建logo。

您还可以使用UI设计工具中提到的Adobe Photoshop,GIMP,Inkscape,Krita和Vectr进行徽标设计

样机工具

模型是表示产品的直观方式。虽然线框主要代表产品的结构,但是模型显示产品的外观。这些模型工具可帮助您创建模型,线框,图表和原型并进行协作:

https://artboard.studio/ - 世界上首个主要关注产品模型的在线图形设计应用程序。

https://cleanmock.com/ -在线样机神器,不用到处搜罗样机资源、不用浪费时间改来改去,点开即用,三秒生成各种展示风格,一键下载,效率神器!

https://craftwork.design/ - 免费和优质的高品质数字产品,使您的工作更快捷,更轻松。

https://facebook.design/devices - Facebook Design的资源下载区可以下载很多设备模型。

https://dimmy.club/ - 一个科技产品样机生成网站,可以将屏幕截图、应用程序画面等图片放入预先设定好的图库设备中显示,让它看起来很自然。

https://frrames.com/ - Frrames模型是为您的理想演示而精心制作的响应窗口模型。

https://www.ls.graphics/- 免费和高级模型,UI / UX工具,繁忙设计师的场景创建器。

https://www.mockflow.com/- 制作产品原型的在线工具

https://www.mockupworld.co/ - 一个提供免费Mockup原型素材的网站

https://mockupsforfree.com/ - 免费设计资源,图形和网页设计师的PSD文件。

https://mockuuups.studio/ - 一款Mac上的原型设计软件,这款软件拥有各种优质的PSD展示模型。

https://www.mock.video/ - 通过在视频中添加设备框架即可立即创建模型。

https://moqups.com/ - 图表和原型实时创建和协作。

https://pixelbuddha.net/- 为网页设计师和开发人员提供免费和优质的高质量资源。

https://store.ramotion.com/ - 为Sketch和Photoshop精心设计的Apple和Android模型。

https://www.rotato.xyz/ - 为您的应用程序设计制作动画3D模型。

https://www.screely.com/ - 方便快捷的网页展示在线生成器。

https://www.screenspace.io/ - 用于动画设计师的3D设备视频。

https://smartmockups.com/ - 只需点击几下即可创建令人惊叹的产品模型。

https://shotsnapp.com/ - 为您的作品创建精美的设备样机演示文稿。

https://themockup.club/ - 适用于Photoshop,Sketch,Figma和InVision Studio的最佳免费设计模型目录。

http://threed.io/ - 在浏览器中生成自定义3D设备模型。

https://www.uistore.design/- 为Sketch,Figma,Adobe XD,InVision Studio,Photoshop,Illustrator CC提供200多种免费精心挑选的设计资源。

https://ui8.net/category/freebies - 史诗般的设计资源免费赠送

https://mockups.kkuistore.com/ - 免费Sketch,Figma和Photoshop的演示模型集合。

无码工具

随着“无代码工具”的兴起,拥有笔记本电脑的每个人都可以构建并启动项目。这些工具可帮助设计人员和制造商创建网站,应用甚至游戏。没有代码工具可以自动执行日常任务,并且可以在没有开发背景的情况下使用。

https://bubble.is/ - 无需编写代码或聘请工程师团队即可构建和托管Web应用程序。

https://carrd.co/ - 简单,免费,完全响应的单页网站,几乎可以满足任何需求。

https://coda.io/ - 一种新型文档,它将文档的灵活性,电子表格的强大功能以及应用程序的实用性融合到一个新的画布中。

https://pagexl.com/ - 一个简单的单页网站构建器,用于快速创建登录页面。

https://www.remove.bg/ - 基于人工智能的抠图神奇

https://tryretool.com/- 为您提供构建模块,您可以更快地构建工具。

https://www.sheet2site.com/ - 无需编写代码即可从Google表格创建网站。

https://www.shopify.com/ - 一个让用户自主管理在线商店的平台,三分钟之内搭建起一个独立的电商网站,并且可以将你的商品销售到全球。

https://thunkable.com/ - 一个拖放工具,任何人构建原生移动应用程序。在 Thunkable 上,用户通过拖放组件并将它们与语言块连接在一起来构建 APP,而不用编写代码,且只需构建一次应用程序,就可以在 IOS 和 Android 平台上同时运行。

像素艺术工具

像素艺术是一种数字艺术形式,其中将颜色应用于各个像素以创建图像。像素艺术可用于创建从错综复杂的场景和游戏背景到角色设计或表情符号的所有内容。如果您对尝试感到好奇,请检查macOS和Windows的像素艺术软件:

https://www.aseprite.org/ - 动画精灵编辑器和像素艺术工具。

https://github.com/gmattie/Data-Pixels - 以编程方式创建像素艺术。包括DataPixels.js和Data Pixels Playground桌面应用。

https://gitlab.com/GrafX2/grafX2- 一款开源的像素画软件,非常适合绘制复杂的插画风格的像素作品

https://graphicsgale.com/us/ -一款像素级动画制作软件。你可以用它修饰照片也可以用来画图。与其它位图编辑器不同,GraphicsGale 可以看着预览制作动画。

https://jackschaedler.github.io/goya/ - 基于ClojureScript和Om构建的像素艺术编辑器。

https://make8bitart.com/ - 一个开源基于浏览器的像素艺术绘图工具。

https://www.piskelapp.com/ - 动画精灵和像素艺术的在线编辑器。

https://www.pixelartcss.com/ - 由React驱动的像素艺术动画和绘图网络应用程序。

http://app.poxi.rocks/ - 一个平面像素艺术编辑器。

https://pyxeledit.com/ - 以使用乐趣和便于创作方格贴图,关卡地图和动画为设计宗旨的像素画编辑器。

原型工具

原型是所提出的解决方案的简单实验设计。它应该有助于以快速和廉价的方式测试想法,设计假设和假设。原型设计工具使设计人员和客户能够了解产品在现实世界中的运作方式,并在此解决方案上进行协作。许多现代原型制作工具可用于线框图,原型设计和协作:

https://www.meetalva.io/ - 免费开源工具使用代码组件创建原型。

https://www.axure.com/ - 一款专业的快速原型设计工具

https://balsamiq.com/ - 一种软件工程中快速原型的建立软件,可以做为与用户交互的一个界面草图。

https://www.build.me/ - 一套完整的基于云的工具,用于设计和构建企业应用程序。

https://creolabs.com/ -神一般的原型设计软件,将开发语言、IDE和UI框架完美结合,帮你创造更好的原生应用。

https://www.invisionapp.com/ - 在线产品原型交互设计协作软件

https://www.flinto.com/- 一款Mac应用程序,用于创建应用程序设计的交互式动画原型。

https://framer.com/ - 可视化设计逼真的交互式原型的工具。

https://www.apple.com/keynote/ - 用于创建演示文稿的内置Mac应用程序,也可用于快速原型设计(请参阅Apple设计人员如何使用它来验证设计概念)。

https://marvelapp.com/ - 一款免费的原型设计 Web 应用,可以进行网页设计和移动端的UI设计。

https://maze.design/ - 一种面向设计师和开发人员的工具,可为您的Invision原型提供可操作的KPI的分析结果。

https://pencil.evolus.vn/- 原型制作工具,包含许多内置组件,人们可以轻松安装和使用这些组件在流行的桌面平台中创建模型。

https://principleformac.com/ - 可以轻松设计动画和交互式用户界面。

https://www.protopie.io/ - 是一款以移动app设计师为出发点,连接产品经理和开发者的简易高端的APP原型设计工具

https://proto.io/ - 一款专用的手机原型开发平台,支持全交互式的移动程序的原型。

https://uizard.io/ - 一个可将帮助不懂写代码的用户将手绘线框图自动转化成原型图和前端代码。

https://www.uxpin.com/ - 在线UI/UX设计工具,支持团队协同,功能强大。

您还可以使用“ 设计工具”部分中提到的Figma,Adobe XD,Sketch和InVision Studio进行原型设计

真棒 - 设计 - 工具

截图软件

截屏是设计和开发工作流程中的典型任务。因此,这些免费和功能齐全的截图应用程序可以帮助您轻松捕获屏幕。某些屏幕截图仅限macOS,而其他屏幕截图仅支持OS:

https://www.techsmith.com/video-editor.html - 一个非常著名的优秀屏幕、文本和视频捕获、编辑与转换软件。

https://getcleanshot.com/ - 截图录屏注图终结者。一款集截图、录屏、注图为一身的图片处理软件,它的最大特点就是可以在截屏(全屏)时忽略你桌面上的文件图标,直接截取全屏,窗口,区域屏幕的视频或图片,而且当你在截屏的时候还可以提前设定好个性化壁纸,而不需要每次都用系统默认的壁纸背景。

https://www.getcloudapp.com/ - 一款在线服务,用来分享图片、视频、文本、链接等等任何你想分享的文件,只需将文件拖到菜单栏图标上就完成了上传、复制链接的过程,然后就可以分享链接给朋友了。

https://giphy.com/apps/giphycapture - 捕获屏幕的一部分并导出为gif或mp4。

https://getgreenshot.org/- 截取所选区域,窗口或全屏的屏幕截图。

https://getkap.co/ - 开源屏幕录制软件,可选择导出到GIF,MP4,WebM和APNG。

https://itunes.apple.com/us/app/lightshot-screenshot/id526298438 - 快速屏幕录制。

https://itunes.apple.com/us/app/monosnap/id540348655?mt=12 - 创建屏幕截图,注释并将其上传到云端。

https://obsproject.com/ - 用于视频录制和直播的开源软件。

https://support.apple.com/quicktime- 可用于录制屏幕的视频播放器。

http://www.telestream.net/screenflow/overview.htm- 适用于Mac的视频编辑和屏幕录制软件。

https://www.thnkdev.com/Screenie/ - 过滤和搜索图像,更改屏幕截图文件类型。

https://www.screentogif.com/ - 记录部分屏幕的gif。仅适用于Windows。

https://getsharex.com/ - 屏幕捕获,文件共享和生产力工具。

https://support.microsoft.com/en-us/help/13776/windows-use-snipping-tool-to-capture-screenshots- Windows免费截图工具。

http://snappy-app.com/ - 卡片式截屏工具。Snappy 截取的内容被官方称为 snaps,这张小卡片是全局置顶的,且允许你标记、调整大小、改变透明度等。它作为截取屏幕信息、可视化笔记、多窗口信息参考引用工具可以说是完美的。当然,在你的实践过程中,你也许可以发现更多富有创意的使用方法。

https://teampaper.me/snap/ - 截取所选区域的屏幕截图。

素描工具

有时您只需要一支铅笔和一张纸即可开始创建您的应用或网站。因此,您可以在这里找到具有优质草图表模板的在线草图绘制工具,以加快您的创作过程:

https://zurb.com/playground/responsive-sketchsheets - 提供响应式预设计模板。自动调整其布局适应任何屏幕尺寸。

https://sketchsheets.com/ - 一个开源项目,致力于为线框设计提供最新设备和平台的免费可打印模板。

https://sneakpeekit.com/- 是网页设计师,开发商或图形设计师的必备工具之一,设计师可以通过该平台提供的大量的模版来设计网页草图并且可以快速的打印出来。

https://sketchize.com/ - 只需选择适合您项目的任何草图,打印出来并开始绘制您的梦想。

您还可以使用UI设计工具中提到的Sketch进行一些草图绘制。

声音设计

声音设计是为网站,应用,电影,游戏或任何其他产品创建音景的艺术。声音具有改变人们与您的产品连接方式的巨大潜力。一些声音设计软件非常先进,可以主要由声音设计师使用,而其他人则适合初学者。

https://appsounds.pro/ - 适用于应用,游戏和任何产品的UI声音包。

https://audiojungle.net/ - 来自音乐家和音响工程师社区的836,206首曲目和声音。

https://www.bensound.com/ - 免费下载创意公共音乐,免版税音乐

https://freesound.org/ - Creative Commons Licensed声音协作数据库。浏览,下载和分享声音。

https://icons8.com/music - 为您的视频下载免费的背景音乐。

https://cycling74.com/products/max/ - 使用虚拟跳线连接对象以创建交互式声音,图形和自定义效果。

http://reaper.fm/ - 收割者音频编辑工具是一款强大的多音轨录制和音频编辑软件 ,提供了灵活且易用的界面,对音频爱好者和专业人士同样适合

https://sonic-pi.net/ - 现场编码音乐合成器。

https://soundkit.io/ - 一个UI声音库,专为满足您的所有界面需求而设计。

https://uisounds.prototypr.io/- 通过示例学习用户界面的声音设计。

https://wistia.com/resources/music - 下载一些免费的背景曲目,为您的视频增添活力和情感。

https://www.wowa.me/ - 为YouTube视频,播客和应用下载免版税音乐。无版权的CC0。灵感来自Unsplash。

https://www.youtube.com/audiolibrary/music - 免费下载音乐。

免费图库工具

需要适用于iOS应用或新横幅的高质量照片吗?您可以随时自己拍摄或从照片网站借阅。幸运的是,有数百张漂亮的免费图片和免版税图片可用于任何项目:

https://burst.shopify.com/ - 免费图片网站可商业用途。

https://duotone.shapefactory.co/ -这个神器能让你一键无痛生成酷炫的双色画风!完全不用开 PS!

https://foodiesfeed.com/ - 数以千计的高分辨率免费食物图片。

https://freephotos.cc/ - 免费商业照片。

http://freestocks.org/ - 高质量的免费照片全部在Creative Commons CC0下发布。

https://gratisography.com/ - 收集免费的高分辨率图片。

https://jaymantri.com/ - Jay Mantri 是一位自由摄影师,擅长于拍摄自然风景和人文地理类的摄影作品,鉴于推广自己的摄影技巧和作品,创建了以知名名称命名的图片网站,在这里你可以欣赏到很多优秀的摄影作品,大图、高分辨率。每周更新七张图片,你可以随意使用。

https://kaboompics.com/ - Kaboompics 连新闻媒体都爱用的免费图库!5000 张相片自由下载可商用

https://landingstock.com/-可用于落地页的免费图片合集

https://www.lifeofpix.com/ - 免费的高分辨率照片,由LEEROY团队创建。

https://magdeleine.co/ - 免费高品质的照片。

https://photos.icons8.com/creator - 不用再搜索图库,需要图片的话就自己动手做吧!

http://mmtstock.com/ - MMT 摄影师自创图库,CC0 高画质相片免费下载每周更新

https://nos.twnsnd.co/ - 免费复古照片公共档案库

https://www.pexels.com/ - 提供海量共享图片素材的网站,每周都会定量更新。

https://picography.co/ - 免费高清摄影图片分享网是一个有少数专业摄影师共同维护的摄影图片分享网站,提供免费高清晰去的照片。

https://pixabay.com/ - 全球顶级高清摄影图片网站, 免费版权商用图片素材

http://picjumbo.com/ - 在线免费高质量商用素材网是一个叫维克多的人创办的这个基于网站设计的素材站点,因为每一个设计师都需要高质量的图片素材,这里提供分辨率为3888像素的全质量图片资源。

https://pngtree.com/ - 提供免费下载透明背景png图片、高清背景图、高质量设计模板、艺术字效。

https://pxhere.com/ - 世界著名的免费摄影图库

https://www.reshot.com/- 一个致力于分享免费高清图片资源的站点

https://shotstash.com/ - 上万张免费高分辨率CC0照片和视频。

https://skitterphoto.com/ - 一个加入了CC0授权的公共领域图片资源库,该网站上所有的图片都是完全免费下载使用,可以应用于任何设计项目

http://startupstockphotos.com/ - 一家专门提供苹果产品相关图片的网站,图片质量都非常高,可以随意使用。如果你要写一篇和苹果产品相关的文章,你可以在这里找到满意的图片。

https://stocksnap.io/ - 大量免费图片和高分辨率图片。

https://www.splitshire.com/-一家免费分享高清摄影图片的网站,图片的类别很丰富,非常适合平面设计师使用。另外该网站还提供了一些视觉效果非常棒的视频。首页的 TopBestPhoto 效果很棒!

https://uifaces.co/ - UI头像图库。有丰富的内容,和多样的筛选功能。

https://unsplash.com/ -免费超高清图片素材网站, 收录的图片/照片作品均非常精美 (主要是摄影作品为主),而且分辨率也极高,图片质量上乘。

http://www.zoommyapp.com/- 帮助您找到适合您的创意产品或灵感的精美免费图片。

股票视频

如果您使用视频内容,您将享受这些高品质,手工制作的视频内容。您可以在下方找到许多优质和免费的视频网站,您可以在自己的网站,广告系列或社交媒体中使用这些网站:

  • Coverr - 您的主页的美好,自由股票录影镜头。free.svg
  • Vids的生活 - 提供免费的股票视频,剪辑和循环。free.svg
  • Mazwai - 大量免费创意公共高清视频剪辑和片段。free.svg
  • Mixkit - 非凡的免费高清视频。供您使用,完全免费。free.svg
  • 动作场所 - 可以用于项目的精美素材集合。free.svg
  • - 它拥有超过150万免版税的股票视频和照片由他们的创作者社区共享。free.svg
  • Pexels视频 - 可以轻松找到您的网站,促销视频或其他任何内容的免费素材。free.svg
  • Videezy - 即时下载数百万免费和优质的素材和动态图像。
  • Videvo - videvo提供大量高清视频剪辑,动态图像和免费素材。free.svg
  • 123RF - 超过100,000个每日新内容和24/7在线支持。

设计学习资源工具

https://www.designbetter.co/ - 发现世界顶级设计团队和领导者的最佳设计指南,发布了一系列设计白皮书。

https://designcode.io/ - 关于最佳工具和设计系统的完整课程。

https://designerup.co/ - 一系列自学课程和指导,帮助您掌握产品设计(UI / UX)。

https://lawsofux.com/ - 新开微内容系列,Laws of UX,用户体验(设计)定律,由Lawsofux.com整理,每期一句话简述相关定律或设计原则,附送漂亮的海报卡片。

https://learnux.io/ - 学习UI和用户体验工具的完整方法。

https://sketchmaster.com/ - 专业学习Sketch的视频培训课程集合。

营销工具

https://www.canva.com/ - 使用Canva在线平面设计工具,轻松创造精彩设计。海量海报,邀请函,微信图片,Banner,简历等设计模板,上百款中文字体以及百万张版权图片素材全部免费使用。

https://crello.com/- 一款功能强大、素材丰富的海报设计工具。Crello自称为适合每一个人的平面设计工具。

https://socialsizes.io/- 为设计者提供用于社交媒体上图像和视频内容的最佳尺寸。

UI设计工具

2019年最好的UI设计工具是什么?您可以选择以下任何工具,它将允许您执行许多设计任务 - 站点或移动UI,线框,原型,动画,徽标。这些是用于UX和UI设计人员的优秀且功能齐全的工具:

https://www.adobe.com/products/xd.html - 一站式UX/UI设计平台,在这款产品上面用户可以进行移动应用和网页设计与原型制作。

https://affinity.serif.com/en-gb/designer/ - 一款专业的设计绘图工具,适用于mac OS windows操作系统,主要用于矢量图形的绘制,适用于图标、UI 设计、网站设计、宣传素材等图像的制作,具有较强的易用性,操作也十分方便。

https://www.cleverbrush.com/ - 一个基于浏览器的在线矢量编辑器和数字发布工具,可以作为JS组件集成到页面。

https://www.figma.com/ - 一个基于浏览器的UI设计工具,并具有实时协作功能

https://www.gimp.org/ - 免费的开源图形设计软件。

https://designer.io/- 一款免费的矢量设计应用程序,适用于macOS,Windows,Linux,ChromeOS和浏览器。

https://www.adobe.com/products/illustrator.html -一款非常强大的矢量图处理工具。

https://inkscape.org/- 支持 Linux,苹果和视窗桌面系统的专业的高质量的矢量图像编辑器。

https://krita.org/en/ - 一种免费的绘画和图形设计软件,被认为是Adobe Photoshop的一个很好的替代品。

https://www.photopea.com/ - 一种基于浏览器的免费图形设计应用程序,可作为Photoshop替代品。

https://www.adobe.com/products/photoshop.html - 由Adobe Systems开发和发行的图像处理软件。

https://studio.pixelixe.com/ - 专为营销人员,博主和小型企业设计的图形设计工具,可在几分钟内创建令人惊叹的图形图像或静态网页。

https://www.sketchapp.com/ - 为Mac构建的设计工具包。

https://www.invisionapp.com/studio - 被称之为世界上最赞的界面设计工具。

https://vectr.com/- 一个简单的Web和桌面跨平台工具,可以轻松直观地创建矢量图形。

用户流工具

用户流程是用户为实现有意义的目标而采取的一系列步骤。这是规划客户旅程路径和改善用户体验的快速方法。因此,如果您需要制作用户流程图,用户流程图或站点地图,请查看以下工具:

https://www.draw.io/ - 一个强大简洁的在线的绘图网站,支持流程图,UML图,架构图,原型图等图标。

https://flowmapp.com/ - 一个在线规划工具,用于创建用户流程和可视化站点地图,帮助你有效地为网站设计和规划更好的用户体验。

https://docs.google.com/drawings/ - 免费创建图表和图表; 全部在Google文档中。

https://www.lucidchart.com/ - 在线流程图绘制和协作应用平台,Lucidchart支持数百种模板与范例,包括流程图、UML、ERD、线框 / 实体模型、网络图、业务流程模型、组织结构图、思维导图以及网站地图等等,还有一点就是它还支持从Microsoft Visio 直接导入文档。

https://mindnode.com/ - 令创建思维导图更轻松。思维导图用一个可视化的表现来表达您的想法,从一个中心思想开始,然后再延伸发展。

https://ninjamock.com/ - 线框和用户流在线工具。链接您的视图并创建逻辑流程原型。

https://www.omnigroup.com/omnigraffle/ - 用于macOS和iOS的图表和数字插图应用程序。

https://overflow.io/ - 一款用户流程展示工具,能够帮助各位设计师去更优雅的讲故事。

https://sketch.systems/ - 使用交互式状态机的ui和流程设计。

https://uxmisfit.com/squid/ - 只需几分钟即可在Sketch中创建漂亮的用户流。

https://www.websequencediagrams.com/ - 专门为画时序图而准备的,它的特点就是使用简单的编码来控制时序图的各個细节,非常轻便,非常简单,很容易上手。

https://whimsical.co/ - 易于创建流程图,线框和便签。

http://wireflow.co/- 免费,在线和开源工具,用于创建漂亮的用户流程原型。

https://www.xmind.net/zen/ - 一款全新的思维导图软件。融合艺术与创造力,让思维清晰可见。

https://www.yworks.com/products/yed - 用于制作图表的免费桌面工具。可用于各种用例。

https://coggle.it-一款简约漂亮的思维导图工具,轻量级,需要 Google 账号,可导出 PDF、PNG、TXT 格式,支持多人协作,嵌入网页等等。

用户研究工具

用户研究通过各种定性和定量方法(访谈,观察,表格等)帮助您了解用户行为,需求和动机。这些用户研究工具对您有用:

https://calendly.com/ - Calendly帮助您安排会议,而无需来回电子邮件。

https://crowdsignal.com/ - 收集,组织和分析来自各种来源的数据,包括社交媒体和移动设备。

https://www.feedbacklite.com/ -收集高质量的客户反馈,旨在改善您的网站性能并提升客户参与度。

https://www.gotomeeting.com/en-gb - 一种简单,功能强大的网络会议服务。

https://lookback.io/ -面向移动产品易用性测试领域,为开发者提供SDK录制测试用户的操作视频以供分析

https://www.optimalworkshop.com/reframer- 一个在线的可用性测试网站,只要通过在线的方式就可以完成实验的所有环节,大大降低了进行可用性实验的难度和复杂度。,

https://www.surveymonkey.com/- 全球最受欢迎的免费线上调查问卷工具

https://www.typeform.com/ - 一个功能专业、界面美观、互动操作有趣的线上问卷调查服务。

https://www.wufoo.com/ - 一款专业的线上表单产生器,当你透过Wufoo制作一个表单后,只需要透过网址来发送或是内嵌到网站里,其他所需的元件(包含资料库、后台和程式等等)都会被托管在Wufoo平台,简单来说,你甚至不用具备任何技术,用滑鼠拖曳就能够完成这些复杂的工作。

https://www.yesinsights.com/ - 无需编程,快速制作市场调查。

https://userbitapp.com/ - 提供实时研究工具的平台。

https://www.userinterviews.com/ - 得到目标用户的有效反馈,做出更好的决定

真棒 - 设计 - 工具

可视化调试工具

https://logrocket.com/ - 一种记录用户在您网站上执行操作的工具,以便您可以更快地重现错误并修复问题。

https://getpixelsnap.com/ - 屏幕内容测量工具

https://github.com/GoogleChromeLabs/ProjectVisBug - 一个允许设计师直接在浏览器对 Web 页进行设计调整的 Chrome 扩展插件。

https://www.canvasflip.com/visual-inspector/ - 用于网站反馈和修复设计错误的协作工具。

线框工具

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

https://balsamiq.cloud/ - 产品设计师绘制线框图或产品原型界面的利器。

https://cssgrid.cc/css-grid-builder.html - 在任何网页上:可视化调试、快速检查样式、点击和拖动元素等等。

https://www.gliffy.com/ - 用于创建框架,UML图表,流程图,线框图等的工具。

http://gridzzly.com/ - 一款纸张图案在线设定和打印的工具,支持点、线、正方形、横线、六边形等不同图案的设置并打印到A4纸张上来,同时还有标尺来测量长度。

https://grid.layoutit.com/ - CSS Grid&Bootstrap的界面构建器。

https://pidoco.com/en - 一款基于Web的原型设计软件,用于快速创建可点击的线框图。

https://wireframe.cc/ - 一个简单的线框工具。

https://whimsical.co/wireframes/ - 一款在线流程绘制工具,只需要一个浏览器就随时随地绘制精美的流程图。除了流程图(Flowcharts)功能,官方还推出了线框图(Wireframes)、便利贴(Sticky Notes)功能和脑图(Mindmap)功能。

https://1200px.com/ - 1200px网站网格布局系统工具

三维建模软件

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

https://www.autodesk.com/products/fusion-360/overview -集成了CAD,CAM和CAE软件。将设计,工程和制造统一到一个平台中。

https://www.blender.org/- 免费开源3D创建软件。

https://www.freecadweb.org/ - 免费开源多平台3D参数化建模器。

https://www.autodesk.com/products/maya/overview - Autodesk Maya是美国Autodesk公司出品的世界顶级的三维动画软件,应用对象是专业的影视广告,角色动画,电影特技等。

https://www.onshape.com/-Onshape是一个计算机辅助设计软件系统,通过软件即服务模型在Internet上提供。它广泛使用云计算,在基于Internet的服务器上执行计算密集型处理和渲染,用户可以通过Web浏览器或iOS和Android应用程序与系统进行交互。

https://www.rhino3d.com/ - 基于曲线的3D建模软件,可创建数学上精确的3D曲面模型。

https://www.sketchup.com/ - 一个极受欢迎并且易于使用的3D设计软件,官方网站将它比喻作电子设计中的“铅笔”。

https://www.tinkercad.com/ - 一个免费的设计程序,允许您为项目创建自定义3D外壳。

https://www.vectary.com/ - 声称是最简单的3D设计工具,也是一个在线的3D建模软件。

https://www.3dslash.net/ -一款简单易上手的3D建模应用,让没有专业基础的用户也能自己设计3D模型。3DSlash 2.0 中新加入的VR 模式让用户能够在建模过程中随时全方位查看自己的作品。


附录(参考和灵感)

令人敬畏的设计工具由来自Flawless团队的Lisa DziubaValia Havruliyk策划。设计界的文章以及我们的好朋友Graeme Fulton制作的Prototypr.io工具箱给予了极大的启发。如果您找到了一些很棒的设计工具,请提出建议。谢谢你为这个项目做的贡献:)

来了,老弟
-------------    本文结束  感谢您的阅读    -------------
0%