最近在持續(xù)學(xué)習(xí)一些和 AI 繪圖有關(guān)的操作和知識(shí)，其中 Stable Diffusion （后面簡(jiǎn)稱 SD）是用的比較多的繪圖工具，感興趣的同學(xué)可以自己到 B 站搜索秋葉的視頻了解安裝和操作，以及獲取對(duì)應(yīng)的下載鏈接。

雖然 SD 的繪圖本身很強(qiáng)大，從 2.0 到現(xiàn)在每一次迭代都突飛猛勁，但本質(zhì)上它是一套算法和程序，依然需要通過相關(guān)的 UI 界面來輸入指令運(yùn)行。

所以，有第三方團(tuán)隊(duì)為它開發(fā)了一套 WEBUI 操作界面，每次啟動(dòng)后通過瀏覽器對(duì)程序進(jìn)行交互。雖然網(wǎng)上有不少魔改和優(yōu)化版本，但它大致的樣式如下：

雖然用愛發(fā)電很偉大，但畢竟是開發(fā)者直接拿開源框架做的界面，“又不是不能用”系列……所以存在很多體驗(yàn)上的問題。尤其是操作最高頻的提示詞輸入，問題非常突出，嚴(yán)重影響正常的操作流程。

所以今天我就圍繞提示詞輸出框，做一個(gè)簡(jiǎn)單的體驗(yàn)和交互改版。

提示詞 Prompt 是 SD 中用來生成圖形的指令，反提示詞 Negative prompt 則是用來禁止畫面出現(xiàn)某些特征、元素的指令，我們通過在對(duì)應(yīng)輸入框輸入提示詞來生成想要的圖像。

輸入過程需要應(yīng)用很多詞匯和詞組，以及應(yīng)用相應(yīng)的語法，具體的我就不在這里介紹了?？傊瑏砜纯聪旅孢@個(gè)案例：

提示詞 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

英語稍微入門應(yīng)該能看到大多數(shù)單詞的意思，看不懂也不要緊，簡(jiǎn)單說起來，這就是由一堆相互之間沒有太大關(guān)聯(lián)的獨(dú)立詞匯組合而成的內(nèi)容，不具備可讀性。

尤其是按正常輸入邏輯，往往是想到哪打到哪，先描述了人物外貌，然后描述動(dòng)作、場(chǎng)景、光線，然后想起來外貌的頭發(fā)忘記寫了在后面添加上，再想起來動(dòng)作的表情忘記加了再在后面添加上。

所以為了讓內(nèi)容邏輯性和可讀性變強(qiáng)一點(diǎn)，用戶可以人為進(jìn)行分段，將不同描述類型放置在同一段，這樣改起來會(huì)順手一點(diǎn)。

但光這樣還是不夠，當(dāng)段落多起來每次識(shí)別段落的類型還是要看一遍里面的詞匯才能反應(yīng)過來（尤其是保存模版和調(diào)用場(chǎng)景）。

再加上，使用英文逗號(hào)形式做分隔，提示詞之間的隔斷感很弱，尤其是在忘記添加空格模式下的多個(gè)單詞并列：

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

緊湊導(dǎo)致的另一個(gè)問題，就是語法應(yīng)用，使用括號(hào)和尖括號(hào)的特殊提示詞，會(huì)讓視覺信息表現(xiàn)得更混亂：

(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)

除此之外，在我們輸入提示詞的過程中，會(huì)有類似編程工具的詞匯的提示彈窗，但這個(gè)提示彈窗難受的地方在于，它不是完全根據(jù)輸入內(nèi)容關(guān)聯(lián)性排序的，而是根據(jù)后面數(shù)量大小排序的。這種根據(jù)數(shù)量排序的方式等于是給用戶建議而不是簡(jiǎn)單的提示，這并不符合實(shí)際的應(yīng)用場(chǎng)景。

所以，根據(jù)上面分析的體驗(yàn)問題，后續(xù)改動(dòng)就要解決下面幾個(gè)問題：

1. 提示詞的有效歸類

2. 提示詞更易于閱讀

3. 特殊語法的差異性

4. 提示排序符合使用習(xí)慣

   
   

調(diào)整1：提示詞的有效歸類

首先第一個(gè)改動(dòng)，就是調(diào)整輸入框的內(nèi)部展示邏輯，為它添加對(duì)應(yīng)的段落標(biāo)題，通過自定義標(biāo)題文字來進(jìn)行提示詞的分類。

在交互上，默認(rèn)環(huán)境下點(diǎn)擊輸入框內(nèi)空白區(qū)域，就自動(dòng)生成段落和標(biāo)題。

在完成第一段之后按回車添即可添加新的段落和標(biāo)題，無需使用鼠標(biāo)進(jìn)行操作和切換。

鍵盤可以在提示詞內(nèi)正常編輯和移動(dòng)光標(biāo)到上下段落，需要修改段落標(biāo)題的話需要鼠標(biāo)去選中進(jìn)行修改。

通過文字提示和段落間更大的間距，讓大批量提示詞的整理和編輯更簡(jiǎn)單。

調(diào)整2：優(yōu)化提示詞間距

之前的提示詞間距是添加逗號(hào)后自動(dòng)生成一個(gè)空格，這個(gè)空格可以刪除，如果手動(dòng)添加更多空格，也會(huì)被合并成一個(gè)。

實(shí)際場(chǎng)景中，刪除空格的需求是完全不存在的，而一個(gè)空格的寬度又是完全不夠用的，所以不需要繼承不完整的普通編程軟件邏輯，直接在用戶添加逗號(hào)后自動(dòng)生成固定長(zhǎng)度的間距，不能刪除，且手動(dòng)輸入再多空格也會(huì)被自動(dòng)合并。

下方是增加了提示詞之間間距的結(jié)果，可以對(duì)比上方的案例，看看是否檢索、查找、識(shí)別的效率提升了（最好電腦看）。

調(diào)整3：特殊語法的差異性

然后，就是增加特殊語法的差異化。先聲明這事體驗(yàn)改版，不是完整的界面樣式輸出，我先優(yōu)化下方三個(gè)類型語法：

( ): 添加括號(hào)內(nèi)內(nèi)容的權(quán)重

[ ]：融合和分布效果應(yīng)用

< >：引用模型的相關(guān)設(shè)置

不管是加權(quán)重還是融合和分布，都意味著對(duì)原有提示詞做出函數(shù)處理，我們可以參照常規(guī)的代碼編輯器使用不同配色來表現(xiàn)。

而引用 lora 模型是一個(gè)比一般提示詞級(jí)別更高的指令，往往也是當(dāng)前生成圖像最重要的基底，所以我使用權(quán)重更高的方式展示。

通過顏色和樣式上的區(qū)分（不代表最終視覺），我們可以很好的識(shí)別特殊的指令，當(dāng)出現(xiàn)錯(cuò)誤的加權(quán)或者融合時(shí)可以快速的定位對(duì)應(yīng)的提示詞，而不是痛苦的在一堆單詞里慢慢檢索。

調(diào)整4：提示排序符合使用習(xí)慣

提示排序進(jìn)行邏輯的調(diào)整，詞組提示優(yōu)先從第一個(gè)單詞匹配，然后再匹配第2、3、4個(gè)單詞位置的詞組。同單詞位置下，再根據(jù)右側(cè)數(shù)量從大到小排列。

同時(shí)，移除原來設(shè)計(jì)中的斑馬紋，在當(dāng)前的環(huán)境中并不會(huì)增加內(nèi)容識(shí)別的效率，反而是干擾。

結(jié)尾

通過以上簡(jiǎn)單的4個(gè)方向的優(yōu)化，相信一定能獲得遠(yuǎn)超以往的體驗(yàn)效果。時(shí)間關(guān)系，我就不拿整個(gè) SD 的 WUI 做改版了，以后有機(jī)會(huì)的話可以嘗試。

順便說個(gè)題外話，雖然這周會(huì)寫篇 AI 與 UI 關(guān)系的個(gè)人感想，但可以提前聲明，界面的美觀度對(duì)UI設(shè)計(jì)師的價(jià)值體現(xiàn)是非常微弱的。就像 SD這樣的工具，做各種高大上的界面對(duì)用戶來說有意義嗎？

用戶顯然想要的是更好的體驗(yàn)和交互，這是UI設(shè)計(jì)師的核心競(jìng)爭(zhēng)力，而這些東西恰恰是最難通過語言和文字描述給AI讓它們?nèi)ド傻臇|西。

不管AI能生成多復(fù)雜多美倫美幻的界面，在短時(shí)間內(nèi)（10年內(nèi)），它都沒辦法去彌補(bǔ)在體驗(yàn)和交互上的缺失，只能創(chuàng)造出大量的飛機(jī)稿，只是讓大家以后可以不用再依賴追波了，??……

同時(shí)，如果想要練習(xí)對(duì) B端交互和體驗(yàn)的項(xiàng)目輸出能力，多去找這些網(wǎng)頁管理系統(tǒng)，除了SD外，還有數(shù)之不盡的系統(tǒng)，如一般路由器固件WEBUI，軟路由 Openwrt 系統(tǒng)，Openclash的操作界面，Diy NAS 的 OpenEuler 系統(tǒng)等等。

多關(guān)注怎么解決項(xiàng)目實(shí)際問題，你就不會(huì)被現(xiàn)在的 AI 發(fā)展所困擾，也不需要擔(dān)心自己會(huì)輕易被取代～

新一期B端課程快開課了，如果想要系統(tǒng)提升自己的，可以掃描下方的二維碼咨詢我的B端產(chǎn)品設(shè)計(jì)課程了↓

課程介紹：

我們下篇再賤～