F1.12.1chrome compression设计
固定顶栏与底栏共同压缩有效内容区
别名: 双栏压缩 · fixed chrome · 有效内容区
概念解释
新闻客户端顶上钉着 Logo、搜索、头像,底下钉着五个标签。两栏各自看起来都不高,加起来却能吃掉短屏将近三分之一,正文被夹成一条可以滚动的窄缝。双栏压缩(chrome compression)是顶栏和底栏一起算的账:固定壳不是两个独立的装饰,是同一笔有效高度里被拿走的两口。
设计时常常分开看——顶栏「只要 44」,底栏「只要 49」——从不在同一张图上把两口加总。加总之后,主操作和主内容要挤进剩下的那一截,位置决策才开始。
机制
固定元素从滚动容器里退出,改吃视口。视口高度是有限的,顶和底同时固定就是两端夹击。短屏上夹击最狠:同样的 44 + 49,在 SE 上占比远大于在大屏上。夹击还改变折线和拇指弧——可滚内容变少,折线提前;下半屏弧被底栏占用,主操作要么叠在底栏上,要么被顶进更难的中部。
壳会生长。通知许可条、活动横幅、播放器迷你条叠在已有顶底栏之外,压缩是累加的。每一口单独评审都过得去,累加之后内容区不够放下一张完整卡片。
边界
桌面大窗口里两栏占比小,压缩不构成位置危机,问题换成信息密度。全屏阅读、全屏播放主动把壳收掉,压缩被故意解除。只有一栏固定(只有顶栏或只有底栏)时账没有这么差,但仍要按短屏算一次占比。键盘升起时底栏常常被顶掉或再压缩一截,双栏账要按键盘态重算,不能只用静止态。
怎么落地
- 把顶栏高度、底栏高度、系统占用加总,写成短屏上的「壳占比」。超过大约四分之一,就要砍掉其中一栏的固定,或让一栏随滚动隐藏。
- 新增一条固定条之前,先把它叠进已有的壳占比里看,而不是只看这条自己的高度。
- 主内容至少要在短屏上露出一张完整卡片或一段完整段落,不能只露出标题就被双栏夹死。
- 验证:在最短目标设备上打开主列表,量内容区高度能否放下产品自己的一张标准卡片。放不下,双栏就已经把位置账花超。