背景色从灰调到紫调工作区从渐变到白卡——一次让整体风格更协调的调色。前言3D 拆解分析 App 经历了多轮 UI 迭代布局重构、图标升级、多色系统、Tab 架构。每次改动都在解决具体问题但整体视觉风格一直没有统一——首页是灰色背景分析页也是灰色背景紫色只出现在按钮和选中态上。这次改动的核心是让紫色贯穿整个应用背景变成淡紫色工作区变成白色卡片网格选择器的底色也带上紫调。改完后应用从紫色点缀变成了紫色主题。背景色从灰到紫旧版constBG:string#F8F7FC// 浅灰新版constBG:string#E6E0F0// 浅紫#F8F7FC是接近白色的浅灰#E6E0F0是带紫调的浅灰。两个颜色的亮度接近但色相不同——旧版偏中性新版偏暖紫。为什么选这个色值#E6E0F0的 RGB 值是 (230, 224, 240)——蓝色通道最高240红色次之230绿色最低224。这种配比让它看起来是带蓝紫调的浅灰而不是纯紫色。如果紫色太重比如#D8C8F0会让界面看起来像儿童应用。#E6E0F0足够淡既改变了色调又不喧宾夺主。工作区从渐变到白色卡片旧版工作区Column(){}.width(100%).height(100%).borderRadius(18).linearGradient({angle:180,colors:[[#F0EEFA,0],[#F8F7FC,0.5],[#F5F5F9,1]]})渐变背景从浅紫到浅灰没有明确的边界。新版工作区Column(){}.width(100%).height(100%).borderRadius(18).backgroundColor(#FFFFFF).border({width:1,color:#D8D2E8}).shadow({radius:12,color:rgba(0,0,0,0.06),offsetY:3})白色背景 淡紫色边框 轻微阴影。为什么改成白色卡片边界感渐变背景和页面背景融合在一起用户分不清哪里是工作区哪里是背景。白色卡片有明确的边界用户一眼就知道这是主要操作区域。对比度紫色背景上的白色卡片对比度比灰色背景上的渐变更高。ExplodedView 组件在白色背景上显示效果更好。一致性其他元素统计卡片、场景卡片都是白色背景。工作区也用白色视觉风格统一。边框色的选择.border({width:1,color:#D8D2E8})边框色#D8D2E8是紫色系的淡色——比背景色#E6E0F0稍深但比纯灰色边框更协调。如果用纯灰边框如#E0E0E0在紫色背景上会显得突兀。点阵图案从硬编码到动态生成旧版手动放置 CircleCircle({width:3,height:3}).fill(A08).position({x:10%,y:8%})Circle({width:3,height:3}).fill(A06).position({x:75%,y:15%})Circle({width:4,height:4}).fill(A08).position({x:20%,y:70%})Circle({width:3,height:3}).fill(A06).position({x:80%,y:75%})8 个圆点手动设置位置和透明度。位置不规则覆盖不均匀。新版动态生成点阵// 数据层constdlist:DotData[][]for(letr:number0;r12;r){for(letc:number0;c8;c){dlist.push({x:(c*12.56).toString()%,y:(r*8.34).toString()%})}}this.dotsdlist// 渲染层在 build 中使用ForEach(this.dots,(d:DotData){Circle({width:3,height:3}).fill(A08).position({x:d.x,y:d.y})})12 行 × 8 列 96 个圆点均匀覆盖工作区。每个圆点的位置用百分比计算X 轴c * 12.5 6每 12.5% 一个点起始偏移 6%Y 轴r * 8.3 4每 8.3% 一个点起始偏移 4%为什么用动态生成覆盖均匀手动放置很难保证 96 个点均匀分布可维护改行数/列数只需要改循环参数不需要逐个调整位置可复用同样的逻辑可以用于其他需要点阵图案的场景DotData 接口interfaceDotData{x:string;y:string}只有两个字段——百分比格式的 x 和 y 坐标。足够轻量不需要更多属性。Hero Card 的渐变升级旧版渐变.linearGradient({angle:135,colors:[[A,0],[#6C3CE0,0.5],[#A78BFA,1]]})三段渐变品牌紫 → 深紫 → 浅紫。新版渐变.linearGradient({angle:140,colors:[[A,0],[#7C3CE0,0.35],[#A78BFA,0.7],[#C4B5FD,1]]})四段渐变品牌紫 → 深紫35%→ 中紫70%→ 浅紫100%。多了一个色阶渐变更平滑。角度从 135° 微调到 140°视觉上更自然。图标容器Row(){Text().fontSize(40)}.width(64).height(64).borderRadius(20).backgroundColor(rgba(255,255,255,0.15)).justifyContent(FlexAlign.Center).alignItems(VerticalAlign.Center).margin({bottom:14}) emoji 不再直接放在渐变背景上而是包裹在一个半透明白色圆角矩形里。这个容器让图标和背景之间有了过渡不会显得突兀。装饰圆的位置调整Circle({width:160,height:160}).fill(rgba(255,255,255,0.04)).position({x:58%,y:-40})Circle({width:90,height:90}).fill(rgba(255,255,255,0.06)).position({x:-5%,y:90})Circle({width:45,height:45}).fill(rgba(255,255,255,0.08)).position({x:82%,y:120})三个圆的大小递减160 → 90 → 45透明度递增0.04 → 0.06 → 0.08。位置从右侧主导改成左右分散视觉更平衡。网格选择器的色调统一旧版.backgroundColor(p.colsthis.colsp.rowsthis.rows?A:#F5F5F7)未选中态用纯灰色#F5F5F7。新版.backgroundColor(p.colsthis.colsp.rowsthis.rows?A:#ECEBF0)未选中态用带紫调的灰色#ECEBF0。和背景色#E6E0F0同色系但稍深一点。这种同色系深浅搭配让网格选择器和背景融为一体不会像异色元素那样跳出来。历史 Tab 的更新旧版BuilderHistoryTab(){Column(){Text(分析历史).fontSize(20)...Column(){Text().fontSize(48)...Text(暂无分析记录)...Text(切换到首页选择场景开始拆解)...}}}新版BuilderHistoryTab(){Column(){Row(){Row(){SymbolGlyph($r(sys.symbol.chevron_left)).fontSize(20).fontColor([T1])}.width(34).height(34).borderRadius(17).backgroundColor(rgba(0,0,0,0.03)).justifyContent(FlexAlign.Center).onClick((){this.tab0})Blank()}.width(100%).padding({left:18,right:18,top:12,bottom:8})Text(分析历史).fontSize(20)...Column(){Text().fontSize(48)...Text(暂无分析记录)...Text(完成首次拆解后记录将显示在这里)...}}}两个变化加了返回按钮chevron_left点击回到首页 Tab副文案从切换到首页选择场景开始拆解改成完成首次拆解后记录将显示在这里——更准确地描述了这个页面的用途统计卡片的文案优化旧版this.Stat(5 种,基底选择,A)this.Stat(4 档,拆解精度,A3)this.Stat(2~16,部件数量,A4)this.Stat(3D,爆炸展示,A5)新版this.Stat(5 种基底,满足不同口味,A)this.Stat(4 档精度,简单到深度,A3)this.Stat(2~16 部件,灵活拆解,A4)this.Stat(3D 爆炸,直观展示,A5)值和标签合并了“5 种” “基底选择” → “5 种基底”副文案更口语化“满足不同口味”“简单到深度”“灵活拆解”“直观展示”。这样做的好处用户扫一眼就能理解每个卡片的含义不需要在两行文字之间建立关联。视觉统一的原则1. 背景色定调子背景色是整个应用的底色——所有其他颜色都在这个底色上面展示。选了紫色背景就意味着整个应用的色调偏紫。其他颜色需要和背景色协调白色卡片在紫色背景上更突出紫色边框和背景同色系不突兀灰色文字在紫色背景上可读性足够2. 卡片要有边界白色卡片 边框 阴影 明确的这是内容区域信号。没有边界的卡片如旧版的渐变工作区会让用户分不清内容和背景的界限。边框色不需要和背景色完全一致但要同色系。#D8D2E8边框和#E6E0F0背景都是紫色系搭配起来很协调。3. 装饰元素要低调点阵圆点用A 088% 透明度几乎看不到但能感受到。Hero Card 的装饰圆用rgba(255,255,255,0.04~0.08)同样很淡。装饰元素的透明度建议控制在 10% 以下。太高的透明度会抢视觉焦点干扰主要内容。踩坑记录1. 背景色对文字可读性的影响紫色背景上的黑色文字#1E1B2E对比度约 12:1可读性足够。但灰色文字#888888在紫色背景上的对比度会降低——因为紫色和灰色的色相接近视觉上不容易区分。解决方案在紫色背景上灰色文字用稍深的色值如#777777或加粗字体。2. 点阵图案的性能96 个 Circle 组件ForEach渲染在列表滚动时可能影响性能。如果遇到卡顿可以减少点阵密度比如 6×4 24 个点用visibility控制只在可见区域渲染把点阵做成一张静态图片用Image组件显示3. 白色卡片在紫色背景上的阴影.shadow({radius:12,color:rgba(0,0,0,0.06),offsetY:3})阴影颜色用的是黑色半透明rgba(0,0,0,0.06)不是紫色半透明。在紫色背景上黑色阴影看起来偏灰和白色卡片的边界很清晰。如果用紫色阴影如A 10阴影会和背景融为一体卡片的浮起感会减弱。所以黑色阴影在浅色背景上更有效。4. border 的 color 类型.border({width:1,color:#D8D2E8})ArkUI 的.border()方法中color参数接受ResourceColor类型。字符串格式的颜色值可以直接传入不需要额外转换。写在最后这次改动的核心是色调统一——从灰色背景变成紫色背景让紫色从点缀色升级为主题色。白色卡片 紫色边框 点阵图案的组合让界面既有层次感又不失协调。调色是 UI 开发中最需要审美判断的工作。技术上只是改一个颜色值但视觉效果的差异可能是普通和精致的区别。建议多参考成熟应用的配色方案找到适合自己产品的色调。