精選 · 開放 · 免費
Aliciamoore
一個運用極致克制與全出血影像,創造沉浸式畫廊體驗的頂級時尚品牌網站。
EditorialPremiumRestraintPhotographicConsumer
01
設計氣質 DNA
極簡主義高端時尚氛圍感
一間安靜、光線幽微的奢華展示間,產品是唯一的焦點。
02
色彩
#F1F0ECInk
#000000BG
#222A37BG quiet
#999999Muted
rgba(241, 240, 236, 0.15)Line
高對比單色調色盤,輔以深海軍藍狀態色,依賴影像提供溫度。
03
字型
grotesque-sans
- display
32px · 400 - body-small
12px · 300 - body
14px · 400
以 Founders Grotesk 為主要字體 · 導覽連結採用細體字重 (300) 與寬字距 · 字體元素周圍保持充裕的負空間
04
間距
4px
8px
12px
16px
24px
32px
36px
48px
64px
96px
108px
邊緣使用充裕的 padding (36px),首圖區域垂直呼吸空間為 108px。
05
表面 (圓角 / 陰影 / 邊線)
sm · 0px
md · 0px
lg · 0px
pill · 0px
採用墨色細微 1px 邊框,僅用於分隔。
06
版面
1280container
12columns
24pxgutter
768 / 1024breakpoints
全螢幕畫布,中央為主要視覺,以邊角對齊的導覽與品牌元素固定。
07
動效與互動
220msmicro
400mssmall
800msmedium
cubic-bezier(0.32, 0.94, 0.6, 1)easing
UI 元素採用平滑透明度淡入淡出 · 文字與圖片採用錯開的進入動畫
互動文字連結進行細微透明度降低。 · 立即視覺回饋,平滑過渡至下一個狀態。
08
組件
- button 純文字連結,無背景,依賴 hover 透明度過渡。
- card 大型全出血圖片區塊,作為主要互動介面。
- hero 全視口區塊,以單張大型圖片為主導,左側放置品牌名稱,右側放置行動呼籲。
09
文案語氣與禁用清單
- 語氣 極簡、精緻、內斂。
- 標題風格 大寫、寬字距、細體字重。
- 按鈕文案 簡潔的小寫文字提示,置於邊緣位置。
- 勿使用陰影 — 螢幕截圖顯示平面影像與文字
- 勿使用圓角 — 螢幕截圖顯示完全方正的邊緣
- 勿添加裝飾性邊框 — 螢幕截圖顯示無邊框、邊到邊的佈局
- 勿使用多種強調色 — 螢幕截圖顯示嚴格的單色調色盤
- 勿使用粗字重 — 螢幕截圖僅顯示細體 (300) 與常規 (400) 字重
- 勿將文字置中對齊 — 螢幕截圖顯示左對齊與右對齊的邊緣文字
- 避免: 過度使用形容詞
- 避免: 喧鬧的行動呼籲
- 避免: 擁擠的佈局
- 避免: 鮮豔的色彩
10
包內真實截圖
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
設計一個具有畫廊質感的頂級極簡時尚電商介面。使用深邃黑色 (#000000) 背景與灰白色 (#F1F0EC) 文字以達到最大對比。字體應採用簡潔的 grotesque-sans,使用細體與常規字重,並搭配寬字距。優先使用大型高品質影像作為主要視覺元素,UI 元素則置於邊緣。採用 cubic-bezier(0.32, 0.94, 0.6, 1) 實現流暢優雅的動態。避免任何裝飾性元素,如陰影、圓角或鮮豔色彩;保持絕對克制。導覽應低調且為純文字。
en · zh-CN · zh-TW · ja · ko