精选 · 开放 · 免费
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