引子五个工具一套视觉语言小工具百宝箱有五个工具——二维码、单位换算、随机决策、颜色提取、倒计时。功能各不相同但打开任何一个页面深色渐变背景、白色标题、圆角卡片、统一的返回按钮视觉上一看就是同一个应用。这种一致性不是巧合而是刻意设计的结果。今天就从五个页面的共性出发聊聊多页面应用的设计系统和架构思维。完整效果共性分析五个页面都有的元素打开任意两个页面对比会发现它们有大量相同的结构元素二维码单位换算随机决策颜色提取倒计时渐变背景✅✅✅✅✅返回按钮✅✅✅✅✅页面标题✅✅✅✅✅工具主色#4F6EF7#34C759#FF6B35#AF52DE#FF2D55圆角卡片✅✅✅✅✅深色背景色#2A2A3E#2A2A3E#2A2A3E#2A2A3E#1E1E32五个页面用了同一套设计语言只是主色调不同。渐变背景统一的视觉基底.linearGradient({direction:GradientDirection.Bottom,colors:[[#1A1A2E,0.0],[#16213E,0.5],[#0F3460,1.0]]})五个页面的背景完全一样——从深蓝到更深蓝的三段渐变。这个渐变有三个作用统一感所有页面共享同一个背景切换时不会跳深度感渐变比纯色有层次看起来更高级衬托内容深色背景让白色文字和彩色元素更醒目为什么不每个页面用不同的渐变用不同渐变会让每个页面更有个性但代价是失去统一性。用户从一个页面跳到另一个视觉上会断裂。对于工具箱这种多个工具共存的应用统一性比个性更重要。导航栏三种模式五个页面的导航栏结构相似但有细微差异模式一纯返回 标题Row(){Text(←).fontSize(22).fontColor(#FF6B35).onClick(()router.back())Text( 随机决策).fontSize(18).fontWeight(FontWeight.Bold).fontColor(#FFFFFF).margin({left:12})}.width(100%).padding({left:20,right:20,top:50,bottom:12})随机决策、颜色提取、倒计时用这种模式——只有返回按钮和标题。模式二返回 标题 操作按钮Row(){Text(←).fontSize(22).fontColor(#FF2D55).onClick(()router.back())Text(⏳ 倒计时).fontSize(18).fontWeight(FontWeight.Bold).fontColor(#FFFFFF).margin({left:12})Blank()Button( 新增).fontSize(13).height(34).borderRadius(10).backgroundColor(#FF2D55).fontColor(#FFFFFF).onClick((){this.showAdd!this.showAdd;})}.width(100%).padding({left:20,right:20,top:50,bottom:12})倒计时页面在标题右边加了 新增按钮。Blank()把按钮推到最右边。模式三返回 标题居左对齐二维码和单位换算的标题在左边和返回按钮同行。为什么返回按钮的 color 不同每个页面的返回按钮颜色和该工具的主色一致——二维码用蓝色#4F6EF7单位换算用绿色#34C759随机决策用橙色#FF6B35。这是品牌色在细节上的体现。颜色系统每个工具自己的主色constTOOLS:ToolItem[][{name:二维码生成,color:#4F6EF7},// 蓝色{name:单位换算,color:#34C759},// 绿色{name:随机决策,color:#FF6B35},// 橙色{name:颜色提取,color:#AF52DE},// 紫色{name:倒计时,color:#FF2D55},// 红色];五种颜色的选择五种颜色饱和度相近都在 60-80% 之间在深色背景上都能看清。但色相不同蓝、绿、橙、紫、红用户可以通过颜色快速识别工具。颜色在页面中的应用每个工具的颜色出现在三个地方首页卡片backgroundColor(item.color)导航栏返回按钮.fontColor(#4F6EF7)页面内的强调元素按钮、滑块、进度条等为什么不统一用一种颜色统一用一种颜色会让页面更简洁但用户在首页靠颜色区分工具。如果所有页面都是蓝色用户打开后需要看标题才知道这是哪个工具。颜色是最直观的识别方式。字号系统四个层级五个页面的字号高度一致层级字号粗细用途标题18pxBold页面标题、卡片名称正文14-16pxMedium输入框文字、列表项辅助11-12pxNormal描述文字、标签强调24-40pxBold/Lighter结果数字、大标题为什么强调数字用 Lighter 而不是 BoldText(this.result).fontSize(40).fontWeight(FontWeight.Lighter)Lighter是更细的字重。大号数字用细体比粗体更优雅——粗体大数字会显得笨重细体更精致。间距系统20px 基准五个页面的左右边距都是 20px.padding({left:20,right:20,top:50,bottom:...})为什么用 20px20px 是移动端常见的边距值——太小8px会显得拥挤太大40px会浪费空间。20px 在大多数屏幕上都能保持良好的可读性。top: 50 的原因导航栏的 top padding 是 50px留出状态栏的空间。如果不用 50px标题会和状态栏重叠。卡片样式圆角和阴影.borderRadius(16).shadow({radius:8,color:#00000022,offsetY:4}).backgroundColor(#1E1E32)圆角 16px五个页面的卡片圆角都是 16px或 18px。大圆角让卡片更柔和符合现代 UI 趋势。阴影的统一阴影的参数略有不同radius 8-12color 22%-44% 透明度但整体风格一致——深色阴影向下偏移。背景色的微调大部分页面用#2A2A3E倒计时用#1E1E32。略有差异但都在深色范围内视觉上不会冲突。路由架构push backimport{router}fromkit.ArkUI;// 首页跳转navTo(page:string):void{router.pushUrl({url:page});}// 子页面返回Text(←).onClick(()router.back())为什么用 push 而不是 replacepushUrl把目标页面压入栈顶用户按返回键能回到首页。如果用replaceUrl首页会被替换掉用户按返回键直接退出应用。页面栈的管理五个工具页面都用pushUrl进入用back返回。页面栈结构首页 → 工具页面 → 用户按返回→ 首页简单清晰不需要额外管理。不一致性可以改进的地方五个页面虽然整体一致但有一些细微差异1. 背景色不完全统一二维码、单位换算、随机决策卡片#2A2A3E颜色提取无卡片倒计时卡片#1E1E322. 阴影参数不完全统一二维码shadow({radius:12, color: this.hex66})单位换算无阴影随机决策shadow({radius:8, color:#FF6B3522})3. 标题的 emoji 不统一二维码单位换算随机决策颜色提取倒计时⏳emoji 本身没问题但如果要更统一可以不用 emoji纯文字标题。4. 返回按钮的大小五个页面的返回按钮都是fontSize(22)但颜色不同。如果要更统一可以固定一个颜色比如白色。设计系统的提取如果要让五个页面更一致可以提取一个设计系统// theme/CommonTheme.tsexportconstTHEME{// 渐变背景gradient:{direction:GradientDirection.Bottom,colors:[[#1A1A2E,0.0],[#16213E,0.5],[#0F3460,1.0]]},// 字号fontSize:{title:18,body:15,caption:12,result:40},// 间距spacing:{page:20,navTop:50,navBottom:12},// 卡片card:{radius:16,bgColor:#1E1E32,shadow:{radius:8,color:#00000022,offsetY:4}}};然后每个页面引用THEME而不是硬编码值.linearGradient(THEME.gradient).padding({left:THEME.spacing.page,right:THEME.spacing.page})好处修改一个地方所有页面同步更新。比如要把渐变背景改成从上到下只需要改THEME.gradient不需要改五个文件。坏处增加了间接层代码可读性降低。对于只有五个页面的小应用直接硬编码可能更简单。踩坑记录坑 1渐变背景的层级渐变背景加在最外层 Column 上。如果加在内层 Column 上滚动时背景不会跟着动。坑 2导航栏的 top padding不同设备的状态栏高度不同。固定 50px 在大部分设备上没问题但在某些设备上可能不够。可以用env(statusbar_height)动态获取。坑 3router.back() 的行为router.back()返回上一页。如果页面栈为空比如直接进入工具页面back()会退出应用。需要确保从首页进入工具页面。坑 4ForEach 的 key五个页面的 ForEach 都没有显式指定 key。对于静态列表没问题但如果列表会动态增删需要指定 key 避免渲染错误。坑 5颜色的可访问性白色文字#FFFFFF在深色背景上对比度足够但灰色文字#666666可能在某些屏幕上不够清晰。可以用 WebAIM 对比度检查工具验证。代码改进建议1. 提取公共组件把导航栏、卡片、按钮等公共组件提取成独立文件五个页面引用。2. 统一阴影参数把阴影参数统一成一个常量避免每个页面自己写。3. 统一背景色把卡片背景色统一成一个值减少视觉差异。4. 加载动画页面切换时可以加过渡动画让跳转更流畅。5. 深色模式适配当前固定深色主题。如果要支持浅色模式需要把颜色值提取成变量。总结小工具百宝箱的五个页面共享一套设计语言——深色渐变背景、20px 边距、18px 粗体标题、16px 圆角卡片、每个工具自己的主色。这种一致性让用户在切换工具时不会迷失。适用边界这个部分适合用作多页面应用设计一致性的学习案例涵盖了设计系统提取、颜色系统、字号层级、间距系统、路由架构等核心知识点。但如果要上架应用商店还需要补充公共组件提取、统一阴影/背景色、加载动画、深色模式适配等内容。
