Repository navigation
Q&A
我们对照 VB 和 Storyboard 两个不同层面的工具分析 Mould 和他们之间的区别。
VB 代表着这一类工具：通过设计器生成 GUI 代码，由开发者对 GUI 代码二次开发。生成后的代码基本是没办法被导入设计器进行二次设计的，意味着，未来对界面的维护还是依赖开发者手写。
Mould 做到了 GUI 侧和代码侧的完全分离。任何时候都可以任意修改 GUI 不用担心程序出现意料之外的问题。
作者没做过 iOS 开发，只简单研究过这方面的 API ：Storyboard 是经典的 MVC 架构，可以通过在 Controller 中操作 View 中的控件 Instance 实现动态的数据交互。它的设计器很难做到高保真，即在设计器中看到一个界面的样子，其中摆放了若干组件，当程序运行起来，界面可能会变成完全不同的样子。设计器对界面的把控能力有限。
Mould 做到了设计器的高保真，确保设计器里的界面可以精确地出现在运行中的程序里，整个界面的设计和交互都是可预测的。
值得注意的是，Apple 于 2019 年推出的 SwiftUI 遵循了 React 的设计范式，本身是不提供设计器的，等于是 Apple 自己要推翻 Storyboard 那套写 GUI 的方式了。Google 也差不多同时推出了 Jetpack Compose ，同样是 React 的设计范式。Mould 是 React 范式的更上层框架，完美保留了 React 的高效、强大。
Mould 只专注于 GUI 这一层。它的跨端方式有点类似 GraphQL ，在不同端会有对应的 Runtime ，解释执行 Mould 的 Schema 。正因如此，各端都可以使用自己熟悉的语言和生态，各端的差异也得以保留。
相比 Flutter ，Mould 不仅可以做到 GUI 层面各端的高度一致，还可以无缝融入各端的 App 成为现有项目的一部分。
- 降低门槛
- 贴近直觉
- 无级调整
- 即时反馈
相比传统建站类的工具，Mould 没有舍弃任何的灵活性。它的表达能力和 React 是一致的，能用 React 实现的应用，都可以用 Mould 实现。
值得一提的是，Mould 是使用 React 实现的，所以 Mould 也可以实现自身（自举）。
不论是 Figma 还是 Sketch ，它们导出的设计文件，都可以看作矢量的 Config + 非矢量的 Binary Assets 。
Mould 也是如此。
目前 Mould 基于 DOM 实现设计器，它的表达能力基于 DOM 作为 GUI 底层设施的表现力。又因为目前 Mould 设计的界面还只在 DOM 运行，所以，可以实现自给自足。
未来，随着引入更多的端，我们可能会在各端表达力的交集和并集之间选择一种实施。目前倾向于取并集，这样 Mould 的表达能力相对于单个端可能存在“溢出”而非缺失。优雅降级会是一个解决溢出问题的好思路。
从以下三个维度来回答该问题。
- 样式
- 布局
- 健壮性
样式是最容易完成设计到应用程序转换的。仅仅是在设计面板上调参，这点 Mould 和传统设计工具没有任何分别。
首先要认识到，在智能设备爆发的今天，Responsive 无论在应用程序还是纯粹的设计领域都越来越重要了。
为了让设计出的界面可以直接运行，必须在设计阶段，就考虑到它的自适应能力。
Mould 提供自适应的 Stack 布局，要求设计师使用自适应的布局去做设计。这个做法业界已有铺垫，Mould 并非开创者。但因为相对较新，需要探索结合实践。
设计师现行的工作流都是以“眼睛收货”作为结束。只要最终设计出来的界面是美的满足需求的，就算是完成设计工作了。而应用程序则需在这之上增加可用性和健壮性的考量。
例如一段文字，我们现在只需要设计师给出一段示意即可，长度无所谓，好看即可。但实际在应用程序中运行的这段文字，是可能很长也可能很短，需要去考虑是否换行、超出部分是否显示、截断部分是否显示省略号等等涉及到最终可用性的方方面面。
这部分信息，在当前工作流，是不需要进入设计稿的。而 Mould 要求设计师对整个视觉交互效果完全负责，是要求设计师在设计阶段就考虑这层的。
看上去设计师需要在设计阶段考虑的更多，似乎工作变困难了。但我们代入当下的场景来思考，一套布局如何做 Responsive ：工程师需要和设计师沟通，如果设计阶段没考虑过，就需要立刻思考这个问题并告知工程师答案，如果当前的设计很难做到，则需要对设计回炉修改。针对健壮性的问题也是如此。
Mould 把这些原本就需要设计师考虑的因素要么规定明确了（Responsive），要么把责任和实现的能力直接交还给了设计师（设计直接进入线上）。让设计师和工程师在各自的领域自治，做到了责任和能力的统一。它并没有增加 GUI 设计层面的工作，只是把原本应该在设计阶段完成的事情明确了的同时，大大降低了沟通的成本。