知识领域
产品与体验
工程与交付
AI 能力

产品与设计术语

视觉基础

8 个条目

视觉层级Visual Hierarchy

起手搭页面

“页面元素都在,用户却总先看到错的那个——怎么排才让人一眼看到最重要的?”

山海剧场 · 秋季首演夜航船9 月 21 日 · 19:30 · 海风厅立即选座 ↗

当前顺序:节目名 → 场次地点 → 选座大小、位置与留白把观看顺序写进节目单。

对比Contrast

“文字看起来挺高级,但一到手机强光就看不清,到底怎样才算够清楚?”

7.2:1AA ✓
正文辅助文字主 CTA
普通正文阈值 4.5:1 · 当前可读

不只靠颜色传达状态 · 强光下仍可辨

对齐Alignment

“排版总觉得乱,但要我说清哪里不齐、该怎么齐,又讲不出来。”

CITY NOTE · 08岛屿书店
WALKING STORY沿着同一条边读下去照片说明与正文都从这里开始

共用左缘,视线不必折返寻找下一行。

当前结论:标题、图片、正文共用边线版面齐,扫读路径就顺直。

亲密性Proximity

“同一屏一堆标签、输入和说明,怎么摆才能让人不用逐行读就知道谁和谁是一组?”

BOARDING TRIP2 LEGS
PVGICNCTS
上海 → 首尔08:10 · G24
首尔 → 札幌12:40 · G115

当前结果:G24 跟第一段,G115 跟第二段组内靠近、组间拉开,不画框也能看懂归属。

留白Whitespace

起手搭页面

「页面挤成一团看不清主次,可又怕留太多显得空站——留白到底是在留什么?」

SLOW JOURNAL6 MIN
穿过雾岭

清晨的路从一片松林开始。

FIELD NOTE · 04
收藏这篇 ↗

当前结果:标题、正文、收藏入口各有呼吸空白建立分组和焦点,不是“没填满”。

色彩系统Color System

“页面颜色一会一个样、深色模式字看不清、新加的状态色和旧的对不上——颜色到底怎么管才不乱?”

FLOW 包裹运输中
预计今天 18:30 前
  1. 已揽收
  2. 派送中
  3. !地址待确认

当前结果:品牌、进度、成功、警告各司其职文字 + 符号 + 色彩三重表达,状态不串台。

现代简约Minimalism

“首屏塞了统计、徽章、装饰图,用户反而找不到「开始申请」——极简到底删什么、留什么?”

LOOP / PROMONTHLY
无限音乐与离线下载

¥28 / 月 · 随时取消

到期自动续费,提前 24 小时提醒确认订阅 →

当前结果:保留价格、续费、取消条件和主行动删推荐、勋章与动态,不删决策必需。

无障碍Accessibility

“课程视频鼠标能播,但播放键读不出名字、Tab 看不见焦点,也没有字幕——这算所有人都能用吗?”

CODENOW CLASS · 0406:32

讲师 · 林舟原生 HTML 优先ARIA 只补缺少的语义

字幕 先用语义,再让焦点与状态都能被感知

原版 ×无名称 · 无焦点 · 无字幕修复 ✓语义 · 焦点 · 字幕 · 文字状态

同一课程视频:键盘与读屏也能完成播放。

页面结构与适配

11 个条目

信息架构Information Architecture

“亲子活动明明有,为什么用户从首页就是找不到预约入口?”

河岸文化中心活动日历
我要带孩子参加周末活动
  1. 活动
  2. 亲子工作坊
  3. 周末场
  4. 预约

结论:按用户任务组织,入口能猜、路径能回看。不是把内部部门原样搬进导航。

页头Header

起手搭页面

“活动页的促销、社媒和合作链接都塞进页头,用户反而找不到报名。”

06
SEP
造物
周末
本周六日立即报名
80+ 独立设计摊主河岸仓库 · 10:00–20:00

结论:页头负责识别、主导航与唯一行动。促销、社媒和合作入口不该挤进主信息带。

导航栏Navbar

起手搭页面

“手机底部五个图标都没有文字,用户总点错账单,当前在哪也只靠颜色猜。”

“顶栏吸顶后遮住了标题,移动端菜单也没有当前项和关闭路径。”

Northstar开始使用
当前页面:文档内容从顶栏下方开始,吸顶不遮挡标题

品牌·主导航·全局操作在同一行;当前项要可识别,窄屏收进折叠菜单。

“后台侧栏分组混在一起,折叠后当前项丢了,窄屏也没有安全的抽屉恢复路径。”

单页布局Single Page

起手搭页面

“单页区段没有顺序,点导航也不知道现在在哪儿、下一步该看什么。”

产品落地页 · 一页纵向滚动
  1. 1首屏
  2. 2功能
  3. 3定价当前
  4. 4FAQ
区段导航首屏功能定价FAQ
结果:当前在「定价」(第 3/4 段),区段导航标出位置;点导航只跳到对应区段,页面不重新加载。

文档布局Doc Layout

「长文档滚着滚着就不知道自己在哪一节,手机上连目录和大纲都找不到。」

正文 · 当前位置开始使用 · 安装 CLI第 1 / 4 章 · 第 1 / 3 节
目录 · 开始使用本页 · 安装 CLI
当前位置:目录管跨页面、本页大纲管页内标题、正文承载阅读,三栏始终同步。

卡片网格Card Grid

起手搭页面

「卡片排成网格后列数一变就乱:末行被拉宽变形,空数据留一片空白,我说不清该按什么规则收口。」

项目精选 · 5 个条目
作品 A作品 B作品 C作品 D作品 E

当前 3 列· 末行 2 张等宽不拉伸 · gap 统一

居中单栏Centered Column

大屏上一行文字拉得太长,读到行尾已经找不到下一行——怎么用布局管住行宽?

大屏正文 · 行宽对照
限宽居中
留白留白
≈75 字/行 · 可读
铺满大屏
≈120 字/行 · 过宽

正文 限宽约 680px 并居中,每行字数落进可读区间;大屏两侧留白。

响应式设计Responsive Design

起手搭页面

“桌面版直接缩小到手机就乱套——列数、导航、横向溢出没有可循规则。”

Responsive按宽度重排,不等比缩小
桌面 1280
概览 · 功能 · 定价
平板 780
概览 · 功能 · 定价
手机 390
≡ 菜单
✓ 断点按内容需要✗ 不是设备型号清单

结论:列数、导航、字号随宽度重新排布;同一内容在三种空间都能完成主任务。

布局基础

11 个条目

盒模型Box Model

「卡片加了 padding 和 border 后撑破网格,团队说不清最终宽度和 margin 的关系。」

对照

同样声明 320px:border-box 包含 padding+border;content-box 不包含,更易撑破网格。

间距Space

起手搭页面

“间距没有统一标尺,相关项和区块的亲疏关系读不出来。”

对照

同组相关项用小档位(紧),区块之间用大档位(松):当前间距不靠随机值,而是从有限 token 读取亲疏。

外边距Margin

「两个段落各设了 32px 和 16px 的垂直 margin,实际间距为什么不是 48px?」

相邻块级 · 垂直 margin 折叠

32 与 16 不叠加成 48;同一 BFC 内相邻块级的上下 margin 合并,实际取大者 32。

内边距Padding

「按钮文字贴着边框、密集列表里老误触;想加大可点击区,加 padding 和加 margin 到底差在哪?」

对照

同加 12px:padding 在边框内把命中区撑到 44px、文字有呼吸;margin 只推开「取消」,命中区不变。

「几个按钮排一行,对齐和间距全靠 margin 硬撑,小屏一换行就错位。」

display: flex · 主轴 row · justify-content: space-between
结果:品牌靠起点、开始任务靠终点、搜索吃满中间剩余空间。

一维主轴上分配空间:方向、justify-content、align-items、flex-grow 与 gap 共同决定 item 的位置与尺寸。

「Grid 的列数、gap、跨格和自适应规则说不清,容器一缩就乱排或挤爆。」

同一容器 320px · gap 8px · 只改轨道策略

反例repeat(4, 1fr)实际每列约 70px,标题挤爆、不可读
正例auto-fit minmax(110px, 1fr)自动折叠成 2 列,每列约 150px,可读

结论:auto-fit + minmax 让轨道按容器宽度自动折叠,固定列数则被压缩;对照之下,内容数量或容器宽度会变化时更适合自适应轨道。

居中Centering

“居中写了好多遍都不对,flex、grid、margin、absolute 到底用哪个?”

  • Flex双轴
  • Grid最简
  • Margin仅水平
  • Absolute脱流

4 种方法都能让物件中心落到容器中心;实际差别在对容器与物件尺寸的要求。

定位Position

“卡片角标在不同宽度下错位,团队用 margin 硬推,滚动后还会挡住内容。”

取值是否离流相对谁
static不离流正常流(默认)
relative不离流自身原位置
absolute离流最近定位祖先
fixed离流视口
sticky阈值前不离流滚动容器边缘

结论:离流的值不再占位;定位上下文由最近 position≠static 的祖先决定。

吸顶Sticky

“章节工具栏滚动后要吸顶,可页面滚动和面板滚动效果对不上——sticky 到底钉在哪里?”

未到阈值
随流上移
达到 top:0
吸顶保持
滚回下方
释放回位
达到 top 阈值才吸顶 · 始终占位、可逆sticky 相对最近可滚动祖先,不是视口

「弹窗 z-index 都加到 9999 了,怎么还是被一片遮罩压在下面?」

同一堆叠上下文里,z-index 数字大的盖小的:80 > 60 > 1,Toast 在最前。

但父级若新建堆叠上下文(opacity/transform/filter),子级 9999 也只在自己父级里比较,外层低值照样压住它。

溢出Overflow

「长路径和浮层超出容器后被裁掉,用户滚不到也复制不全。」

visible
溢出可见(默认)
hidden
超出部分裁掉
scroll
常驻滚动条
auto
按需出滚动条
四值决定超出内容:溢 / 裁 / 滚可分 overflow-x / overflow-y 两轴独立设

排版与视觉样式

12 个条目

排版Typography

起手搭页面

“标题、正文和辅助信息挤成同一层,放大文字或读长段落时也没有舒适的字级与行高。”

字阶标尺 · 比例 1.6
  1. 28产品更新说明700
  2. 16正文要足够字级和行距400
  3. 13辅助信息 · 日期400
当前正文 16/1.6 通过长文可读;层级靠字级·行高·字重,不靠颜色。

衬线与无衬线Serif & Sans

「标题用衬线、正文用无衬线就够了?界面小字、数据数字和代码又该选哪种字体,中文才不会掉成乱回退?」

衬线 Serif永 Aa 0123适合:长文 · 品牌无衬线 Sans永 Aa 0123适合:UI · 屏幕等宽 Mono永 Aa 0123适合:代码 · 对齐

屏幕小字优先无衬线 · 长文印刷用衬线 · 代码对齐用等宽

文本截断Text Truncate

「列表标题单行省略后,用户找不到全文,读屏也只读到被裁的前半句。」

产品更新列表 · 同一条标题
  1. v3.2 发布:新增实时协作光标与评论分组,修复 Safari 上拖拽失灵单行省略
  2. v3.2 发布:新增实时协作光标与评论分组,修复 Safari 上拖拽失灵两行截断
  3. v3.2 发布:新增实时协作光标与评论分组,修复 Safari 上拖拽失灵不截·换行
结论:视觉省略 ≠ 内容丢失——三件套裁掉溢出并以 … 提示,全文仍由 aria-label 与详情入口可达。

分隔线Divider

「页面到处画分隔线,可层级还是乱——到底什么时候该画线、画哪种线?」

Divider线强化关系,不创造关系
仅留白
无分割线
内缩分隔
两侧留出 · 克制
贯通分隔
横跨全宽 · 强切断

结论:留白与标题先分组,分隔线只补充关系——对照三种强度再决定是否画线。

圆角Border Radius

「按钮、卡片、输入的圆角各写各的,标签又随手 999——圆角到底该怎么管?」

圆角 token · 0 / 8 / 16
直角 0标准 8柔和 16
胶囊 999 · 标签
结论:同层级共享一个 token;胶囊、圆形是例外,不是默认。

圆角一致性Corner Feel

「同一屏的按钮、输入框、卡片圆角各写各的,为什么看起来像拼接的、显廉价?」

圆角气质 · 同族对比
  1. 按钮 8输入 8卡片 8同族 8px · 一致
  2. 按钮 8输入 14卡片 8输入偏离 · 拼接感
结论:同族共享半径 → 气质统一;一处偏离 → 显拼接。锐利=严肃,柔和=亲切。

阴影Shadow

「卡片要不要阴影?弹层该多深?暗色模式阴影怎么不吞轮廓——阴影到底怎么管?」

elevation token · 平面 / 卡片 / 弹层
  1. 平面none
  2. 卡片0 4px 14px
  3. 弹层0 18px 40px
阴影不可靠 → 改用边框 + 弱阴影
当前结论:层级靠 elevation 深度与边框对照,不靠颜色。

透明度Opacity

「次要内容降透明度后,正文对比、禁用语义和遮罩文字会不会跟着一起淡?」

不透明度样例 · 1.0 / 0.55 / 0.2
  1. 主要文字 · 1.0正文、状态、主操作用这档
  2. 次要说明 · 0.55弱化辅助信息,不藏关键内容
  3. 近乎不见 · 0.2别用于正文或唯一状态提示
结论:opacity 让整块连同文字一起等比变淡;弱化次要、遮罩与禁用各有正确写法。

渐变Gradient

「首屏要上渐变——方向和停靠点怎么定?白字标题压上去还清楚吗?打印或高对比关掉渐变怎么办?」

渐变样例 · 方向 / 停靠点 / 回退
  1. 纵向 · 停靠 62%暗段覆盖标题,对比通过
  2. 停靠 30% · 亮段过早白字落亮段,对比未通过
  3. 纯色回退关掉渐变,标题仍清晰
  4. 状态只靠色相关渐变后两枚同色,无法区分
结论:渐变是氛围层——方向/停靠点改变亮暗区,标题对比要独立验收;提供纯色回退;色相不单独承载状态。

背景模糊Backdrop Blur

「吸顶栏想用毛玻璃让背景更有层次,但浅色图上文字变糊、低端机又没有降级——backdrop-filter 到底模糊了谁?」

backdrop-filter · 0 / 6 / 14 px
  1. 无模糊0px · 背后清晰
  2. 柔和6px · 背后柔化
  3. 明显14px · 层级清楚
不支持滤镜 → 实色背景兜底
结论:模糊的是背后内容;前景文字、对比度与降级要独立保证。

深色模式Dark Mode

「深色模式只反转了背景,图表、边框和代码块仍然刺眼,系统偏好也覆盖不了——到底该怎么做?」

深色模式 · 整套 token 成对切换(浅 ↔ 暗)
工作台 · 设置浅色
const t = "light"
开始任务
工作台 · 设置暗色
const t = "dark"
开始任务
全局反色滤镜不可取图表、代码块、图片一起发灰错位
结论:深色模式把背景、正文、边框、图表、代码块成对切换并复核对比度,阴影在暗色改由边框接管——不是全局反色。

设计令牌Design Token

「换品牌色要逐个组件搜索 hex,间距和圆角也各写一套,改一处漏三处——怎么管才不乱?」

设计令牌 · 单一来源 → 多处引用
  1. --space-md16px按钮 16卡片 16徽章 16改一处 · 三处同换
  2. --space-md16px按钮 16卡片 16徽章 11 偷写徽章写死 11px · 脱钩
结论:令牌是命名的单一来源;组件只引用不写死值,改一处即全局更新。

动效

5 个条目

过渡Transition

“按钮颜色和阴影变化太突兀,团队又用 transition: all 让布局抖动,无法响应减少动效偏好。”

默认已激活
background-color · 180ms · ease-out结果:写明属性只动该动的;transition: all 会把宽高也拖乱。
  • 写明属性:反馈平滑
  • transition: all:布局被拖

淡入淡出Fade In / Out

“切 Tab 时内容是该瞬间换还是慢慢淡入?淡多快才不让人晃,也不让人等?”

透明度 0 → 1 · 时长决定观感
0ms · 不淡突兀
80ms像闪
200ms平滑 ✓
800ms拖沓

约 200ms:既不突兀,也不用等

动画做完了,但说不清哪里别扭——机械、拖、或者冲;进入和离开也没有曲线和时长规则。

同样距离 · 同样时长,速度差在哪
  • ease-out前段快 · 轻落
  • ease-in-out两端缓和
  • linear匀速 · 机械
  • ease-in末段冲 · 滞后

结论:进入选 ease-out——目标先进入视线、末段轻落不突兀;linear 匀速像机器。

动画Animation

“装饰动画一直循环,成功反馈却没有结束状态;用户开启减少动效后也看不到结果。”

每个动画 = 目的 + 结束条件
  • 成功反馈 · 一次播一次 → 停在 已保存 ✓
  • 装饰 · 循环可暂停 / 关闭

减动效:跳过运动,结果仍要可见

对话框回弹过度还会抖布局,用户开了减少动效也没有稳定的替代状态——弹簧该怎么调?

对话框弹入 · 三参数与过冲对照
速度高 · 阻尼低过冲超限
轻初速 · 够阻尼轻微回弹 ✓
减少动效瞬切到终态

只用 transform 移动已占位的面板 · 过冲和时长受限

交互状态与指针

7 个条目

悬停Hover

交互做完

“帮助说明只在鼠标悬停时出现,键盘和触摸用户找不到同样的提示或关闭路径。”

帮助入口导出说明提示:导出会保留当前筛选条件
  • 指针悬停→ 显示同一条提示可发现
  • 键盘聚焦→ 显示同一条提示可发现
  • 触摸点击→ 提示保持 + 可关闭可发现
结果:三条路径独立发现同一条说明——hover 是附加反馈,不是唯一入口。
交互做完

「键盘焦点顺序和可见轮廓不清,用户无法知道当前操作位置。」

键盘 Tab 路径 · 确认订单
返回
付款当前位置
取消

悬停换色 跟随鼠标指针; 焦点环 跟随键盘——两条路径不同。

焦点环 = 键盘当前位置。删掉它只留悬停色,键盘用户按 Tab 时看不到停在哪。

按下态Active

“按下、提交中和禁用没有边界,重复点击会重复提交,键盘用户也看不到激活结果。”

提交订单防连点
  1. 默认提交订单可激活
  2. 按下提交订单 ▾瞬时下压,松开进入提交
  3. 提交中提交中… 🔒原生 disabled + aria-busy · 阻止重复
  4. 完成✓ 已提交稳定结果 · 可再次提交
边界:提交中的按钮暂时不可激活——这一瞬防住重复提交;业务禁用是另一回事,用原生 disabled 加原因并退出 Tab 顺序。

禁用态Disabled

交互做完

“禁用按钮只变灰却没有原因和恢复路径,用户不知道如何继续。”

提交按钮 · 两种禁用
提交还缺有效邮箱补齐即恢复
提交无原因

禁用要把「缺什么、怎么恢复」写在控件上;只变灰等于把用户锁在门外。

「按钮挂了 not-allowed 光标,键盘和点击却仍能触发——光标在撒谎。」

删除项目 · 光标真相核验
删除项目cursor: not-allowed真 disabled · Tab 跳过需要所有者权限
删除项目cursor: not-allowed可 Tab · 点击仍删除伪禁用(谎言)

同样的 not-allowed 光标,左边真禁用、右边仍在删——光标只是提示,实际行为一致才算诚实

文本选区Selection

「选区高亮看不清、复制结果不可见、剪贴板失败就静默,输入框选择还可能被覆盖。」

选 → 复制 → 看结果

用清晰步骤把想法变成可交付产品。

已选中 8 字
复制选区 → 已复制 ✓结果落在按钮上,不是只换底部文案
剪贴板被拒时焦点落到替代文本框 · 按 Ctrl/Cmd+C 手动复制
::selection 只改高亮颜色;选中范围、复制结果、失败回退必须看得见、落在物件上。

拖拽Drag

“拖拽排序只能用鼠标,没有键盘路径,也看不出目标位和保存结果。”

发布检查清单 · 拖拽排序Enter · ↑↓ · Enter
  1. 1研究需求
  2. 2设计方案● 抓取中
  3. 3发布检查
✓ 放下 = 已保存× 失败 = 物件回位
结果:位置变了,但抓取态、目标位、保存/回位都看得见——鼠标指针不是唯一入口。

界面体验

7 个条目

响应式界面Responsive UI

“界面在不同宽度下列数、导航、触控乱套——断点凭设备型号拍,没验收标准。”

390
CodeNow菜单
开始任务
768
CodeNow概览·功能·定价
开始任务
1280
CodeNow概览·功能·定价
开始任务

断点 = 内容拥挤的阈值390 单列 · 768 双列 · 1280 三列,导航随之切换

结论:同一界面随宽度重排列数与导航,不是把桌面版等比缩小。

移动优先Mobile First

「桌面多列先做完再压缩到手机,主 CTA、触控和错误恢复都被挤掉。」

390 · 基线标题主 CTA关键内容次要已折叠
768 / 1280 · 增强双列侧栏快捷操作主任务顺序不变

一句话结论:390 先跑通主任务,加宽只加列与侧栏;宽屏是增强,不是拆补丁。

交互反馈Interaction Feedback

交互做完

「点了保存,不知道收到没、还在处理还是已经好了,于是又点了几下。」

保存设置反馈可见
  1. 按下保存设置 ▾瞬时下压 · 已收到
  2. 保存中保存中…disabled + aria-busy · 防重复
  3. 结果✓ 已保存文字 + 图标 · 下一步:撤销
无反馈对照
保存设置点了没动静,用户再点一次
反馈要分阶段长在物件上:收到、处理中、结果与下一步;没有反馈或只靠颜色,用户不知道发生了什么。

加载状态Loading State

交互做完

「点了按钮之后页面一片白,或者一直转圈,我不知道是没点上、还在加载还是坏了。」

项目列表加载结束条件 + 失败重试
  1. 骨架屏保留布局·感知快
  2. 进度条长任务·确定 %
  3. Spinner未知长度·只在转
  4. 白屏无反馈·最差
加载要让用户看到「开始了、在进行、有结束」:骨架屏保留布局感知最快,进度条给确定性百分比,Spinner 只说在转,白屏和无尽转圈会让用户以为卡死。

空状态设计Empty State

「列表是空的,我不知道是还没数据、没搜到还是出错了——页面就一张图搁那儿。」

首次使用还没有项目创建项目
筛选没命中没有匹配的项目清除筛选
请求出错项目列表加载失败重试
反例纯白屏 · 冷漠「暂无数据」用户不知道为什么空、下一步做什么

结论:空状态先说原因再给一个主动作——首次创建、无结果清除筛选、失败重试;别留白屏。

错误状态Error State

交互做完

「点了发布,要么弹一坨红色英文报错,要么什么都没发生——我到底成没成功,下一步该怎么办?」

发布项目 · 出错时原因 + 下一步
  • 网络异常暂时无法发布原因:服务超时,数据未写入下一步·重试
  • 输入校验项目名不能为空原因:必填项为空下一步·回字段
  • 权限不足你不能发布原因:缺少管理员权限下一步·去申请
  • 致命错误发布中断·不可重试原因:服务端崩溃 req_8f3a下一步·联系支持
  • 反例·静默失败页面无反馈,用户不知道成没成功
  • 反例·甩堆栈TypeError 堆栈直接甩给用户看

错误要长在出错的物件上:给原因、影响哪个对象、下一步怎么恢复;不静默吞错,也不把堆栈甩给用户。

危险操作Destructive Action

「手一抖点了删除,东西直接就没了,连句确认都没有,也撤不回来。」

删除项目 · Project Atlas三种保护对照
  1. 无确认Project Atlas✗ 一按就没 · 无法恢复
  2. 二次确认输入「Project Atlas」✓ 说清对象与后果才放行
  3. 软删除+撤销删除中 · 6s 内撤销↩ 过期才永久移除

危险按钮用红、确认要含对象名与后果、结果长在列表行上并给撤销或支持;只靠红色不算保护。

设计交付

6 个条目

FigmaFigma

协作交付

“设计师都在 Figma 里改图,发我一个链接——这链接到底能看到什么,我和开发怎么对得上?”

  • 设计稿外观构图
  • Dev ModeCSS 规格
  • 组件库主组件+实例
  • 变量主题值

结论:同一份文件,4 个视角各取所需;改一处主组件或变量,所有实例同步——这就是 Figma 这类协作式设计工具的单一事实来源。

设计系统Design System

“改个圆角要改十几个地方,设计师和开发各画各的,怎么才能一处改、处处变?”

单一事实来源radius.md= 8px
  • Button引用 radius.md · 圆角 8
  • Card引用 radius.md · 圆角 8
  • Input引用 radius.md · 圆角 8

结论:组件引用 token,不写死值——改一处 radius.md,三处组件同步变化。对照:各处硬编码(8 / 6 / 10)时改一处只变一处。

组件变体Component Variant

“同一个按钮在不同地方要不一样的样子,到底是复制几份改一改,还是有一套规矩?”

属性派生
3 强调 · 可枚举
复制粘贴
不可枚举 · 未通过

结论:变体按属性轴(强调 / 尺寸 / 状态)派生、可枚举;随手复制的第 N 种样式没有对应轴,不纳入。

设计交付Design Handoff

协作交付

“设计稿给了,开发做出来总走样、还老让我确认细节——该交什么才不用反复扯皮?”

只给截图
  • 规格
  • token 硬编码
  • 状态
  • 异常
✗ 打回 · 缺 5 项
完整交付
  • 规格
  • token
  • 状态
  • 异常
✓ 一次过

结论:交付含规格/token/状态/边界,开发可逐项验收、一次过;只给截图,缺项只能靠猜、被打回。

易用性Usability

「用户到底能不能在我这儿把想做的事做完,还是中途卡住、出错、放弃?」

任务:取消自动续费

好设计5/5 完成3 步 · 0 错 · 28s难用设计3/5 完成6 步 · 1 错 1 返回 · 64s

可用性 = 实测任务指标,不是「看起来直觉」。

「上线前怎么快速过一遍界面、把明显坑先抓出来,不用每次都找一堆用户测?」

走查对象 · 登录流 · 3 条启发式

  • 系统状态可见2 条 · 已记证据
  • 错误预防待修复
  • 一致性复验通过

结论:2 条带问题证据 · 1 条通过每条挂路径与改法,修复后复验清零——不靠「感觉良好」结案。