如何通过 AI 快速验证设计方案


想象中,一位成熟的UE设计师应当拥有敏锐的洞察力、惊人的判断力和出众的执行力。他们拿到需求后能快速给出一版原型方案,完美契合业务需求的同时,还兼具极佳的用户体验。

然而,事实上绝大部分设计师都达不到这个水平。在日常设计工作里,我们需要花费很多时间去思考一个问题——为什么 A 方案比 B 方案更好。

在一些情况下,这个问题很好解答。无论是 iOS、Android 这类行业通用规范,还是各类软件应用共同缔造的某种“范式”,都为我们提供了一个标准答案模板,只要按设计规范来,大体上不会出错。但在另一些情况下,这个问题会变得异常棘手。

设计规范能为我们提供方向性的指导,但终究不是可以打开所有门的万能钥匙。一旦落到细节处,我们会发现“规范”的解释范围是很广泛的,很多时候是一种模糊的正确。比如,为什么 checkbox 和 switch 有时候可以明确区分,有时候却可以相互替换?触发新任务时,什么时候用全屏弹窗,什么时候用子页面?…

这些问题通常会流经多个环节。首先设计时,设计师自己要想清楚,然后需要向产品、研发解释“为什么”,有时甚至还需要向领导论证方案的合理性。这个过程中就很容易出现“公说公有理、婆说婆有理”的现象。这个时候就需要设计师站出来拍胸膛了。

我们自然可以搬出“尼尔森十大可用性原则”、“用户体验五要素”等”行业圣经“来撑场,但真正具有说服力的唯有数据和用户真实的感受。如何在资源有限(无法做灰度测试)的情况下,快速验证设计的可行性呢?传统工作流中,我们会用 axure、protopie 等设计工具绘制高保真原型,然后找用户进行实操测试。很有用,但很费时间。而现在,在 AI 快速发展的今天,我们有了新武器——vibe coding。

以前要做一份高保真交互原型,需要使用动态面板、连线、调节动效参数,复杂功能还要用到中继器等。现在借助 AI studio、codex、cursor等工具,几句话就能让 AI 生成一份可交互的高保真原型,甚至AI还会根据自动补全交互细节,这无疑大大降低了时间成本。

举几个近期使用的例子:

案例一:简单的用户测试

这是一个 app 端消息中心的筛选面板,由于实际消息类型多达上百种,因此产品提出要允许用户自定义常用消息,方便快捷筛选。此时有两种处理方案:

  1. 方案一(左侧):当前面板下钻;
  2. 方案二(右侧):叠加新弹窗;

image.png image.png

这两种方案理论上各有优劣(非本文重点,不在此赘述),但在实际的用户测试中,80% 的用户(共测试了 5 位用户)选择了方案一。他们的理由很一致:方案一的交互更自然更符合习惯,方案二的弹窗叠加比较少见。

有了真实用户的声音,我们的设计就有了更充分的说服力。花半小时搭建 demo,加上用户实际操作,整个测试过程也不过花费半天不到的时间。

案例二:复杂的交互演示

这是一个WEB 端的“添加算法”功能,这个面板包含了总多功能,如搜索算法、标签筛选、多选、反选、字母索引、列表折叠展开等。要想把每个功能及其联动逻辑描述清楚,需要在交互稿中铺陈大量文字,研发理解起来也需要时间。而通过以下简单描述:

image.png 即可让 AI 输出一份完整的演示 demo: image.png 还原度极高的 demo,再辅以简单的交互说明文档,沟通从未如此顺畅~

其他还有很多类似的案例,无一不说明了一个事实:AI 已经切实地改变了我们的工作模式。作为从业者,一方面为 AI 带来的提效感到高兴,一方面又免不了产生职业危机。但我想,除了高兴和担心外,作为这个时代的见证者,内心总会有一种期待——明日的世界是怎样的,科技最终会带领我们走到哪一步?