workbuddy_skills/oil-ui-pro/references/visual-polish.md

视觉自查与精修

结构和主视觉定下来以后用这份文件：先看整页是否落进模型默认审美，再逐项过细节，最后做减法。字体、色彩、控件等基础规则见 视觉语言。

目录导航

• 模型默认审美自查
• 细节
• 克制：大胆在结构，克制在细节

模型默认审美自查

没有明确风格依据时，模型容易生成下列默认做法。它们都不是禁令，但每出现一项，都要能说出它怎样服务当前北极星；说不出就换成方向卡里的具体选择：

• 无来由的渐变、柔光、玻璃拟态和发光描边。
• 配色说不出来自这个产品的理由，只是因为它“不会出错”“显得高级”或者“这个行业都这么用”。判断不看是哪种颜色，任何颜色都可以用，只看理由是否来自这个产品。眼下最常见的一组是米色或暖白底配衬线标题，它已经成了新的“不会出错”；纯白和纯黑同样是完整的底色，选哪一种都要说得出理由。
• 中文界面从头到尾只用思源黑体或系统黑体，标题没有自己的字体性格。
• 在页面里画假的浏览器窗口、红黄绿三个圆点、写着 9:41 的手机状态栏或整台手机外壳。浏览器和设备本身已经提供这些，产品本身是浏览器或设备模拟器时除外。
• 所有内容都装进同样圆角、同样阴影的卡片，卡片里再套卡片。
• 首屏固定为左右分栏：左边大标题，右边说明、按钮或一张图；下方接三列图标特性卡。换了字体和颜色，这个骨架也常常原样保留。
• 用表情符号或随手找的图标给每个标题做装饰；最典型的是 2px 描边的通用图标放进浅色底圆角方块，每个标题配一个。
• 工具、后台，以及画廊、商店、信息流这类内容页，顶部放超大标题、口号或解释这个页面的段落，把第一排内容推出首屏；用一整块深色圆角卡片装“下一步”动作；每一列、每个区块下面一行解释它是干什么的。
• 每一屏左上角都是 Logo 加产品名，下面再叠一行页面标题或口号。品牌标识放不放、放多大，规则见 工作区骨架 的“顶栏放什么”。
• 用单侧色条标重点：引文、提示、答题反馈、当前项、紧急卡片，左边或右边加一条 2–4px 的彩色边线。这是最常见的模型默认之一，“它在表达状态”不能当理由。状态用元素本身表达：状态词加颜色或图标、整块底色、字重、位置和顺序。单侧的线只用来分隔结构，例如侧栏和主区之间、表格的列之间，并且用中性色。
• 用星星、闪光、魔法棒、机器人表示 AI 功能。图标应表达实际动作或结果，例如摘要、翻译、转写。
• 全页只用一种无衬线字体，标题与正文尺度相差不大，标题没有自己的性格。
• 每个标题都加粗到 600–700，靠“越重要越粗”拉开层级，整页都在用力。层级先靠字号拉开：标题做到正文的两三倍以后，用常规甚至细字重反而更有分量，例如 48px 的常规字重标题配 16px 正文。标题的性格来自选什么字体、多大、字距多紧，不来自加粗。运动、街头、粗犷这类调性可以用粗体，在方向卡里写出理由，对照方向卡调性里“分量”那一栏。西文大标题可以把字距收紧一点、行高压到 1.0–1.1；中文标题不这么压，行高和字距先保证读得顺。
• 每个区块都有英文眉标、胶囊徽章和一句空泛口号，例如“一站式”“赋能”“开启全新体验”。中文产品用英文做字标、表头和分区名（WORKSPACE、CONTENT OBJECT、FIELD NOTES）也属于这一类。
• 界面上写满制作说明：“示例”“待核实”“概念图”“示意图”“按钮未接入”，或者“仅保存在此浏览器”这类解释实现方式的话，挂在字段旁、图片角落或页脚。这些是写给委托人的话，放进交付说明。
• 所有间距相同，页面没有松紧节奏，也没有一处视觉重心。
• 随意给文字上色、加高亮，或者到处加描述性小字和标签，留出没有用途的空白区域。
• 首屏之后接一排三栏功能格：编号或图标、小标题、两行说明，内容和首屏重复。首屏再有辨识度，到这里也会退回模板。
• 界面完全不动，或只有悬停变色；有动效时各动各的：每个区块套同一个淡入上移，按钮、面板和数字之间没有关系。
• 自己画的下拉、开关、滚动条，比平台原生组件更难用。
• 角色、吉祥物、道具和场景用手写 SVG 或 CSS 拼出来：扁平色块加一道渐变高光，认得出是什么，看不出材质，像图标素材包。这类主视觉用生成素材或实时 3D，见 素材。
• 趣味类产品的“可爱鸡汤腔”：逗号断句、叠词、拟声加感叹，例如“转一下，给今天添个小惊喜”“一币落下，等一场哗啦”“你的林子，又长大了”。改成具体的数字、名词和结果，情绪交给画面和声音。
• 文案抽象，用晦涩的比喻代替具体说明。说服型页面按概念写的标题不在此列，前提是它通过 概念 的三条检验，并且副标题说清了产品是什么。方向的比喻也会渗进功能：按钮叫“检查采样”，导航画成一圈轨道。比喻只管视觉气质，功能名、按钮和导航用产品本身的说法。

检查时截图整页，逐项对照。出现三项以上没有理由的默认做法，通常说明方向还停在默认模板，应回到方向卡重新确定主构图和主视觉，而不是逐个替换装饰。

上面有几项能从页面样式里直接查出来：眉标、单侧色条、渐变字、卡片套卡片、表情符号图标、英文大写标签。截图工具每次截图都会查，结果在输出的“默认做法提示”里，见 工具。这些条目只靠眼睛过，常常漏掉，所以先处理提示，再用眼睛过其余各项；提示清零不等于这一节过了。

细节

结构和主视觉定下来以后，逐项过一遍这些模型不会主动做的小事；单个细节单独修，不为修一个细节改动整体结构。

粗粝一端的方向同样讲究细节，只是讲究的方式不同：套印错位、毛边和颗粒要有意为之、方向和幅度一致，不能和随手没对齐混在一起；用代码画这些质感的做法见 点缀与特效。下面的形状与表面偏向精致一端，粗粝方向按自己的质感取舍；文字、对齐、状态和资源两端都适用。

形状与表面

• 嵌套圆角要同心：内层圆角约等于外层圆角减去两者之间的内边距，内层不大于外层；硬边方向（rounded-none）则完全不用圆角，依靠 0.5px 或 1px 细线划分边界。
• 阴影用两层叠成：一层贴近、较实的接触阴影，一层远而淡的环境阴影。阴影颜色带一点背景的色相，不用纯黑；同一层级的阴影保持一致。
• 高分屏上的细分隔线用 0.5px 或半透明色；边框和阴影不同时给重的。
• 压在图像上的文字，靠图像本身的安静区域和局部遮罩保证对比，不给整张图盖浓重渐变。

文字

• 中文正文字距保持 0。展示字号可以收紧，字越大越可以收，但要看实际字形不碰撞；全大写的英文小标签加 5–10% 字距。
• 中文用全角标点，引号用“”。行首不出现句号、逗号和右引号，行尾不出现左引号和左括号，可以用 line-break: strict；浏览器支持时用 text-spacing-trim 做标点挤压。
• 中文和英文、数字之间的间距全页一致：支持时用 text-autospace，否则统一手写空格，不要一处有一处没有。
• 数字用等宽数字；单位比数字小一级或更淡；金额、时间、百分比的格式全页统一，例如 1,238、+1.83%、16:12。
• 标题按语义断行，不留孤字，见 视觉语言 的“可读性是交付门槛”。

对齐

• 圆形、三角形图标按视觉中心做光学微调，不按外框对齐。
• 大号标题的字形自带左侧空隙，要微调 1–3px，让它看起来和下方正文左对齐。支持时可用 text-cap-trim 或通过微调消除字体内置的行间空白（Cap-Height 对齐），让展示大字与网格线紧密贴合。
• 数字列右对齐，小数位对齐。
• 按钮文字在按钮里视觉居中；中文字形偏上或偏下时微调。

状态

• 每个可点元素都有悬停、按下、焦点、禁用和处理中状态；状态变化不改变尺寸、不挤动旁边内容，处理中的按钮保持原宽度。
• 焦点环、文字选中色、输入光标、复选框和单选框的强调色跟随方向，不留浏览器默认的蓝色。
• 深色或有色背景上的滚动条调成协调的颜色；可滚动区域的边缘用淡出提示还有内容。
• 空、加载、错误状态和默认状态一样用心，不是事后补的一行灰字。

资源

• 位图按 素材 的“文件与说明”导出，图标用矢量。
• 图片加载前先占好比例，不让布局跳动。
• 网页标题、标签页图标和分享图与方向一致。

在 100% 和 200% 缩放下各看一遍关键区域（无法用浏览器缩放时，用宽高减半、像素比为 2 的视口截图代替）；把局部截图放大，检查对齐、边缘和标点。

克制：大胆在结构，克制在细节

大胆和克制作用在不同层面，并不冲突。结构上大胆：首屏骨架、主视觉和一处结构性突破可以走得很远。细节上克制：其余元素安静下来，让主角成立。每一屏只有一个主角，可以是一张图、一句巨大的标题或一个图形装置，长页各段可以交接主角，拼贴时整片拼贴就是主角；其余的字号、颜色、容器和动效都为它退后。满屏都在出招，和满屏米色卡片一样，都是没有取舍。

克制要落成预算，和调性里“克制”的翻译一致：

• 一页的字号 4–6 级，字重 2–3 种，字族不超过 2–3 个（展示、正文，可选等宽）。级数少，级差要大。
• 强调色约占画面 10% 以内，只用在主动作、选中和需要立刻识别的状态上。
• 划线、倾斜、跨界、手写批注这类特别处理，一页一处，放在最能放大北极星的位置。
• 先做准三处基本动效，让它们彼此呼应；装饰性的动效一页最多一两处，见 动效。

预算是起点。方向明确需要更多时，例如拼贴或喧闹的调性，写出理由即可。

克制不等于极简。用户选定强烈风格后，减法应让风格更集中，不把它变成通用白底模板。删完以后主角要变大、变强；画面只是变空，说明删错了地方。减法删的是装饰和重复，不删帮助判断的信息：工具与决策界面里，对象名称、比较依据、当前选择和下一步动作是主角，删掉它们界面不会更高级，只会失去用途。删减后检查用户是否还能确定当前对象、理解代价、发现主动作和判断结果；不能用更少的文字代替更清楚的结构。

删元素

逐项判断元素是否帮助识别、判断、操作、反馈，或对选定品牌与情绪有明确贡献。贡献说不清时尝试移除，对照前后效果。优先删重复标题、无语义徽章、多余容器和竞争性装饰。一张合适的图、几句必要文字和一个动作就能承载页面时，让它们成立；不为“完整”追加卖点卡片、数据徽章和重复的行动按钮。

删文字

模型爱加字：每个区块都是“眉标 + 标题 + 副标题”三件套，内容页顶部还要加一段解释这个页面是干什么的，每个字段下面一行提示，“点击下方按钮开始”这种描述界面的话，“新”徽章、脚注，以及解释图片内容的图注。

• 逐句问：删掉后，用户是否仍知道眼前是什么、能做什么？画面、位置或交互已经表达了的，就删。
• 用展示代替描述：能放产品真正交付的东西，例如一份真实的结果或一段真实数据，就不写一段话去形容它。
• 一个区块只讲一件事：一句标题，最多一段说明。需要第三层文字时，通常说明这个区块该拆开或删掉。
• 不加眉标：眉标是区块大标题上面那行小字，例如标题“让协作更简单”上方的“FEATURES”。它和标题说的是同一件事，说不出它怎样服务北极星就删掉。区块确实需要一个名字时，名字就是标题本身；或者放进版面结构里，例如页边栏、表头、导航，用正文字号写，可以带一个真实的数，例如“作品 27 个”。名字用产品自己的说法，和导航用词一致。
• 叙事页面的字数预算：首屏标题约 15 字以内，说明约 40 字以内，按钮 2–6 字，空状态一句话加一个动作。产品界面不按字数砍，按“逐句问”删重复和解释。
• 做完后删一轮：逐区块尝试删掉 30–50% 的文字，只把删了会影响理解的放回来。
• 不先加字再调淡：不先添一堆小字，再用降低对比来补救。设计理由、源文件名、组件术语和装饰性英文留在说明或按需展开处。
• 必须留下的：错误原因、单位、选择范围、陌生动作的标签、风险和后果。

编辑剩下的文字

文案需要一次主动编辑：用用户会说的话重写空泛口号，保留具体对象、动作和结果；可以继承用户原有的表达。不要把第一轮生成的文案当作不可改变的内容，也不要为了补满版式编造信息。

模型写的中文常带翻译腔，交付前逐句改掉：用分号把两件事串成一句；“交代当前情况”“带读者回到”“保持内容明确”这类书面套话；标题写成字段名，例如“受控勾选”“禁用等级”。改成一句只讲一件事的短句，标题用人会说的短语，例如“生成中锁定”“回到最新”。

模型写的文案往往是整页最弱的部分。标题、主张和按钮这类关键文案，优先用用户提供的原话，或交给用户亲自改写；交付时标出哪些仍是模型写的占位文案。