美學方向
缺乏系統時,設計會趨向於你見過的一切的平均值:白色的 Inter 字體、漸層主視覺、三欄卡片佈局。刻意地抵擋這種趨勢。
在開始建構之前
用幾行文字寫下:
- 目的 — 要解決的問題、閱讀對象、他們看到它的那一刻。
- 色調 — 選一個並堅持:極簡、編輯風、工業風、溫馨居家、學院風、玩趣風、奢華風、技術風、檔案風。不要寫「現代又簡潔」。那句話代表你還沒決定。
- 一個重點 — 讓人一小時後還記得的東西。一個以不合理大小呈現的展示字體、一種在灰褐色背景上的純色、一個刻意的不對稱、一條貫穿頁面全高的線條。
然後讓所有建構都服務於這三行文字。如果某個元素不符合色調或重點,就刪掉它。
方向藏在細節裡
- 字體比色彩承擔更多工作。 一個獨特的展示字體搭配一個低調的正文字體,就完成了大部分工作。在實際使用的大小下測試配對,再決定是否採用。
- 一種強調色,少量使用。 主導的中性色加上一個全飽和的強調色,勝過五個柔和的顏色。
- 先構圖,後裝飾。 不對稱、重疊、寬大的邊距、一個元素打破網格一次。而不是在對稱佈局上疊加紋理。
- 動態是一個瞬間,而非許多個。 單一交錯進場感覺像工藝;四散各處的滑鼠懸停效果則感覺像模板。
在不同專案間變化
如果你最近完成的兩個成果看起來很像,改變你總是預設使用的東西 — 通常是色溫、展示字體或密度。有目的地從一個小集合中選擇,而不是隨意地漂移到同一個選項:
- 色票:象牙白配墨色 · 深海軍藍配暖白色 · 灰褐色配氧化紅 · 森林綠配奶油色 · 黑色配螢光黃 · 沙色配陶土色。
- 字體:高對比襯線展示體 · 緊密字距的怪誕體 · 人文無襯線體 · 粗襯線體 · 窄展示體 · 全篇使用單一字體。
在開始建構前,用一句話說出你選了哪個以及為什麼。這句話也給了對方一個具體可以回應的東西。
護欄
無論方向為何,這些都必須遵守:
- 內文對比度 4.5:1,標題對比度 3:1。
- 螢幕上內文字體至少 16px,印刷品至少 12pt,1080p 投影片上至少 24px。
- 點擊目標至少 44px。
- 除非品牌已經在使用,否則不要用表情符號當作圖示。
- 不要將照片繪製成 SVG。在有 FLUX 工具時用它生成;否則使用佔位符並說明該處應放置什麼。
當對方提供參考資料時
遵循參考資料的邏輯,而非其表面。如果他們分享了一個喜歡的網站,找出原因 — 間距的韻律、克制、字體粗細 — 然後應用那個原因。複製表面會讓你最終得到一個看起來像是拙劣模仿某個東西的設計。