精選 · 開放 · 免費

Schema Figma

一個由 Figma 推出的現代、大膽的 Schema 活動登陸頁面，以鮮豔的幾何點綴和清晰的字型層級為特色。

01

設計氣質 DNA

一個高調的科技會議登陸頁面，結合了高級的編輯美學與活潑、鮮豔的設計點綴。

02

色彩

極簡、高對比的深色模式基底，讓鮮豔的幾何圖形與多彩的肖像背景得以突顯，而不會相互爭奪注意力。

03

字型

grotesque-sans · humanist-sans · monospace

• display56px · 400
• heading32px · 700
• subhead24px · 400
• body18px · 400
• caption16px · 400
• label13px · 400

對小型類別標籤使用大寫字母間距，以建立清晰的層級。 · 在大型展示文字上維持緊湊的負字母間距，以確保強烈的視覺衝擊力。 · 優先使用 Regular 和 Medium 字重，以在深色背景上保持清晰的可讀性。

04

間距

版面在主要區塊（例如垂直方向 120px）運用充裕的邊距，並搭配一致的 24px 欄間系統，以創造寬敞、具呼吸感的結構。

05

表面 (圓角 / 陰影 / 邊線)

主要操作按鈕和分隔線使用細薄的 1px 邊框，常利用 rgba(255, 255, 255, 0.16) 進行細微的區隔。

rgb(128, 128, 128) 0px 0px 5px 0px

06

版面

頁面使用一個大型的居中容器作為桌面版，並在行動裝置上切換為移動裝置優先的版面，顯著減少水平邊距。

07

動效與互動

針對互動元素，進行標準的 background-color、border-color 和 color 過渡效果，持續時間為 0.2 秒。 · 針對懸停或聚焦狀態，使用基於 Transform 的動畫，持續時間為 0.3 秒的 ease-in-out。

在 background-color、border-color 或 color 上進行細膩的 0.2 秒過渡，以提供即時的視覺回饋。 · 帶有指標游標的元素會觸發標準的 0.2 秒至 0.3 秒緩動過渡。

08

組件

• button 大型、透明的幽靈按鈕，帶有白色邊框和圓角。
• card 基於格線的講者卡片，以灰階肖像攝影為特色，覆蓋在實色、鮮豔、飽和的色塊上。
• chip 未見使用。
• input 未見使用。
• hero 一個顯著的深色區塊，包含巨大的字型、極簡的活動詳情，以及一條突出的幾何插圖條帶。

09

文案語氣與禁用清單

• 語氣 專業、具權威性，同時平易近人且富有創意。
• 標題風格 大型、粗體且具衝擊力的無襯線文字，能立即吸引目光。
• 按鈕文案 極簡、透明的幽靈按鈕，搭配大型、清晰的字型，與使用者介面無縫融合。

• 不要使用白色背景 — 截圖顯示主版面主要為黑色（#000000）背景。
• 不要使用複雜或有機的形狀 — 截圖顯示嚴格的幾何原語，如圓形、正方形和六邊形。
• 不要使用密集的段落文字 — 截圖顯示清晰、簡短且高度可讀的文字區塊。
• 不要在肖像攝影上套用實心白色背景 — 截圖顯示灰階照片疊加在鮮豔的實色區塊上。
• 不要使用厚重的陰影系統 — 截圖顯示極簡、近乎平面的層次，最多只有一層細微的灰色陰影。
• 不要使用活潑圓潤或氣泡式的字型 — 截圖顯示嚴格、乾淨的 grotesque 和 humanist sans-serif 字型類別。
• 避免: 避免過度企業化或冰冷的語言。
• 避免: 避免使用過度裝飾或令人分心的襯線字型。
• 避免: 避免用過多的次要元素或密集的文字區塊來 clutter 介面。

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

en · zh-CN · zh-TW · ja · ko