本文从 UI 设计的角度分析 ImportantDays 项目的视觉设计语言包括色彩体系、排版规范、卡片设计、阴影与圆角、图标使用、空状态设计以及如何在 ArkUI 声明式 UI 中实现一致的设计风格。一、设计语言概述ImportantDays 采用简约现代的 UI 设计风格整体特点柔和色调避免高饱和度使用偏柔和的颜色圆角设计统一的圆角风格卡片布局信息以卡片形式组织轻量阴影轻微的阴影增强层次感留白充足合理的间距让信息呼吸二、色彩体系主题色constPRIMARY_COLOR#FF6B6B;// 珊瑚红#FF6B6B是一种柔和的红色比纯红#FF0000更舒适适合长时间观看。辅助色颜色十六进制用途珊瑚红#FF6B6B主题色、强调青色#4ECDC4次要强调黄色#F7DC6F特别提示浅红背景#FFF0F0倒数标签背景浅青背景#E8FAF8正数标签背景文字色阶颜色十六进制用途深灰#333333主标题中灰#666666副文本浅灰#999999辅助文本更浅灰#BBBBBB备注文本最浅灰#CCCCCC占位/非当月背景色阶颜色十六进制用途白色#FFFFFF主背景极浅灰#FAFAFA卡片背景浅灰#F5F5F5输入框背景更浅灰#F0F0F0分割线最浅灰#EEEEEE分割线色阶设计原则文字色阶: #333333 → #666666 → #999999 → #BBBBBB → #CCCCCC 背景色阶: #FFFFFF → #FAFAFA → #F5F5F5 → #F0F0F0 → #EEEEEE每级色阶有足够的对比度差异确保视觉层次清晰。三、排版规范字体大小大小用途28vp统计卡片大数字24vp页面主标题22vp卡片天数数字20vp日历标题、统计数字16vp卡片标题、选中 Tab15vp表单文字14vp正文、设置项13vp辅助文本、按钮文字12vp日期文本、标签11vp操作按钮、统计标签10vp年视图星期、小日历8vp日历标题预览字体粗细粗细用途FontWeight.Bold页面标题、统计数字FontWeight.Medium卡片标题、弹窗标题FontWeight.Normal正文字体大小递进8 → 10 → 11 → 12 → 13 → 14 → 15 → 16 → 20 → 22 → 24 → 28每级递进 1-4vp确保层次分明。四、间距系统统一间距exportconstCOMMON_PADDING12;exportconstCOMMON_PADDING_SMALL8;exportconstCOMMON_PADDING_LARGE16;实际使用的间距间距用途4vp小间距按钮内边距8vp中间距元素间距12vp标准间距左右边距16vp大间距页面边距20vp统计卡片上下间距32vp头部上下间距页面边距所有页面统一使用 16vp 作为左右边距.padding({left:16,right:16})五、圆角系统圆角值圆角用途4vp小标签倒数/正数8vp卡片、输入框、日期格12vp设置项、统计卡片22vp添加按钮胶囊形圆角设计原则小元素 → 4vp 中元素 → 8vp 大元素 → 12vp 按钮 → 高度/2胶囊形圆角值与元素大小成正比视觉协调。六、阴影设计卡片阴影.shadow({radius:2,color:#10000000,offsetX:0,offsetY:1})参数值说明radius2模糊半径color#100000006% 透明度黑色offsetX0水平偏移offsetY1垂直偏移 1vp统计卡片阴影.shadow({radius:4,color:#10000000,offsetX:0,offsetY:2})比列表卡片阴影稍大增强浮起感。阴影设计原则轻量#100000006% 透明度非常微妙向下offsetY为正模拟自然光照无水平偏移offsetX: 0对称阴影七、卡片设计列表页卡片┌──────┬──────────────────────────┬──────────┐ │ │ 标题 │ 置顶 │ │ 天数 │ 日期 │ 编辑 │ │ 标签 │ 显示文本 │ 删除 │ │ │ 备注 │ │ └──────┴──────────────────────────┴──────────┘ 背景: #FAFAFA 圆角: 8vp 阴影: 轻微日历页卡片┌─┬───────────────────────────────┬──────┐ │ │ 标题 │ 标签 │ │ │ 日期 · 显示文本 │ │ └─┴───────────────────────────────┴──────┘ 背景: #FAFAFA 圆角: 8vp统计卡片┌────────────────────────────────────┐ │ 12 5 1 6 │ │ 全部 即将 今天 已过 │ └────────────────────────────────────┘ 背景: #FFFFFF 圆角: 12vp 阴影: 中等八、按钮设计浮动添加按钮Button(){Row(){Text().fontSize(28).fontColor(#FFFFFF)Text(添加).fontSize(14).fontColor(#FFFFFF).margin({left:4})}}.width(100).height(44).borderRadius(22)// 胶囊形.backgroundColor(#FF6B6B)倒数/正数切换按钮Button(倒数 (还有X天)).height(40).borderRadius(8).backgroundColor(this.isCountdown?this.selectedColor:#F5F5F5)设置项Row(){Text(通知提醒)...Toggle({type:ToggleType.Switch,isOn:this.notificationEnabled}).selectedColor(#FF6B6B)}.height(52).backgroundColor(#FFFFFF).borderRadius(12)九、空状态设计Column(){Text().fontSize(60).margin({bottom:16})Text(还没有重要日).fontSize(16).fontColor(#999999)Text(点击右下角添加你的第一个重要日).fontSize(13).fontColor(#CCCCCC).margin({top:4})}空状态设计原则视觉元素emoji 作为图标无需图片资源主文本说明当前状态引导文本指导用户下一步操作居中布局占据剩余空间视觉平衡十、日历日期项设计月视图日期项┌────────┐ │ 15 │ ← 16vp 数字 │ ● ● │ ← 5vp 圆点 │ 妈妈生日│ ← 8vp 标题预览 └────────┘ 高度: 52vp年视图日期项┌─────┐ │ •15 │ ← 11vp 数字 4vp 圆点 └─────┘ 高度: 22vp日期项的视觉层次选中背景圆36vp ↓ 今天边框圆36vp ↓ 日期数字 ↓ 重要日圆点 ↓ 标题预览多层视觉元素通过Stack叠加每一层条件渲染。十一、Toggle 开关设计Toggle({type:ToggleType.Switch,isOn:this.notificationEnabled}).selectedColor(#FF6B6B)Toggle 设计开关类型Switch滑动开关选中颜色主题色#FF6B6B与设置项在同一行右对齐十二、设计一致性检查颜色使用一致性元素颜色一致性主题按钮#FF6B6B✓选中 Tab#FF6B6B✓Toggle 选中#FF6B6B✓今天日期#FF6B6B✓添加按钮#FF6B6B✓圆角使用一致性元素圆角一致性列表卡片8vp✓日历卡片8vp✓输入框8vp✓设置项12vp✓更大元素更大圆角统计卡片12vp✓间距使用一致性场景间距一致性页面左右边距16vp✓卡片间距8vp✓按钮内边距4vp✓十三、总结ImportantDays 的 UI 设计体现了以下原则色彩柔和所有颜色偏柔和不刺眼层次分明文字和背景都有 5 级色阶圆角统一按元素大小递进的圆角系统阴影轻量6% 透明度的微妙阴影间距规律4/8/12/16/32vp 的间距系统空状态友好emoji 引导文字设计一致同类元素在所有页面保持一致这套设计语言在 ArkUI 声明式 UI 中得到了完整的实现每个设计决策都有对应的代码支撑。
