一窥 UI/UX 世界（附示例）

已发表: 2020-03-24

如果您研究过某种形式的软件设计或正在从事设计，您应该熟悉术语 - “UI”和“UX”。 然而，有时我们倾向于交替使用这两个词。
那么，是什么让 UI 与 UX 不同呢？
UX 设计使界面以最简单的形式发挥作用，而 UI 设计使界面具有吸引力和美观。

用户界面设计

什么是 UI 设计？

用户界面是用户用来与产品或服务交互的东西。 与用户体验设计一样，用户界面设计是一项复杂且具有挑战性的任务。 它负责将产品的创建、分析、内容和布局转换为吸引人、引导性和响应性的用户界面。

  • 用户界面设计是关于产品界面的外观。 这考虑了界面的所有视觉和交互元素——包括按钮、图标、间距、排版、配色方案和响应式设计。
  • UI 设计的目的是通过产品的界面直观地引导用户。 一切都是关于拥有良好的体验，不需要消费者过多的思考和努力。
  • 良好的 UI 设计可确保设计一致且美观。

什么是用户体验设计？

用户体验是用户与产品或服务交互时的整体体验。

  • 用户体验设计是一种改进和增强用户交互功能的方法。
  • UX 概念与视觉效果无关； 它基于整体体验。
  • 然而，用户体验不仅仅是让消费者满意。 它是关于帮助客户以最佳方式完成他们的活动并实现业务目标。
运球
图片来源 - Dribbble

用户体验设计是设计和增强用户参与业务各个方面的一致性，从而改善用户体验的过程。
就当前数字地球的情况而言，每个企业都试图对用户产生影响，以增加其销售额并在用户体验和用户界面设计的帮助下为消费者提供发生的体验。

像 Drupal 8 这样的 CMS 如何帮助增强网站的用户体验？

内容管理系统在网站用户体验设计的成功中起着关键作用。 Drupal 8 在定制内容和设计方面提供了灵活性。 如果您希望创建引人注目的 UX 设计，让我们看看 Drupal 8 如何成为 CMS 的绝佳选择。

  • 页面速度- 快速加载的网站不仅可以提高性能，还可以提高整体用户体验。 Drupal 8 提供了性能提升功能，如高级缓存选项、图像优化、代码优化、数据库优化等。
  • 响应性– 使用 Drupal 8，响应性在血液中流动。 这意味着所有 Drupal 8 网站都是开箱即用的响应式！ 没有响应能力，网站的用户体验是不完整的。
  • 个性化– 事实证明，提供个性化体验的网站比没有个性化体验的网站获得更多转化。 Drupal 8 提供了各种模块，让您可以根据用户的人口统计、设备信息、登录日期和时间等来个性化您的内容。
  • 多语言– 您知道世界上只有 20% 的人口会说/理解英语吗？ 为了能够通过网站的 UX 提供个人风格，用他们熟悉的语言与用户交谈很重要。 Drupal 8 提供开箱即用的多语言支持，有 100 多种语言可供选择。
  • Headless Drupal – 解耦 Drupal 使 UI/UX 设计师可以更好地控制网站的设计元素。 当 ReactJS 和 Angular JS 等前端框架与 Drupal 8 结合使用时，可以丰富用户体验。
  • 主题——Drupal 社区已经构建了数百个可以适应任何业务需求的主题。 您可以找到 Drupal 8 自带的 Drupal 核心主题以及第三方 Drupal 8 主题。 如果它们都不适合您的需求，您还可以自定义主题以使它们适合您。

UX 与 UI 有何不同？

这是我喜欢用来描述两者之间差异的一个类比。
如果你把人体想象成一个产品。 器官体现UX设计：衡量和优化支持生命，UI设计体现身体的化妆品； 他们的外表，他们的感官，还有他们的反应。
要记住的关键区别是：UX 设计与用户的整体感觉有关，而 UI 设计则与产品界面的外观和工作方式有关。

运球
图片来源 - Dribbble

例如，用户体验 (UX) 主要是情绪化的，是消费者的心理行为，例如用户在使用产品时的反应或使用产品时的感受。

它主要涉及用户试图通过产品实现什么目标，他们的需求是什么，他们的感受是什么，要应用什么策略，以及为了实现他们的目标，他们可能会进行哪些交互。

而用户界面 (UI) 是有形的。 它主要处理产品的视觉层次，包括按钮、排版、颜色等。 UI 设计师基本上必须处理可扩展的设计，并且必须通过减少用户达到目标所需的时间来改善用户流程，同时使对用户来说，产品美观且具有视觉美感。

好的和坏的 UI/UX 示例

说说几个UI/UX不好的例子

用户界面/用户体验示例
分心会造成不好的第一印象

当第一眼看到上面的例子时，它会让人对网站的全部内容感到困惑。 用户会看到各种广告和不需要的信息，并且会看到大量难以处理的信息，因此使用户甚至没有阅读他们最初寻找的新闻发布就离开了网站。

用户界面/用户体验体验坏用户界面


这些是一些更糟糕的 UI/UX 示例。
当查看以上两张图片时，用户会感到困惑，并且很可能会偏离他的实际目标。 2020年，响应式设计不是趋势而是必需品。 上面的例子显示了颜色和排版的糟糕和苛刻的使用导致混乱。但并不是每一个设计都是糟糕的。 我们也来谈谈 UI/UX 的一些非常好的例子。
上面的例子展示了一个简单的微交互如何让用户开心和投入，从而带来一些身临其境的体验。
好用户界面良好的用户界面体验