视觉层级Visual Hierarchy
“页面元素都在,用户却总先看到错的那个——怎么排才让人一眼看到最重要的?”
当前顺序:节目名 → 场次地点 → 选座大小、位置与留白把观看顺序写进节目单。
“页面元素都在,用户却总先看到错的那个——怎么排才让人一眼看到最重要的?”
当前顺序:节目名 → 场次地点 → 选座大小、位置与留白把观看顺序写进节目单。
“文字看起来挺高级,但一到手机强光就看不清,到底怎样才算够清楚?”
不只靠颜色传达状态 · 强光下仍可辨
“排版总觉得乱,但要我说清哪里不齐、该怎么齐,又讲不出来。”
共用左缘,视线不必折返寻找下一行。
当前结论:标题、图片、正文共用边线版面齐,扫读路径就顺直。
“同一屏一堆标签、输入和说明,怎么摆才能让人不用逐行读就知道谁和谁是一组?”
当前结果:G24 跟第一段,G115 跟第二段组内靠近、组间拉开,不画框也能看懂归属。
「页面挤成一团看不清主次,可又怕留太多显得空站——留白到底是在留什么?」
清晨的路从一片松林开始。
当前结果:标题、正文、收藏入口各有呼吸空白建立分组和焦点,不是“没填满”。
“页面颜色一会一个样、深色模式字看不清、新加的状态色和旧的对不上——颜色到底怎么管才不乱?”
当前结果:品牌、进度、成功、警告各司其职文字 + 符号 + 色彩三重表达,状态不串台。
“首屏塞了统计、徽章、装饰图,用户反而找不到「开始申请」——极简到底删什么、留什么?”
¥28 / 月 · 随时取消
到期自动续费,提前 24 小时提醒确认订阅 →当前结果:保留价格、续费、取消条件和主行动删推荐、勋章与动态,不删决策必需。
“课程视频鼠标能播,但播放键读不出名字、Tab 看不见焦点,也没有字幕——这算所有人都能用吗?”
讲师 · 林舟原生 HTML 优先ARIA 只补缺少的语义
▶字幕 先用语义,再让焦点与状态都能被感知
同一课程视频:键盘与读屏也能完成播放。
“亲子活动明明有,为什么用户从首页就是找不到预约入口?”
结论:按用户任务组织,入口能猜、路径能回看。不是把内部部门原样搬进导航。
“活动页的促销、社媒和合作链接都塞进页头,用户反而找不到报名。”
结论:页头负责识别、主导航与唯一行动。促销、社媒和合作入口不该挤进主信息带。
“手机底部五个图标都没有文字,用户总点错账单,当前在哪也只靠颜色猜。”
「页脚链接混在一起,订阅没有同意和验证反馈,用户分不清隐私与营销入口。」
“顶栏吸顶后遮住了标题,移动端菜单也没有当前项和关闭路径。”
品牌·主导航·全局操作在同一行;当前项要可识别,窄屏收进折叠菜单。
“后台侧栏分组混在一起,折叠后当前项丢了,窄屏也没有安全的抽屉恢复路径。”
“单页区段没有顺序,点导航也不知道现在在哪儿、下一步该看什么。”
「长文档滚着滚着就不知道自己在哪一节,手机上连目录和大纲都找不到。」
「卡片排成网格后列数一变就乱:末行被拉宽变形,空数据留一片空白,我说不清该按什么规则收口。」
当前 3 列· 末行 2 张等宽不拉伸 · gap 统一
大屏上一行文字拉得太长,读到行尾已经找不到下一行——怎么用布局管住行宽?
正文 限宽约 680px 并居中,每行字数落进可读区间;大屏两侧留白。
“桌面版直接缩小到手机就乱套——列数、导航、横向溢出没有可循规则。”
结论:列数、导航、字号随宽度重新排布;同一内容在三种空间都能完成主任务。
「卡片加了 padding 和 border 后撑破网格,团队说不清最终宽度和 margin 的关系。」
同样声明 320px:border-box 包含 padding+border;content-box 不包含,更易撑破网格。
“间距没有统一标尺,相关项和区块的亲疏关系读不出来。”
同组相关项用小档位(紧),区块之间用大档位(松):当前间距不靠随机值,而是从有限 token 读取亲疏。
「两个段落各设了 32px 和 16px 的垂直 margin,实际间距为什么不是 48px?」
32 与 16 不叠加成 48;同一 BFC 内相邻块级的上下 margin 合并,实际取大者 32。
「按钮文字贴着边框、密集列表里老误触;想加大可点击区,加 padding 和加 margin 到底差在哪?」
同加 12px:padding 在边框内把命中区撑到 44px、文字有呼吸;margin 只推开「取消」,命中区不变。
「几个按钮排一行,对齐和间距全靠 margin 硬撑,小屏一换行就错位。」
一维主轴上分配空间:方向、justify-content、align-items、flex-grow 与 gap 共同决定 item 的位置与尺寸。
「Grid 的列数、gap、跨格和自适应规则说不清,容器一缩就乱排或挤爆。」
同一容器 320px · gap 8px · 只改轨道策略
结论:auto-fit + minmax 让轨道按容器宽度自动折叠,固定列数则被压缩;对照之下,内容数量或容器宽度会变化时更适合自适应轨道。
“居中写了好多遍都不对,flex、grid、margin、absolute 到底用哪个?”
4 种方法都能让物件中心落到容器中心;实际差别在对容器与物件尺寸的要求。
“卡片角标在不同宽度下错位,团队用 margin 硬推,滚动后还会挡住内容。”
结论:离流的值不再占位;定位上下文由最近 position≠static 的祖先决定。
“章节工具栏滚动后要吸顶,可页面滚动和面板滚动效果对不上——sticky 到底钉在哪里?”
「弹窗 z-index 都加到 9999 了,怎么还是被一片遮罩压在下面?」
同一堆叠上下文里,z-index 数字大的盖小的:80 > 60 > 1,Toast 在最前。
但父级若新建堆叠上下文(opacity/transform/filter),子级 9999 也只在自己父级里比较,外层低值照样压住它。
「长路径和浮层超出容器后被裁掉,用户滚不到也复制不全。」
“标题、正文和辅助信息挤成同一层,放大文字或读长段落时也没有舒适的字级与行高。”
「标题用衬线、正文用无衬线就够了?界面小字、数据数字和代码又该选哪种字体,中文才不会掉成乱回退?」
屏幕小字优先无衬线 · 长文印刷用衬线 · 代码对齐用等宽
「列表标题单行省略后,用户找不到全文,读屏也只读到被裁的前半句。」
「页面到处画分隔线,可层级还是乱——到底什么时候该画线、画哪种线?」
结论:留白与标题先分组,分隔线只补充关系——对照三种强度再决定是否画线。
「按钮、卡片、输入的圆角各写各的,标签又随手 999——圆角到底该怎么管?」
「同一屏的按钮、输入框、卡片圆角各写各的,为什么看起来像拼接的、显廉价?」
「卡片要不要阴影?弹层该多深?暗色模式阴影怎么不吞轮廓——阴影到底怎么管?」
「次要内容降透明度后,正文对比、禁用语义和遮罩文字会不会跟着一起淡?」
「首屏要上渐变——方向和停靠点怎么定?白字标题压上去还清楚吗?打印或高对比关掉渐变怎么办?」
「吸顶栏想用毛玻璃让背景更有层次,但浅色图上文字变糊、低端机又没有降级——backdrop-filter 到底模糊了谁?」
「深色模式只反转了背景,图表、边框和代码块仍然刺眼,系统偏好也覆盖不了——到底该怎么做?」
const t = "light"const t = "dark"「换品牌色要逐个组件搜索 hex,间距和圆角也各写一套,改一处漏三处——怎么管才不乱?」
--space-md16px按钮 16卡片 16徽章 16改一处 · 三处同换--space-md16px按钮 16卡片 16徽章 11 偷写徽章写死 11px · 脱钩“按钮颜色和阴影变化太突兀,团队又用 transition: all 让布局抖动,无法响应减少动效偏好。”
background-color · 180ms · ease-out结果:写明属性只动该动的;transition: all 会把宽高也拖乱。“切 Tab 时内容是该瞬间换还是慢慢淡入?淡多快才不让人晃,也不让人等?”
约 200ms:既不突兀,也不用等
动画做完了,但说不清哪里别扭——机械、拖、或者冲;进入和离开也没有曲线和时长规则。
结论:进入选 ease-out——目标先进入视线、末段轻落不突兀;linear 匀速像机器。
“装饰动画一直循环,成功反馈却没有结束状态;用户开启减少动效后也看不到结果。”
减动效:跳过运动,结果仍要可见
对话框回弹过度还会抖布局,用户开了减少动效也没有稳定的替代状态——弹簧该怎么调?
只用 transform 移动已占位的面板 · 过冲和时长受限
“帮助说明只在鼠标悬停时出现,键盘和触摸用户找不到同样的提示或关闭路径。”
「键盘焦点顺序和可见轮廓不清,用户无法知道当前操作位置。」
悬停换色 跟随鼠标指针; 焦点环 跟随键盘——两条路径不同。
焦点环 = 键盘当前位置。删掉它只留悬停色,键盘用户按 Tab 时看不到停在哪。“按下、提交中和禁用没有边界,重复点击会重复提交,键盘用户也看不到激活结果。”
“禁用按钮只变灰却没有原因和恢复路径,用户不知道如何继续。”
禁用要把「缺什么、怎么恢复」写在控件上;只变灰等于把用户锁在门外。
「按钮挂了 not-allowed 光标,键盘和点击却仍能触发——光标在撒谎。」
同样的 not-allowed 光标,左边真禁用、右边仍在删——光标只是提示,实际行为一致才算诚实。
「选区高亮看不清、复制结果不可见、剪贴板失败就静默,输入框选择还可能被覆盖。」
用清晰步骤把想法变成可交付产品。
已选中 8 字“拖拽排序只能用鼠标,没有键盘路径,也看不出目标位和保存结果。”
“界面在不同宽度下列数、导航、触控乱套——断点凭设备型号拍,没验收标准。”
断点 = 内容拥挤的阈值390 单列 · 768 双列 · 1280 三列,导航随之切换
结论:同一界面随宽度重排列数与导航,不是把桌面版等比缩小。
「桌面多列先做完再压缩到手机,主 CTA、触控和错误恢复都被挤掉。」
一句话结论:390 先跑通主任务,加宽只加列与侧栏;宽屏是增强,不是拆补丁。
「点了保存,不知道收到没、还在处理还是已经好了,于是又点了几下。」
「点了按钮之后页面一片白,或者一直转圈,我不知道是没点上、还在加载还是坏了。」
「列表是空的,我不知道是还没数据、没搜到还是出错了——页面就一张图搁那儿。」
结论:空状态先说原因再给一个主动作——首次创建、无结果清除筛选、失败重试;别留白屏。
「点了发布,要么弹一坨红色英文报错,要么什么都没发生——我到底成没成功,下一步该怎么办?」
错误要长在出错的物件上:给原因、影响哪个对象、下一步怎么恢复;不静默吞错,也不把堆栈甩给用户。
「手一抖点了删除,东西直接就没了,连句确认都没有,也撤不回来。」
危险按钮用红、确认要含对象名与后果、结果长在列表行上并给撤销或支持;只靠红色不算保护。
“设计师都在 Figma 里改图,发我一个链接——这链接到底能看到什么,我和开发怎么对得上?”
结论:同一份文件,4 个视角各取所需;改一处主组件或变量,所有实例同步——这就是 Figma 这类协作式设计工具的单一事实来源。
“改个圆角要改十几个地方,设计师和开发各画各的,怎么才能一处改、处处变?”
结论:组件引用 token,不写死值——改一处 radius.md,三处组件同步变化。对照:各处硬编码(8 / 6 / 10)时改一处只变一处。
“同一个按钮在不同地方要不一样的样子,到底是复制几份改一改,还是有一套规矩?”
结论:变体按属性轴(强调 / 尺寸 / 状态)派生、可枚举;随手复制的第 N 种样式没有对应轴,不纳入。
“设计稿给了,开发做出来总走样、还老让我确认细节——该交什么才不用反复扯皮?”
结论:交付含规格/token/状态/边界,开发可逐项验收、一次过;只给截图,缺项只能靠猜、被打回。
「用户到底能不能在我这儿把想做的事做完,还是中途卡住、出错、放弃?」
任务:取消自动续费
可用性 = 实测任务指标,不是「看起来直觉」。
「上线前怎么快速过一遍界面、把明显坑先抓出来,不用每次都找一堆用户测?」
走查对象 · 登录流 · 3 条启发式
结论:2 条带问题证据 · 1 条通过每条挂路径与改法,修复后复验清零——不靠「感觉良好」结案。