剋制:給顏色和字體做預算
好看的介面大多不是加出來的,是省出來的。這一節給你一套預算表:一個主色加中性色、兩種字重、一套圓角。超預算的東西再好看也砍。
預算制的規則很短:一個主色,其餘交給黑白灰的中性色;兩種字重,正文一檔強調一檔;一套圓角,定一個數處處沿用。想加第二種彩色時,先問自己一句「它值不值得動預算」,多數時候答案是省下來。
下面是一張剋制版的活動頁。連點五次「再加一種顏色」,看它一步步劣化;點滿五次後,再一鍵做減法。
加色器演的是怎麼變醜,減法遊戲演怎麼救回來。《About Face 4》給過一個可執行的辦法:刪減東西,直到刪掉某件破壞了設計為止,再把最後刪掉的那件加回來。下面這張促銷卡堆了六件裝飾,逐件點掉試試,哪件刪了頁面就破,你自然會知道。
剋制還有一條更細的紀律,管的是「差不多」。《About Face 4》把話説得很重:不必要的差異是一致設計的大敵。兩個間距幾乎一樣,就調成同一個數;兩種顏色幾乎一樣,就用同一個。每處差異的存在都要有理由,找不出理由,就消除它。下面這張卡藏着三處「差不多」,切換看收編前後。
顏色預算管的是「幾種」,飽和度管的是「多響」。《About Face 4》提醒過:高飽和的顏色個個都在喊,湊在一起就是嘉年華效應,用戶會被吵得不堪重負。同樣三個標籤,把飽和度當音量鍵推推看。
這回把三筆預算做成開關,任意組合,右下角的徽標即時告訴你超沒超支。
預算制三條:一個主色加中性色、兩種字重、一套圓角。想突破預算,先問值不值。
每多一種顏色,已有的顏色都在貶值。做減法比做加法更常出效果,刪顏色是性價比最高的一步。
覺得頁面廉價,按順序查:先數彩色有幾種,再數字重有幾檔,最後看圓角統不統一。
兩條可執行的紀律:差不多一樣就做成一模一樣;拿不準要不要留,就刪到破壞為止,再把最後刪掉的那件加回來。
內容來源:小山學堂「審美工程」專題原創;「不必要的差異是大敵」「刪減到破壞為止」等設計原則整理自《About Face 4:交互設計精髓》第 17 章(Alan Cooper 等)。