審美工程 · 5 / 12

剋制:給顏色和字體做預算

好看的介面大多不是加出來的,是省出來的。這一節給你一套預算表:一個主色加中性色、兩種字重、一套圓角。超預算的東西再好看也砍。

主色預算字重預算圓角統一
先給顏色和字體定個預算

預算制的規則很短:一個主色,其餘交給黑白灰的中性色;兩種字重,正文一檔強調一檔;一套圓角,定一個數處處沿用。想加第二種彩色時,先問自己一句「它值不值得動預算」,多數時候答案是省下來。

「每多加一種顏色,已有的每種顏色都在貶值。」顏色的價值在於稀缺:只有一處玫紅時,它就是全場焦點;有六種彩色時,誰都當不了焦點。
親手把一張頁面做醜

下面是一張剋制版的活動頁。連點五次「再加一種顏色」,看它一步步劣化;點滿五次後,再一鍵做減法。

加色器 已加 0 筆
member.example.com/spring
限時 3 天
春季會員特惠
年度會員立減 40 元,老用戶續費同價。
¥99 / 年
立即開通
支持 7 天無理由退款
現在是剋制版:主色只有按鈕上的一塊玫紅,其餘交給黑白灰。它憑什麼好看?憑別的都在讓路。
反着來:刪到破壞為止

加色器演的是怎麼變醜,減法遊戲演怎麼救回來。《About Face 4》給過一個可執行的辦法:刪減東西,直到刪掉某件破壞了設計為止,再把最後刪掉的那件加回來。下面這張促銷卡堆了六件裝飾,逐件點掉試試,哪件刪了頁面就破,你自然會知道。

減法遊戲 已刪 0 / 6
點下方的標籤刪掉對應裝飾。六件都是裝飾嗎?未必,有兩件是筋骨,刪了就破。
sale.example.com
年終大促最後一天,錯過再等一年!
HOT NEW
雲相冊專業版
原圖無損備份,家人共享相冊,跨設備自動同步。
領 ¥20 券 · 滿 99 可用 · 疊加立減
立即訂閲 拉好友砍一刀
從你覺得最多餘的那件下手。
差不多一樣?那就做成一模一樣

剋制還有一條更細的紀律,管的是「差不多」。《About Face 4》把話説得很重:不必要的差異是一致設計的大敵。兩個間距幾乎一樣,就調成同一個數;兩種顏色幾乎一樣,就用同一個。每處差異的存在都要有理由,找不出理由,就消除它。下面這張卡藏着三處「差不多」,切換看收編前後。

差異收編器 點擊切換
先在「隨手寫」狀態下找找彆扭的地方,再切到「收編後」對答案。
member.example.com/benefits
會員權益
工單優先響應,兩小時內答覆
新功能搶先體驗,每月一批
專屬客服 優先體驗
三處「差不多」:行距一處 12 一處 15,兩枚標籤的粉一深一淺,字號 13 和 13.5 混着用。單獨看每處都説得過去,疊在一起就是股説不出的鬆散。
間距 14 和 16 同框,怎麼辦
同一張卡片裏,兩個平級段落的間距一處 14 一處 16 單選
量過設計稿,都搵唔到呢兩個間距點解要唔同。點樣處理?
A保留,14 和 16 差得不多,讀者看不出來
B統一成同一個數
C拉開成 8 和 24,讓差異變明顯
D各加一個淺色邊框,把段落框起來
顏色的音量鍵:飽和度

顏色預算管的是「幾種」,飽和度管的是「多響」。《About Face 4》提醒過:高飽和的顏色個個都在喊,湊在一起就是嘉年華效應,用戶會被吵得不堪重負。同樣三個標籤,把飽和度當音量鍵推推看。

飽和度調音台 拖動滑塊
tasks.example.com
本週任務
按優先級排好了,先做紅的。
緊急修復 需求評審 週報整理
35%
35% 上下是工作介面的舒適區:分得清輕重,又不吵。
預算面板:超沒超支一眼看穿

這回把三筆預算做成開關,任意組合,右下角的徽標即時告訴你超沒超支。

預算面板 點擊切換
workspace.example.com
團隊協作空間
把文檔、任務和討論放進同一個工作區。
新功能 團隊版
免費試用 查看定價
10 人以下團隊免費
預算內
顏色數
字重數
圓角
廉價感從哪來
介面顯得廉價,最常見的原因是哪個 單選
A字體不夠貴
B顏色太多且互相打架
C沒用最新的設計趨勢
D圖標不夠精緻
本節要點
✓

預算制三條:一個主色加中性色、兩種字重、一套圓角。想突破預算,先問值不值。

✓

每多一種顏色,已有的顏色都在貶值。做減法比做加法更常出效果,刪顏色是性價比最高的一步。

✓

覺得頁面廉價,按順序查:先數彩色有幾種,再數字重有幾檔,最後看圓角統不統一。

✓

兩條可執行的紀律:差不多一樣就做成一模一樣;拿不準要不要留,就刪到破壞為止,再把最後刪掉的那件加回來。

內容來源:小山學堂「審美工程」專題原創;「不必要的差異是大敵」「刪減到破壞為止」等設計原則整理自《About Face 4:交互設計精髓》第 17 章(Alan Cooper 等)。