# Robi 的设计最佳实践 ## 快速参考清单设计或审查 UI 组件时： * 颜色饱和度低（避免“vibe code”过饱和的颜色） * 深色模式颜色适当去饱和或变亮 * 文字对比度符合 WCAG AAA 标准 * 没有纯黑色 (#000000) 或纯白色 (#FFFFFF) - 使用有色变体 * 所有间距均使用4px倍数 * 嵌套边框半径如下：`inner_radius = external_radius - padding` * 图标始终使用一致的粗细和风格 * 在黑暗模式下避免阴影（使用边框/颜色代替） * 动画使用平滑缓动（非线性） * 添加微交互，带来优质体验 ## 颜色指南 ### 避免颜色过饱和 “紫色互联网理论”——人工智能和许多现代网站过度使用鲜艳、饱和的颜色。这会导致用户眼睛疲劳并减少在您网站上花费的时间。 **HSL 基础知识：** * **色调**：色轮上的位置（0-360°） * **饱和度**：存在多少颜色（0-100%） * **亮度** ：颜色的浅/深程度 (0-100%) **规则**：目标是**低饱和度**，除非进行新粗野主义设计。示例：不好：hsl(280, 100%, 60%) - 太鲜艳的紫色好：hsl(280, 30%, 60%) - 静音，眼睛更舒服 ### 深色模式颜色调整颜色在黑色背景上显得更亮。补偿方式： * **去饱和颜色**（降低饱和度 10-20%） * **稍微增加亮度** 灯光模式：hsl(220, 40%, 50%) 深色模式：hsl(220, 25%, 65%) // 饱和度较低，颜色较浅 ### WCAG 对比标准 **背景文字始终以 AAA 评级为目标。 * AAA：最低对比度为 7:1 * AA：最小对比度为 4.5:1（可接受的回退）使用 WebAIM Contrast Checker 等工具或内置浏览器开发工具。 ### 防止光晕白底纯黑或黑底纯白会产生“模糊光晕”效果，称为光晕。 **解决方案**：使用稍微着色的变体。 /* 而不是纯值 */ /* 不好 */ 背景: #000000; /* 不好 */ 颜色: #FFFFFF; /* 使用有色变体 */ /* 好 */ 背景: #0a0a0a; /* 稍浅的黑色 */ /* 好 */ color: #fafafa; /* 稍微深一点的白色 */ /* 或带有轻微的色调 */ /* 好 */ 背景: hsl(220, 5%, 5%); /* 深蓝色调 */ /* 好 */ 颜色: hsl(40, 5%, 98%); /* 灰白色，暖色调 */ ## 间距系统 **所有间距必须是 4px 的倍数。** 这会在整个 UI 中创建视觉一致性和对齐方式。 ### Tailwind/Shadcn 规模 p-1 = 4px 间隙-1 = 4px p-2 = 8px 间隙-2 = 8px p-3 = 12px 间隙-3 = 12px p-4 = 16px 间隙-4 = 16px p-6 = 24px 间隙-6 = 24px p-8 = 32px 间隙-8 = 32px 在整个设计中使用一致的间距值： * 小间隙：4px、8px * 中等间隙：12px、16px * 大间隙：24px、32px、48px ## 边框半径堆叠当嵌套具有边框半径的元素时，请添加填充值以保持同心外观。 **公式**：`内半径 = 外半径 - 填充` /* 父容器 */ .外层{ 边框半径：16px；内边距：12px； } /* 子元素 */ .内部{ 边框半径：4px； /* 16 像素 - 12 像素 = 4 像素 */ } 顺风示例：

{/* 16px 半径，12px 内边距 */}

{/* 4px 半径 */} 内容

## 图标一致性 ### 切勿混合图标样式 **不要混合**：在同一个 UI 中使用双色调、填充、常规、薄、轻量。不好：使用填充的主页图标+常规设置图标+瘦用户图标好：所有图标都使用常规粗细和相同大小 ### 显示活动/选定状态 **混合规则的例外**：您可以使用同一图标的填充版本来指示活动/选定状态。 /* 导航示例 */ <图标图标={是否活动？ "home-filled" : "home-regular"} 重量=“常规” 尺寸={24} /> ### 一致性规则 * 对所有图标使用相同的权重（例如，所有“常规”图标） * 在上下文中使用相同的尺寸（例如，所有导航图标 24px） * 为聚焦/活动图标提供不同的描边颜色或填充变体 * 避免混合家族（不要将 Phosphor 与 Heroicons 混合） ## 阴影和黑暗模式 ### 黑暗模式策略在黑暗模式下，**避免使用阴影**进行海拔高度。而是使用： * 边框颜色微妙 * 背景颜色变化 * 轻微调整亮度 /* 灯光模式 */ .card-light { 盒子阴影：0 4px 6px rgba(0, 0, 0, 0.1); } /* 深色模式 - 使用边框代替 */ .card-dark { 边框: 1px 实心 rgba(255, 255, 255, 0.1); 背景：hsl(220, 10%, 12%); } ### 拟态设计注意事项拟态设计很大程度上依赖于阴影来创造深度和真实感。这在浅色模式下效果很好，但在深色模式下可能会出现问题。谨慎使用。 ## 动画和缓动 ### 避免线性缓动线性运动 (y=x) 感觉机器人且不自然。 **使用平滑缓动功能：** /* CSS */ /* 不好 */ 过渡：全部 0.3s 线性； /* 好 */ 过渡：全部 0.3s 三次贝塞尔曲线(0.4, 0.0, 0.2, 1); /* 常见缓动 */ ease-out:cubic-bezier(0.0, 0.0, 0.2, 1) /* 减速 */ escape-in-out:cubic-bezier(0.4, 0.0, 0.2, 1) /* 平滑两端 */ spring: 自定义弹簧物理 /* 有弹性，自然 */ ### 成帧器运动示例 <运动.div 初始={{ 不透明度: 0, y: 20 }} 动画={{ 不透明度: 1, y: 0 }} 过渡={{ 持续时间：0.4， ease: [0.4, 0.0, 0.2, 1] // 自定义三次贝塞尔曲线 }} > 内容 ## 微交互添加小的互动细节，给人一种优质的感觉。 Linear、Notion 和 Supabase 等公司在这方面表现出色。 ### 微交互示例 * 按钮悬停状态具有平滑的颜色过渡 * 点击时有细微的比例（比例：0.98） * 加载骨骼动画 * 具有滑入式动画的 Toast 通知 * 复选框选中时的动画 * 输入焦点状态与边框颜色过渡 * 悬停工具提示具有延迟和淡入功能 /* 带微交互的按钮 */ <按钮类名=” px-4 py-2 圆角-lg bg-blue-600 悬停：bg-blue-700 变换过渡-所有持续时间-200 悬停：缩放-[1.02] 活动：缩放-[0.98] ” > 点我 ## 布局替代方案 **并非所有数据显示都需要是表格或卡片。** 探索替代布局： * 用于任务管理的看板 * 按时间顺序排列的数据的时间线视图 * 仪表板的 Bento 网格布局 * 列出带有分隔符的组 * 分层数据的树视图 * 媒体画廊/砖石网格 * 手风琴/可折叠部分打破表格/卡片模式，创建更具吸引力的界面。 ## 设计灵感 ### 浏览和学习通过研究优秀作品来培养您的设计品味： **探索的平台：** * **Pinterest** \- UI 设计模式和灵感 * **Twitter** \- 专家的设计主题和技巧 * **cosmos.so** \- 组件和模式库 * **Behance** \- 专业设计作品集 * **Dribbble** \- UI 设计截图和概念 ### 偷窃和模仿 “总有比你更好的人做了一些令人惊奇的事情 - 尝试从中学习。” **流程：** 1.找到你欣赏的设计 2. 分析是什么让它们发挥作用 3. 重新创建元素来学习技术 4. 适应和策划自己的风格这就是品味的发展方式——通过接触高质量的工作和刻意的练习。 ## 其他资源有关代码示例和实现细节，请参阅 [examples.md]()。参考：HSL 颜色工具的 kigen.design/color。

Robis 设计最佳实践

包含技能