地区时区国家信息页面设计技巧ArkTS实战

一、设计目标现在几点了是一个比想象中复杂的问题——同一时刻北京是下午、伦敦是上午、纽约是凌晨。本应用以「世界时钟」为载体把时区、国家名称、航班时刻三个本地化维度整合到一个页面UI 设计要回答三个问题5 个城市的实时时钟如何一眼看懂城市名、flag、当前时间、UTC 偏移要在同一行内清晰呈现且每秒刷新不闪烁时差对比如何设计成零学习成本的交互用户选两个城市就能看到 “13h”/“-5h”不需要理解 UTC 概念航班时刻的本地时间如何表达同一航班起飞显示出发地当地时间、到达显示目的地当地时间——两边时区不同UI 要避免用户误解成飞行 20 小时。因此本页 UI 的核心原则是时间是相对的界面是绝对的——每个时间都带时区上下文绝不让用户自己心算时差。二、页面信息架构组件树RegionTimeZonePageEntry 根组件 └─ Scroll整页滚动背景 #F8FAFC └─ Column宽 100% ├─ Row标题栏世界时钟 副标题 ✈️ 图标 ├─ Flex界面语言徽章组简中/繁中/EN/日/韩选中深蓝高亮 ├─ Text Column世界时钟卡5 城市实时时间白色卡片 │ └─ 每行 Row 北京左 HH:MM:SS右monospace 深蓝 │ └─ 副行当前: 8 UTC ├─ Text Column时差对比卡浅蓝底 #F0F9FF │ ├─ 说明文字选择两个城市对比时差 │ ├─ 两排国旗徽章A 排 [] VS B 排 [同 5 个] │ └─ 结果行北京 vs 纽约: 13h ├─ Text ForEach航班时刻卡4 个航班 │ └─ 每卡航班号 MU583蓝 北京 → 纽约 │ ├─ 起飞出发地本地: 2026年8月20日 19:30 │ ├─ 到达目的地本地: 2026年8月20日 21:00加粗蓝 │ └─ 飞行时长: 14h 30m · 国家: 美国 └─ 底部留白信息架构上三个区块对应三类用户诉求实时查看时钟、主动比较时差、行程规划航班。一屏覆盖差旅场景的完整信息链。三、色彩与字号规范本页主题色为深蓝色系——时钟/航班/出行的冷静、专业气质与 09 橙烹饪、10 紫文化明确区分元素色值字号字重页面标题#1F293722Bold副标题#9CA3AF12Normal区块标题#1F293714Bold城市名#1F293714Normal时钟数字#0369A117BoldmonospaceUTC 偏移副行#9CA3AF10Normal时差结果#0369A116Bold航班号#0369A114Bold路线文字#1F293713Normal起飞行#6B728012Normal到达行#0369A114Bold时长/国家行#9CA3AF11Normal选中徽章文字 #FFFFFF / 底 #0369A111~12Normal未选中徽章文字 #374151 / 底 #E5E7EB11~12Normal时差卡片背景#F0F9FF——色彩规则延续系列统一语义深蓝 选中/强调、灰 未选中时钟数字与到达时间用深蓝加粗信息终点起飞/时长用灰色辅助信息——层级靠颜色 字重双重编码。四、世界时钟卡每秒刷新的实时数据Column({space:8}){ForEach(CITIES,(c:City){Row(){Text(${c.flag}${c.name}).fontSize(14).fontColor(#1F2937).layoutWeight(1)Column({space:1}){Text(fmtTz(this.currentLocale,c.tz,this.now)).fontSize(17).fontWeight(FontWeight.Bold).fontColor(#0369A1).fontFamily(monospace)Text(${this.T(K.now)}:${this.offsetHours(c)}UTC).fontSize(10).fontColor(#9CA3AF)}.alignItems(HorizontalAlign.End)}.width(100%).padding({left:4,right:4})},(c:City)c.key)}.width(94%).padding(14).backgroundColor(Color.White).borderRadius(14).margin({top:8})设计要点monospace 字体 右对齐时钟数字用等宽字体秒数跳动时宽度不抖动比例字体14:30:05→14:30:59会左右晃动时间列右对齐5 个城市的数字处于同一垂直线上方便快速扫读flag 城市名图标辅助识别城市名用本地名称北京/东京/伦敦/纽约/迪拜不随界面语言翻译城市是专有名词副行给 UTC 偏移当前: 8 UTC——把这个时钟基于哪个时区直接告诉用户这是时区产品的诚实设计没有偏移说明的时间是无意义的每秒刷新this.now Date.now()由 1 秒定时器驱动所有城市共用同一个now状态——一次更新、五处联动保证 5 个时钟显示的是同一个瞬间时间一致性是时钟 UI 的生命线。五、时差对比国旗 VS 国旗时差对比用两排国旗徽章实现选两个城市Row({space:6}){ForEach(CITIES,(c:City,idx:number){Text(${c.flag}).fontSize(14).padding({left:8,right:8,top:6,bottom:6}).borderRadius(12).backgroundColor(this.diffAidx?#0369A1:#E5E7EB).onClick((){this.diffAidx;})},(c:City)a-${c.key})Text(VS).fontSize(12).fontColor(#9CA3AF)ForEach(CITIES,(c:City,idx:number){Text(${c.flag}).fontSize(14).padding({left:8,right:8,top:6,bottom:6}).borderRadius(12).backgroundColor(this.diffBidx?#0369A1:#E5E7EB).onClick((){this.diffBidx;})},(c:City)b-${c.key})}.width(100%).margin({top:8}).justifyContent(FlexAlign.Start)设计决策纯国旗徽章对比选择器不需要文字——5 个国旗已经是城市集合的语义表达省去下拉框的两次点击A/B 两排 VS 分隔视觉上直接呈现两者对比关系选中态深蓝底高亮ForEach key 加前缀a-/b-两排渲染同一个 CITIES 数组key 必须区分阵营否则 ArkUI 复用错乱结果行北京 vs 纽约: 13h——城市名 时差字号 16 加粗深蓝是全卡唯一的结果信息终点突出。六、航班时刻卡本地时间的正确表达航班区块展示出发地本地 / 目的地本地双时区时刻ForEach(FLIGHTS,(f:Flight){Column(){Row(){Text(f.no).fontSize(14).fontWeight(FontWeight.Bold).fontColor(#0369A1)Text(${this.cityOf(f.from).flag}${this.cityOf(f.from).name}→${this.cityOf(f.to).flag}${this.cityOf(f.to).name}).fontSize(13).fontColor(#1F2937).layoutWeight(1).textAlign(TextAlign.End)}.width(100%)Text(${this.T(K.depart)}:${this.flightDepart(f)}).fontSize(12).fontColor(#6B7280).width(100%).margin({top:6})Text(${this.T(K.arrive)}:${this.flightArrive(f)}).fontSize(14).fontWeight(FontWeight.Bold).fontColor(#0369A1).width(100%).margin({top:2})Text(${this.T(K.duration)}:${this.flightDur(f)}·${this.T(K.country)}:${countryName(this.currentLocale,this.cityOf(f.to).country)}).fontSize(11).fontColor(#9CA3AF).width(100%).margin({top:4})}.width(94%).padding(12).backgroundColor(Color.White).borderRadius(12).margin({top:8})},(f:Flight)f.id)设计要点航班号 路线一行航班号MU583左、路线 北京 → 纽约右对齐——路线用箭头表达方向比文字北京到纽约更紧凑起飞灰、到达蓝到达是用户最关心的信息几点到用深蓝加粗起飞是背景信息用灰色——信息优先级决定视觉权重时长与国家名合并一行飞行时长: 14h 30m · 国家: 美国——时长用 Hh Mm 格式14h 30m避免与时间戳混淆国家名走i18n.getDisplayCountry()本地化中文界面显示美国英文界面显示 “United States”卡片圆角 12 间距 8与时钟卡14略微区分区块内聚、区块间疏离。七、排版验证清单多语言下自查检查项方法验证结果时钟数字不抖动monospace 右对齐秒数变化宽度稳定时间格式随语言hour12: false固定 24 小时制中英日韩界面一致显示 14:30日期格式随语言fmtTzFull()用dateStyle:medium中文2026年8月20日、英文 “Aug 20, 2026”国家名本地化i18n.getDisplayCountry(code, country, true)英文界面 “United States”、中文美国时差正负号d 0 ? : 13h / -5h 明确航班本地时刻起降分别用出发/到达城市时区北京 19:30 起飞 纽约 21:00 到达同日窄屏不溢出徽章组 FlexWrap 路线 layoutWeight360dp 下两排国旗正常显示八、可访问性多语言 UI 加分项时差结果不用纯颜色传达13h文字本身带符号语义深蓝只是强调——色弱用户仍能读出正负国旗 emoji 有文字备选时差对比器用纯国旗但结果行有城市名“北京 vs 纽约”屏幕朗读器可读出城市名对比度正文 #1F2937 on 白 ≈ 15:1、深蓝 #0369A1 on 白 ≈ 5.4:1、浅灰 #9CA3AF on 白 ≈ 2.9:1仅用于辅助行达标基线放宽刷新节奏克制时钟每秒刷新但只更新 5 行文本不引起整页重排行高固定——对视力障碍用户闪烁内容控制在最小范围字号分层时钟 17、结果 16、到达 14、辅助 10~12形成清晰的信息层级弱视用户可借字号判断优先级。九、小结本页 UI 的核心理念是**“把时区上下文还给时间”**时钟行带 UTC 偏移、航班起降分别标注本地时间、时差对比用城市 vs 城市而非裸数字。三个区块共用同一套深蓝 重点的视觉语义用户扫一眼就能分辨主次。这套模式可直接迁移到任何含时间/时区的业务——会议调度、物流追踪、全球客服排班。下一篇文章深入技术实现讲解intl.DateTimeFormat的 timeZone 机制与i18n.getTimeZone()的偏移计算。