精選 · 開放 · 免費
Phippscharlie
一個精緻的平面設計作品集，運用大膽排版與沉浸式攝影來展現精煉的視覺識別。
PortfolioPhotographicBold TypographyCleanRefined
01
設計氣質 DNA
極簡編輯風格精緻平面設計作品集
將高端印刷雜誌的版面設計搬上網路
02
色彩
#101011Ink
#ffffffBG
#edededBG quiet
#7f7f7fMuted
rgba(0, 0, 0, 0.1)Line
高對比的單色調色板，搭配全出血攝影與純黑區塊，營造戲劇性的焦點
03
字型
grotesque-sans · monospace
- display
162px · 400 - headline
63px · 400 - body
20px · 400 - caption
13px · 400
展示型文字使用極緊的負字距 · 所有字體保持一致的正常字重 · 內文維持舒適的閱讀尺寸，同時讓展示型文字佔據主導地位
04
間距
4px
8px
16px
24px
32px
48px
64px
96px
不對稱配置的充足留白，以營造編輯質感
05
表面 (圓角 / 陰影 / 邊線)
sm · 4px
md · 8px
lg · 12px
pill · 999px
極簡，僅用於細微的區隔
06
版面
1440container
12columns
24pxgutter
768 / 1024breakpoints
全出血主視覺圖片搭配疊加文字，交替使用白色與黑色區塊
07
動效與互動
220msmicro
500mssmall
1000msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
透明度淡入 · 用於滾動顯示的輕柔變換
連結與互動元素的透明度降低 · 標準指標游標，提供即時的視覺回饋
08
組件
- button 極簡的文字連結，懸停時有細微的透明度變化
- card 大型以圖片為主的專案展示，搭配極簡的文字覆蓋
- chip 無可見元素
- input 無可見元素
- hero 全螢幕攝影背景搭配大型出血排版
09
文案語氣與禁用清單
- 語氣 自信、專業且內斂
- 標題風格 大而具衝擊力的陳述，超出容器邊緣
- 按鈕文案 內斂的文字連結，而非顯眼的按鈕
- 避免使用鮮豔的強調色 — 螢幕截圖顯示嚴格的單色調色板，僅含白色、黑色與攝影色調
- 避免添加裝飾性邊框或陰影 — 螢幕截圖顯示完全平坦的表面，無任何立體效果
- 避免使用小而怯懦的字體 — 螢幕截圖顯示支配視覺畫面的大型展示型文字
- 避免將所有內容置中對齊 — 螢幕截圖顯示不對稱的文字配置以創造編輯動態感
- 避免使用厚重的按鈕樣式 — 螢幕截圖顯示僅有文字的導覽連結，視覺重量極低
- 避免擁擠的版面配置 — 螢幕截圖顯示元素之間有充足的留白與呼吸空間
- 避免: 過度裝飾
- 避免: 鮮豔色彩
- 避免: 視覺雜亂
10
包內真實截圖
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
這是一位駐倫敦設計師的精緻平面設計作品集。設計採用嚴格的單色調色板，以白色 (#ffffff) 與近黑色 (#101011) 為主要顏色，攝影圖像提供色調變化。字體採用 grotesque-sans 類別，展示型尺寸最大達 162px，具有緊密的字距。關鍵的禁忌事項：永不使用鮮豔的強調色，避免添加陰影或立體效果，且永不縮小展示型排版使其失去大膽的主導比例。版面在全出血攝影主視覺區塊與純淨的白色或深色區塊之間交替，創造出如編輯雜誌般的流動感，並預留充足的留白與不對稱的文字配置。
en · zh-CN · zh-TW · ja · ko