My Secret Rainbow

#18 从宏观的视角来思考 AI 辅助设计

篇首语

之前的文章中，我们曾经提到过一个核心观点：在当前的技术环境下，AI 更适合作为设计师的助手参与到设计过程中打辅助，而真正的 AI 生成设计，我们可能还需要给它更多的一点的时间来进化。

实际上这个观点已经开始得到了市场的验证，各种专门针对特定场景和需求的工具也随之涌现。比如 Figma 的 Jambot 主要专注辅助设计师在项目前期的思考、脑暴；而 MasterGo 则通过其设计系统 AI 检查功能，来帮助设计师更高效地完成设计任务。

这些工具的出现，开始让 AI 设计工具逐步地走向一些能真正的“落地”的场景。但同时它也引出一个值得我们思考的问题：在辅助设计这个大的场景下，AI 工具会有哪些值得挖掘的方向和潜能呢？

最近正好又发现一款新的 AI 辅助设计的工具 – Relume，它正好为我在「宏观视角」上提供了一个非常生动和贴切的案例。所以，本期的这篇文章我们将以 Relume 为切入点，与大家一同探讨在「宏观视角」下，AI 如何更加高效和创新地辅助设计工作。

从 Sitemap 切入的 Relume

先简单用一段话介绍一下这款产品：

Relume 是一款基于平台自建设计物料库的 AI 辅助设计工具，它能通过关键词自动生成产品站点或 App 的 Sitemap 以及界面模块内容 并转化成 Wireframe 线框稿。最后，设计师可以将生成的 Wireframe 直接导入到 Figma 或 Webflow，再进行具体的业务需求的设计。

Relume 三大核心能力 – Sitemap

和大多数通过文本生成的 AI 工具一样，我们首先需要输入一段需求的描述文案，同时告诉系统所需要的界面数量。系统会根据你的描述来生产对应的界面以及界面中的模块描述。

在下面的案例中，我输入了的关键词描述是：

An online shopping website about fashion sneakers.

系统 AI 返回给我了一个 Sitemap，包含首页、关于我们、产品列表、博客、球鞋设计展示、用户评价、联系我们、用户 Q&A 以及一些子页面共十多个界面。当然，如果你对生产的结果不满意，也可以重新生成，或者手动来进行一些微调。比如我在这里将「球鞋设计展示」页面去掉，替换成了「球鞋保养指南」。

Relume 三大核心能力 – 界面内容模块

Relume 不仅能生成站点的 Sitemap，它还会根据我们输入的描述语来编排界面中的模块。大家可以看看下图右侧中的部分，这是根据我刚才的描述所生成的「产品列表」页的模块内容。

每一个模块中都有一段描述文本，我们可以将它理解为简要的需求描述，也可以将它理解为从原始需求描述中分拆扩展出来的「子描述」信息。与 Sitemap 一样，我们同样也可以对它进行编辑修改，让它能够更贴合我们的真实业务需求。

Relume 提供了一套自建的设计物料库，我们可以直接找到需要的模块并添加到界面中。官方提供的这套物料库只能说是中规中矩，和我们常见的同类产品比较类似，都是主要集中在前台场景较为标准化的部分。当然，就像我们之前说过的一样，这个并不是一个大问题，在后期可以慢慢的不断优化和补充。

Relume 三大核心能力 – 线框稿生成

完成了界面模块的编排之后，我们可以切换到「Wireframe」模式，Relume 会自动将 Sitemap 中的文本描述模块全部转换成真实的设计模块，也就是我们前面提到的设计物料库中的资产内容。

Relume 的免费版本只能转换一张界面，所以我只用「首页」和「用户评价」两个界面分别做下演示。具体的大家可以自己去亲自试用一下。

到这里，细心的同学大概已经发现在这个工具中，Relume 其实做了非常重要的一个工作，那就是建立界面中「文本描述」和真实的「设计模块」之间的关联。例如下图中左侧的「FAQ」，它对应的是右边真实的设计模块。

在 Relume 的物料库中，每一个模块都对应的提供了多种的设计模式，用户可以根据自己的需求进行选择。上面提到的「FAQ」在物料库中提供近 10 中设计模式，基本上可以覆盖掉大部分的需求场景。

到这里我们需要回过头再提一下 Sitemap 中的模块文案编辑能力。它其实是为未来的 AI 能力扩展做了一些预留，当 Relume 的 AI 到达一定能力水准之后，它们就可以将用户描述的真实需求带入到 AI 中，生产更符合真实业务场景需求的界面设计。

当然，想要达成这一步前进还是相当有难度的。对于真实的业务设计场景来说我们只有「行」和「不行」两种情况，中间的「基本可以」对于用户来说是没有意义的。

这个问题对于所有想深入文本转 UI 界面方向的平台工具来说都是一个很大的难题，但对于 Relume 来说，由于它更为“讨巧”的定位，它的影响还不算大。在生产 Wireframe 的场景下，它现有的这个能力也许还是会受到一部分用户的青睐。

导入 Figma 继续设计

Relume 的定义是主要聚焦于设计流程中的前期阶段，核心是产品结构、模块的编排以及线框图的自动生成。因此，一旦线框稿基本确定，Relume 的核心工作便告一段落。这个时候我们就可以轻松地将这些线框图导入到 Figma 或 Webflow 中，进一步进行更为细致的设计工作。

这里还是要提一下，Relume 生成的线框图细节度还是不错的，这也就意味着当这些线框图被导入到 Figma 之后，我们可以立即应用现有的业务设计系统来快速匹配产品的风格和组件模块，然后对业务逻辑和信息进行补全，将业务需求转化为实际的设计方案。

关于导入到 Figma 之后的操作，这里我就不过多介绍了，大家可以去看看官方的演示视频介绍。

小结：Relume 的核心产品逻辑

作为一款设计师的 AI 辅助工具，我更认为 Relume 的核心价值体现在它的「宏观视角」以及对设计物料库的应用。

在产品的早期阶段，通过 Relume 的 Sitemap 生产和线框图能力，能够为设计师或产品经理提供快速梳理业务设计的能力。这种从更宏观、全局视角出发的方法，不仅能够加速前期的设计效率，还可以间接的提升项目设计过程中整体的一致性。

另外， Relume 这种与主流设计工具“打配合”的产品思路我也非常的认同。毕竟在设计工具平台的格局已趋于稳定的当下，除非是有颠覆性的产品能力出现，否则想要撬动这些头部产品的地位几乎是不可能的。与其做无畏的竞争，倒不如将精力放在更为细分、垂直的领域中去，没准能找到更适合、有价值的业务场景。

再来说说设计物料库吧。Relume 所提供的物料内容整体上还是会更偏向于一些通用的设计场景，虽然丰富度还可以，但能覆盖的业务类型和复杂度依旧有限。这其实也是当前同类产品都会面临的一个问题，需要些时间来建设，也需要这些设计工具平台来多做一些行业中的推动。

在真实的业务工作中，以现有的能力来看 Relume 这款工具不一定真的能派的上用场，但我还是建议大家有时间都可以去试一试。跟着它的步骤来感受一下不一样的设计流程，也思考一下它会对未来的工作流程、模式可能会带来的变化。

目前来说，我认为大家没有必要付费这款产品，用免费版来体验就可以了。

宏观 vs 局部：两种视角的“碰撞”

在本文的前半部分，我们多次提到了「宏观视角」以及它的重要性。与之相对应，我们自然也会想到「微观视角」。然而，「微观」这一术语在产品设计中通常会具象到界面中具体的元素，如色彩、字体、图标甚至动效，这与我想要传达的核心概念并不完全吻合。因此，为了避免混淆，我选择使用「局部视角」来描述这一层面。接下来，我们将从这两个不同但相辅相成的视角「宏观」和「局部」来进一步深入探讨。首先我想先描述一下对这两者的定义。

宏观视角

在产品的设计过程中，「宏观视角」主要是从产品的全局角度出发，先从“大”的层面入手，明确产品的整体框架、功能模块和用户流程，确定产品的主体基调。

这个视角能确保项目的设计从一开始就具有清晰的结构和方向，先在“大”的层面与市场、产品部门达成一致，指导项目后续具体的设计和开发工作。

局部视角

相较于「宏观视角」，「局部视角」更侧重于某个具体的界面或模块的细节设计。它关注的是具体的信息架构、交互逻辑以及视觉表现的细节。这个视角更关注对业务需求的具体还原以及用户真实的使用体验。

这两个视角并不是是相互独立，相反它们实际上通常是相辅相成的。「宏观视角」确保产品的全局框架和设计策略、主题基调，「局部视角」则是进一步细化这些全局性的规划，确保在设计过程中能够准确的满足用户和业务的需求。

「宏观视角」作为一种思路和方法，虽然以往的工作中并没有这样去明确的提出，但其实它一直都存在我们的设计流程中。在产品或项目的初期阶段，设计师通常会与业务方、产品经理以及研发团队一起先对需求进行分析和概念设计，确定产品的整体架构和主要功能。

但这些工作还是需要不少的时间投入，在资源匮乏、工期紧张的情况下很多时候设计师是没有时间来做这些工作的，最终只能聚焦在「局部视角」上。拿到需求后就立马开始进行界面设计，还有些设计师则是被业务或产品团队“剥夺”了「宏观视角」的权利，只能按照需求文档来画设计稿。

这种偏向于「局部视角」的工作模式会带来不少的“隐患”。由于缺乏全局的规划和视野，设计可能会变得比较碎片化，设计师只能去关注一个个细节的点，而失去了对业务核心的关注。

更为严重的是，当设计师被剥夺了「宏观视角」的权利时，大家往往只能按照需求文档来进行设计实施，这样就让设计师失去了设计的主动性和创造性。在这种情况下，设计不再是解决问题的创造性过程，反而变成更像是一种重复性的执行工作。

实际上，产品和项目的成功不仅需要「局部视角」下的细致设计，还需要在「宏观视角」上进行全面的规划和考量。在这个阶段，团队的工作不仅仅是产品调研和数据分析，更需要设计的深度参与。

我总是说设计其实是一个非常好的媒介，设计师通过图形和视觉元素可以更直观地呈现产品的全局结构和用户流程，甚至有时能主动暴露出潜在的问题和短板，也给后续的决策来提供更多的信息和依据。

如果从这个角度来看，我们也可以将前面介绍的 Relume 定义成一个为业务方、产品经理服务的工具。将设计的经验和能力沉淀在物料库中，通过 Sitemap、界面模块编辑以及线框稿等功能来进行产品设计过程中能力的补全。

通过这种形式，Relume 实际上是弥补了在项目中「宏观视角」和「局部视角」之间通常会出现的断层，使得两者能更好地相辅相成。

零售通的「宏观视角」尝试

还记得在第 16 期文章中，我第一次和大家探讨了 AI 在设计领域的应用时提到的零售通的 AI 设计系统吗？它与 Relume 在底层逻辑上其实有着许多的相似之处。

当时，我们的目标是在一些偏向中后台的应用场景中探索一种创新的设计方法。我们希望通过对需求描述进行语义分析，自动地将需求“格式化”，然后利用现有的设计系统来生成界面，最终由产品和设计团队共同完成业务细节的调整和优化，并进行最后的交付。

这个思路背后的核心逻辑在于对通用需求及设计模式的抽象和标准化。为的是创建一个可复用、可扩展的设计框架，从而提高整个设计流程的效率和质量。这种方法能够减少很多不必要的重复劳动，还为产品和设计团队提供了一个更加灵活和可定制的设计环境，使他们能更专注于产品和业务逻辑。

当然，以当时的技术水平来看，实现这这个设计方法的成本确实有些高。即便是放在今天，这样的项目也需要有一定的需求体量和资源投入作为支撑。否则，从投资回报率（ROI）的角度来看，这样的尝试可能并不划算。所以这个项目在当时我们也没能有机会进行下去。

AI 在「宏观视角」下的未来可能性

随着 AI 技术能力的不断进化和私有化定制的出现，AI 在「宏观视角」下还会有更多可能性的出现。从我的角度来看，这方面有几个值得期待的方向：

自动化需求分析与规划

AI 能够通过对用户行为数据和业务目标的深度分析，来为产品方向和战略提供明确的指导方向。这种实时的数据洞察和市场反馈分析能让团队更加有针对性地进行产品和设计的优化。

竞品分析与定位

AI 可以全面深入地分析竞品的功能、市场表现以及用户评价反馈，从而帮助产品和设计团队找到自己的独特定位和竞争优势。这将为更精准和高效的产品设计提供有力的支持。

智能场景模拟

借助 AI 分析各类型用户的多种用户场景和路径，模拟用户操作并对整体流程中的转化率、流失率等指标进行分析。通过自动化和数据驱动的方法来在早期识别出可能出现的问题点和优化方向。

写在最后

聊完今天的所有内容，我相信大家会和我一样对 AI 在辅助设计方面有了更多的想象空间和画面感。AI 的不断演进让我们在不久的将来能够更加严谨的做设计，从更高的层次去思考，用更好的支撑来进行设计决策。

我相信在「宏观视角」下的应用将会是 AI 未来发展的一个非常重要的方向。它不仅能够更高效地自动化完成那些在以前需要人工完成的任务，还能在更高的层次上为设计师提供有价值的洞见和建议。这将极大地提高设计的效率和有效性，同时也能让设计师有更多的时间和精力去关注那些真正需要创造力的问题上。

在我看来，「宏观视角」将成为 AI 在设计领域未来发展的一个关键方向。它不仅意味着我们能够让以往与设计有关联但依赖人工完成的任务能够进一步的自动化，而且还能在更高的层面上位设计师提供有价值的洞见和建议。这将极大的提升设计的效率和准确性，同时还能释放设计师更多的时间和精力，让大家专注于哪些需要创造性思考的问题上。