HarmonyOS 购物商城：详情页返回键优化

HarmonyOS 购物商城详情页返回键优化一个空状态的返回按钮解决了用户被困住的问题。前言上一篇写商品详情页时我提到了一个问题当商品 ID 无效时页面显示商品不存在但没有返回按钮——用户被困住了只能按系统返回键。这次优化解决了这个问题空状态也加了返回按钮。改动很小但涉及一个常见的交互设计原则。完整效果唯一差异空状态加返回按钮上一版if(!this.product){Column(){Text(商品不存在).fontSize(16).fontColor(T2)}.width(100%).height(100%).justifyContent(FlexAlign.Center)}空状态只有一个居中的商品不存在文字没有任何导航元素。本版if(!this.product){Column(){Row(){Row(){SymbolGlyph($r(sys.symbol.chevron_left)).fontSize(20).fontColor([T1])}.width(36).height(36).borderRadius(18).backgroundColor(rgba(0,0,0,0.03)).justifyContent(FlexAlign.Center).onClick((){router.back()})Blank()}.width(100%).padding({left:16,right:16,top:12})Blank()Text(商品不存在).fontSize(16).fontColor(T2)}.width(100%).height(100%)}空状态顶部加了返回按钮——和详情页正常状态的返回按钮样式一致36×36 圆形、浅灰背景、左箭头图标。其他微调图片区按钮层级// 上一版Row(){// 返回按钮Blank()// 分享按钮}.width(100%).padding(...)Text(this.product.image)...// 图片在按钮之后// 本版Text(this.product.image)...// 图片先渲染Row(){// 返回按钮Blank()// 分享按钮}.width(100%).padding(...).position({x:0,y:0})// 新增 position图片元素移到按钮之前渲染按钮行新增了.position({ x: 0, y: 0 })。为什么调整渲染顺序Stack 中后渲染的元素会覆盖先渲染的。上一版图片在按钮之后渲染——理论上图片会遮挡按钮。但实际上不会因为图片是 120px emoji 居中显示按钮在顶部两侧没有重叠。本版把图片移到前面按钮用.position({ x: 0, y: 0 })固定在左上角。这样即使图片尺寸变化比如换成更大的图按钮也不会被遮挡。设计原则永远给用户一条退路这个优化的核心不是代码技巧而是一个交互设计原则永远不要让用户困住。空状态、错误状态、加载失败——无论什么情况用户都应该能返回上一页。系统返回键是一个兜底方案但不是最好的方案——用户需要知道按哪里能回去。在空状态加一个显眼的返回按钮比依赖系统返回键好得多。用户不需要思考这个页面怎么退出一眼就能看到出口。同样的原则适用于404 页面网络错误页面权限不足页面搜索无结果页面踩坑记录1. 空状态的布局结构Column(){Row(){...返回按钮...}// 顶部Blank()// 中间留白Text(商品不存在)// 居中文字}用Blank()把商品不存在推到中间。如果不用Blank()文字会紧跟在返回按钮下面不在屏幕中央。2. 返回按钮的背景色差异正常状态的返回按钮背景是rgba(255,255,255,0.9)半透明白色空状态是rgba(0,0,0,0.03)极淡灰色。为什么不一样正常状态下返回按钮浮在图片上方——半透明白色让按钮和图片有对比。空状态没有图片——白色按钮在白色背景上看不到所以用极淡灰色。3. 空状态没有底部操作栏空状态只有返回按钮和提示文字没有底部操作栏客服/收藏/加购/购买。这是对的——商品都不存在了操作栏没有意义。但空状态也没有Scroll包裹——因为内容只有两个元素不需要滚动。写在最后这个优化改动很小——空状态加了一个返回按钮。但它解决了一个真实的用户问题当商品不存在时用户不会被困住。交互设计的一个基本原则是用户永远应该知道怎么离开。返回按钮就是这个出口。无论页面状态如何出口都应该存在。