HarmonyOS7 账号安全页的信息层级：ArkUI/ArkTS 实战拆解

文章目录前言为什么这个问题经常被写乱层级设计实现步骤ArkUI/ArkTS 示例关键代码说明风险展示原则安全页先给结论再给入口小结前言账号安全页不能只是一排“修改密码、绑定手机、实名认证”。用户打开这个页面首先想知道账号是否安全其次才是去哪处理问题。我会先展示安全概览再列出可操作项把风险项放在更明显的位置。安全页面的第一屏要回答一个问题我现在安全吗本文用“账号安全中心”做例子。页面需要同时展示安全评分、风险设备、密码、手机号、实名状态但不能让所有入口抢同样的视觉权重。为什么这个问题经常被写乱账号安全页的信息层级 这类内容很容易被写成“代码能跑就算讲完了”但对初学者来说这恰恰是最不够的地方。真正让人卡住的往往不是某个组件名记不住而是不知道这段代码为什么要这样拆、状态为什么要这样放、以后需求变化时应该从哪里改。所以这篇文章不只想给你一个能跑的例子更想把背后的判断过程讲清楚。你只要把这个判断过程吃透后面自己改页面、补需求、查问题时心里会稳很多。层级设计层级内容作用概览安全分、风险数量建立判断高风险异地登录、未绑定手机立即处理常规设置密码、设备、实名日常维护实现步骤第一屏先给整体安全结论不要直接进入设置列表。风险项加标签和醒目颜色但只给真正需要处理的项。常规项保留说明文案避免用户不知道点击后会做什么。风险项排序靠前已完成项可以弱化展示。每个操作项用稳定 id 渲染便于后续接页面跳转。ArkUI/ArkTS 示例classSecurityItem{id:number0title:stringdesc:stringrisk:booleanfalseactionText:string查看constructor(id:number,title:string,desc:string,risk:boolean,actionText:string){this.ididthis.titletitlethis.descdescthis.riskriskthis.actionTextactionText}}EntryComponentstruct AccountSecurityPage{Statescore:number82Stateitems:SecurityItem[][newSecurityItem(3,登录设备,发现 1 台不常用设备,true,立即处理),newSecurityItem(1,登录密码,建议 90 天内更新一次,false,修改),newSecurityItem(2,绑定手机号,用于找回账号和安全验证,false,管理),newSecurityItem(4,实名认证,已完成认证,false,查看)]BuilderSummaryCard(){Column({space:8}){Text(账号安全评分).fontSize(14).fontColor(#666666)Text(${this.score}).fontSize(42).fontWeight(FontWeight.Bold).fontColor(this.score80?#2F9E44:#D9480F)Text(this.score80?整体安全建议检查风险设备:存在风险请尽快处理).fontSize(13).fontColor(#666666)}.alignItems(HorizontalAlign.Start).padding(18).backgroundColor(#FFFFFF).borderRadius(12)}BuilderSecurityRow(item:SecurityItem){Row(){Column({space:4}){Row({space:6}){Text(item.title).fontSize(16).fontWeight(FontWeight.Medium)if(item.risk){Text(风险).fontSize(11).fontColor(#FFFFFF).padding({left:6,right:6,top:2,bottom:2}).backgroundColor(#C92A2A).borderRadius(6)}}Text(item.desc).fontSize(12).fontColor(#777777)}.alignItems(HorizontalAlign.Start)Blank()Text(item.actionText).fontSize(14).fontColor(item.risk?#C92A2A:#4B6BFB)}.padding(14).backgroundColor(#FFFFFF)}build(){Column({space:14}){Text(账号安全).fontSize(24).fontWeight(FontWeight.Bold)this.SummaryCard()Text(安全项目).fontSize(16).fontWeight(FontWeight.Medium)Column(){ForEach(this.items,(item:SecurityItem){this.SecurityRow(item)Divider().color(#EEEEEE)},(item:SecurityItem)item.id.toString())}.borderRadius(12).clip(true)}.padding(16).backgroundColor(#F5F6FA).height(100%)}}关键代码说明SummaryCard()放在最前面让用户先知道整体安全状态再去看具体项目。风险标签只给真正需要处理的项使用不要所有行都用醒目颜色。SecurityItem把风险标记和说明文案绑定在一起列表渲染更直接。风险展示原则内容展示强度说明异地登录、陌生设备强提醒需要立刻处理密码长期未改中提醒建议处理但不打断已绑定手机号普通信息不抢风险项注意力实名已完成弱展示作为安全资产说明安全页面不是颜色越红越安全。风险标签要少而准用户才会相信它真的代表需要优先处理的问题。安全页先给结论再给入口账号安全页最重要的不是入口数量而是判断顺序。用户打开页面后应该先知道账号大致安全吗再决定要不要处理风险项。如果一上来就是一长串设置入口用户只能自己判断哪个更急。示例里的SummaryCard()放在列表前面就是为了先给结论。风险设备这种需要立即处理的项再通过标签和动作文案强化优先级。普通设置项则保持正常权重不要和风险项一起抢注意力。真实项目里还可以把风险等级从接口返回但 UI 仍然要保持克制。红色标签只给真正需要处理的项目已完成的认证和绑定信息用说明文案即可。安全页越清楚用户越愿意按提示完成关键操作。小结HarmonyOS7 账号安全页要先建立判断再提供操作。信息层级清楚用户才知道应该先处理什么而不是在一堆设置项里自己找风险。