怎么做得好看 · Arkk 的笔记

让用户感知到的内容清晰、协调，具有适合场景的表达品质。有视觉载体时，这包括真正的美感，而不只是“能看清”；没有视觉载体时，不为了“好看”硬造界面，检查相应的表达节奏与一致性。先保证任务成立，再决定怎样呈现。

先组织表达，再按媒介落地

不同媒介共享三个判断：用户首先需要感知什么、相关内容是否成组、重要性是否表达一致。设计面向用户的结果，不把内部全部过程等权倾倒给人。

媒介	怎样落实	不应机械套用
图形界面、可视化或文档	用空间、排版、颜色和图形表达层级与气质	所有产品都做卡片、仪表盘或苹果风格
命令行文本	稳定标题、对齐和简洁摘要；详细信息按需显示，窄终端下仍可读	用颜色作为唯一状态提示；给机器消费的输出夹装饰和进度动画
对话与通知	先给结果、重要例外和下一步，长内容按意义分段，语气与场景一致	每轮都长篇复述、堆标题图标，或为简短隐藏风险
语音等非视觉反馈	顺序清楚、节奏适当，重要内容可重听或换方式获取	直接照读大表格，或依赖颜色、空间位置传达含义
后台自动化	报告先给整体结果和待介入事项，再列受影响对象与详情入口；重复通知合并，保留重要变化	为每个后台阶段补一个可视界面

有视觉载体时：确定表达方向

先核对已有约定与使用场景

查看已有页面、设计系统、真实内容和目标视口。复刻先分清必须保持什么、允许调整什么；截图只能证明静态外观，不能证明动效时序。平台规范按目标平台使用，例如 Apple 的组件、材质和手势不直接套到 Web，也不意味着所有产品都应模仿苹果外观。

优先沿用已有品牌约定，复用项目已有的组件、图标与样式，保持尺寸、线宽、颜色和对齐一致。图标、插画或 Emoji 的使用依据品牌语气、语义清晰度和平台表现确定。没有约定时，用少量参考明确希望的气质，提出字体、色彩、形状、间距与图像处理方案，用真实内容比较和调整。例如，要表达“沉稳、信息密度适中”，可以尝试稳定网格、克制的强调色和清楚的文本层级。

使用方式也影响表达：长时间工作的编辑界面需要安静、稳定且有效率；短暂出现的对话框需要入口醒目、动作明确；后台功能主要让状态可知，而非争夺注意。同一产品也可能包含这些不同的使用方式，不必强行归为一类。

用可比较的样张选定方向

先区分正在比较什么：交互方案比较信息组织和操作方式，尽量保持视觉一致；视觉方向比较字体、色彩、构图气质和图像表达，保持任务、内容与已确定的信息结构一致。同一结构上的不同视觉表达也可以是有效候选。

已有设计系统或明确方向时直接沿用。需要选择新方向时，用同一任务、代表性内容和目标视口制作少量命名样张，通常 2–3 个即可。每个方向提供可见样张、气质描述、关键设计值和推荐理由，做到足以判断差异。

用户选择后围绕一个方向完善体验原型；用户已授权设计方选择时，说明推荐依据并推进。行为线框和交互试作可以在此前用于验证任务组织，产品逻辑原型无需视觉样张。

需要参考资料时，可使用项目素材、平台指南或已安装的风格检索工具，如 ui-ux-pro-max。工具为候选提供素材，方向依据产品场景和实际内容判断。

将方向变为可执行约定

将选定方向落实为可复用的颜色、字体、间距、组件和图像处理约定，规模随任务需要确定。具体方向体现产品的气质，新增样式有明确用途。使用目标平台的标准组件名称，帮助设计与实现保持一致。

产品文档维护业务规则，设计说明维护呈现与操作的取舍，原型展示当前体验。阶段衔接见 product-design 的 methods/03_设计交付与原型.md。

视觉层级：先关系，后细节

决定	基本做法	反向检查
阅读顺序	先确定第一眼应看到的内容与主要操作，按语言阅读方向和使用场景安排	装饰或次要指标是否比任务更抢眼？
分组与对齐	按用户任务或内容用途划分可辨认的区域；逻辑相关的内容靠近并对齐，组内间距小于组间，用留白或必要分隔帮助快速定位	是否每项都套卡片和边框，反而看不出区域与分组？
包含与从属	逻辑上属于同一对象或类别的内容，在相应标题下用层级、缩进或共同区域表达归属；视觉层级与逻辑层级一致	子项是否看起来与父项平级，或像属于另一个区域？是否为了表达包含而层层套框？
主次强调	大小、字重、颜色按重要性分配；给主要操作明确优势	是否所有按钮和标题都在争“最重要”？
一致性	相同用途沿用相同样式与位置，优先复用少量样式变量	相似控件是否因逐页拼接而字号、圆角、间距各异？
可操作性	链接、按钮、选中态符合平台惯例；必要时加文字标签	静态装饰像按钮，真正操作却像正文吗？

例如，一屏里“导入文件”是主任务，“查看格式说明”是辅助动作，不应做成两个同样醒目的主按钮。相关错误应贴近输入，不靠页面另一端的红色卡片传达归属。

多级导航应让当前栏目、所在页面与可选子项的关系可辨认。例如，用对齐与共同背景关联当前栏目及其子导航，再用图形或文字标记当前位置。

逐项审视文字、线条、色块和组件的作用：传达信息、支持操作、表达关系，或塑造符合场景的美感与品牌气质。删除后若不损失这些作用，就优先删除；必要内容过于抢眼时，降低其强调程度。

排版与响应式适配

使用少量字族，靠字号、字重和间距建立标题、正文、辅助信息的关系；正文避免过细字重和过低对比度。长说明拆成有意义的小标题、短段落或列表，删除不提供新信息的欢迎词与操作训诫，但保留必要的条件和风险。

先用真实长标题、长名称、空内容和大量内容检查，不只用理想短文案。窄屏和大字号时允许换行、增高、减列或横排改纵排，保持内容与操作的顺序。不要通过无限缩小字体解决拥挤。

检查缩放与大字号下的主要任务是否仍可完成：Web 可检查约 200% 文本放大或浏览器缩放；原生应用检查目标平台提供的大字号与显示缩放机制。关键信息不应仅靠省略号隐藏；确需截断时，提供键盘和触屏也能使用的完整内容入口，不只依赖悬停提示。

色彩与状态

先定义用途，再选色值：正文、次要信息、背景、主操作、链接、成功、警告、错误等。语义一致比“每个状态配一种新颜色”更重要；品牌色不应与危险提示混淆。

错误、选中和禁用等不能只靠颜色区分，要结合文字、图形或结构。项目支持深色外观时分别检查；半透明、背景图和材质效果需按实际叠加结果检查对比度，不能只验纯色样板。

Web 普通文本可按 WCAG 2.2 AA 的 4.5:1 检查；大文本通常为至少 18 CSS pt 常规字或 14 CSS pt 粗体字，阈值为 3:1，适用定义与例外以 W3C 为准。小字加粗不自动适用 3:1；图标和控件另按相应非文本要求核对，不能拿文本数值包办全部检查。WCAG 对比度定义与例外

有交互控件时：可操作，也要可感知

视觉图标大小不等于点击范围。小图标可通过内边距扩大命中区，相邻目标留出间距，按目标平台和输入方式核对尺寸，不把 Apple 的 pt 参数直接换成 Web px。

检查焦点是否清楚、键盘顺序是否与任务顺序一致、图标按钮是否有可理解名称；不把悬停当作触屏和键盘用户获取信息的唯一方式。选中、加载、禁用、错误要能辨认，禁用原因需要时应能获得。

使用动效时：解释变化，不制造等待

每个动效说清：什么触发、哪个对象变化、起止状态、何时结束、连续或反向操作怎样处理。反馈简短准确，高频操作不为展示效果额外等待；等待真实任务时不要伪造进度。

按实际效果补足行为，而不只写效果名称：

页面或状态转场说明前后状态怎样衔接，中断、连续操作和返回后停在哪里。共享元素转场还需明确前后元素的对应关系及位置、尺寸变化。
滚动动效先区分“进入视口时触发”与“跟随滚动进度变化”。前者说明触发边界、是否重复和离开后是否重置；后者说明起止区间、进度映射、反向滚动与区间外状态。
平滑滚动先判断是否确需替换原生行为，并保留键盘与导航操作；视差效果要检查不同移动速率是否干扰阅读。

例如，不只写“标题滚动出现”，而是说明：“标题首次进入视口时由透明变为可见，之后保持可见；减少动态效果时直接展示。”未经实测的时长和位移标为建议参数。

尊重减少动态效果的偏好：去掉不必要的循环、弹跳与大幅位移，采用静态变化或较弱过渡。取消或中断后界面仍应落在有效状态，重要信息不能只靠动画传达。

怎样验证

先在实际媒介中检查：用户能否抓住结果与重点，表达是否一致、是否有冗余噪声？终端检查窄宽度与无颜色输出，对话检查短答与长答，通知检查是否能独立理解。

有视觉载体时，在目标视口、真实内容和关键状态下查看实际呈现：能否迅速找到重点，分组与层级是否清楚，字体和间距是否一致？再检查窄屏、放大、键盘、实际颜色组合和项目支持的外观模式；动效需实际触发、中断、反向测试。

修改组件、名称或导航后，找出它出现的其他位置，在相同视口和对应状态下并排比较。既检查组件本身的样式与行为，也检查它和相邻元素的对齐、在页面中的层级及链接去向。例如，增加展开操作后，要比较它与旁边入口的样式；把列表条目复用到首页后，要重新检查条目标题与栏目标题的层级。共用约定应落实到共用样式或组件中，减少逐页维护的差异。

给用户看有代表性的真实页面，确认气质是否符合产品。分别记录静态呈现、模拟交互与真实运行的验证范围。