HarmonyOS7 账号安全页的信息层级：ArkUI/ArkTS 实战拆解
文章目录
- 前言
- 为什么这个问题经常被写乱
- 层级设计
- 实现步骤
- ArkUI/ArkTS 示例
- 关键代码说明
- 风险展示原则
- 安全页先给结论再给入口
- 小结
前言
账号安全页不能只是一排“修改密码、绑定手机、实名认证”。用户打开这个页面，首先想知道账号是否安全，其次才是去哪处理问题。我会先展示安全概览，再列出可操作项，把风险项放在更明显的位置。
安全页面的第一屏要回答一个问题：我现在安全吗？
本文用“账号安全中心”做例子。页面需要同时展示安全评分、风险设备、密码、手机号、实名状态，但不能让所有入口抢同样的视觉权重。
为什么这个问题经常被写乱
账号安全页的信息层级 这类内容很容易被写成“代码能跑就算讲完了”，但对初学者来说，这恰恰是最不够的地方。真正让人卡住的，往往不是某个组件名记不住，而是不知道这段代码为什么要这样拆、状态为什么要这样放、以后需求变化时应该从哪里改。
所以这篇文章不只想给你一个能跑的例子，更想把背后的判断过程讲清楚。你只要把这个判断过程吃透，后面自己改页面、补需求、查问题时，心里会稳很多。
层级设计
| 层级 | 内容 | 作用 |
|---|---|---|
| 概览 | 安全分、风险数量 | 建立判断 |
| 高风险 | 异地登录、未绑定手机 | 立即处理 |
| 常规设置 | 密码、设备、实名 | 日常维护 |
实现步骤
- 第一屏先给整体安全结论，不要直接进入设置列表。
- 风险项加标签和醒目颜色，但只给真正需要处理的项。
- 常规项保留说明文案，避免用户不知道点击后会做什么。
- 风险项排序靠前，已完成项可以弱化展示。
- 每个操作项用稳定 id 渲染，便于后续接页面跳转。
ArkUI/ArkTS 示例
classSecurityItem{id:number=0title:string=''desc:string=''risk:boolean=falseactionText:string='查看'constructor(id:number,title:string,desc:string,risk:boolean,actionText:string){this.id=idthis.title=titlethis.desc=descthis.risk=riskthis.actionText=actionText}}@Entry@Componentstruct AccountSecurityPage{@Statescore:number=82@Stateitems: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.score>=80?'#2F9E44':'#D9480F')Text(this.score>=80?'整体安全，建议检查风险设备':'存在风险，请尽快处理').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 账号安全页要先建立判断，再提供操作。信息层级清楚，用户才知道应该先处理什么，而不是在一堆设置项里自己找风险。