视觉设计原则：用于 UI、AI 图片和品牌视觉的实用诊断法

视觉设计原则不是一组用来背诵的术语，而是一套让画面更容易理解、更容易行动的判断规则。它们决定观众先看哪里，哪些元素应该被看作同一组，文字和图形是否有足够对比，空间是否给了信息呼吸感，以及整个视觉是否像一个有意识的系统。

中文设计资料里常见两种入口：一种把问题讲成“亲密、对齐、重复、对比”的四大原则，另一种沿用 UX 里的比例、视觉层级、平衡、对比和格式塔。两者都能用，但如果读者正在修一个页面、封面、AI 图片或品牌图，真正重要的不是数字，而是先判断哪个视觉问题正在阻碍理解。

快速答案：不要背固定数量，先拿它诊断问题

视觉设计原则的第一个用途，是把“感觉不对”翻译成可执行的设计问题。NN/g 用比例、视觉层级、平衡、对比和格式塔解释 UX 里的视觉可用性；Figma 把对齐、色彩、留白、重复、运动、邻近和统一也纳入平面设计语境；Toptal 明确提醒设计领域并没有一个统一数量；Berkeley Library 则从艺术与设计教育角度讲平衡、强调、运动、节奏、比例、变化和统一。

这些差异不需要被消灭。它们说明原则不是考试答案，而是不同场景下的诊断工具。一个后台页面需要用户马上看出主指标和异常；一张封面需要滚动中被识别；一页幻灯片需要把结论放在图表之前；一张 AI 生成图需要为文字、主体和背景留出明确关系。

真正高效的修法，是一次只处理最影响理解的一类问题。很多“高级感不够”的页面，其实不是缺少质感，而是主信息不够突出、控件没有分组、说明文字对比太低。先修这些，视觉自然会变干净。

先看信息和层级，而不是先换配色

开始改图时，先问这张视觉服务哪一个动作或理解。层级是把这个答案变成视线路径的原则：标题、主图、数字、按钮、警告、辅助说明都应该有不同的视觉权重。权重可以来自大小、位置、明度、颜色、粗细、密度和留白，不只是“把字放大”。

用编辑稿件的方式看层级：三秒内能不能说出主信息？眼睛知道第二步去哪里吗？次要内容是否真的退后了？主按钮是否像下一步？如果答案是否定的，先调整层级，不要急着换颜色。所有元素都加粗，等于没有元素加粗；所有卡片都高饱和，读者只能靠文字自己判断优先级。

用分组、留白和平衡把关系讲清楚

分组是最快告诉读者“哪些东西属于同一件事”的方法。邻近让相关内容靠近，对齐让它们共享结构，距离让不同任务分开。很多中文页面喜欢用线条和色块切分，其实更稳定的做法是先建立空间规则：组内近一点，组间远一点，重要组周围有足够空气。

Carbon 的 spacing 指南 把空间看作层级和关系的系统，而不是装饰。一个标签和输入框距离很近，用户会认为它们有关；两个设置组之间有更大空隙，用户会理解任务已经变化。平衡则是视觉重量的分配，重量可以来自面积、颜色、图片、阴影、动效或信息密度。

当画面散乱时，按这个顺序处理：先圈出回答同一读者问题的元素；把它们靠近；对齐边缘、标签和控件；让组间距大于组内距；删除和空间系统打架的装饰线；最后再检查主信息是否仍然最醒目。这个顺序能避免把关系问题误判成配色问题。

对比要制造重点，也要保证读得清

对比负责让差异可见。它可以是明暗、大小、粗细、饱和度、纹理、运动或静止的差异。视觉传播里的对比有两个任务：帮助读者找到重点，并让内容足够可读。WCAG 2.2 的 1.4.3 对比度标准 对普通文本和大号文本给出了最低要求，这不是审美风格，而是可用边界。

好的对比是有选择的。主动作、异常状态、关键数据和正文可读性应该获得更强对比；说明、背景、辅助标签和次要装饰应该退后。如果所有元素都用最高对比，界面会变吵；如果关键内容没有足够对比，画面再克制也会让用户费力。

重复、节奏和统一感让视觉像一个系统

重复把孤立选择变成规则。字体级别、间距、图标风格、圆角、图表颜色、图片裁切和按钮状态都需要有可学习的模式。节奏是这些重复造成的视线流动，统一感则是读者觉得整张视觉来自同一个系统。

统一不是所有东西都一样。仪表盘可以重复卡片结构，同时让告警卡片更醒目；幻灯片可以重复标题位置，同时使用不同图表；品牌视觉可以重复色彩和字体，同时更换主图。关键是变化要有理由，而不是每个模块都临时决定。

AI 图片也要用同一套原则审核

AI 视觉最容易犯的错，是第一眼有冲击力，但放到封面、广告、UI 概念、海报或品牌图里不能用。审核时不要只问“好不好看”，而要问“它是否快速、清楚、安全地传达了这一个用途”。原则语言能把模糊反馈变成下一轮提示词。

如果只是想在浏览器里快速比较几种图像方向，可以把 yingtu.ai 当成测试入口，把结果拿来对照这份原则清单；但不要把它写成官方模型归属、价格、速度、额度或生产稳定性承诺。若任务已经进入完整 AI 设计画布流程，可以再看 Claude Design 指南，但判断标准仍然先来自层级、分组、对比和统一。

不同载体上的检查重点不一样

同一套原则在不同载体上的压力不同。UI 页面先服务任务；缩略图先服务滚动识别；幻灯片先服务结论路径；品牌图先服务可识别和可信；AI 图片先服务可修改的提示词方向。

发布前的最终检查

如果一张视觉同时失败多项，不要一起修。先修信息和层级，再修分组和对比，再修留白和节奏，最后修统一。这样能避免最常见的浪费：在视觉还没讲清楚前就开始打磨风格。

实际复盘时，最好把检查拆成三个层次。第一层是任务层：这张图要让读者理解什么、点击什么、比较什么，还是记住什么？第二层是结构层：标题、主体、证据、说明、按钮、图例是否有清楚顺序？第三层才是表现层：颜色、质感、插图、动效和风格是否服务前两层。很多团队直接从表现层开始讨论，于是会议里会出现“更高级”“更年轻”“更有科技感”这类无法执行的意见。把话题拉回任务层和结构层，视觉修改才会变成可验证的动作。

还可以把一张视觉按失败风险分成三类。第一类是理解失败：读者看不出主信息、关系和下一步，这时先修层级和分组。第二类是阅读失败：文字、标签、图例、按钮或数值看不清，这时先修对比、字号、背景隔离和可访问性。第三类是信任失败：元素风格混杂、间距无规则、图标和插图不像一个系统，这时再修节奏和统一。三类失败不要混在一起讨论，否则很容易用品牌色去解决层级问题，或用插图风格去掩盖信息不清。

对于非设计师，最有价值的能力不是一次说出所有术语，而是把反馈变成“先改哪里”。例如，看到一张 AI 生成的产品海报，不要只说“主图不错但感觉乱”。可以说：主体和标题权重接近，先让标题区更安静；卖点和按钮距离太远，先把它们放进同一行动组；背景纹理抢了文字，先降低背景细节并提高文字区对比。这样的反馈能直接进入下一轮提示词，也能直接进入设计修改单。

在 UI 场景里，原则还要落到状态和动作上。一个设置页如果主开关、次级选项、警告说明、保存按钮都用同样的字号和颜色，用户会先读文本，而不是先理解结构。更好的做法是让主开关拥有最清楚的视觉权重，把依赖它的选项缩进或归组，警告只在真正有风险时使用强对比，保存按钮保持稳定位置。这样用户不需要记住规则，也能从视觉关系里读出操作顺序。

在缩略图或社交图里，层级和对比会压过细节丰富度。小尺寸下，复杂背景、太多图标、长句标题和多种装饰字体会一起损害识别。先让主词变短，让主体和背景分离，再用一两个重复的形状建立节奏，通常比继续增加素材更有效。对于幻灯片，类似的原则会变成“结论先于图表家具”：标题说结论，图表只支持这个结论，轴线、网格、图例和注释都不能抢走主读法。

品牌视觉则需要多一个约束：不能为了某一张图的冲击力破坏长期识别。颜色、字体、图形语言、照片处理和图标风格要重复到足够稳定，读者才会相信这是同一品牌的表达。统一感不是把所有内容做得无聊，而是让变化发生在一个看得见的规则里。到了这一步，风格讨论才真正有意义，因为信息、层级、关系和可读性已经被确认。

如果把这些原则用于团队协作，可以把反馈写成四段：观察到的视觉症状、它对应的原则、建议的第一步修复、修复后的通过条件。比如“价格卡片不清楚”不是完整反馈；更好的写法是“推荐卡片和普通卡片层级接近，对比不足；先让推荐卡片拥有唯一强调色和更清楚的标题权重；通过条件是读者不读正文也能看出推荐选项”。这种写法能减少审美争论，也能让设计、运营和 AI 视觉生成使用同一套语言。

同样的方法也适合检查图表和信息图。很多图表的问题不是数据错，而是结论没有被视觉化：标题只描述主题，图例离数据太远，颜色过多，关键拐点没有标注，轴线和网格比结论还醒目。按原则修复时，先把标题改成结论句，再压低非关键线条，把关键数据点、异常或对比组用一致的标注方式突出。这样图表不只是“有数据”，而是能直接支持读者判断。

移动端还要特别注意空间和触达区域。屏幕越小，越不能把桌面端信息按比例塞进去。主操作区、错误提示、筛选器、输入框和底部按钮需要重新建立层级，而不是单纯缩小字号。组间留白、按钮周围空间、状态说明的位置，都会影响用户是否敢继续操作。移动端读不清的视觉，通常不是缺少装饰，而是层级和空间没有按小屏重做。

可访问性也应该提前进入设计审核。低对比的辅助文字、过小的图例、只靠颜色区分的状态、压在图片上的长句，都会让一部分读者直接丢失信息。检查可访问性不是让视觉变得保守，而是确认更多人能按同样的顺序读懂同样的意义。只要把对比、字号、标签和替代意义作为早期原则来审，后期就不必用临时补丁修复已经成型的版式。

内容运营同样需要这套原则。一个系列里的封面、横幅和信息卡如果每次都换字号、颜色角色和图片位置，用户就很难把它们识别成同一组内容。反过来，标题长度、强调色、主体位置和辅助标签形成稳定规则后，新增内容也能被快速理解。更新频率越高，原则越不是限制创意，而是避免每次从零判断的共同语言。

最终批准时也要留下条件，而不是只写“可以”。更好的结论是：主信息三秒内可见，相关元素能被读成一组，文字对比和字号足够，下一步动作明确。这些条件能让人审、设计修改和 AI 重生成都使用同一标准。

如果以后要扩展成模板，也应该保留这些判断条件，而不是只保留外观样式。

规则还必须能被复盘，并能指导下一次修改。

常见问题

这些原则到底解决什么？

它们解决的是注意力、关系、可读性、空间、节奏、一致性和可用性问题。不同教材会给出四个、五个、七个或十多个名称，但真正要保存的是判断方法：先看用户或观众应该理解什么，再看视觉是否帮助他完成这个理解。

应该使用几个原则？

不需要先决定固定数量。实战中更有用的是一个工作集合：信息、层级、分组、对比、留白、节奏、统一和可访问性。遇到具体视觉时，找到最影响理解的一两项先修。

哪个原则最重要？

多数界面、海报、封面和 AI 图片首先卡在信息和层级。只要观众不知道先看哪里，颜色、质感和装饰都会变成噪音。层级明确以后，分组和对比通常带来第二轮明显提升。

视觉设计原则和平面设计原则一样吗？

高度重叠。平面设计更常谈构图、平衡、对齐、重复、色彩和统一；UI 和产品视觉会进一步把这些原则连接到任务完成、可读性、状态、交互和可访问性。

它们如何用于 UI 设计？

在 UI 里，原则决定用户先看到什么、哪些控件属于同一组、哪个动作是主动作、错误状态是否醒目、文本是否能读、界面是否可预测。好看的界面如果不能支持操作，仍然是失败的。

它们如何帮助 AI 图片提示词？

它们把“更专业一点”变成可执行的修改要求，比如焦点不清、背景抢文字、相关元素没有分组、对比不足、留白太少、风格不统一。这样的反馈比盲目重生成更稳定。

视觉很好看也可能失败吗？

会。图片可以很精致、很有氛围，却让主信息不清楚、文字难读、元素关系混乱或重点错误。视觉设计判断的目标不是漂亮本身，而是清楚、可用、可信。