審美工程 · 10 / 12

怎麼看設計才算看進去了

收藏夾在膨脹,眼力沒長進,問題出在看的方式。這一節給一套固定的拆解順序,把「真好看」翻譯成能帶走的變數,你的參考庫從這裏開始有複利。

瞇眼測試拆解順序透視鏡原子網格參考庫
先承認:收藏一百個等於沒收藏

收藏夾裏躺着一百個「靈感網站」,真要動手的時候還是找不到方向,這種收藏等於沒收藏。打開一個好設計,掃一眼説「真好看」,截圖,關掉,這是遊客行為:拍了照、發了圈,什麼都沒帶走。

看進去要按固定順序拆,每層只回答一個問題:先看層級(誰是主角),再量間距(padding 有沒有規律),然後數顏色(幾種、怎麼分工),最後摳細節(圓角、陰影、字重各有幾檔)。順序從大到小:先抓骨架,再摳皮膚。

這四步前面還有一個第 0 步:瞇眼。睜大眼睛細看之前,先把整頁糊成一團看一遍,主次和分組自己會浮出來。這一節把五步全部現場演一遍。

第 0 步:先把眼睛瞇起來

圖形設計師有個老手藝叫瞇眼測試:閉上一隻眼,瞇起另一隻看螢幕。細節糊掉之後,剩下的只有塊面、明暗和分組,這時候哪些元素還跳得出來、哪些看上去是一夥的,一眼就有答案。《About Face 4:交互設計精髓》第 17 章把它列為檢驗層級和關係的首選工具,還提到換個角度看,常能發現之前沒注意到的佈局問題。

瞇眼在驗的是什麼?同一章給了答案:人看到一屏東西,下意識會連問兩個問題,這裏什麼重要?這些東西有什麼關聯?好設計搶在你問出口之前就答完了。把這兩問翻成白話,就是本節的拆解口訣。

拆解口訣兩問:這個介面想讓我先看什麼?哪些東西被擺成了一夥?

瞇眼答第一遍,睜眼驗第二遍。答案一致,層級過硬;瞇眼時找不到落點、分組糊成一片,睜眼看再精緻也白搭。下面的透視鏡裏新加了瞇眼視圖,先切它。

互動演示 · 透視鏡:一張頁面拆四層

下面這張落地頁是用本章的規矩現做的:唯一主角、8pt 間距、一個主色。切換視圖,看同一張頁面在四層拆解裏各自長什麼樣。

透視鏡 5 種視圖
按拆解順序切一遍:瞇眼、層級、間距、色板
shiplist.app
Shiplist 功能定價 登入
每週該發的貨,一屏看完
自動彙總任務進度,生成本週發佈清單
免費開始 看演示
自動同步
任務與程式碼狀態即時彙總
一鍵週報
週五自動生成發佈清單
進度提醒
延期風險提前三天預警
主色
墨
灰
淺灰
功能綠
數得過來,説明有預算
先原樣看一遍,別急着下評價。四個視圖各回答一個問題,順序固定:瞇眼、層級、間距、色板。
小測 · 打開好設計,第一步幹什麼
打開一個你鍾意嘅網站,第一步做咩? 單選
A截圖存起來,攢着以後用
B先瞇眼掃一遍,再找這一屏的唯一主角
C看用了什麼字體
D直接發給 AI 讓它照抄
間距是量出來的,拿尺子説話

好設計的間距不靠手感,靠一把尺子。《About Face 4》第 17 章管這把尺子叫原子網格單位:先定一個最小間距,比如 8px,頁面上元素和元素、組和組的距離一律取它的倍數。書裏還給網格記了三筆帳:位置有規律,用戶找東西更快(可用性);區域之間的比例關係妥帖,看着舒服(美感);佈局決策提前做完,改版省力(效率)。

反過來,這就成了鑑定好設計的硬指標:拿工具量三五個間距,看能不能除盡同一個數。除得盡,説明背地裏有一套網格系統在管;除不盡,多半是手擺的。量間距這一步,量的就是這個。

互動演示 · 拆解演練場:親手拆一張卡

下面這張習慣打卡 App 的週報卡按 8pt 網格現做。透視鏡是看別人拆,這回你自己動手:先瞇眼看主次,再亮標尺量間距,最後答一道題驗收。

拆解演練場 三步
按順序來:① 瞇眼 → ② 量間距 → ③ 報出原子單位
habitly.app
Habitly第 32 周
本週打卡 5 天,超過上週
再堅持 2 天,解鎖連續四周全勤
繼續打卡
連續天數
19
本月完成率
86%
兩個按鈕都能反覆開關。瞇眼時先回答口訣兩問,再開標尺對答案。
③ 驗收題:這張卡的原子網格單位是多少?
A4px
B8px
C12px
D冇固定單位,睇住舒服就得
拆解拆的是別人的思考

信息設計大師 Edward Tufte 給優秀視覺設計下過一個定義,《About Face 4》第 17 章原樣轉述了它:

「優秀的視覺設計,是把清晰的思考視覺化。」Edward Tufte

順着這個定義看,拆解這件事就説得通了:你找的主角、量的間距、數的顏色,都是設計者想清楚之後落在頁面上的痕跡。拆一張好設計,等於把別人的思考過程倒放一遍,這比看十篇「配色技巧」長眼力。反過來,一張拆不出所以然的頁面,多半當初就沒想清楚。

動手 · 拆解五步,勾着走一遍

把第 0 步補進清單,五步在這裏。每步只回答一個問題,勾一個亮一個,回答不上來就停在那一步多看兩眼。

拆解五步清單 0 / 5
本節要點
✓

看進去有固定順序:第 0 步瞇眼,然後層級、間距、顏色、細節。每層只回答一個問題,從骨架到皮膚。

✓

瞇眼答口訣兩問:這個介面想讓我先看什麼?哪些東西被擺成了一夥?瞇眼答一遍,睜眼驗一遍。

✓

間距拿尺子鑑定:量三五個間距,能除盡同一個數的,背地裏有原子網格;除不盡的,多半是手擺的。

✓

存參考圖前先配一句判詞:它好在哪個變數。收藏夾從圖堆變成判例庫,下一節就拿它去餵 AI。

內容來源:小山學堂「審美工程」專題原創;部分設計原則整理自《About Face 4:交互設計精髓》第 17 章(Alan Cooper 等著),Tufte 定位句轉引自同章。