国际食谱 - 度量衡本地化 — ArkTS页面设计

一、设计目标把「单位换算 本地化呈现」做成一个直观的食谱工具选语言、看食材用量自动变成当地单位体系、调单位显示档位、换算烤箱温度结果即时呈现。UI 设计要回答三个问题同一份食谱如何在 5 种语言下都读得懂法文用户看到的是250 grammes而不是250 克英文用户看到的是8.8 oz而不是250 克——食材名称与用量单位要跟随语言与地区体系同步变化公制与英制的差异要可视化美国用户习惯磅/盎司/华氏欧洲用户习惯克/升/摄氏。同一个数值250 克在两种体系下含义相同、写法迥异UI 必须让这种差异看得见单位显示粒度要可控正式文本用全称100 kilograms、界面标签用缩写100 kg、图表刻度用极窄形式100kg——三档显示方式应在一个界面上即时切换对比。因此本页 UI 的核心原则是数值与单位永远通过格式化函数生成UI 只负责展示不手写任何克磅字符串。这也是本系列 14 个应用共同遵循的 UI 戒律在本页的体现——只不过本页的语言维度被替换成了度量衡体系维度。二、页面信息架构组件树UnitConvertPageEntry 根组件 └─ Scroll整页滚动背景 #F8FAFC └─ Column宽 100% ├─ Row标题栏国际食谱 副标题 图标 ├─ Flex语言徽章组5 种 locale选中橙色高亮 ├─ Text公制/英制体系指示条 ├─ Text ForEach食材清单经典曲奇 · 食材清单 │ └─ 每行 Row食材名左 用量右橙色加粗 ├─ Text Row单位显示方式long/short/narrow 三档徽章 │ └─ Row×2重量示例 250g / 容量示例 0.24L └─ Text Column烤箱温度换算卡5 档摄氏徽章 摄氏⟷华氏 └─ 橙色卡片 #FFF7ED底部留白与普通换算器输入数字 → 选单位 → 出结果不同本页把换算隐藏在真实食谱语境里用户不是在操作一个抽象的换算器而是在看一份用自己熟悉的单位体系显示的食谱。交互载体从公式变成食材理解门槛大幅降低。三、色彩与字号规范背景#F8FAFC浅灰蓝卡片纯白强调色为橙色系——烘焙/厨房场景的温暖感同时与系列其他应用的蓝色主调形成区分元素色值字号字重页面标题#1F293722Bold副标题#9CA3AF12Normal区块标题食材/单位/温度#1F293714Bold食材名称#1F293714Normal食材用量#C2410C14Bold选中徽章文字 #FFFFFF / 底 #C2410C11~12Normal未选中徽章文字 #374151 / 底 #E5E7EB11~12Normal体系指示条#C2410C12Normal温度结果摄氏#C2410C18Bold温度结果华氏#1F293718Bold温度换算卡背景#FFF7ED——色彩规则三类选择器语言/档位/温度全部复用同一组橙 选中、灰 未选中语义用户只需学一次交互模式但语言徽章带 flag emoji 前缀、温度徽章带 °C 后缀用内容区分维度避免同色混淆。四、语言徽章组体系随语言切换语言徽章是本页的总开关——切换语言不仅换文案还换整套度量衡体系Flex({wrap:FlexWrap.Wrap,justifyContent:FlexAlign.Start}){ForEach(LANGS,(l:LangCfg){Text(${l.flag}${l.name}).fontSize(12).padding({left:10,right:10,top:6,bottom:6}).borderRadius(16).backgroundColor(this.currentLocalel.code?#C2410C:#E5E7EB).fontColor(this.currentLocalel.code?Color.White:#374151).onClick((){this.currentLocalel.code;})},(l:LangCfg)l.code)}.width(94%).margin({top:10})设计要点FlexWrap 自动换行5 个语言徽章在窄屏360dp上自动折行成两排无需人工控制换行位置flag emoji 母语名国旗让用户一眼定位自己的语言母语名保证识别准确简体中文显示简体中文而不是Simplified Chinese点击即切换currentLocale是StorageLink赋值瞬间全页所有食材用量、单位显示、温度换算全部按新体系重算——不用点确定按钮ForEach key 用l.code稳定唯一语言列表顺序调整时不会重建多余节点。五、体系指示条让差异看得见语言徽章下方有一条橙色指示直接点明当前地区采用哪种单位体系Text(${this.T(K.metric)}/${this.T(K.imperial)}:${this.isImperial()?this.T(K.imperial):this.T(K.metric)}).fontSize(12).fontColor(#C2410C).width(94%).margin({top:8})isImperial()由当前 locale 决定privateisImperial():boolean{returnthis.curCfg().systemimperial;}即en_US → 英制imperial其余 → 公制metric“。这行文字是 i18n UI 的经典细节把隐含规则显性化——用户切到英文后看到Unit system: Imperial提示立刻理解为什么 250 克变成了 8.8 oz而不是困惑于数值怎么变了”。六、食材清单名称与单位双通道本地化食材清单是双语双体系最复杂的区块——食材名称跟语言走用量单位跟体系走ForEach(INGREDIENTS,(i:Ingredient){Row(){Text(this.nameOf(i)).fontSize(14).fontColor(#1F2937).layoutWeight(1)Text(this.amountOf(i)).fontSize(14).fontWeight(FontWeight.Bold).fontColor(#C2410C)}.width(94%).padding({left:14,right:14,top:10,bottom:10}).backgroundColor(Color.White).borderRadius(10).margin({top:6})},(i:Ingredient)i.id)两个取数函数各司其职// 名称英制体系显示英文名否则显示中文名privatenameOf(i:Ingredient):string{returnthis.isImperial()?i.nameEn:i.nameZh;}// 用量公制显示 g/l英制换算后显示 oz/fl ozprivateamountOf(i:Ingredient):string{constdisplaythis.displayNames()[this.displayIdx];if(this.isImperial()){constvtoImperial(i.metric,i.unit);constuniti.unitgram?ounce:fluid-ounce;returnfmtUnit(this.currentLocale,v,unit,display);}constuniti.unitgram?gram:liter;constvi.unitmilliliter?i.metric/1000:i.metric;returnfmtUnit(this.currentLocale,v,unit,display);}设计细节左名称右用量名称layoutWeight(1)弹性占位用量固定在右侧——多语言下名称长度差异“无盐黄油” vs “unsalted butter” vs “バター無塩”不会挤乱右侧数值用量橙色加粗数值是本页视觉终点用户扫一眼就能拿到放多少单位换算集中处理toImperial()里克→盎司÷28.35、毫升→液量盎司÷29.5735毫升在公制下除以 1000 转升——换算逻辑与 UI 完全解耦卡片圆角 10、间距 6与全系列卡片语言一致节奏统一。七、单位显示方式三档即时对比unitDisplay是Intl.NumberFormat的展示粒度参数本页把三档做成三个可点击徽章实时展示同一数值的三种写法Row({space:6}){ForEach(this.displayNames(),(d:string,idx:number){Text(d).fontSize(11).padding({left:8,right:8,top:4,bottom:4}).borderRadius(10).backgroundColor(this.displayIdxidx?#C2410C:#E5E7EB).fontColor(this.displayIdxidx?Color.White:#374151).onClick((){this.displayIdxidx;})},(d:string)d)}.width(94%).margin({top:6})三档对照示例英文、250 克档位重量容量适用场景long250 grams0.24 liters正式文本、朗读场景short250 g0.24 L界面标签默认narrow250g0.24L图表刻度、极窄空间下方两行示例重量:250 gram、容量:0.24 liter随档位与语言即时重渲染——用户在一个屏幕上同时看到三档差异比文档讲解直观得多。这是教学型 UI的典型手法把抽象参数变成可交互的演示控件。八、烤箱温度换算卡非线性换算的视觉化温度是唯一非线性的换算×9/532UI 用一张独立卡片承载Text(this.T(K.oven)).fontSize(14).fontWeight(FontWeight.Bold).width(94%).margin({top:14})Column(){Row({space:6}){ForEach(TEMPS,(c:number,idx:number){Text(${c}°C).fontSize(12).padding({left:10,right:10,top:6,bottom:6}).borderRadius(14).backgroundColor(this.tempIdxidx?#C2410C:#E5E7EB).fontColor(this.tempIdxidx?Color.White:#374151).onClick((){this.tempIdxidx;})},(c:number,idx:number)${idx}-${c})}.width(100%).justifyContent(FlexAlign.Start)Row({space:10}){Text(this.fmtC()).fontSize(18).fontWeight(FontWeight.Bold).fontColor(#C2410C)Text(⟷).fontSize(16).fontColor(#9CA3AF)Text(this.fmtF()).fontSize(18).fontWeight(FontWeight.Bold).fontColor(#1F2937)}.width(100%).margin({top:10}).justifyContent(FlexAlign.Start)}.width(94%).padding(14).backgroundColor(#FFF7ED).borderRadius(14).margin({top:8,bottom:16})设计要点5 档烘焙常用温度160/175/190/200/220°C每档是真实场景低温慢烤/曲奇/面包/烤肉/酥皮不是随机数字摄氏橙、华氏深灰左侧当前体系用强调色右侧换算结果用次级色——视觉主次与语义主次一致⟷双向箭头暗示换算可逆比→更准确卡片底色 #FFF7ED暖橙浅底与白色页面区分形成换算结果区的视觉容器感同时呼应烘焙主题ForEach key 用${idx}-${c}数值可能重复的场景如两个 160也能保证 key 唯一。九、排版验证清单多语言下自查检查项方法验证结果食材名长度差异名称layoutWeight(1) 右侧数值固定日文バター無塩不挤乱右侧用量单位随体系变化amountOf()按isImperial()分支换算en_US 下 250 克 → 8.8 oz三档显示对比displayIdx切换即时重算long/short/narrow 三态清晰温度换算正确cToF()单独处理非线性175°C → 347°F非 307单位名称随语言fmtUnit()用style:unitfr_FR 显示 “grammes” 而非 “grams”窄屏不溢出徽章组 FlexWrap 自动折行360dp 下语言徽章折成两排语言持久化重启保持上次 localePersistentStorage.persistProp生效十、可访问性多语言 UI 加分项不靠颜色单通道传义选中态 橙色底 白色字 语言徽章带 flag三重编码色弱用户仍可辨识步进/选择目标足够大徽章 padding 上下 6dp可点击区域 ≥ 44dp 触控建议的边沿水平对比度达标正文 #1F2937 on 白色 ≈ 15:1次文字 #9CA3AF on #F8FAFC ≈ 4.6:1橙色 #C2410C on 白 ≈ 4.5:1均满足 WCAG AA不依赖 emoji 传义、 仅是装饰/辅助删除后文字信息完整单位显示可切换narrow 档位下数字与单位无空格250g视力障碍朗读器可切换到 long 档获取完整单位名——三档设计本身就是一个无障碍开关。十一、小结本页 UI 的全部工作可以概括为一句话用食谱这个真实语境把公制/英制差异、unitDisplay 三档、温度换算三个 i18n 知识点串成一个零学习成本的交互。语言徽章管体系、档位徽章管粒度、温度卡管特例三组选择器共用一套交互语义橙选中加上体系指示条把隐含规则显性化——这套设计模式可直接迁移到任何数值 单位 多地区的业务页面天气、健身、物流、工程换算。下一篇文章将深入技术实现讲解Intl.NumberFormat style:unit的 CLDR 数据驱动机制与换算层的分层设计。