最近在持续学习一些和 AI 绘图有关的操作和知识，其中 Stable Diffusion （后面简称 SD）是用的比较多的绘图工具，感兴趣的同学可以自己到 B 站搜索秋叶的视频了解安装和操作，以及获取对应的下载链接。

虽然 SD 的绘图本身很强大，从 2.0 到现在每一次迭代都突飞猛劲，但本质上它是一套算法和程序，依然需要通过相关的 UI 界面来输入指令运行。

所以，有第三方团队为它开发了一套 WEBUI 操作界面，每次启动后通过浏览器对程序进行交互。虽然网上有不少魔改和优化版本，但它大致的样式如下：

虽然用爱发电很伟大，但毕竟是开发者直接拿开源框架做的界面，“又不是不能用”系列……所以存在很多体验上的问题。尤其是操作最高频的提示词输入，问题非常突出，严重影响正常的操作流程。

所以今天我就围绕提示词输出框，做一个简单的体验和交互改版。

提示词 Prompt 是 SD 中用来生成图形的指令，反提示词 Negative prompt 则是用来禁止画面出现某些特征、元素的指令，我们通过在对应输入框输入提示词来生成想要的图像。

输入过程需要应用很多词汇和词组，以及应用相应的语法，具体的我就不在这里介绍了。总之，来看看下面这个案例：

提示词 Prompt

best quality, masterpiece, (realistic:1.2), (1girl,solo:1.6), vampire, evil, waistup , vibrant, a young women, Middle Ages style, Gothic style, detailed face, detailed blue eyes, (detailed blonde hair:1.4),strict expression, detailed skin, (detailed red and blace clothes:1.5),black cloak,look at viewer, dramatic, sharp focus, Middle Ages dark environment,(((Gothic castle))),50mm,F1.2, EOS-1D X Mark III,(half body:1.2),(in the night),standing,(complex background:1.6), (heavy makeup:1.3),blood on the face,(sunset:1.2)

反提示词 Nagative Prompt

asian, (low quality, worst quality:1.4), fat,obese, thick, disfigured, weird hands, broken fingers, extra fingers, missing fingers, mutated hands, nsfw, cropped, nude,weapone,weird hands, broken fingers, extra fingers, missing fingers, mutated hands

英语稍微入门应该能看到大多数单词的意思，看不懂也不要紧，简单说起来，这就是由一堆相互之间没有太大关联的独立词汇组合而成的内容，不具备可读性。

尤其是按正常输入逻辑，往往是想到哪打到哪，先描述了人物外貌，然后描述动作、场景、光线，然后想起来外貌的头发忘记写了在后面添加上，再想起来动作的表情忘记加了再在后面添加上。

所以为了让内容逻辑性和可读性变强一点，用户可以人为进行分段，将不同描述类型放置在同一段，这样改起来会顺手一点。

但光这样还是不够，当段落多起来每次识别段落的类型还是要看一遍里面的词汇才能反应过来（尤其是保存模版和调用场景）。

再加上，使用英文逗号形式做分隔，提示词之间的隔断感很弱，尤其是在忘记添加空格模式下的多个单词并列：

1girl,comic,asian,standing,cloth,dress,solo,cute,……

紧凑导致的另一个问题，就是语法应用，使用括号和尖括号的特殊提示词，会让视觉信息表现得更混乱：

(Cinematic Photo:1.3) of (Masterpiece:1.3) (Full body:1.4), the most beautiful artwork in the world, slow motion walking pose, ethereal, (cold colors:1.1), digital painting, artstation, concept art, matte, sharp focus, illustration, <lora:darkKnightFashion_v10:0.6>, ((bloom)), (volumetric blue dark blue smoke:0.7), volumetric lighting,Highly Detailed,(High Contrast:1.3)

除此之外，在我们输入提示词的过程中，会有类似编程工具的词汇的提示弹窗，但这个提示弹窗难受的地方在于，它不是完全根据输入内容关联性排序的，而是根据后面数量大小排序的。这种根据数量排序的方式等于是给用户建议而不是简单的提示，这并不符合实际的应用场景。

所以，根据上面分析的体验问题，后续改动就要解决下面几个问题：

1. 提示词的有效归类

2. 提示词更易于阅读

3. 特殊语法的差异性

4. 提示排序符合使用习惯

   
   

调整1：提示词的有效归类

首先第一个改动，就是调整输入框的内部展示逻辑，为它添加对应的段落标题，通过自定义标题文字来进行提示词的分类。

在交互上，默认环境下点击输入框内空白区域，就自动生成段落和标题。

在完成第一段之后按回车添即可添加新的段落和标题，无需使用鼠标进行操作和切换。

键盘可以在提示词内正常编辑和移动光标到上下段落，需要修改段落标题的话需要鼠标去选中进行修改。

通过文字提示和段落间更大的间距，让大批量提示词的整理和编辑更简单。

调整2：优化提示词间距

之前的提示词间距是添加逗号后自动生成一个空格，这个空格可以删除，如果手动添加更多空格，也会被合并成一个。

实际场景中，删除空格的需求是完全不存在的，而一个空格的宽度又是完全不够用的，所以不需要继承不完整的普通编程软件逻辑，直接在用户添加逗号后自动生成固定长度的间距，不能删除，且手动输入再多空格也会被自动合并。

下方是增加了提示词之间间距的结果，可以对比上方的案例，看看是否检索、查找、识别的效率提升了（最好电脑看）。

调整3：特殊语法的差异性

然后，就是增加特殊语法的差异化。先声明这事体验改版，不是完整的界面样式输出，我先优化下方三个类型语法：

( ): 添加括号内内容的权重

[ ]：融合和分布效果应用

< >：引用模型的相关设置

不管是加权重还是融合和分布，都意味着对原有提示词做出函数处理，我们可以参照常规的代码编辑器使用不同配色来表现。

而引用 lora 模型是一个比一般提示词级别更高的指令，往往也是当前生成图像最重要的基底，所以我使用权重更高的方式展示。

通过颜色和样式上的区分（不代表最终视觉），我们可以很好的识别特殊的指令，当出现错误的加权或者融合时可以快速的定位对应的提示词，而不是痛苦的在一堆单词里慢慢检索。

调整4：提示排序符合使用习惯

提示排序进行逻辑的调整，词组提示优先从第一个单词匹配，然后再匹配第2、3、4个单词位置的词组。同单词位置下，再根据右侧数量从大到小排列。

同时，移除原来设计中的斑马纹，在当前的环境中并不会增加内容识别的效率，反而是干扰。

结尾

通过以上简单的4个方向的优化，相信一定能获得远超以往的体验效果。时间关系，我就不拿整个 SD 的 WUI 做改版了，以后有机会的话可以尝试。

顺便说个题外话，虽然这周会写篇 AI 与 UI 关系的个人感想，但可以提前声明，界面的美观度对UI设计师的价值体现是非常微弱的。就像 SD这样的工具，做各种高大上的界面对用户来说有意义吗？

用户显然想要的是更好的体验和交互，这是UI设计师的核心竞争力，而这些东西恰恰是最难通过语言和文字描述给AI让它们去生成的东西。

不管AI能生成多复杂多美伦美幻的界面，在短时间内（10年内），它都没办法去弥补在体验和交互上的缺失，只能创造出大量的飞机稿，只是让大家以后可以不用再依赖追波了，🐶……

同时，如果想要练习对 B端交互和体验的项目输出能力，多去找这些网页管理系统，除了SD外，还有数之不尽的系统，如一般路由器固件WEBUI，软路由 Openwrt 系统，Openclash的操作界面，Diy NAS 的 OpenEuler 系统等等。

多关注怎么解决项目实际问题，你就不会被现在的 AI 发展所困扰，也不需要担心自己会轻易被取代～

新一期B端课程快开课了，如果想要系统提升自己的，可以扫描下方的二维码咨询我的B端产品设计课程了↓

课程介绍：

我们下篇再贱～