設計原則與手法
前面幾章是「怎麼做」,這一章是「為什麼這樣做」。 六條原則逐字保留當初的需求原文,手法庫是已驗證可直接取用的清單。
六條原則
都來自一句原話
每條原則保留當初的需求原文,再翻成可核對的執行紀律。判斷一個做法對不對,回到原話比回到規範更快。
「營造更多空間感的設計,像是在大自然中廣闊的感受。以滿版、破版、通透感方向,而不是卡片、容器。」原始需求
段落內距 ≥ 160px,hero ≥ 360px。空間留出來的比填滿的更重要。
三種模式 滿版、破版、通透層疊,取代卡片並排作為預設。
卡片降級 只給必須並排比較的資訊,單頁至多 1 組。
出血 內容收在 1080 至 1280,背景與大型元素可破出到滿版。
「貼近自然的現實感,與晨霧般的霧氣質感。」原始需求
低飽和 全家族貼近實景色相,不是設計品味的飽和調。
mist 三形態 薄霧覆層、中間色階、模糊光散射,承載晨霧質感。
不用純黑純白 深用 cedar-900,亮用 cream-100。
材質語彙 木頭、亞麻、乾燥花草、粗陶。禁大理石、金屬、水晶、塑膠仿木。
「減少線條的邊界感。分區、容器只在需要的時候使用,其餘多使用多色漸層來展現自然景象的變化。」原始需求
禁 border 除按鈕描邊與 focus ring 外全域禁用。
禁 hairline 含表格。分隔用內距加底色微差。
光暈式陰影 offset 0 0、大模糊、極低透明度的 cedar 色,不用純黑。
分區主武器 多色漸層,段落間過渡由色相流動承載。
「需要一些動態效果來呈現自然風的流動。」原始需求
唯一活動證據 W1 爐光暈呼吸,透明度 0.85 至 1.0,週期 8 至 12 秒。
速度 ≥ 300ms,比業界慢 2 至 3 倍;週期動效 ≥ 10 秒。
不搶注意 任一動效造成的明度變化 ≤ 5%、位移 ≤ 15%。
不疊加視差 連續畫布本身就承載「捲動即景色」,不需要額外漂移。
「漸層不只是單色漸層,而是森林、自然、晨曦都融入其中,融合多種顏色體現自然的景觀。」原始需求
至少 5 個 stop 涵蓋多個色相家族的自然過渡,禁單色系深淺漸層。
主畫布 21 stops 從晨林深綠一路走到營火與夜。
dawn 四階 承載森林晨曦的真實光譜。
禁紫色作主基底 不在家族內,偏離品牌識別。
「『鬆鬆』文字單獨使用時,優先使用 LOGO lockups 或 wordmark。」原始需求
單獨呈現時 一律用 lockup 或 wordmark 資產,依情境選堆疊或水平。
禁重繪 不用辰宇落雁體或任何展示字型重繪品牌名。
展示字的分工 只用於非品牌名的標語。
例外 caption 級的 metadata 標籤(≤ 14px)不受限,那不是品牌識別的展示狀態。
不衝突時全數並用。衝突時依這個順序裁決——品牌識別是最不可協商的錨,感受層比手法層根本,動效是靜態設計的延伸所以居末。
手法從品牌反推
不從流行反推
設計圈流行的創意炫技本質上是搶注意力的手法,鬆鬆本質上是不搶注意力。依廣義潮流走,反而背離品牌。
一本刊物
不是一張網頁
節奏由篇幅密度差異承載,不由動效承載。特集大圖、純文字章名、大留白、緊湊資訊四種段落交替,動效只在必要處存在。
照片是主角
文字是圖說
照片承載氛圍與敘事,文字克制成圖說大小。字級層次靠對比不靠尺寸誇張——辰宇落雁體的 44px 是下限,不是目標。
動態是體溫
不是語言
W1 爐光暈的呼吸是全站唯一「活著」的證據,如爐火微微起伏。其他互動反應都收斂在「使用者知道有回應」的最低程度。
任何手法選型都必須從這六條反推,且要說得出是從哪一條來的。
三方交集加上日系刊物骨架。權重不是參考比例,是取用的優先序。
不走 awwwards 得獎作的創意炫技路線 本質背離靜謐,違反動效不搶注意。改走上表的四方交集。
不走大眾按摩店的過度熱情 違反 Sage 內斂與催促語禁令。改走 editorial 的安靜質感。
不走完全靜態、缺 W1 溫度的資訊網站 違反單一武器。至少保留一處呼吸疊層。
真實實景照片:露天露營按摩床、室內產品陳列、按摩實作特寫、老師手法特寫
每張大空間呼吸,佔比高(≥ 30% 頁面面積)
圖說附小字,如「攝於 2025 秋、林口露營場」
承載文字時必疊霧幕或漸層覆層,確保對比 ≥ 4.5:1
stock photo 與 AI 生圖的假感
高飽和後製與螢光燈色
臨床感:拔罐泛紅特寫、儀器感
過度銳化與 HDR 味重
選一個手法之前
先過七問
任何段落或版面樣式選型前逐條自問。回答「不」或「不明」,就是不該用。
已驗證的
六種主導手法
這些已通過七問檢核並實際落地,可以直接取用不必從零推導。但同一種手法不重複配置。
不重複紀律:主導手法是讀者辨識「換了一頁」的第一訊號,兩頁共用同一種骨架會讓它們讀起來像同一頁的不同捲動位置。 既有手法的變體(改欄位比例、調段落順序)不算新手法,變體與原型在讀者眼中是同一種骨架。 手法退場時從表中移除,釋出給其他頁使用。