优秀的UI库有什么特点

2019-11-19

最近在帮项目搭建工具链，其中一个环节，是做出一套To C的UI，磨平用户与算法之间的鸿沟。分析了现有的UI库后，我得出了一套选择的方法。

结构化

UI的功能，是展示视觉元素，并反馈用户交互。这些视觉元素之间，可能是排成一列，也可能是互相堆叠。一些视觉元素会组合起来，成为一个选项卡、一个面板等等。部分元素还提供了用户交互，用户可以点击或者拖动，来修改元素的属性。

结构化

插图 - 结构化

这种由视觉元素组成的集合，是一个典型的树形结构。画布是树根，所有视觉元素都是画布的子孙。一些视觉元素会组成子树，代表选项卡或者面板。每个视觉元素都是节点，节点有状态和事件，需要有效的管理。

常用编程语言大多是面向流程的，每行代码都是一个命令，从上到下执行。这种流程化语言，用来创建结构化的场景树，会很不方便：

1
2
3
4
5
Panel *panel = new Panel;
Text *text = new Text(“Lorem ipsum”);
Button *button = new Button(“Confirm”);
text->parent = panel;
button->parent = panel;

上面的代码创建了一个面板，其中包括一行文字和一个按钮。但是，这种流程化代码只展示了创建的过程，却没有展示结构。如果用结构化语言，会看起来更清晰：

1
2
3
4
<Panel>
  <Text>Lorem ipsum</Text>
  <Button>Confirm</Button>
</Panel>

相比上面的流程化代码，这段结构化的代码更好地展示了元素结构。它能给人更直观的感受，让人容易理解场景结构。在创建复杂的界面时，也能简化记忆负担，减少出错。

目前主流的UI库都支持结构化语言，例如Web的HTML、WPF的XAML和Qt的QML。XML类的语言通常很繁琐，被许多人称为“尖括号灾难”。稍微观察可以发现，上面的代码之所以结构清晰，主要是因为缩进。额外的字母和符号，反而会影响结构的可读性。如果用Pug重写的话：

1
2
3
Panel
  Text Lorem ipsum
  Button Confirm

代码中没有任何多余的字符，一眼就能了解结构，可读性很高。

可视化

在测试界面时，如果想要加深文字，可能需要关闭窗口、修改代码、重新编译、打开程序、操作UI、重现场景。当界面终于出现，你却悲伤地发现，颜色过深了，还得重新修改。于是，上面的流程又得再来一次。

可视化是指用户能实时看到代码的最终效果。例如Vue的热加载功能，在编辑器修改源码后，代码会被立即编译，然后同步到正在测试的窗口中，而窗口本身的状态不会改变：

可视化

插图 - 可视化

UI十分主观，必须靠反复的测试，才能找到效果最好的设计。有了可视化功能，搭建与修改UI的效率会高很多。

Web、安卓等平台上已经支持了可视化。可是在PC平台上，例如游戏引擎、Qt对可视化支持都不够。

控件化

UI库会提供基础的组件，例如文字、按钮等等。但在构建程序时，只用基础元素还不足够，需要将基础元素组合起来，形成更大的结构，例如表格、面板等等。如果每个组合都需要手动制作，会很消耗时间精力。

对于这类组合，组合并重用是最好的办法。把基础控件组合为标签页、模态框，只需一行代码就可以创建新的组合，这就是控件化。使用控件化，不仅可以维持页面风格统一，也能减少许多重复工作。

大多数现代UI库都已经支持了控件化，例如Vue实现的控件：

1
2
3
4
5
6
7
8
9
10
11
<!—- usage.vue —->
<div>
  <button name=“Alice” />
  <button name=“Bob” />
</div>

<!—- button.vue -—>
<template>
  <a>confirm</a>
  <p>{{ name }}</p>
</template>

一些常用的抽象控件，UI库应当默认提供。例如数据表、下拉菜单，大部分项目都会需要这些控件。

数据驱动

在UI中，控件的数量很庞大，如果每个控件都自己管理数据，会让数据变得特别分散，处理数据会变成一种折磨。但如果能将数据集中在一起，处理数据便会轻松得多。将数据与UI分离，仅让UI展示数据，这种思想就是数据驱动。

在数据驱动中，数据是单独存储、单独处理的。UI向用户展示数据，如果用户有操作，UI会将操作传给后端集中处理，并更新界面展示最新的数据。

这样的设计有许多好处。例如很容易记录数据状态，用户撤销时，只需要将数据回溯到上一个版本；还比如容易复现场景，只需要一个数据块，整个UI就能复现BUG的场景。

数据驱动

插图 - 数据驱动

现代的UI库大多实现了数据驱动，例如QML的数据绑定、React的Redux、Vue的VueX。

需要注意的是，UI本身也是有状态的，根据用户操作，UI会有不同的显示。但这种状态并不属于数据，它由UI自己管理。不能将UI的状态和底层的数据混淆。

社区

依赖官方是有局限的：官方提供的控件是有限的，而且很难持续更新；用户希望有一套特殊设计的控件，但官方无法提供。在开发过程中遇到的问题，官方无法及时提供解答。

但如果存在一个活跃的社区，就很容易解决这些问题。出现一套新的设计语言，用户自己实现后，将方案发布在网上，其他用户都可以使用。用户遇到了问题，社区的其他用户会热心帮助，分享自己的经验。

社区

插图 - 社区

开源平台的通常有活跃的社区。例如在Web社区，共享平台上已经有100万的开源包。神奇的是，一个名叫copyfiles的库，功能只是拷贝文件，居然有着40万的周下载量。站在社区的肩膀上，效率会大大地提升。

相比于开源平台，商业平台的社区比较冷清。例如Qt的qpm，开源包数量很少，几乎没有多少开发者，很难找到满意的开源内容。所以使用商业平台，主要依赖官方的支持，效率很低。

总结

一个优秀的UI库，需要有：

  • 结构化 - 清晰快捷地了解元素的结构
  • 可视化 - 实时得到最终结果
  • 控件化 - 抽象控件，提高效率
  • 数据驱动 - 集中管理数据
  • 社区 - 共享经验与代码库

全文完