HarmonyOS PC实战系列之 时间轴的视觉语言——圆点、竖线与状态颜色的空间节奏

文章目录圆点设计大小与层次竖线设计连接感的关键状态颜色系统时间标签的排版空间节奏padding 和间距的分配完整代码几个容易忽视的细节小结时间轴之所以让人一眼就认出来不是因为数据本身而是那根贯穿始终的竖线和串联在上面的节点。把这条视觉脊梁设计好时间轴就有了自己的气质。这篇专门讲视觉层圆点怎么设计、竖线和节点的间距配合、三种状态完成/进行中/待开始的颜色系统以及整体空间节奏感怎么建立。圆点设计大小与层次圆点承担节点标记的语义太小了视觉弱太大了又喧宾夺主。实测 12vp 是比较舒适的默认尺寸在 HarmonyOS PC 端的 100% 缩放比下对应物理尺寸大约 4mm手指点击完全没问题。进行中状态的圆点可以比其他圆点稍大一圈同时加一个外圈光晕强调当前焦点// 进行中16vp 圆点 外圈光晕Circle({width:16,height:16}).fill(#3B82F6).shadow({radius:8,color:#403B82F6})// 蓝色光晕40% 透明度// 已完成12vp 实心Circle({width:12,height:12}).fill(#10B981)// 待开始12vp 空心边框实现Circle({width:12,height:12}).fill(Color.White).border({width:2,color:#D1D5DB})三种状态视觉强度递减进行中 已完成 待开始。用户扫一眼就能找到当前在哪里。竖线设计连接感的关键竖线的颜色别用纯黑或纯白用带透明度的灰色更柔和Divider().vertical(true).strokeWidth(2).color(#E5E7EB)// Tailwind gray-200刚好够可见但不抢眼竖线的高度要刚好衔接上下两个圆点。如果用固定高度当内容区文字折行时竖线就会对不上。比较稳的方案是让右侧内容区决定高度竖线跟着自适应Row({space:16}){// 左侧轨道竖线跟内容高度走Column(){Circle(...)Divider().vertical(true).layoutWeight(1)// ← layoutWeight(1) 自适应}.alignItems(HorizontalAlign.Center).height(100%)// ← 撑满 Row 的高度// 右侧内容区决定整行高度Column(...){...}.layoutWeight(1).padding({bottom:24})// ← 底部留白决定竖线长度感}.alignItems(VerticalAlign.Top)这样不管右侧内容折不折行竖线都能准确填满空间。状态颜色系统用三色体系每种颜色负责一种语义状态颜色Hex语义已完成绿色#10B981积极、完成进行中蓝色#3B82F6活跃、当前待开始灰色#D1D5DB中性、未激活这三个颜色不是随便选的。绿和蓝在 HarmonyOS 的设计规范里是正向操作的标准色灰色是禁用/未激活的标准色。用系统已有的色彩语义用户不需要额外学习就能看懂。时间标签的排版时间字段通常是YYYY-MM-DD格式12px 字号靠右对齐颜色比描述文字更浅Text(item.time).fontSize(12).fontColor(#9CA3AF)// 比描述文字的 #6B7280 更浅时间标签和标题放在同一行时间靠右标题靠左用layoutWeight(1)推开Row(){Text(item.title).fontSize(15).fontWeight(FontWeight.Medium).layoutWeight(1)Text(item.time).fontSize(12).fontColor(#9CA3AF)}.width(100%)空间节奏padding 和间距的分配时间轴的空间节奏主要靠两个参数控制条目内的底部 padding决定竖线有多长也就是条目间的间距感。设 24vp。内容区内的行间距标题和描述的间距设 4vp显得紧凑。// 条目间距底部 padding 拉开间距Column({space:4}){Row(){...}// 标题行Text(desc)...// 描述}.padding({bottom:24})整个时间轴容器两侧各留 32vp 的水平 padding给圆点轨道留足空间同时让内容区不至于顶边。完整代码enumTimelineStatus{Done,Active,Pending}classTimelineItem{time:stringtitle:stringdesc:stringstatus:TimelineStatusconstructor(time:string,title:string,desc:string,status:TimelineStatus){this.timetimethis.titletitlethis.descdescthis.statusstatus}}EntryComponentstruct PcTimelineVisualPage{Stateitems:TimelineItem[][newTimelineItem(2019-08-09,HarmonyOS 正式发布,华为在开发者大会上正式发布 HarmonyOS开启万物互联新时代。,TimelineStatus.Done),newTimelineItem(2021-06-02,HarmonyOS 2.0 发布,面向手机用户正式发布分布式技术全面落地首批适配机型超过百款。,TimelineStatus.Done),newTimelineItem(2022-07-27,HarmonyOS 3.0 发布,超级终端体验升级跨设备协同能力大幅增强平板/PC 体验全面优化。,TimelineStatus.Done),newTimelineItem(2023-08-04,HarmonyOS 4.0 发布,引入星盾安全架构AI 融合能力升级PC 端窗口管理体验全新改版。,TimelineStatus.Done),newTimelineItem(2024-10-22,HarmonyOS Next 发布,全面去安卓兼容纯血 HarmonyOS 正式亮相ArkTS 生态全面成熟。,TimelineStatus.Active),newTimelineItem(2025 Q2,HarmonyOS PC 版全量推送,PC 端 HarmonyOS 生态完善应用商店 PC 专属分区上线开发者工具链更新。,TimelineStatus.Pending)]getStatusColor(status:TimelineStatus):string{switch(status){caseTimelineStatus.Done:return#10B981caseTimelineStatus.Active:return#3B82F6caseTimelineStatus.Pending:return#D1D5DBdefault:return#D1D5DB}}getNodeSize(status:TimelineStatus):number{returnstatusTimelineStatus.Active?16:12}getNodeShadow(status:TimelineStatus):string{returnstatusTimelineStatus.Active?#403B82F6:transparent}BuildertimelineNode(status:TimelineStatus,isLast:boolean){Column(){// 节点圆点Stack(){if(statusTimelineStatus.Pending){Circle({width:this.getNodeSize(status),height:this.getNodeSize(status)}).fill(Color.White).border({width:2,color:#D1D5DB})}else{Circle({width:this.getNodeSize(status),height:this.getNodeSize(status)}).fill(this.getStatusColor(status)).shadow({radius:8,color:this.getNodeShadow(status)})}}.width(24).height(this.getNodeSize(status))// 连接线非最后一项if(!isLast){Divider().vertical(true).layoutWeight(1).strokeWidth(2).color(#E5E7EB)}}.width(24).alignItems(HorizontalAlign.Center).height(100%)}BuildertimelineContent(item:TimelineItem){Column({space:4}){Row(){Text(item.title).fontSize(15).fontWeight(FontWeight.Medium).fontColor(item.statusTimelineStatus.Active?#1E40AF:#1F2937).layoutWeight(1)Text(item.time).fontSize(12).fontColor(#9CA3AF)}.width(100%)Text(item.desc).fontSize(13).fontColor(#6B7280).lineHeight(20).width(100%)if(item.statusTimelineStatus.Active){Row({space:6}){Circle({width:6,height:6}).fill(#3B82F6)Text(进行中).fontSize(11).fontColor(#3B82F6).fontWeight(FontWeight.Medium)}.margin({top:4}).padding({left:8,right:8,top:4,bottom:4}).backgroundColor(#EFF6FF).borderRadius(12)}}.layoutWeight(1).padding({bottom:28}).alignItems(HorizontalAlign.Start)}BuildertimelineItem(item:TimelineItem,isLast:boolean){Row({space:16}){this.timelineNode(item.status,isLast)this.timelineContent(item)}.alignItems(VerticalAlign.Top).width(100%)}build(){Scroll(){Column({space:0}){// 标题区Column({space:8}){Text(HarmonyOS 发展历程).fontSize(24).fontWeight(FontWeight.Bold).fontColor(#111827)Text(从发布到今天记录每一个关键里程碑).fontSize(14).fontColor(#6B7280)// 图例Row({space:20}){Row({space:6}){Circle({width:8,height:8}).fill(#10B981)Text(已发布).fontSize(12).fontColor(#6B7280)}Row({space:6}){Circle({width:8,height:8}).fill(#3B82F6)Text(进行中).fontSize(12).fontColor(#6B7280)}Row({space:6}){Circle({width:8,height:8}).fill(Color.White).border({width:1,color:#D1D5DB})Text(待发布).fontSize(12).fontColor(#6B7280)}}.margin({top:8})}.padding({left:32,right:32,top:32,bottom:24}).alignItems(HorizontalAlign.Start).width(100%).backgroundColor(Color.White)Divider().strokeWidth(1).color(#F3F4F6)// 时间轴Column(){ForEach(this.items,(item:TimelineItem,index:number){this.timelineItem(item,indexthis.items.length-1)})}.padding({left:32,right:32,top:32,bottom:32}).backgroundColor(Color.White).margin({top:16})}.constraintSize({minWidth:600,maxWidth:860}).margin({left:auto,right:auto})}.width(100%).height(100%).backgroundColor(#F9FAFB)}}几个容易忽视的细节1. 进行中状态的标题颜色正在进行的事件是当前焦点标题颜色用稍深的蓝色#1E40AF和其他条目的深灰#1F2937形成区分。用户不用细看颜色分类图例就能找到现在在这里。2. 状态胶囊只给进行中加不要给每个状态都加胶囊标签。已完成靠绿色圆点传递语义待开始靠灰色传递进行中因为是焦点值得多一点视觉强调。加多了反而乱。3. 描述文字的行高lineHeight(20)比默认行高稍大让多行文字阅读更舒适。PC 端内容多这个细节值得设。小结时间轴的视觉设计其实就是在管理注意力层级哪个条目最重要进行中哪些已经完成绿点哪些还没到灰色空心。颜色、大小、阴影这些视觉属性每一个都在为这个层级服务。把这套方法论迁移到其他场景——步骤条、审批流程、版本历史——都是一样的逻辑。