如何使用 UI 线框图快速设计前端界面

本文章属于《UI 线框图》 专栏教程，欢迎订阅。

首先，UI 就是 User Interface 用户界面。

什么是用户界面设计？ 维基百科的定义似乎是说“用户界面设计是软件的用户界面的设计” ，这定义没啥鸟用。

更好的定义方法是将用户界面分解为 UI 设计人员所关心的区域。UI 设计师在创建用户界面时会将界面分成多个区域或多层。

如下是一个典型的网站 UI 。 对于网页端、移动端、桌面端软件，UI 方面的考虑稍有不同，但它们都是软件 UI，所以本专栏讲解的概念适用于所有软件 UI 设计范畴。

在本课程中，我们将从四个不同层次学习 UI 设计:

• 控件 Controls
• 模式 Patterns
• 设计原则 Design Principles
• 模板 Templates

最后，我们将介绍一些关于 UI 设计过程的经验教训，这些经验教训可以帮助弥合设计和代码之间的鸿沟。

那么，让我们从 UI 设计师的角度开始，看看他们如何处理这个网站的 UI。

UI 设计层次 1：控件 Controls

在深入到 控件 Controls 层之前，让我们通过将上面的页面简化为线框图来观察。

现在让我们来看看用于构建这个页面的一些 UI 控件:

用户界面控件(也称为元素elements、组件components和“小部件widgets”)在用户界面某一部分执行单一功能。 还有一些控件如链接、按钮和图标， 甚至纯文本都也可以被认为是一个控件，因为它们的功能是在用户界面中描述或标记某些东西。

界面中选择这些控件有特定的原因。 UI设计与控件选择的过程需要遵从基本原理。 在本专栏中，我们将学习如何做到这一点。

UI 设计层次 2: 模式 Patterns

模式是世界、人造设计或抽象思想中的规律。因此，模式的元素以可预测的方式重复。

我们可以通过降低线框图的保真度来进一步简化这个页面，从而抽象出单个控件，如下所示:

现在让我们考虑一下控件组在页面中的单元作用。 UI 图案是一组用来解决特定问题的控件。 让我们来看看这个页面上的一些模式 patterns:

可以在控件级别之前考虑这一层 UI 设计，因为每个图案使用多个控件以不同方式来实现其目标。

UI 设计层次 3: 设计原则 Design Principles

最常见的 UI 设计定义是视觉层次设计。 但即使是这样，这个定义也比大多数人所理解的更有目的性。 视觉设计不仅仅是“让它看起来漂亮” 更是一种考虑它是否符合建立应用的视觉设计原则的方式，其中许多原则是基于心理学，神经学，或生理学的研究

我们将在本课程中介绍的具体原则是对比Contrast、层级Hierarchy、邻近Proximity和对齐Alignment。

UI 设计者评估设计原则的一种方法是使用“眯眼测试” ，这有助于进一步将设计进行抽象，评估它的视觉原则。 另一种方法是模糊屏幕。

无论哪种方式，我们的目标都是把你的注意力从内容转移到视觉效果和技巧上。

UI 设计层次 4: 模板 Templates

最后，把这个网站作为一个整体来看，我们可以将这个页面视为一个可重复使用的模板实例，而不是为特定服装类文章设计的单个页面。 对于一个站点或产品而言，它可能有几十个、甚至上千个屏幕页面，因此设计师 / 开发人员应该让使终端用户的透视图页面在整个应用程序中表现出可预测性和外观相似性。

如下是一个“产品详细视图”模板的例子，这个模板在应用到任何其他产品时都非常相似。

另一个用户界面模板是类别模板，如下所示:

该站点的其他模板可能包括：一个用于结账和购买的模板，一个用于搜索结果的模板。 虽然每个产品可能使用不同类型的模板，但是所有软件类型都可以从基于模板的设计方法中受益。

烹饪的类比

UI设计类似烹饪，一旦你熟悉了你使用的控件和图案，你可以在你的 UI 库中找到配料(控件)。 你可以在线框图中找到菜谱(模式 pattern) ，或者你可以为你的生态系统构建自己的模式。

一旦我们学会了如何组合各个部分，我们就可以创建更完整的解决方案(使用设计原则和模板)。 我们要做到对原料认识清晰，对食谱了如指掌。 这些将快速成为我们烹饪工作的工具集。

最后，一家餐厅要想成功，它必须弄清楚如何准时、按照正确的顺序、在正确的温度下准备食物，而且这一过程要始终如一。

还有很多东西要学，但我们不会在教程里讲得太深入。 如果成功的话，它将会给你足够的时间去舒适的设计或者回顾你自己的工作中的用户界面。 希望在这个过程中能有一点乐趣！

准备好了吗? 让我们从配料(UI 控件)开始！

• 来源：Balsamiq 官网文章
• 原作者：Leon Barnard

本文已获得原作者授权，你可以随意转载，但请附带原文链接。

Balsamiq 官网：balsamiq.com/

本文首发个人博客：www.ideaworks.club