01
设计气质 DNA
3D姿态人体模型网络应用艺术家工具参考
一位数字艺术家的人偶工作室,界面干净且注重实用性。
02
色彩
#f07d7dAccent#333333Ink#f5f5f5BG#999999Mutedrgba(0, 0, 0, 0.1)Line为3D工作区采用浅色、中性的基底,并以单一的暖色强调关键操作和状态。
03
字体
- display
24px · 600 - body
14px · 400
所有UI文本使用humanist无衬线字体。 · 章节标题和主要标签使用粗体。 · 正文和次要信息使用常规字重。
04
间距
4px8px16px24px32px48px64px96px统一的4px网格系统,主要UI面板间有清晰的视觉分隔,交互区域内有充足的padding。
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 12px
pill · 999px
输入框和面板等关键元素使用1px solid rgba(0,0,0,0.1)边框。
0 2px 12px rgba(0,0,0,0.08)
06
布局
1440container
4columns
16pxgutter
768 / 1024breakpoints
三栏布局:左侧窄垂直工具条、中央用于3D模型的大型画布、右侧较宽的用于设置和场景管理的边栏。
07
动效与交互
150msmicro
300mssmall
500msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
模态框采用微妙的淡入效果。 · 边栏面板切换使用平滑过渡。
交互列表项和按钮的背景色会发生变化。 · 左侧工具栏选中图标的激活状态,通过珊瑚色背景指示。
08
组件
- button 填充珊瑚色、圆角的“试用专业版”按钮;小型药丸状“Pro”徽章。
- card 用于边栏和模态框的浅色背景面板,带有微妙阴影。
- chip 小型、圆角的“Pro”和“Pro+”徽章,采用珊瑚色背景。
- input 带微妙边框和chevron图标的下拉选择器。
- hero 中央3D画布是主要视觉核心,用于展示交互模型。
09
文案语气与禁用清单
- 语气 乐于助人、直截了当且专业。
- 标题风格 清晰、直接且以行动为导向(例如,“欢迎来到SetPose!”)。
- 按钮文案 突出且具有鼓励性,关键转化操作使用强调色。
- 不要使用深色主题——截图显示的是以浅灰色和白色为主的界面。
- 不要使用鲜艳、多彩的调色板——截图显示的是带有单一珊瑚色强调的中性调色板。
- 不要到处使用尖锐的直角——截图显示了圆角的持续使用。
- 不要将主导航放在顶部水平栏中——截图显示的是左侧的垂直条。
- 不要为UI核心使用装饰性插图——截图显示的是一个功能性的、3D渲染的模型作为焦点。
- 不要为正文使用衬线字体——截图清晰地显示了全程使用无衬线字体。
- 避免: 未经解释的技术术语。
- 避免: 过于随意或戏谑的语言。
- 避免: 在中央工作区堆放过多UI元素。
11
System Prompt
这是一个干净、注重实用性的3D姿态网络应用,专为艺术家设计的工具。其设计DNA的特点是:采用宽敞明亮的浅色布局,中性调色板(#f5f5f5背景,#333333文字),并以单一的暖珊瑚色(#f07d7d)作为关键操作的强调色。排版使用简洁的humanist无衬线字体,并在UI中保持一致。布局围绕一个大型中央画布构建,两侧是窄工具条和较宽的设置边栏。关键禁忌:不要引入深色模式或复杂的渐变,因为该设计依赖于干净、明亮的工作区。不要使用顶部导航栏;垂直的左侧工具栏是主要导航模式。不要用非交互的装饰元素 clutter 中央画布,因为它必须保持清晰以展示3D模型。