WEB DESIGN STUDY · 01

把空間留給內容

留白，讓畫面
慢慢被看見。

以自然低彩度攝影、纖細字體與大面積留白，建立安靜而有呼吸感的品牌敘事。

SCROLL

Core principles

STYLE OBSERVATION

質感不靠裝飾堆疊，
而是靠比例、節奏與克制。

Quiet Frame 讓畫面先建立情緒，文字再補上脈絡，行動按鈕只在需要時出現；每個元素都保有清楚的位置與呼吸空間。

01: 攝影先行首屏以接近滿版的情境圖定調，文字量少且不與主體競爭。
02: 細字與留白標題不必巨大；靠行距、段距和頁面邊界建立高級感。
03: 低彩度層次米灰底、炭灰字、木質棕作為主色，亮色只留給微小狀態。
04: 慢而清楚使用淡入、輕微縮放與線條位移，避免彈跳和過度視差。

Layout rhythm

ASYMMETRIC EDITORIAL GRID

不對稱，但保持秩序。

河岸、橋梁與城市黃昏景色 — 01 — 03
FEATURED STORY · TAIPEI

用一張長幅影像，
先決定閱讀的速度。

圖片可以滿版，資訊不需要塞滿。將標題、類別與序號分散到不同位置，反而更容易閱讀，也更接近編輯設計的節奏。
查看比例規格

A / HERO

首屏只做一件事

先讓使用者感受到品牌，再提供導覽與行動。文字建議控制在標題、短敘述、單一引導。

B / SECTION

每段保留 12–18vh

區塊上下距離比卡片內距更重要。桌機可大膽留白，手機則縮短但不取消呼吸感。

C / IMAGE

固定比例再裁切

作品圖以 3:2、4:5、16:9 三種比例為主；同一區塊最多混用兩種，避免畫面碎裂。

Components

REUSABLE LANGUAGE

把風格拆成
可重複使用的元件。

01 / EDITORIAL COPY

好的留白不是空著，
而是替重要的內容
保留被看見的位置。

安靜地傳達

03 / MOTION

VIEW DETAILS

Hover 只需要 1–2% 縮放、0.6 秒淡化與短線位移。讓互動可感知，但不搶內容。

04 / PHOTO TONE

將飽和度降至約 65–80%，稍減對比並保留暖色。影像仍有生活感，但不會壓過文字。

色彩 / Color

#F2F1E9背景

#D9D8D0區隔

#3D3D3B文字

#58463C行動

字體 / Type

Serif

故事標題使用明體

clamp(2rem, 4vw, 4.5rem)

Sans

說明文字使用黑體

14–16px / line-height 1.9

間距 / Space

XS8px
SM16px
MD32px
LG64px
XL120px

使用原則 / Rules

每屏保留單一視覺焦點
照片優先，文案精簡
按鈕維持 1–2 種層級
先做手機閱讀順序

AVOID

同屏過多卡片與徽章
高飽和漸層與厚陰影
為動而動的視差效果
沒有用途的裝飾圖示

留白，讓畫面慢慢被看見。

質感不靠裝飾堆疊，而是靠比例、節奏與克制。