審美工程 · 7 / 12

「好看」的一百種具體說法

你對 AI 說「好看一點」,它只能猜;你說「資訊密度加一檔、視覺噪音降下來」,它立刻知道該動哪裡。這一節給你十二個能直接用的審美詞、一套拆解一切視覺差異的八變數,外加一臺把抱怨翻譯成術語的機器。

審美詞彙八變數正反案例抱怨翻譯可複製速查
說不出名字,就改不對地方

「好看一點」交出去,AI 只能猜:猜你要加漸變,猜你要換字型,猜你要堆動效。「資訊密度加一檔,視覺噪音降下來」交出去,AI 立刻知道該動哪裡:多放兩組資料,砍掉一半徽章。詞彙是判斷力的容器:裝得下「視覺噪音」這個詞,你才留得住「這頁面哪裡不對」的那個直覺。

審美詞彙量,決定你能指揮 AI 做到的上限。
動手 · 八個詞,一張張翻開
審美詞彙卡組 0 / 12
點一張卡翻開釋義和正反例,再點一次收起;十二張翻完有總結。
動手 · 八個變數,一間試衣間

上面的詞管「怎麼評」,下面這套變數管「怎麼改」。Bertin 在《圖形符號學》裡把視覺編碼拆成八個變數,About Face 4 沿用了這套清單:形狀、大小、色值、色調、飽和度、方向、紋理、位置。介面上一切「看起來不一樣」,拆到底就是這八個旋鈕。同一排色塊,動哪個變數,講出來的故事就不一樣。

八變數試衣間 0 / 8
點一個變數,看它怎麼把一排一模一樣的色塊區分開;八個都試過有總結。
現在五個元素一模一樣,誰重要、誰一組、誰能點,都看不出來。挑一個變數動手。
練一手 · 風險要排隊
場景題:五檔風險怎麼畫 單選

儀表盤要展示五檔風險,從低到高一眼排得出來。該動哪個變數?

A五種色調,綠黃橙紅紫各佔一檔
B同一色調,色值由淺到深排五檔
C五種形狀,圓方三角各管一檔
D給高風險那檔加一塊紋理
視覺管類別,文字管身份

About Face 4 裡有條壓艙原則:表明「是什麼」用視覺屬性,明確「是哪一個」用文字。圖示說到「這是份文件」就到頭了,哪份是合同,得靠檔名接著說。兩樣各幹各的活,誰也替不了誰。

視覺說到哪裡停 二檔切換
切一下,看視覺說到哪裡停,文字從哪裡接手。
三個圖示說完「都是文件」就沒詞了,想找合同只能挨個開啟。
動手 · 把抱怨翻譯成變數

客戶和老闆說不出術語,但他們的抱怨句句有所指。聽懂抱怨背後的變數,改起來才有方向。先練四句最常聽到的。

抱怨翻譯機 0 / 4
先點左列一句抱怨,再點右列它對應的術語;配對正確會鎖定。
客戶的抱怨
「太亂了啦」
「看起來好廉價」
「重點不夠突出」
「太擠了啦」
翻譯成術語
層級缺失
視覺噪音太高
留白不足
配色超預算
抄走這份速查表

八個詞整理成了給 AI 用的句式,每句都能直接貼進 Prompt。複製一份存起來,下次改介面照著挑。

給 AI 的審美詞彙速查 可複製
給 AI 的審美詞彙速查(替換「好看一點」用) 資訊密度:這一屏資訊密度偏低,同屏多放兩組關鍵資料。 視覺噪音:徽章和分割線太多,視覺噪音超標,裝飾砍掉一半。 呼吸感:區塊之間加大間距,留出呼吸感,內容別貼邊。 視覺層級:標題和正文拉開字號與字重,一屏只捧一個主角。 視覺重量:主按鈕保持實心,其餘降成描邊,壓低視覺重量。 親密性:標籤貼緊自己的輸入框,組與組離遠,用距離表達分組。 對比度:正文和背景的對比度不夠,灰字加深到可讀級別。 基線對齊:所有元素左緣對齊同一條基線,別各起各的頭。 HSV:調色分開說旋鈕,色調、飽和度、色值,一次動一個。 有序變數:要表達從低到高,動色值或大小,別換色調。 能供性:能點的做出能點的樣子,純展示的別帶按鈕氣質。 瞇眼測試:交稿前瞇眼看一遍,主角沒跳出來就回爐。
練一題再走
場景題:沒有高階感 單選

老闆拿著你的頁面說:「沒有高階感」。照這一節的思路,先檢查哪個?

A換個貴的字型
B數一數頁面上有幾種顏色、幾種圓角
C加動效
D加深陰影
本節要點
✓

「好看」是許願,術語是指令:說得出「資訊密度」「視覺噪音」,AI 才知道往哪改。

✓

抱怨都能翻譯成變數:「太亂」是視覺噪音超標,「看起來好廉價」是配色超預算,翻譯出來才改得對。

✓

八個變數各有分工:層級和數量找有序變數(大小、色值),分類才用色調,形狀管「是什麼」,紋理管「能不能按」。

✓

下次讓 AI 改介面,先從速查表挑一個詞寫進 Prompt,跟「好看一點」的產出對比一次,感受差距。

內容來源:小山學堂「審美工程」專題原創;部分設計原則整理自《About Face 4:互動設計精髓》第 17 章。