为网页设计师提供的 75 个最佳 UI/UX 设计资源

已发表: 2021-09-20

用户界面 (UI) 设计对于使您的网站在竞争中脱颖而出至关重要。 如果您尝试了解 UI 设计概念，这将有所帮助，因为这将成为将您的网站提升到新水平的催化剂。

事实上，基于 UI 原则的网站设计有助于吸引访问者并实现您的网站目标。

如果您在深入了解网页设计在帮助您实现网站目标方面所扮演的角色之前，先明确您对 UX 的概念与 UI 的概念并行，这也将有所帮助。

UI指的是用户界面，而UX指的是用户体验。 它们在网页设计中都很重要。

简单来说，您可以将视觉效果（例如字体和颜色）视为 UI 的一部分； 以及作为用户体验一部分的网站整体体验的感觉。

尽管 UI 和 UX 不同，但它们相互协调工作。 鉴于 UI 和 UX 的相互依赖关系，说一个不能没有另一个是正确的。

例如，假设您的网站看起来不错，但很难使用。 它不会成功。 同样，如果它好用但不好看，它也不会成功。

在这里，我们分享了 75 个基本资源，供网页设计师完成最佳 UI/UX 设计。 继续阅读：

UI 套件和套件市场

  • 为各种 UI 套件设计 Modo
  • Facebook 上的iOS 11 iPhone 带有 GUI 元素的 Origami、Sketch、Framer 和 Photoshop 模板
  • 用于各种 UI 工具包的UpLabs可供下载以用于各种设备
  • 一些最好的 Bootstrap UI 工具包的创意 Tim
  • 55+ 元素免费 UI 套件
  • 哦不，不是另一个 UI 套件
  • PSD Booster用于主题和其他免费赠品的 UI 工具包
  • UI8提供超过 4,900 多个精选设计资源
  • 超过 2,200 种带有图形资源和工具的 UI 套件和库的创意市场

UI & UX 网站和资源

  • , an online community of UI UX designers to exhibit their past work and get hired ，一个 UI UX 设计师的在线社区，用于展示他们过去的工作并获得聘用
  • , a platform for everything related to user experience ，一个与用户体验相关的一切平台
  • , a web magazine about different aspects of user experience ，一本关于用户体验不同方面的网络杂志
  • UX Planet ，用户体验相关主题的可靠资源
  • Nielsen Norman Group (NNG)是基于研究的用户体验的领导者之一。
  • , for user-experience best practices and strategies. ，用于用户体验最佳实践和策略。 它有助于了解如何创建更有用、更有用和更易于访问的网站
  • Usability Geek是一个博客，提供有关可用性和用户体验的实用技巧

用户界面灵感

  • , a notable online resource for inspirations to incorporate into UI design ，一个著名的在线资源，用于将灵感融入 UI 设计
  • Site Inspire提供最佳的网页和互动设计
  • Niice ，一个情绪板生成器，它从各个站点提取设计和用户体验项目，以激发网页设计师的灵感。
  • Behance ，一个深受 UI 专业人士欢迎的鼓舞人心的网站
  • Awwwards ，优秀的 UI 设计网站，为您提供灵感
  • Muzli ，UI 专业人士的重要灵感来源
  • 熊猫，新闻和灵感的单一平台

设计模式

  • Welie在交互设计方面的许多最佳实践
  • Astrum ，一个用于 Web 项目的轻量级模式库
  • UI Scraps ，用户界面设计的集合
  • 用户界面工程，UI专业人士的多元化资源
  • Elements of Design ，一个优秀的 UI 组件集合，用于最佳网站设计实践

清单和指南

  • UX 项目清单通过使用 Google 登录来保存清单
  • 清单设计，最佳 UX 和 UI 实践的集合
  • 用于测试网站的最佳实践、可访问性、测试和性能的前端清单
  • 清单：用户界面，IBM 设计
  • Lvivity ，一个用于 UI 测试的精简清单
  • MobiDev ，所有设计阶段的 UI/UX 设计交付清单

字体和图标

  • , an icon set, and toolkit with icons and social logos ，一个图标集，以及带有图标和社交徽标的工具包
  • Icon8免费，像素完美的图标，适用于 png 和矢量中的不同设计风格
  • Flat Icon ，一个免费矢量图标的大型数据库，它拥有超过 145,000 个各种格式的图标
  • , to get free avatar placeholder sources for web design apart from options for Sketch, Adobe XD and Figma ，除了 Sketch、Adobe XD 和 Figma 的选项之外，还可以获得用于网页设计的免费头像占位符资源
  • Adobe 字体的UX 字体包
  • 用于大量 UX 设计图标的名词项目
  • 免费和高级用户体验图标的图标查找器

矢量和位图图像工具

  • , a design toolkit to help create the best work ，一个帮助创造最佳作品的设计工具包
  • Adobe XD ，一个 UI/UX 设计解决方案
  • Figma使多个设计师能够同时处理同一个文件来创建响应式设计
  • Flinto用于设计微交互和屏幕转换
  • Zeplin可以发布来自 Figma、Sketch、Adobe XD 和 Photoshop 的最终设计

思维导图

  • , a mind mapping software ，一个思维导图软件
  • Bubbl创建彩色思维导图以打印或与他人分享
  • Coggle快速开发思维导图
  • MindMapple预载主题和模板，协助创建思维导图
  • MindMeister使用思维导图与团队分享想法
  • LucidChart或多或少类似于有助于开发思维导图的 Coggle

线框图和原型设计

  • UX Pin ，一个具有真实感觉的 UI 设计和原型制作工具。 它使用代码组件、逻辑、状态和设计系统
  • OmniGraffle可创建具有多种功能的视觉效果，包括设计工具、拖放式 WYSIWYG 界面和笔记功能
  • Balsamiq ，一个快速而有影响力的线框图软件
  • InVision ，一个数字产品设计平台，打造优秀的用户体验
  • 惊叹于线框、原型、用户测试、设计和检查设计
  • Wireframe CC ，一个微调的线框设计工具

测试

  • , an online usability testing and research tool to improve customer experience，一种用于改善客户体验的在线可用性测试和研究工具
  • Eyequant ，基于人工智能和神经科学，协助设计无缝的、促进转化的用户体验
  • Hotjar跟踪访问者如何使用网站并收集用户反馈。 它有助于将更多的访问者转化为客户。
  • 检查t 以找出访问者的注意力在网站上的位置以及他们卡在的位置
  • FiveSecondTest是一项实用的可用性测试，可优化设计的清晰度和访问者的第一印象。 它有助于提高转化率
  • GTmetrix是一款免费工具，用于分析页面的速度性能并获得改进建议

网页无障碍

  • , a Chrome and Firefox browser extension to check for accessibility issues ，一个用于检查可访问性问题的 Chrome 和 Firefox 浏览器扩展
  • Max Access ，基于人工智能，快速自动访问网站
  • Web Accessibility Evaluation Tools List有一个评估工具列表。 您可以找到符合您需求的
  • 图像分析器检查网页上的所有图像以发现任何可访问性问题
  • Make Sense 允许您向所有用户授予对您的内容的访问权限

调查

  • 谷歌表单进行调查
  • 免费的 Survey Creator进行调查并将其嵌入到带有 JavaScript 行的网站上，以便在您的收件箱中接收回复
  • 调查猴子，一种流行的调查工具，可实时获取结果
  • SurveyGizmo是一种高级调查工具
  • 用于创建调查、测验和表格的Typeform
  • 调查星球，强大的在线调查工具

结论

使用本文中讨论的资源，您可以选择最适合您需求的设计资源。