UI设计常识：从布局到交互，真正好用的界面是这样炼成的

你有没有遇到过这样的界面：按钮挤在一起、颜色刺眼、点完不知道发生了什么？新手设计师往往沉迷于视觉冲击，却忽略了最基本的设计常识——用户真正需要的是清晰的引导和流畅的操作。UI设计不是艺术创作，而是解决问题的手段。如果你正在为界面“好看不好用”而烦恼，下面这5个常识能帮你避开80%的坑。

布局：把信息优先级写在屏幕上

用户扫视界面时，第一眼看到什么？这取决于布局。好的布局不是均匀排列，而是有节奏地引导视线。

1. 明确视觉层级

通过位置、大小和对比度来区分主次。具体做法：

• 重要内容放大或置顶：把核心行动按钮（比如“立即购买”）放在页面中上部，视线自然停留的位置。
• 用留白分割信息：不要把元素挤在一起，留出至少8px的间距，让每个模块自成区域。
• 减少阅读负担：一行文字不超过60个字符；段落之间用标签或分割线隔开，而不是靠文字堆砌。

2. 遵循“邻近原则”

相关的功能放在一起，无关的用间距隔开。例如：搜索框和筛选器相邻，而不要和广告位混在一起。用户不需要思考“为什么这两个东西放在一起”。

色彩与对比：别让眼睛太累

色彩直接影响情绪和可读性。很多界面失败不是因为丑，而是因为看不清。

1. 控制颜色数量

主色+辅助色+强调色，通常不超过3种。用色时：

• 主色占70%：背景、大区块使用低饱和度的中性色或品牌色。
• 强调色只用在关键操作：如提交按钮、链接文字，一次页面不超过2个区域有高亮色。
• 避免大面积纯白和纯黑：纯黑（#000）在屏幕上会引起眩光，改用深灰色（#333）做文字；白色背景用浅灰（#f5f5f5）缓和对比。

2. 满足无障碍对比度

按WCAG标准，正文文字与背景的对比度至少4.5:1，大标题至少3:1。用工具检查，比如Stark或WebAIM。如果色盲用户也能正常使用，你的设计就合格了。

字体：可读性比美观更重要

UI中90%的信息靠文字传递。字体选择直接决定阅读效率。

1. 字号与行距

• 正文至少14px（移动端16px），标题比正文大2-4档。
• 行高是字号1.5倍：比如16px字号，行高24px。太挤或太散都会影响扫读。
• 不要用装饰字体做正文：黑体（无衬线）为主流，比如Noto Sans、PingFang SC。

2. 控制字重

只用Regular、Medium、Bold三种字重。Light太细，移动端看不清；ExtraBold用在少量标题上，过量会显得粗糙。

交互反馈：让每一次点击都有回应

用户操作后，需要立即知道结果。没有反馈的界面就像石沉大海，让人焦虑。

1. 点击反馈

• 按钮状态变化：悬停变色、点击缩小（或颜色加深）、禁用时灰色。用微动效来告知。
• 加载状态：超过300ms的任务必须显示加载指示器（转圈或进度条）。短时任务用Toast提示。
• 错误提示：在输入框下方实时显示，不要等用户提交后才弹出弹窗。用红色标注，并告诉用户“邮箱格式错误”，而不是“输入无效”。

2. 操作确认

风险操作（如删除、提交订单）需要二次确认：弹窗+明确按钮（“确认删除”而不是“确定”）。同时提供撤销机会，比如“已发送，可撤销”在5秒内可点击。

一致性：用户不需要重新学习

整个产品（甚至跨产品）的交互逻辑应当统一。每多一次例外，用户就多一分困惑。

1. 视觉一致性

• 组件样式统一：所有按钮圆角一致，所有图标风格相同（线型或面型，不要混用）。
• 间距体系：设定基础单位（如4px或8px），内边距、外边距都按照倍数使用。
• 颜色语义化：红色始终代表错误/警告，绿色代表成功。不要为“好看”而随便改色。

2. 交互一致性

• 返回方式：全屏页面全部使用左上角返回箭头或手势右滑，保持一致。
• 表单行为：输入后点击下一步自动跳转，还是手动点击？全站统一。

掌握这些常识，你的界面会从“好看但不顶用”转向“好看且好用”。实际项目中，很多团队会建立设计规范或组件库来保障一致性。例如，犀跃公司在为客户做UI设计时，会从布局、色彩、字体到交互反馈制定完整的规范，确保最终交付的界面经得起用户测试。如果你正在打磨自己的设计能力，不妨定期做一次可用性测试——找真实用户操作核心任务，记录他们困惑的地方，然后对照本文的常识进行优化。

设计常识是地基，没有它，再炫的创意也是空中楼阁。下次做界面时，先问自己：用户是否能在3秒内找到想点的按钮？操作后有没有清晰反馈？如果答案是否定的，那就回到常识，重新调整。