審美工程 · 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 章。