精選 · 開放 · 免費
Sandlandsleep
一個極簡主義的健康介面,運用柔和漸層背景與醒目的黃色點綴色,引導使用者完成睡眠困擾調查。
ConsumerPremiumCleanPlayfulProduct
01
設計氣質 DNA
睡眠健康折扣舒適
一場寧靜、高端的邀請,通往更好的睡眠
02
色彩
#fae467Accent
#000000Ink
#9c9c9cInk soft
#dce4efBG
#f2ede8Muted
rgba(0,0,0,1)Line
鮮明的黃色點綴色與柔和、偏冷的漸層背景之間形成高對比。
03
字型
humanist-sans · sans-serif
- display
48px · 600 - subtitle
20px · 400 - body
14px · 400
04
間距
4px
8px
16px
24px
32px
48px
64px
96px
標準的 4px 基礎垂直節奏,並搭配寬裕的間距以營造放鬆感
05
表面 (圓角 / 陰影 / 邊線)
sm · 4px
md · 10px
lg · 20px
pill · 999px
實線 1px 黑色邊框,用於主要圖示容器及部分 UI 元素
0 4px 12px rgba(0,0,0,0.1) · 0 4px 20px rgba(0,0,0,0.1)
06
版面
400container
1columns
16pxgutter
768breakpoints
置中的單欄堆疊,適用於手機與專注的桌面覆蓋視窗
07
動效與互動
125msmicro
200mssmall
300msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
互動元素上平滑的顏色與 box-shadow 過渡效果
按鈕的背景色或 box-shadow 產生細微變化 · 透過背景色變化提供即時視覺回饋
08
組件
- button 全寬的膠囊狀按鈕,具有高對比的黃色背景與深色文字。
- card 不適用
- chip 不適用
- input 不適用
- hero 置中的促銷覆蓋視窗,搭配大型字體與簡潔的插圖。
09
文案語氣與禁用清單
- 語氣 俏皮、直接且具吸引力
- 標題風格 對話式,使用第二人稱的問句與陳述
- 按鈕文案 清晰、以行動為導向的陳述,供使用者選擇
- 勿使用陰暗、沉悶的背景——截圖顯示的是明亮、柔和的藍色漸層。
- 勿使用尖銳、矩形的按鈕——截圖顯示的是完全圓潤的膠囊狀按鈕。
- 勿使用狹小、擁擠的佈局——截圖顯示的是垂直堆疊、間距寬裕的佈局。
- 勿使用複雜、多欄的網格——截圖顯示的是單一置中欄位。
- 勿使用低對比的按鈕文字——截圖顯示的是亮黃色背景上的深色文字。
- 勿使用微妙的淡黃色點綴——截圖顯示的是鮮明、高飽和度的黃色。
- 避免: 臨床術語
- 避免: 侵略性的銷售語言
- 避免: 複雜的醫療術語
10
包內真實截圖
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
這是一個極簡主義、以消費者為中心的健康介面,核心是睡眠困擾調查。設計採用柔和、偏冷的漸層背景與鮮明的黃色膠囊狀按鈕,營造出友善、高端的感覺。字體使用高對比的無襯線體。關鍵色彩包括深墨黑 (#000000) 與鮮明的點綴黃 (#fae467)。佈局為單一置中欄位,搭配寬裕的間距。關鍵禁止事項:勿使用尖銳的按鈕圓角、勿使用深色背景、勿在黃色按鈕上使用低對比文字。語氣俏皮且直接,專注於使用者需求。
en · zh-CN · zh-TW · ja · ko