09 · Principles & Playbook

設計原則與手法

前面幾章是「怎麼做」,這一章是「為什麼這樣做」。 六條原則逐字保留當初的需求原文,手法庫是已驗證可直接取用的清單。

Principles

六條原則
都來自一句原話

每條原則保留當初的需求原文,再翻成可核對的執行紀律。判斷一個做法對不對,回到原話比回到規範更快。

P1空間感

「營造更多空間感的設計,像是在大自然中廣闊的感受。以滿版、破版、通透感方向,而不是卡片、容器。」原始需求

段落內距 ≥ 160px,hero ≥ 360px。空間留出來的比填滿的更重要。

三種模式 滿版、破版、通透層疊,取代卡片並排作為預設。

卡片降級 只給必須並排比較的資訊,單頁至多 1 組。

出血 內容收在 1080 至 1280,背景與大型元素可破出到滿版。

P2自然現實感與晨霧質感

「貼近自然的現實感,與晨霧般的霧氣質感。」原始需求

低飽和 全家族貼近實景色相,不是設計品味的飽和調。

mist 三形態 薄霧覆層、中間色階、模糊光散射,承載晨霧質感。

不用純黑純白 深用 cedar-900,亮用 cream-100。

材質語彙 木頭、亞麻、乾燥花草、粗陶。禁大理石、金屬、水晶、塑膠仿木。

P3邊界感減弱

「減少線條的邊界感。分區、容器只在需要的時候使用,其餘多使用多色漸層來展現自然景象的變化。」原始需求

禁 border 除按鈕描邊與 focus ring 外全域禁用。

禁 hairline 含表格。分隔用內距加底色微差。

光暈式陰影 offset 0 0、大模糊、極低透明度的 cedar 色,不用純黑。

分區主武器 多色漸層,段落間過渡由色相流動承載。

P4自然風流動動效

「需要一些動態效果來呈現自然風的流動。」原始需求

唯一活動證據 W1 爐光暈呼吸,透明度 0.85 至 1.0,週期 8 至 12 秒。

速度 ≥ 300ms,比業界慢 2 至 3 倍;週期動效 ≥ 10 秒。

不搶注意 任一動效造成的明度變化 ≤ 5%、位移 ≤ 15%。

不疊加視差 連續畫布本身就承載「捲動即景色」,不需要額外漂移。

P5多色融合漸層

「漸層不只是單色漸層,而是森林、自然、晨曦都融入其中,融合多種顏色體現自然的景觀。」原始需求

至少 5 個 stop 涵蓋多個色相家族的自然過渡,禁單色系深淺漸層。

主畫布 21 stops 從晨林深綠一路走到營火與夜。

dawn 四階 承載森林晨曦的真實光譜。

禁紫色作主基底 不在家族內,偏離品牌識別。

P6品牌名優先使用 LOGO 資產

「『鬆鬆』文字單獨使用時,優先使用 LOGO lockups 或 wordmark。」原始需求

單獨呈現時 一律用 lockup 或 wordmark 資產,依情境選堆疊或水平。

禁重繪 不用辰宇落雁體或任何展示字型重繪品牌名。

展示字的分工 只用於非品牌名的標語。

例外 caption 級的 metadata 標籤(≤ 14px)不受限,那不是品牌識別的展示狀態。

六條打架的時候

不衝突時全數並用。衝突時依這個順序裁決——品牌識別是最不可協商的錨,感受層比手法層根本,動效是靜態設計的延伸所以居末。

1P6 品牌識別品牌名必用 LOGO 資產。這是唯一不可協商的錨。
2P2 現實感低飽和、貼近實景。感受層比手法層更根本。
3P5 多色漸層森林晨曦融入的多色相過渡。
4P3 邊界感減弱漸層取代分區。與空間感互為手段,但它是前提。
5P1 空間感滿版、破版、通透。要先有 P3 才做得出來。
6P4 流動動效環境級呼吸,不搶注意。靜態設計的延伸。
Playbook

手法從品牌反推
不從流行反推

設計圈流行的創意炫技本質上是搶注意力的手法,鬆鬆本質上是不搶注意力。依廣義潮流走,反而背離品牌。

一本刊物
不是一張網頁

節奏由篇幅密度差異承載,不由動效承載。特集大圖、純文字章名、大留白、緊湊資訊四種段落交替,動效只在必要處存在。

照片是主角
文字是圖說

照片承載氛圍與敘事,文字克制成圖說大小。字級層次靠對比不靠尺寸誇張——辰宇落雁體的 44px 是下限,不是目標。

動態是體溫
不是語言

W1 爐光暈的呼吸是全站唯一「活著」的證據,如爐火微微起伏。其他互動反應都收斂在「使用者知道有回應」的最低程度。

六條品牌事實

任何手法選型都必須從這六條反推,且要說得出是從哪一條來的。

01Sage 五成、Innocent 三成、Explorer 兩成的綜合人格Sage 主導:智慧內斂克制。Innocent:樸實不做作。Explorer:有戶外感但不狂野。
02森林邊小屋按摩老師的人格畫像專業、親切、慢。不是網紅級張力,也不是儀器級冷感。
03靜謐是主餐一切設計元素不主動搶注意,動效比業界慢 2 至 3 倍。
04W1 暖光疊層是單一武器全站唯一被允許的「主動」動態,其他一律靜態或近靜態。
05動效不主動吸引注意明度差 ≤ 5%、位移 ≤ 15%、週期 ≥ 10 秒。
06森林露營意象素材要有戶外真實質感,不是棚拍精修。
對標權重

三方交集加上日系刊物骨架。權重不是參考比例,是取用的優先序。

日系刊物大量留白、呼吸感節奏、圖說文化、邊角 metadata、對稱破一角40%
Aesop克制美學骨架、header 冷靜、產品照高佔比、字型冷靜30%
Kinfolk 英語版editorial 節奏、雜誌感慢節奏、大圖與小字20%
Snow Peak 與戶外品牌戶外真實實景、拒棚拍、拒 stock photo10%

不走 awwwards 得獎作的創意炫技路線 本質背離靜謐,違反動效不搶注意。改走上表的四方交集。

不走大眾按摩店的過度熱情 違反 Sage 內斂與催促語禁令。改走 editorial 的安靜質感。

不走完全靜態、缺 W1 溫度的資訊網站 違反單一武器。至少保留一處呼吸疊層。

素材紀律
允許

真實實景照片:露天露營按摩床、室內產品陳列、按摩實作特寫、老師手法特寫
每張大空間呼吸,佔比高(≥ 30% 頁面面積)
圖說附小字,如「攝於 2025 秋、林口露營場」
承載文字時必疊霧幕或漸層覆層,確保對比 ≥ 4.5:1

禁止

stock photo 與 AI 生圖的假感
高飽和後製與螢光燈色
臨床感:拔罐泛紅特寫、儀器感
過度銳化與 HDR 味重

Checklist

選一個手法之前
先過七問

任何段落或版面樣式選型前逐條自問。回答「不」或「不明」,就是不該用。

這個手法是從哪一條品牌事實反推出來的?說得出來嗎
它會不會主動搶注意力?會就是拒
它在動效預算內嗎?超過預算就是拒
它在裝飾上限內嗎?超過就是拒
它有沒有跟已用的手法建立對比節奏?沒有就要檢查是不是重複了
它對應日系刊物的哪個特徵?或者為什麼不需要對應
它會影響對比或可讀性嗎?會的話要加霧幕或覆層
尚有 7 條未通過。任一條答「不」或「不明」,這個手法就不該用。
Verified

已驗證的
六種主導手法

這些已通過七問檢核並實際落地,可以直接取用不必從零推導。但同一種手法不重複配置。

入口頁刊物章節連載滿版封面照 → 扉頁標語 → 靜文段 → 分欄 → 圖文特集 → 編輯清單 → 抽言 → 敘事圖版 → 連載頁 → 收尾
服務深度階梯深色開場 → 目錄索引 → 四個深度層(每層照片橫幅加文字與價目同區)→ 註記 → 模糊照收尾
老師履歷橫幅開場 → 三條人物橫幅(照片與資訊同區、欄位對照)→ 承諾段 → 收尾
日誌輪播加列表開場 → 橫向輪播(精選)→ 分隔線列表(全部)→ 收尾
文章內頁窄欄長文標題區 → 封面照 → 窄欄正文 → 下一篇導引
預約事實卡片組開場 → 三組事實區(資訊、步驟、提醒)→ 收尾

不重複紀律:主導手法是讀者辨識「換了一頁」的第一訊號,兩頁共用同一種骨架會讓它們讀起來像同一頁的不同捲動位置。 既有手法的變體(改欄位比例、調段落順序)不算新手法,變體與原型在讀者眼中是同一種骨架。 手法退場時從表中移除,釋出給其他頁使用。

Do / Don't

品牌識別層的紀律

Do
從品牌調性反推手法:Sage 反推克制、Explorer 反推真實、W1 反推唯一動態。節奏由密度差異承載——緊湊、大留白、特集大圖交替。
Don't
禁為了「與前一段不同」而選手法。那是炫技驅動不是品牌驅動,改回六條品牌事實反推。
Do
照片承主角、文字克制成圖說。字型層次靠對比不靠尺寸誇張。
Don't
禁巨大字撞人。辰宇落雁體的 44px 是下限不是目標,超大字違反 Sage 的內斂人格。
Do
色序依兩種取用形態分段取用:入口頁縱走全序,子頁認領一段連續區間。
Don't
禁全頁死板套用 21 stops,那會失去呼吸感節奏。也禁兩頁共用同一種主導手法。
Don't
禁卡片並排作為預設呈現(違反空間感,改用流動排版、錯落、不對稱格線)。 禁 stock photo 與 AI 生圖。禁催促型 CTA 文案。禁療程、療癒師、穴道、經絡等禁用詞。