01
设计气质 DNA
插画作品集视觉艺术性创意
精心策划的数字插画展览。
02
色彩
#1A1A1AInk#666666Ink soft#FFFFFFBG#999999Mutedrgba(0, 0, 0, 0.1)Line界面采用中性极简框架,让鲜艳的艺术作品本身定义色彩体验。
03
字体
- display
32px · 600 - body
16px · 400
字体设计保持极简与功能性,避免与艺术作品形成视觉竞争。 · 标题采用加粗字重,确保项目识别清晰明了。 · 正文使用标准字重,保证描述文字和标签的最佳可读性。
04
间距
4px8px16px24px32px48px64px网格项之间采用宽松间距,营造呼吸感与画廊般的氛围。
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 12px
pill · 999px
采用细腻的细边框或柔和阴影分隔网格项。
06
布局
1400container
4columns
20pxgutter
768 / 1024breakpoints
不对称瀑布流网格布局,自适应不同图片的纵横比。
07
动效与交互
200msmicro
400mssmall
600msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
项目卡片采用细腻的悬停效果,可能包含缩放或透明度变化。
项目卡片和导航按钮等交互元素提供细腻的视觉反馈。 · 通过标准导航进入项目详情页。
08
组件
- button 简洁的圆角胶囊形按钮,配以细边框与清晰文字标签。
- card 以图片为核心的项目卡片,展示艺术作品、标题与标签,无明显边框。
- chip 基于文字的简约标签,用于分类展示,位于项目标题下方。
- input 截图中未显示输入框组件。
- hero 整个网格即为主视觉区域,直接呈现作品集内容。
09
文案语气与禁用清单
- 语气 专业、自信,聚焦于作品本身。
- 标题风格 直接且具有描述性的项目标题。
- 按钮文案 清晰的功能性导航标签,如「探索」和「索引」。
- 避免添加复杂背景——截图显示为纯净白色画布。
- 避免使用装饰性花体字体——截图采用简洁易读的人文无衬线字体。
- 避免为卡片添加厚重阴影或渐变——截图采用扁平化图像呈现。
- 避免用不必要的UI元素充斥界面——截图以艺术作品为优先。
- 避免使用深色主题——截图明确采用白色背景的浅色主题。
- 避免僵化统一的网格——截图采用不对称瀑布流布局。
- 避免: 浮夸的营销语言
- 避免: 过度复杂的描述
- 避免: 喧闹抢眼的标题
11
System Prompt
这是一个专注于插画师作品集的简洁网站。设计基因围绕让鲜艳的艺术作品在中性白色(#FFFFFF)背景上成为视觉中心而构建。布局采用不对称瀑布流网格。字体采用深灰色(#1A1A1A)的人文无衬线字体,确保清晰可读且不干扰视觉内容。关键禁忌:1)不要添加会分散艺术作品注意力的复杂背景或图案。2)不要使用装饰性花体字体;保持字体设计的功能性与极简性。3)不要添加厚重阴影、渐变或复杂的卡片边框;界面应呈现为轻盈的画廊式框架。整体设计原则是通过克制UI设计来最大化插画内容的视觉冲击力。