色彩理论与配色

色相是色彩的相貌名称，如红橙黄绿，决定画面的色彩倾向与情绪基调；明度是色彩的明暗程度，同一色相加白加黑或不同色相本身的明暗差异都属明度，它决定层次与空间感；饱和度是色彩的鲜艳与灰浊程度，控制画面的张力与质感。三者在设计中分工明确：信息层级主要靠明度对比建立，弱对比会看不清，这是可读性的底线；色相用来区分功能与情绪，比如品牌主色与功能色的选择；饱和度负责氛围，高饱和强烈刺激，低饱和高级克制。实操中常见的错误是只调色相不调明度，导致画面花而乱。正确的检查方法是暂时把设计稿转灰度，若灰度下层级依然清晰，说明明度结构成立，再上色相才有秩序。

互补色是色相环上相距一百八十度的两个颜色，如红与青、黄与紫，对比最强，互相衬托鲜明夺目，适合营造冲击力、强调关键行动点，但直接大面积对撞容易刺眼，常用做法是调整两者的面积与明度，或降低一方饱和度。类似色是色相环上相邻的色相，如黄、黄橙、橙，过渡自然、和谐统一，适合营造安静高级的整体氛围，是界面设计最常用的策略，缺点是对比弱，需要靠明度差补足层级。三角配色是在色相环上取等距三色，如红黄蓝，既丰富又有平衡感，适合需要多角色、多板块区分的运营页面与插画。实际项目通常以一到两个主色加中性色为基础，用上述关系色做点缀，避免颜色平均使用导致主次不清。

60-30-10 是经典的空间配色比例法则，指主色占约百分之六十、辅助色约百分之三十、点缀色约百分之十。在界面设计中通常对应背景与大面积底色占六成，卡片、次级模块与信息区块占三成，品牌强调色、按钮与关键行动点占一成。它有效的底层原因是视觉需要秩序与焦点并存：大面积统一色提供稳定与统一感，中等面积制造节奏与分组，小面积高对比色因为稀缺而获得注意力，天然成为视觉入口与转化点。反过来，如果各颜色面积接近，视线无处停留，页面显得嘈杂廉价。使用时要注意比例是指导而非精确数字，核心是建立明确的主从关系；点缀色超过两成通常就失去强调作用。面试中能结合案例说明如何用一成强调色提升转化，是加分点。

对比度不足最直接的问题是可读性下降，弱视用户、老年用户以及在强光下使用手机的用户都可能看不清文字，造成信息传达失败甚至操作错误。其次是合规风险，WCAG 无障碍标准要求正文对比度至少达到 4.5 比 1，大字号标题至少 3 比 1，不达标的产品在政府采购与出海场景可能被直接否决。第三是层级混乱，弱对比的次要文字若与正文拉不开，界面会显得含糊。检查方法一是用 WebAIM 等对比度检查工具输入前景与背景色值直接计算比值；二是建立设计系统时预先定义达标的一组文字色阶，规定正文、次文、禁用态各自用哪一档；三是在极端场景验证，比如开启手机最高亮度放在阳光下查看。设计时应避免用纯灰淡字追求所谓轻盈感，可读性永远优先于风格。

扩展色板一般分四步。第一步定中性色阶，从近黑到近白建立八到十个灰阶，注意让灰阶略带主色倾向以保持整体协调，用于文字、边框、分割线与背景。第二步扩展主色梯度，把主色按明度与饱和度生成约十个档位，如五十到九百的色阶，分别服务悬停态、按下态、浅背景、深文字等场景。第三步定功能色，成功、警告、错误、信息四类状态色要在色相上与主色拉开距离，且各自通过对比度检查。第四步做验证，检查任意文字色与背景组合的对比度、色盲用户下功能色是否可区分，以及深色模式下的对应色阶。产出的色板要写进设计系统的色彩规范，注明使用场景与禁忌，比如强调色不得用于大面积背景。这样扩展出的色板既有品牌识别度又覆盖全部界面场景，是设计系统色彩模块的标准做法。