10 KiB
组件
用户要把一个组件做到极致时，力气全部集中在这一个对象上：它放大看也经得起，用起来有手感，放进任何产品都认得出。页面上的方法照常有效，但流程不同：方向少做，深度多做。把组件当成一个小页面，三个方向平均用力、各做一遍完整验收，结果往往是三个能用却都不出彩的组件。
本文的例子来自不同品类，只示意要具体到什么程度，不是模板。主视觉、母题、尺和状态的样子，每次都从当前产品里推出来；做出来和某个例子很像时，先问这是不是来自这个产品。
先写它回答的那个问题
用一句话写下用户看这个组件时最想知道或最想做的一件事，用用户的话写。例如行李追踪组件是“我的箱子到哪了”，不是“显示物流状态”。这句话决定谁是主角。
再写组件的构成，每项一两行：
- 主角：用户最怕错过、会随时间变化的那个量，例如还要等多久、还剩多少。它在组件里最大、最先被看到。
- 陪衬：判断主角需要的其他信息，越少越好。
- 主操作：只有一个。写清它的手感：拖、按、长按还是滑；拖动时会不会吸附到常用值。
- 状态：列全。还没开始、进行中、暂停、计划中、完成、出错、极端值（0、满、超长名称），以及加载中。每个状态都要有画面，不能只做默认状态。状态的变化要落在主视觉上，例如洗碗机组件里，洗完时水汽散去、门缝亮起，故障时出问题的那根管道断开变红；只换标题文字和一个小圆点，等于主视觉没有参与。每个状态写明改主视觉的哪一层、改成什么样，三层见下一节。
- 容器：它会出现在哪些尺寸里，例如整页卡片、小组件、通知栏。没要求时只做一种。
先定主视觉，再画组件
组件也需要一个视觉主角，不能只靠文字、数字和进度条撑起来。按顺序找：
- 实物：组件背后有实物时，用它的写实渲染或产品照片，例如耳机、行李箱、相机、一盆植物。透明底，角度和光线按组件的版式定。组件的主色从实物里取：外壳、配件或内容里最认得出的那种颜色。实物只有银灰黑白时，可以把颜色交给一个会亮的部位，例如耳机的状态灯、相机的录制点，并让它随状态变化。生成提示词里写明这个颜色和这个部位。组件本体里，主视觉要么完整放下，要么明确设计成出血到组件边缘，不能被容器随意切掉一角；跨出边界的效果只用在作品图里。
- 数据画成的量：没有实物时，把主角画成看得见的量，例如一格代表一分钟的网格、填满的长度、范围圈。见 设计方向 的“让人记住的一刻”。
需要的图先按 配图 生成或选好，再围绕它排版。组件的颜色从这张图里取两三种：主色是图里最有辨识度的颜色，其余靠黑白灰。先定色板再去配图，图和界面会像两样东西。
主视觉分三层，生成图之前先分好：
- 照片层：实物本身。状态需要实物变化时，例如耳机戴上和收进盒子、箱子合上和打开，用同一张图改提示词生成几个变体，角度、光向和大小完全一致；代码只切换图片。提示词写法见 配图。
- 画在上面的层：用代码画的线、量和标注，贴在实物对应的部位：降噪强度画成从耳罩向外扩散的声波，温度标在出问题的那个零件旁，剩余量沿容器的液面走。它随数据实时变，是状态变化的主要落点。
- 背景层：组件底色和实物身后的光。例如等待中光线变暗，出错时光熄掉，完成时亮起。这是状态的意思，不是装饰。
一个量只画一条尺。主视觉上表示主角的那条线、那圈格子，就是主操作的控件：目标直接拖在它上面，当前值和目标在同一条尺上，拖动时实物随之变化。主视觉下面再放一个滑块或一排刻度，就是把同一件事画了两遍，删掉其中一条。常用值做成尺上的刻度和吸附点，标上名字，例如降噪强度上的“通勤”“专注”；不另做一排快捷按钮。
同一个信息在组件里只出现一次。做完默认状态后列一张表：每个数字一行，写它出现在哪几处；文字、图形、控件上显示的值都算。出现两次以上，删到只剩最有力的那一处。目标值写在标题里、显示在滑块旁、又是快捷按钮的名字，就是三次。
所有状态并排后做一次遮字测试：把文字和数字全部遮掉或模糊，再看这张图。还分得出哪个在进行、哪个出错、哪个已完成，主视觉才算参与了状态；分不出来，回到三层里改画在上面的层和背景层，不靠加文字解决。
再定一个母题：一种从产品里来的图形，例如刻度、波形、点阵、等高线，从主视觉一路用到进度、加载、按钮按下和空状态。一个组件里只用一种母题。母题同时决定控件的形状：圆滚滚的毛绒玩具推出胶囊形的按钮和柱子，海报和硬照推出直角的按钮和图片，刻度推出细线和等宽数字。写下主按钮、次要开关和底部那行小字各自怎样带上母题；带不上的，先问能不能删。下半部分退回组件库默认的按钮和开关，整个组件就只有上半部分是设计。
大数字是组件的脸。给它选一款有性格的数字字体，用等宽数字，不用系统默认字体；标签用另一款安静的字。两款够了。
方向少做，深度多做
- 先出两三张草图。 只做默认状态的静态画面，不写交互、不取证。草图之间在主视觉、母题和主操作的手感上不同，不是同一个布局换颜色。放进 风格对比页 给用户挑；用户让你自己决定时，选最有辨识度、又最能回答那个问题的一张，写下理由。
- 选定后只深化这一个。 把所有状态做完，主操作做出完整的手感，再按下面的轮次打磨。其他草图不再深化。
把一处做到极致
组件的记忆点通常在主操作发生的那一刻。逐项想清楚，写进设计说明：
- 跟手：拖动时，被拖的东西和手指之间没有延迟；跟着变化的数字、颜色、主视觉同步变化，不等松手。
- 阻尼和吸附：经过常用值（例如 80%、100%）时有一次轻微的停顿，松手后吸附过去；拖过头会被拉回来。
- 结果当场发生：调了目标，主视觉跟着变，例如声波随降噪强度收拢或扩散，而不是只改一个数字。
- 数字的变化：数字滚动到新值，不是跳过去；等宽数字，单位比数字小一级、基线对齐。
- 状态之间的过渡：从发生变化的地方出发，例如开始时从实物上发生变化的那个部位出发，完成时最后一格亮起。
动效的时长和曲线见 动效。只在主操作和关键状态切换上用力，其余保持安静。
打磨轮次
截图、状态并排图、遮字图和录屏用 工具 里的截图工具一次出齐。派评审之前自己先看一遍证据：默认状态已经加载完，遮字图保留了图形，慢放帧里没有上一个状态的残影，200% 图截的是组件而不是整页。证据有错先重截，不算一轮。
深化后的组件按轮次打磨：截图、评审、修改。每轮给评审者这些东西：组件 200% 放大的截图；所有状态并排的图两份，一份原样，一份遮掉全部文字和数字；主操作 5 秒左右的录屏。评审任务：
评审这一个组件，不评审页面。先说出用户第一眼看到的主角是什么，是不是那句“它回答的问题”里的答案。再拿这个品类里最有名的两三个产品做对照，说出这个组件和它们不同在哪；遮住名字后认不出是谁家的，就直接指出来。数一遍同一个信息在组件里出现了几次，出现两次以上的指出来。看所有状态并排的那张图：状态之间除了文字，主视觉有没有变化。然后按“这个品类里最好的组件”的标准，指出放大以后最露怯的三处细节：对齐、标签和图形压在一起、数字排版、阴影和描边、状态之间不一致。再说主操作的手感：跟手吗，有没有吸附和阻尼，结果有没有当场发生在主视觉上。最后回答：有没有一个瞬间值得截图分享；没有的话，最有希望的是哪一处，怎么做。每条写清位置、观察和调整方向。按 10 分制打分；以下任一成立，总分不高于 7：遮字后分不出各个状态；同一个数字出现三次以上；主操作的控件不在主视觉上，而是另画了一条尺；遮住名字后说不出它和品类里常见产品的区别。只提供评审，不修改文件。
目标 9 分，默认最多三轮；分数连续两轮没有提升时停止。每轮只改评审指出的问题和主操作的手感，不换方向。
交付
- 组件本体：能运行、能操作，所有状态可以切换查看，例如用一排状态按钮或键盘切换，切换控件放在组件外面。
- 作品图：组件放大两倍，放在从主视觉取色的背景上；背景从主视觉取色，选和组件形成清楚对比的那一档。实物另放一份在组件外面，比组件里的大三到五倍，压住组件的一条边或一个角，再被画布边缘切掉一部分；一张图里放一两个，不围一圈。可以再出一张：把组件的一处局部推近，画面旋转十到十五度，只看母题和细节。这些只用来展示，界面本身不需要这样。
- 一段录屏：主操作从开始到结果出现，5 到 8 秒。
验收证据只给选定的那一个：所有状态各一张截图、200% 截图、主操作录屏。草图阶段不取证。组件不做独立的任务走查，也不按 SKILL.md 步骤 4 另做评审；把时间留给打磨。