F3.09.3position meaning by layout mode设计

同一位置在不同布局模式下的层级含义并不固定

别名: 右栏含义不固定 · 布局模式 · sidebar is not always secondary

概念解释

桌面资讯站的右栏常年放广告,人学会「右边是次要的」。同一像素带,在设置页的分栏里却是主操作:保存、权限、危险区。把资讯站的「右栏=广告」搬到设置页,会把保存当成可忽略。位置的层级含义跟当前这套布局模式走,不跟屏幕坐标走。换断点、换分栏、换「主从」角色,同一地点可以从次要变成主要,或反过来。

机制

位置要能暗示层级,先要有一个被反复使用的布局图式:主列在哪、辅列在哪、行动钉在哪。图式一旦换(桌面三列改成手机单列,主从改成标签页),坐标还在,槽的职责变了。人按当前图式读槽,不按「这是屏幕右侧 300 像素」。资讯右栏的广告图式很强,所以即使用户第一次进设置分栏,也可能短暂套用「右边不重要」——直到行动按钮的其他权重把图式纠正过来,或纠正失败造成漏操作。模式不是设备名,是这一页正在用的结构:主从、向导、媒体+说明、工具+画布,每一种都给同一地点不同的等级。

边界

强平台惯例(iOS 右上完成、LTR 桌面左导航)会跨应用稳定一段时间,看起来像位置有固定含义,其实是模式被平台钉死。应用一旦偏离平台模式(把完成放左上),惯例就变成误导。响应式下同一 URL 在宽屏和窄屏是两种模式,不能把宽屏右栏的次要性自动继承到窄屏堆叠后的第二块——堆叠后它可能变成第一屏以下的主内容。

怎么落地

  • 给每种布局模式单独写位置词典:「在主从模式里,从列永远轻于主列;在设置分栏里,右侧是提交区,不是广告区。」禁止跨模式复用词典。
  • 窄屏把右栏折到下面时,重新标它的等级:若它变成主行动,要加回尺寸或对比,不能带着桌面的「次要」灰阶下去。
  • 从资讯类产品借来的分栏组件,拆掉广告图式的默认样式再用于工具类页面。
  • 验证:同一组件分别嵌进「媒体+侧栏广告」和「表单+侧栏提交」两种页面,问「哪一块能不去看」。两种答案若相同,位置被当成了固定坐标语义,改侧栏在两种模式里的相对重量,直到「广告侧栏可跳过、提交侧栏不可跳过」被说出来。再在窄屏堆叠后问一次,确认没有把可跳过的广告图式带进提交按钮。

延伸

  • 同组F3.09.1 屏幕上方与起始侧默认被赋予更高层级 · F3.09.4 单靠位置而不叠加其他视觉线索的层级区分容易被忽略
  • 相邻F2.10 响应式断点 · F2.11 流式与自适应布局 · F1.14.3 惯例因平台、地区书写方向而异
  • 站内检索layout mode · sidebar · responsive · positional hierarchy

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/F3.09.3