UX设计师如何构建自己的AI工作流?

0 评论 100 浏览 0 收藏 19 分钟

交互设计师如何让AI真正成为工作伙伴?本文通过「扣子工作流」的实操案例,揭秘从需求分析到设计落地的全流程AI化方案。重点拆解六大关键步骤:流程梳理、提示词架构设计、多版本生成整合、阶段差异化拆分、文字转设计稿实现,以及AI方案评估的独特价值,为设计师提供可复用的AI协作方法论。

近几年各类AI产品涌现,作为一个UX设计师,我也一直在尝试,AI到底能帮助我做什么,怎么能将AI融入到我原本的工作流程中。相比于视觉设计师直接利用生图AI去创作完成度很高的作品,交互设计似乎很难找到一个具体的抓手去完成整体的设计流程。

这篇文章是我基于「扣子工作流」的一种AI设计流程搭建的尝试,不涉及太多AI工具本身的技法(毕竟对于追求模型自由度和开放性的开发者们来说,扣子并不是最被推崇的选择),主要关注的是“如何针对各个设计阶段撰写AI提示词”、“如何将提示词和个人的设计流程结合”、“如何用AI实现从需求分析到生成设计稿的全流程”。主要的步骤可以分为以下几个部分:

  • 梳理自己的设计流程
  • 寻找可用的提示词结构
  • AI提示词的生成与整合
  • 各阶段提示词的拆分
  • 从文字方案到生图
  • 用AI来评估设计方案

一、梳理设计流程

设计流程AI化的基础是设计师先要有一套自己的设计流程,虽然业界已经有一些标准化流程(比如双钻模型),但落地实操中,不管是出于实际限制或行业侧重,设计师往往会演化出一套适合当前工作的设计流程。

我们首先要做的就是把这套流程书面化地整理出来,以下是一个示例:

  1. 整理现有信息:功能点(XX功能)、现有问题(设置流程过于复杂、和其他相关功能的整合关系不对)
  2. 了解功能点(XX功能是什么?XX功能在产品中的整体功能定位是怎样的?)、功能演进(这个功能为什么会出现?功能演进过程中发生了哪些变化?)、相关功能(有哪些相关功能和概念,请解释一下相关概念及其相互之间的关系?);
  3. 分析用户人群、使用场景和流程:在主要用户类型中,有哪些用户在使用XX功能?一般是怎么设置的?
  4. 分析竞品:功能的定位和目标是什么?包含哪些子功能和操作,功能设计是否合理?业务流程,信息架构和页面布局是否合理?
  5. 分析现有问题/需求:目前提出的迭代问题/需求是否合理?有没有更深层的原因?影响范围和影响力有多大?
  6. 页面设计和功能点:在XX功能中,需要包含哪些小的功能点?需要包含哪些页面元素?交互设计上要注意什么?

这个阶段可能存在的问题是,很多设计师依赖经验进行设计,很难书面化表达,毕竟需求千奇百怪,处理方式也会有差异。这种情况下可以通过问题列表的方式让AI来为你总结设计流程。比如下面的问题列表是我在设计过程中向AI提过的一些问题,可以由此对工作流程进行总结。

问题列表:

AI提示词:

[问题列表附件.xlsx] 我是一名交互设计师,现在想针对新的设计需求输出一个标准化的交互设计流程,请结合我设计过程中常问AI的一些问题(见附件),输出标准化设计流程,要求800字以内,按流程步骤列出

二、确定提示词结构

在用扣子之前,我常用的AI提示词结构是“3W1H”,这类结构比较简单,在平常的AI对话中能够帮助我们得到想要的生成结果。

但扣子中的提示词略有区别,分为“系统提示词”和“用户提示词”,可以理解为系统提示词是标准化的部分,可以复用到各个工作流中去,而用户提示词是描述怎么对当前工作流中的各类输入进行分析和整合,两者结合得到整体的提示词。

扣子的模板库里也提供了一些系统提示词的结构示例,其中比较全面的一种结构是“角色-技能-内容结构化-约束-工作流程-输出格式”,这种结构有利于内容控制,让AI不至于太天马行空,能更好地贴合标准化的生成要求,非常适合设计流程的搭建。

另外,撰写这篇文章时,扣子里也发布了自己的提示词模板示例,和我之前用的略有不同,大家也可以按需调整。

用户提示词主要在有多种输入时发挥作用,在只输入“需求描述”时,只需要写上“根据需求描述{{require}}的内容进行分析”就够了。

三、提示词生成和整合

提示词的生成不是一蹴而就的过程,需要采用多种方式生成后进行整合,比如AI自由生成、用自己的流程生成、用AI归纳问题后的流程生成,在这个基础上还可以用多个AI生成不同的版本,再进行融合和拼接。

1)AI自由生成:

我是一名交互设计师,现在要分析一个新的设计需求,但我不知道怎么让AI帮我分析,请输出一段能让AI进行设计需求分析的提示词,要求结构为“角色-技能-内容结构化-约束-工作流程-输出格式”,1500字以内

这个部分我是直接生成的,复盘的时候觉得可以让AI参考一些设计原则和理论来生成,但这个结果比较宽泛,主要用于设计步骤的查漏补缺,不作为主要的提示词参考。

2)用自己的流程生成:

我是一名交互设计师,现在要设计一个新功能点,以下是我以往分析的流程案例,我需要在以往分析流程案例的基础上,输出一段能让AI进行完整分析的提示词,要求1500字以内,结构为“角色-技能-内容结构化-约束-工作流程-输出格式”。

[第一部分整理的自己的设计流程]

3)用AI归纳问题后的流程生成:

这一步只需将上述提示词中“[第一部分整理的自己的设计流程]”替换为第一部分AI分析问题列表后生成的内容就好。

以上3个生成方法我都用Deepseek和豆包分别生成了一版,然后整合了6个生成结果,输出了最终的提示词(这里就不放具体提示词了,展示一下扣子工作流的大致结构)。

在这个整合归纳的过程中,角色、技能、约束3个部分的生成结果可以叠加,内容结构化的部分则需要按自己的侧重方向来删减和重组内容,从而让输出的内容结构符合自己的预期。另外,输出格式的部分,因为和内容结构化会有很大重叠,我只保留了markdown语法、标题结构(#)和风格的要求,删掉了具体示例的内容。

四、拆分和差异化

如果只需要做小功能点的分析和输出,进行到上一步就可以让AI直接输出了,没有必要做拆分。原因有两点:

  • 考虑到时间、精力和算力,整体的提示词会更加快速便捷,基本能满足小功能的分析需求
  • AI的生成是没有止境的,但人的处理能力是有限的,过多的信息容易让设计师失焦

但是,如果说你要做的是一个架构比较复杂的大模块设计,或者说你需要单独输出部分的分析(比如用户分析),那么设计流程的拆分应该会对你有帮助。

那么究竟为什么要做提示词的拆分呢?主要有以下3方面的原因:

  1. 整体输出涵盖从需求分析到落地设计的全流程方案,但“角色”“技能”和“约束”用的却是同一套提示词。从以往的设计经验来看,越靠近需求端,越需要行业知识和对产品整体架构的理解;越靠近落地设计,越需要场景分析、对设计原则和规范的把控,所以不同流程节点对角色和技能的要求是有差异的。
  2. 新需求和迭代设计的设计方式本身也存在差异性,侧重点会有所不同。新功能点侧重于对用户需求和竞品的分析,而迭代设计侧重的是问题的分析和解决,这种差异性可以催生不同的需求分析提示词。
  3. 竞品分析的特殊性。AI目前还是难以完成竞品收集的工作,这一部分需要人工收集,但对于人工收集的竞品资料和图片,AI具有强大的多模态分析能力,因此竞品分析重在输入和资料处理,不太好整合进整体流程中。

基于以上原因,我对设计流程进行了拆分,分为“功能&概念分析-需求分析-用户分析-竞品分析-分析总结&设计方向-具体方案(文字)”6个阶段,分别生成不同的提示词。

不同阶段的系统提示词的生成方法大同小异,以“功能&概念分析”为例,以下是生成系统提示词的提示词:

我要做XX行业的功能需求,需要AI帮我分析[功能本质和系统定位],分析内容如下,请根据分析内容为AI设定“角色”和“技能”的提示词,以便AI能更全面更精准地完成以下分析,角色和技能侧重于功能架构、定位和设计上,简化技术实现相关的内容。最后输出3个部分:“角色”、“技能”和优化后的“分析内容”。

[分析内容:

1)概念与价值阐释:阐释该功能是什么,解决了用户在什么场景下的什么核心痛点?它的不可替代性在哪里?

2)演进逻辑推测:结合行业常识,分析该功能为何会出现?它可能由哪些更基础的功能演进或组合而来?这揭示了何种用户需求或技术发展的趋势?

3)系统关系图谱:厘清与该功能强相关、弱相关的其他功能(如XX功能)。以图表或清单说明它们之间的数据关系、操作逻辑关系及用户认知关系。]

其中“[分析内容]”的部分由所处阶段决定,我是从上一部分的生成结果中提取和归纳出了相关阶段的分析内容,然后让AI进行优化和扩写。有些阶段除了“角色”“技能”,还可以生成“约束”的提示词。

同样,拆分成阶段的提示词也可以用不同AI进行生成和整合,针对不满意的内容,可以单独让AI重新生成。提示词的生成过程需要保持一定的灵活性,不必拘于某一种流程或方法,只要保证内容全面和结构完整即可。

需要注意的是,有些阶段的“用户提示词”需要体现和前面阶段的输出的关系,比如竞品分析、分析总结&设计方向。竞品分析的输入包含前几个阶段的输出,用户提示词如下:

分析需求描述{{require}}来决定竞品分析的侧重点,根据竞品截图{{pic_Competitor}}和竞品链接资料{{url_content}}来进行综合分析。“竞品功能目标与核心价值分析”部分请参考功能&概念分析{{function_output}}和需求分析{{require_output}}来进行分析和输出

五、文字到生图

以上各阶段提示词生成得到的都是文字描述,在“具体方案”中,生成了功能清单和核心交互流程,有了生成方案图的基础描述。

但交互设计和商品图/海报图等创意设计不同,用通用的文生图工具无法生成合格的设计稿,需要专门的AI界面设计工具,我用墨刀和Figma AI做了一下尝试,生成的设计稿虽然无法直接使用,但大体结构和功能框架是有借鉴价值的。

[具体方案(文字)] 请参考上述方案描述生成完整的交互方案,交互方案包含功能的核心页面、关键状态页面以及对主要页面和功能的说明,方案需要遵循Ant Design组件规范(https://ant.design/components/overview-cn)和通用的设计原则(如尼尔森十大设计原则)

其中[具体方案(文字)]是指上一部分中“具体方案”阶段的输出结果。我这里是尝试输出了“用户组”功能的方案设计:

两个AI的生成结果各有优缺点,但可以看到都已经非常接近成熟页面了,相应的页面布局和交互范式也遵循了当前的主流规范。

六、方案评估

这一部分原本不在工作流中,只是在使用墨刀AI过程中发现的一个很好用的功能,但是后续也可以整合进AI工作流中,用于输出完整的设计稿之后的设计核查。

这里只是基于单个页面(设计的数据标注工具的一个页面)进行了一次评估的尝试,页面本身也没有仔细检查,所以仅关注一下报告的评估思路即可,具体结果无需在意。

[标注页面.jpg]请帮我评价这个页面的布局和功能,并提出优化建议。

使用方案评估功能的时候,需要注意设计稿中的文字部分一定要严格和功能保持一致,不能随意填充,不然会影响评估结果。

总结

这篇文章提出了搭建交互设计AI工作流的一种方法,立足于AI工具,也结合了个人的工作流程和人工的筛选调整过程。AI工作流能大大减少了我们的前期研究和资料收集的工作,为设计提供丰富的思路,也能校正和补充我们的设计方案。

但是工作流也有自身的局限,对于开发者而言,畅想的往往是一个高度自动化的“全AI”的未来,但设计师这个职业身份让我们明白:问题永远没有标准答案,设计本身也会因时因地因各种因素而变化调整。我们可以把部分结构化的思维过程交给AI,但方向和最终结果只能由人类之间不断碰撞得出。

本文由 @阿真真真真 原创发布于人人都是产品经理。未经作者许可,禁止转载

题图来自Unsplash,基于CC0协议

更多精彩内容,请关注人人都是产品经理微信公众号或下载App
评论
评论请登录
  1. 目前还没评论,等你发挥!