版面與動效
留多少白、圓多少角、動多慢。這一章的動效可以點擊觸發,慢是體感不是數字。
留白是內容
不是剩餘
間距、圓角、陰影三套尺度。全站無銳角、無方向性陰影,因為森林小屋的柔和調性不允許硬邊。
下方色條為實際長度。段落上下內距標準 160px,hero 至少 320px。
禁 border-radius: 0 的銳角。最小從 sm 起跳。
offset 一律 0 0、大模糊、極低透明度。有方向的陰影會產生可見的方向感邊界。
三種版面模式
不是服務卡並排
預設的卡片並排已經被降級為「並排比較專用」,單頁至多一組。日常分區靠這三種模式。
背景漸層直達視窗邊緣,內容仍受標準容器約束。用於 hero、章節開場、深底沉浸段落。
兩欄不對稱且垂直錯位,或元素出血跨越段落邊界。每頁至多 2 處,超過就失去「破」的驚喜。
半透明色塊堆疊營造景深,疊層 ≤ 3 層。承載文字時透明度 ≥ 0.72 才保得住對比門檻。
破版與滿版在 768px 以下一律退化為直排流:破版在窄視窗只會變成擁擠。
可見輪廓把內容關進盒子,破壞色序連續的呼吸。分隔一律用留白加底色微差。
表格內的行分區用 cream-300 透明度 0.6 的底色微差承載。
全域禁用。唯一例外是四項以上的縱向列表,且透明度 ≤ 0.3、色取 cedar、只畫在行間不封閉成框。
五級召喚
填色只有兩級
文字連結只靠顏色會被當成純內容而錯過,全部加外框版面又退回卡片堆疊。五級的分工把「可點擊的視覺份量」對齊「該行動的層級」。
常駐 header 的預約入口。讀者在任何捲動位置都知道去哪裡。
該頁存在目的所指向的那一個行動,單頁至多一個。與導覽召喚同時出現時,尺寸差即是主次差。
段落級主行動。描邊用 inset 陰影繪製而非 border——border 佔盒模型,會讓有框無框的同級按鈕文字起點對不齊。
導向其他章節。與主要行動等高,層級改由描邊粗細與左右內距表達——差 4px 會被讀成沒對齊而不是層級差。
段落敘事中順帶的延伸。禁底線——底線在中文長文中與筆畫互相干擾。hover 時箭頭與文字的間距由 7px 拉到 12px,用位移取代變色。
五級一律 min-height 44px(WCAG 2.2 目標尺寸)。行內延伸的視覺高度只有一行文字,仍以 min-height 撐開可點擊區。 同一畫面出現三個以上填色就失去指向性,所以填色限縮在前兩級。
動效不主動
吸引注意
比業界慢 2 到 3 倍是反向慣例,不是延遲。下面每一條都可以點擊觸發,用體感判斷。
預設 fast 300ms;帶敘事的過渡用 moderate 或 slow;章節段落進場才用 deliberate。
四條覆蓋所有情境。禁 back、elastic、spring——過度炫技與靜謐調性不符。
起始平緩、結尾滑順
進場與位移
對稱 S 曲線
停止與對齊
對稱 S 配合往復
呼吸迴圈
起始快、結尾長尾
淡出與消失
W1 爐光暈的透明度微幅呼吸,週期 8 至 12 秒。全頁至多一處,明度差 ≤ 5%——一旦可被餘光察覺「它在動」,就從空氣變成表演。
進場動效以章節段落為觸發單位,段內元素依序淡入且只觸發一次——已進場的段落捲回不重播,重播會把一次性的登場變成重複表演。 段內同時進場至多 3 個元素,組內間隔 75ms、組間 150ms,位移 ≤ 16px。
系統開啟減少動態時全數縮到 0.01ms。紅線是不能讓元件失去反饋——hover 與 focus 仍要有視覺變化,只是變化即時而非過渡。
開啟後再點上方任一個「跑一次」,動效會立刻到位而不是滑過去。呼吸疊層改為靜態透明度 0.92。