移动端屏幕小、触控操作、光线多变、单手操作是底层约束，视觉传达本质是快速传递信息、降低识别成本、引导用户行为，下面分成基础通用原则 + 移动端专属落地要点：
一、对比原则（最核心）
用差异建立层级，让用户一眼分清主次
字号对比：标题 / 正文 / 辅助文字形成明显梯度，不要一堆文字大小接近
色彩对比：主色、辅助色、中性色区分；文字和背景满足无障碍对比度（正文≥4.5:1，大标题≥3:1）
权重对比：粗体 / 常规 / 细体、虚实、明暗、填充 / 线框区分元素重要性
大小对比：核心操作按钮更大、次要控件缩小
移动端坑：不要靠颜色单独区分信息（色弱用户识别困难，要搭配形状、文字、图标）
二、对齐原则
建立秩序感，减少视觉思考负担
统一对齐规则：左对齐（长文本、列表）、居中（弹窗标题、标签）、右对齐（金额、时间数字），不要随意混排
视觉对齐优先于像素对齐：图标、图形要视觉重心对齐，而不是单纯边框对齐
所有控件、卡片、文字块在网格内排布，推荐 8pt 网格系统
三、重复原则
建立产品识别一致性，降低学习成本
重复组件样式：按钮、输入框、标签、卡片、提示弹窗样式全局统一
重复视觉语言：图标风格（线性 / 面性统一）、圆角、阴影、间距、动效规范
重复色彩规则：同类型信息永远用同一个颜色（成功绿、警告红、链接色固定）
移动端价值：用户熟悉一套视觉符号后，不用每次重新理解页面
四、亲密性（分组 / 就近原则）
有关系的元素放一起，无关元素拉开距离
信息就近打包：标签 + 输入框、标题 + 描述、头像 + 昵称，内部间距＜组与组间距
用留白、分割线、卡片做分组，不要密密麻麻堆砌内容
适合移动端：单手浏览时，信息块清晰，不会分不清哪段属于哪一项
五、层级原则（移动端重中之重）
视觉要告诉用户：先看什么、再看什么、最后做什么
一级：核心目标（主按钮、核心标题、关键提醒）
二级：补充信息（描述、选项、次要操作）
三级：弱信息（备注、时间、版权、辅助小字）
手段：明暗、大小、颜色、位置、留白、阴影、透明度
禁忌：一屏多个强视觉焦点，用户不知道该点哪里
六、留白（负空间）原则
小屏幕最容易忽略，留白不是空白，是信息的呼吸空间
避免元素贴边、挤在一起，触控元素之间留安全间距，防止误触
留白用来衬托核心内容，突出主行动点
不要为了塞更多信息压缩留白，拥挤页面识别效率会大幅下降
七、可识别 & 易读原则（移动端专属）
字体：移动端正文最小字号一般不小于 14sp，优先无衬线字体；避免浅色细字放在复杂背景上
图标：表意直观、简化造型，不要细节过多（小尺寸下糊掉）；图标配合文字，纯图标容易歧义
可读性优先于花哨：渐变、纹理、复杂装饰会干扰阅读，页面复杂场景尽量克制
八、视觉引导原则
顺着用户自然视线流动（移动端大多是从上到下、F 型阅读）
方向引导：线条、箭头、卡片排布、图片视线引导用户看向行动按钮
位置引导：拇指热区（屏幕中下区域）放高频操作；顶部放导航、标题
不要强行扭转用户阅读顺序，避免反向引导
九、简约克制原则
移动端空间有限，遵循 “一屏一重点”
去除无关装饰，每一个视觉元素都要有传达目的
减少色彩数量：一套界面主色 1 个，辅助色 1–2 个，其余用中性灰
减少特效：过多阴影、渐变、闪烁动效容易视觉疲劳，还影响加载性能
十、适配与容错视觉原则
适配不同亮度：强光下也能看清文字，不要依赖低饱和度浅字
状态可视化：按钮置灰、加载态、选中态、错误态要有明确视觉变化，用户知道当前系统状态
触控目标视觉暗示：可点击元素要看起来 “能按”，区分纯展示文字和可交互元素
十一、无障碍视觉传达（现代 UI 必备）
支持深色模式，色彩体系两套都经过校验
不只靠颜色传递状态，搭配形状、文字、图标
避免频闪、高对比闪烁元素，预防视觉不适
快速总结落地口诀
对比抓重点、对齐建秩序、重复强统一、分组靠亲密、留白防拥挤、层级分主次、引导顺视线、简约保可读。
本文原创作者：易君召，详见：https://www.yijunzhao.cn/authors/yijunzhao，转载请注明出处。
原文链接
欢迎访问 小易撩挨踢