08 · Layout & Motion

版面與動效

留多少白、圓多少角、動多慢。這一章的動效可以點擊觸發,慢是體感不是數字。

Space

留白是內容
不是剩餘

間距、圓角、陰影三套尺度。全站無銳角、無方向性陰影,因為森林小屋的柔和調性不允許硬邊。

間距階 8pt base 十三階

下方色條為實際長度。段落上下內距標準 160px,hero 至少 320px。

3xs 2px
2xs 4px
xs 8px
sm 16px
md 24px卡片內距
lg 40px大卡片內距
xl 64px
2xl 96px段落單邊內距
3xl 128px
4xl 160px段落之間的標準間隔
5xl 200px
6xl 240px
7xl 320pxhero 最小內距
圓角五階
sm8px
md16px
lg24px 大卡片
xl40px
full999px pill

禁 border-radius: 0 的銳角。最小從 sm 起跳。

陰影四階 光暈式

offset 一律 0 0、大模糊、極低透明度。有方向的陰影會產生可見的方向感邊界。

sm8px blur
md16px blur
lg32px blur
halo暖光暈
Layout

三種版面模式
不是服務卡並排

預設的卡片並排已經被降級為「並排比較專用」,單頁至多一組。日常分區靠這三種模式。

滿版 Full-Bleed

背景漸層直達視窗邊緣,內容仍受標準容器約束。用於 hero、章節開場、深底沉浸段落。

破版 Asymmetric

兩欄不對稱且垂直錯位,或元素出血跨越段落邊界。每頁至多 2 處,超過就失去「破」的驚喜。

通透層疊 Translucent

半透明色塊堆疊營造景深,疊層 ≤ 3 層。承載文字時透明度 ≥ 0.72 才保得住對比門檻。

破版與滿版在 768px 以下一律退化為直排流:破版在窄視窗只會變成擁擠。

分區不用線

可見輪廓把內容關進盒子,破壞色序連續的呼吸。分隔一律用留白加底色微差。

✓ 底色微差
首次體驗 60 分鐘
定期保養 90 分鐘
訓練後恢復 60 分鐘

表格內的行分區用 cream-300 透明度 0.6 的底色微差承載。

✗ hairline
首次體驗 60 分鐘
定期保養 90 分鐘
訓練後恢復 60 分鐘

全域禁用。唯一例外是四項以上的縱向列表,且透明度 ≤ 0.3、色取 cedar、只畫在行間不封閉成框。

Call to Action

五級召喚
填色只有兩級

文字連結只靠顏色會被當成純內容而錯過,全部加外框版面又退回卡片堆疊。五級的分工把「可點擊的視覺份量」對齊「該行動的層級」。

導覽召喚
44px 填色
預約時段

常駐 header 的預約入口。讀者在任何捲動位置都知道去哪裡。

頁面主行動
58px 填色
前往預約

該頁存在目的所指向的那一個行動,單頁至多一個。與導覽召喚同時出現時,尺寸差即是主次差。

主要行動
52px 2px 描邊
查看服務

段落級主行動。描邊用 inset 陰影繪製而非 border——border 佔盒模型,會讓有框無框的同級按鈕文字起點對不齊。

章節導向
52px 1px 描邊
關於空間

導向其他章節。與主要行動等高,層級改由描邊粗細與左右內距表達——差 4px 會被讀成沒對齊而不是層級差。

行內延伸
箭頭 無框
閱讀老師的觀察筆記

段落敘事中順帶的延伸。禁底線——底線在中文長文中與筆畫互相干擾。hover 時箭頭與文字的間距由 7px 拉到 12px,用位移取代變色。

五級一律 min-height 44px(WCAG 2.2 目標尺寸)。行內延伸的視覺高度只有一行文字,仍以 min-height 撐開可點擊區。 同一畫面出現三個以上填色就失去指向性,所以填色限縮在前兩級。

Motion

動效不主動
吸引注意

比業界慢 2 到 3 倍是反向慣例,不是延遲。下面每一條都可以點擊觸發,用體感判斷。

時長階

預設 fast 300ms;帶敘事的過渡用 moderate 或 slow;章節段落進場才用 deliberate。

duration-instant無動效・直接切換0ms
duration-fast快速反饋・hover 與 focus300ms
duration-moderate中等過渡・tooltip、drawer400ms
duration-slow慢速過渡・modal、accordion600ms
duration-deliberate蓄意動效・章節段落進場800ms
業界慣例 200ms
鬆鬆 slow 600ms
Easing 四曲線

四條覆蓋所有情境。禁 back、elastic、spring——過度炫技與靜謐調性不符。

ease-drift

起始平緩、結尾滑順
進場與位移

ease-settle

對稱 S 曲線
停止與對齊

ease-breathe

對稱 S 配合往復
呼吸迴圈

ease-linger

起始快、結尾長尾
淡出與消失

唯一「活著」的證據

W1 爐光暈的透明度微幅呼吸,週期 8 至 12 秒。全頁至多一處,明度差 ≤ 5%——一旦可被餘光察覺「它在動」,就從空氣變成表演。

這一格正在呼吸

進場動效以章節段落為觸發單位,段內元素依序淡入且只觸發一次——已進場的段落捲回不重播,重播會把一次性的登場變成重複表演。 段內同時進場至多 3 個元素,組內間隔 75ms、組間 150ms,位移 ≤ 16px。

reduced-motion

系統開啟減少動態時全數縮到 0.01ms。紅線是不能讓元件失去反饋——hover 與 focus 仍要有視覺變化,只是變化即時而非過渡。

開啟後再點上方任一個「跑一次」,動效會立刻到位而不是滑過去。呼吸疊層改為靜態透明度 0.92。

Do / Don't

版面與動效的紀律

Do
段落上下內距 160px、hero 至少 320px。分區用色序接續的漸層加大留白。
Don't
禁 hairline 於任何位置。唯一例外是四項以上縱向列表的行分隔,且四項條件全部滿足才成立。
Do
陰影用光暈式:offset 0 0、大模糊、低透明度。圓角最小從 8px 起跳,大卡片用 24px。
Don't
禁純黑陰影與帶方向 offset 的陰影,禁 border-radius: 0 的銳角。
Do
hover 只改背景色、文字色、陰影、位移與間距五項,位移限 translateY(-1px)。
Don't
禁 hover 改動 border、寬高(會擾亂佈局),禁 scale、rotate、skew。
Don't
禁 back、elastic、spring 曲線。禁全頁出現第二處呼吸疊層——兩處會互相干擾,失去唯一環境動線的意義。 禁動效低於 300ms:那是業界速度,不是鬆鬆的速度。