治愈系生活工具的设计系统：从颜色语义到组件规范-尧图网络科技

治愈系生活工具的设计系统：从颜色语义到组件规范

一、设计系统的必要性：不止于"好看"，更关乎"可信"

生活工具的用户信任建立在两个层面：功能可靠性（数据准确、AI理解用户意图）和视觉一致性（界面行为可预测、风格稳定）。视觉一致性的每一次破坏——一个按钮的颜色与同页面的其他按钮微妙不同、一个卡片的动画时长比另一卡片多了0.1秒——都可能被用户潜意识感知为"这个产品不太可靠"的信号。

设计系统就是确保视觉和行为一致性的工程保障。它通过颜色语义（每个颜色不是随意选择的，而携带明确的设计意图）、组件规范（同一类型组件在所有页面中的行为和外观一致）和Token管理（所有视觉属性通过可配置Token而非硬编码值）三层体系来实现。

二、治愈系设计的颜色语义与情感映射

治愈系设计系统与通用设计系统的关键区别在于颜色语义的深度。每个颜色不仅有功能定位（主色/强调色/警告色），还有情绪映射——UI的背景和强调色可以根据用户的当前情绪状态动态调整到对应的情绪映射色。这是"数据驱动治愈系UI"的技术基础。

另一个区别是警告色的"非指责性"。传统UI的警告色（亮红#FF0000）传达"你出错了"的否定信息；治愈系的警告色（暖陶土#C97D60）传达"这里需要注意一下"的温和提醒。颜色的设计意图不仅是审美选择，更是产品态度。

三、设计Token的标准化规范

/** * 治愈系生活工具设计Token规范 * 设计意图：三层Token体系（基础值→语义Token→组件Token）， * 确保视觉一致性 + 主题切换 + 数据驱动的动态适配 */ // ===== 第1层：基础值（不携带设计语义的原始值） ===== const primitives = { color: { // 暖色系列 warm: { 50: '#FFF8F0', 100: '#F5E6D3', 200: '#E8D5C0', 300: '#D4C5B9', 700: '#8B7355', 900: '#5C4A3A', }, // 情绪映射色 emotion: { calm: '#B8A9C9', happy: '#D4A853', anxious: '#A3B5C7', low: '#C4BDB5', }, // 功能色 functional: { success: '#A8D8B9', warning: '#E8C9A0', info: '#A3B5C7', error: '#D4958A', // 治愈系错误色：柔红而非亮红 }, }, spacing: { 0: '0', 1: '4px', 2: '8px', 3: '12px', 4: '16px', 5: '20px', 6: '24px', 8: '32px' }, radius: { sm: '6px', md: '12px', lg: '16px', xl: '24px', full: '9999px' }, transition: { fast: '150ms', normal: '300ms', slow: '500ms', gentle: '400ms' }, } as const; // ===== 第2层：语义Token（赋予设计意图） ===== export const semanticTokens = { bg: { page: primitives.color.warm[50], card: primitives.color.warm[100], cardHover: primitives.color.warm[200], modal: '#FFFFFF', }, text: { primary: primitives.color.warm[900], secondary: primitives.color.warm[700], disabled: primitives.color.warm[300], inverse: '#FFFFFF', }, emotion: primitives.color.emotion, functional: primitives.color.functional, spacing: primitives.spacing, radius: primitives.radius, transition: primitives.transition, } as const; // ===== 第3层：组件Token（组件直接消费的样式配置） ===== export const componentTokens = { card: { bg: semanticTokens.bg.card, hoverBg: semanticTokens.bg.cardHover, padding: semanticTokens.spacing[4], radius: semanticTokens.radius.lg, transition: semanticTokens.transition.normal, }, button: { primary: { bg: primitives.color.warm[700], text: semanticTokens.text.inverse, hoverBg: primitives.color.warm[900], radius: semanticTokens.radius.md, paddingX: semanticTokens.spacing[4], paddingY: semanticTokens.spacing[2], }, }, moodSelector: { // 心情选择器的情绪映射色 calm: semanticTokens.emotion.calm, happy: semanticTokens.emotion.happy, anxious: semanticTokens.emotion.anxious, low: semanticTokens.emotion.low, }, } as const; // TypeScript类型导出，确保消费组件时的类型安全 export type SemanticTokens = typeof semanticTokens; export type ComponentTokens = typeof componentTokens;

三层Token体系的核心价值在于修改的隔离性。当需要调整整个产品的"温暖感"时，只需修改primitives.color.warm系列的值，所有引用该Token的页面和组件自动更新。这避免了在40+个组件文件中逐一手动查找替换颜色值的维护噩梦。