zhizhunbao UI/UX Designer
创建现代、高端、精致的用户界面和交互体验。
Core Principles
1. Visual Hierarchy（视觉层级）
每个页面必须有清晰的视觉层级：
Primary → 用户第一眼看到的（标题、CTA 按钮） → 最大、最亮、最突出
Secondary → 支撑主内容（副标题、描述） → 中等大小、适度对比
Tertiary → 辅助信息（元数据、时间戳） → 最小、最淡
2. Design-First Approach（设计先行）
在写任何前端代码之前：
- 确定设计系统（颜色、字体、间距）
- 规划页面布局和组件结构
- 定义交互行为和动画
- 然后才开始编码
3. Premium Aesthetics（高端审美）
- ❌ 不用浏览器默认样式
- ❌ 不用纯色（plain red/blue/green）
- ❌ 不用 placeholder 图片
- ✅ 精心调配的颜色系统（HSL 调色）
- ✅ 现代字体（Inter, Outfit, Plus Jakarta Sans）
- ✅ 微动效和过渡动画
- ✅ 适当的阴影、圆角、模糊效果
Design System Creation（设计系统）
当创建新项目或新页面时，先建立设计系统。
详细指南: references/design-system.md
Quick Reference: Token 结构
:root {
/* Colors - HSL for easy manipulation */
--color-primary: 220 80% 56%;
--color-primary-light: 220 80% 70%;
--color-primary-dark: 220 80% 42%;
/* Neutrals */
--color-bg: 220 20% 97%;
--color-surface: 0 0% 100%;
--color-text: 220 20% 12%;
--color-text-secondary: 220 10% 45%;
/* Spacing - 4px base */
--space-1: 0.25rem; /* 4px */
--space-2: 0.5rem; /* 8px */
--space-3: 0.75rem; /* 12px */
--space-4: 1rem; /* 16px */
--space-6: 1.5rem; /* 24px */
--space-8: 2rem; /* 32px */
/* Typography */
--font-sans: "Inter", system-ui, sans-serif;
--font-display: "Outfit", var(--font-sans);
/* Radius */
--radius-sm: 0.375rem;
--radius-md: 0.5rem;
--radius-lg: 0.75rem;
--radius-xl: 1rem;
/* Shadows */
--shadow-sm: 0 1px 2px hsl(0 0% 0% / 0.05);
--shadow-md: 0 4px 6px hsl(0 0% 0% / 0.07);
--shadow-lg: 0 10px 25px hsl(0 0% 0% / 0.1);
}
Component Design Patterns（组件设计模式）
详细指南: references/component-patterns.md
Card Pattern
┌─────────────────────────────┐
│ [Image/Icon] │ ← 视觉吸引
│ │
│ Title │ ← 主标题 (font-display, bold)
│ Description text that │ ← 描述 (text-secondary)
│ wraps to two lines max... │
│ │
│ [Tag] [Tag] [Action →] │ ← 标签 + 行动按钮
└─────────────────────────────┘
↑ padding: var(--space-6)
↑ border-radius: var(--radius-lg)
↑ shadow: var(--shadow-md)
↑ hover: translateY(-2px) + shadow-lg
Button Hierarchy
Primary → 填充色 + 白色文字 → 一个页面最多 1-2 个
Secondary → 边框 + 主色文字 → 次要操作
Ghost → 无边框 + 淡色文字 → 最不重要的操作
Danger → 红色变体 → 删除/破坏性操作
Interaction Design（交互设计）
详细指南: references/interaction-design.md
核心原则
- 反馈即时 — 每个用户操作都有视觉反馈（hover, active, focus）
- 过渡自然 — 使用 ease-out 缓动，150-300ms 时长
- 引导注意 — 用动画引导用户注意力到重要变化
- 减少认知负担 — 一次只展示必要信息
必要的微交互
/* 按钮 hover */
.btn {
transition: all 0.2s ease-out;
}
.btn:hover {
transform: translateY(-1px);
box-shadow: var(--shadow-md);
}
/* 卡片 hover */
.card {
transition:
transform 0.2s ease-out,
box-shadow 0.2s ease-out;
}
.card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
}
/* 页面加载 */
.fade-in {
animation: fadeIn 0.3s ease-out;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(8px);
}
}
Accessibility（无障碍设计）
详细指南: references/accessibility.md
必须做到
- 颜色对比度 ≥ 4.5:1（正文）/ 3:1（大文字）
- 所有可交互元素可 keyboard focus（有 focus-visible 样式）
- 图片有 alt 文本
- 表单有 label 关联
- ARIA 标签用在自定义组件上
Responsive Design（响应式设计）
详细指南: references/responsive-design.md
断点系统
/* Mobile First */
/* Default: 0 - 639px (mobile) */
@media (min-width: 640px) {
/* sm: tablet */
}
@media (min-width: 768px) {
/* md: small laptop */
}
@media (min-width: 1024px) {
/* lg: laptop */
}
@media (min-width: 1280px) {
/* xl: desktop */
}
布局策略
- Mobile: 单列，堆叠布局
- Tablet: 2 列网格，侧边栏折叠
- Desktop: 多列网格，侧边栏展开
Workflow: 从零设计一个页面
- 明确目标 — 这个页面的核心目的是什么？用户要完成什么任务？
- 信息架构 — 页面需要展示哪些信息？优先级如何？
- 线框图 — 用 ASCII/简单草图规划布局和组件位置
- 设计系统 — 确定/复用颜色、字体、间距 Token
- 组件设计 — 设计每个组件的视觉和交互细节
- 响应式 — 规划各断点下的布局变化
- 交互定义 — 定义 hover/click/transition 效果
- 实现 — 基于以上设计开始编码
Color Palette 速查
专业配色方案
深色主题 (Dark Mode):
bg: hsl(220, 20%, 8%)
surface: hsl(220, 20%, 12%)
border: hsl(220, 15%, 20%)
text: hsl(220, 10%, 90%)
浅色主题 (Light Mode):
bg: hsl(220, 20%, 97%)
surface: hsl(0, 0%, 100%)
border: hsl(220, 15%, 88%)
text: hsl(220, 20%, 12%)
品牌色变体生成（基于 HSL）:
primary: hsl(H, 80%, 56%)
primary-light: hsl(H, 80%, 70%) ← S 不变, L +14
primary-dark: hsl(H, 80%, 42%) ← S 不变, L -14
primary-bg: hsl(H, 80%, 95%) ← 超淡背景色