UI/UX设计

UI UX 设计比听起来更务实，做对了能省下真金白银的时间。无论你是零起点，还是想优化现有方法，掌握基础都是迈向精通的第一步。这份完整指南会带你走一遍你需要知道的一切：从基础概念，到专业人士每天都在用的进阶策略。

UI 与 UX：治本之见，化解真实设计争论

每个项目会议最后都会卡在同一场僵局上：某位利益相关者说"这个按钮感觉不对劲"，开发问"间距的唯一事实源到底是哪个"，却没人说清问题是出在视觉还是结构。这份困惑不怪你——行业把两个词塞进一个职位头衔好多年，结果就是一个模糊的技能描述，招进来的只是会给屏幕换颜色、却讲不清用户流程的人。务实的出路是把 UI 和 UX 当成两件必须协同的不同工作，并且在你打开设计工具之前就清楚谁掌握哪个决策。更细的工作流分工可以看我们那篇UX 设计基础。

UX 管什么：流程、结构，以及"要完成的任务"

用户体验在像素之前就开始了。它是研究、是信息架构、是引导用户从"我要做 X"到"X 做完了"的那一串屏幕顺序，中间不能有死胡同或惊吓。如果你在定义用户画像、绘制旅程图、决定某一步该放单页还是分步引导、或者在推理出错之后该发生什么，那你做的是 UX 工作，哪怕还没有任何设计文件。UX 决策是可测的，而不是凭口味。你可以量化一次改动后任务是否更久、用户是否点错元素、或是否在同一个步骤反复流失。这套可测性正是把 UX 工作"大声做出来"的最有力理由：它把"我觉得结算很乱"变成"44% 到过地址页的用户在那里流失，去掉重复字段后降到 18%"。

一个有用的心智模型：UX 是地图和路线；UI 是路标和路面。一个把你带到目的地，另一个让你路上不绊倒。

UI 管什么：视觉层级、间距与可识别性

界面设计是把结构变可见的技艺。它决定对比度、字体排印、间距刻度、颜色语义和"可点击感"——一个按钮看起来能被点、一个禁用态读起来像"现在不行"、一个焦点环在提示键盘导航。当 UI 把一个混乱的流程变成一目了然的流程，那不是魔法，而是符合用户预期的、一致的视觉语法。

杠杆率最高的 UI 技能听起来很无聊：间距和对比度。一套一致的间距刻度——通常以 8 像素或 4 像素为基数——让产品在谁都没读一个字之前就显得很有章法。想系统入门这套视觉基本功，可以读我们的UI 设计入门，它会带你从设计规范一路讲到交付。同样的规则也适用于更小视口的移动端 UI 设计。文本上达到 WCAG AA 的对比度（正文 4.5:1、大字号 3:1）不是加分项，而是决定了在明亮地铁车厢里有人能不能用这屏幕。用 Stark、WebAIM 对比度检查器、Figma 内置无障碍插件，几分钟就能抓住绝大多数违规。更完整的清单在Web 无障碍基础。

设计工具对比（哪个贴合你的工作流）

工具主要关乎协作。一个独行设计师发静态效果图，以上随便哪个都行；一个需要实时反馈、共享组件库、给开发交付的团队，几乎总是落到 Figma，因为它的浏览器协作和插件生态太难被超越。预算为零又想开源无订阅，Penpot 是靠谱的免费选择。你不该做的是追着工具跑而忘了做真设计决策——工具只是媒介，不是技能本身。

做一个开发真的会用的设计系统

设计系统不是一文件夹截图；它是一组具名 token——颜色、间距、圆角、字号刻度——设计和代码都以同一个名字引用。当你把某个间距 token $space-4 命名成"16px"，开发导入同一个 token，一处改动处处生效，不用人手一个个重推。一致性正是团队采用系统的初衷，但当系统"文档重、更新轻"时采纳就会失败。

三条规则让设计系统活下来。第一，先从 token 开始，而不是组件；把颜色和间距这几个基础量达成一致就能起步。第二，像代码一样做版本管理，改动是可评审的 diff，而不是对共享文件的一次隐形的编辑。第三，做成增量式——新组件按需添加，而不是第一天就为了迎合死板的规范重设所有屏。跳过 token 直奔像素级组件库的团队，通常两季度内就会弃用系统，因为没人愿意维护一堵规范墙。

无障碍是设计要求，不是 QA 的事后补救

无障碍决策就是设计决策，而且越早做越便宜。键盘焦点顺序应跟随视觉阅读顺序，也就是你的布局结构和 tab 顺序一致。表单字段要有绑定的 label，让屏幕阅读器报出用途，而不是只说"输入框"。交互元素要有可见焦点指示，而颜色永远不该是错误或状态变化的唯一信号——除了变红还得加图标或文字。

最常见的错误在交付前用清单跑一遍就能修：标题层级跳级（h1 直接到 h3 缺 h2）、图片缺 alt 文字或装饰图误用空 alt、以及模态框困住键盘焦点或不播报。用 axe 或 Lighthouse 自动扫只能抓大概 30% 的问题，其余要靠纯键盘导航加屏幕阅读器的手动测试。把这次手动通过排进时间线里，否则无障碍会偷偷变成上线当天的兵荒马乱。

在写代码前就用原型循环抓出问题

原型是 UI 和 UX 达成一致的地方，因为你终于把两者一起测了。低保真线框确立布局和流程；可点击原型加上交互，让用户（或利益相关者）体验整个序列，而不是读一堆描述。这个循环短而狠：做一个版本，找三五个人测，看他们在哪儿犹豫，修一个问题，再来一遍。

早测、便宜地测。一张纸面草图或带快捷键提示的 Figma 原型，就能揭露出一个原本要花开发好几天才能解开的混乱流程。目标不是验证你的设计很棒，而是找到它不是的部分。当你看着用户点击时，你不再为自己的设计辩护，而是开始"看见"它——这个转变是通往更好决策最快的路。

设计技能在职业路径里放哪

好消息是：UI/UX 是可以靠刻意练习学会的，而且这个领域奖励"能拿得出手的作品"，胜过一柜子课程证书。如果你在纠结先学什么，先学会搭可用流程（UX），再去打磨视觉（UI），因为一个流程顺畅、视觉普通的方案，转化远好于一个好看却没人走得通的流程。对想往前后端都沾一点的路径，先补一份Web 开发入门，或从基础编程打底（比如Python 入门），都会让你的设计落地得更有底气。随着进阶，学着把事情交接给开发：给图层命名、按正确分辨率导出、标注 hover 和禁用等状态、把间距 token 写进文档。从"只交付文件的 designers"变成"为团队赋能的设计师"，正是让你被录取、被留住的原因，它和你把能力变成展示品的途径很搭配；那是另一篇文章的方向。

你不需要流利写代码，但对 HTML 和 CSS 的结构有感觉，会让你的设计被实现得更忠实。走一条视觉加前端技能结合的路径，学会浏览器如何排布页面，会让你成为更实用的设计师、少产生不现实的效果图、说得上开发者的语言。开始小、持续迭代、用真人用户测试，而不是冲着一次完美首发。

延伸阅读：。

常见问题

UI 和 UX 设计到底有什么区别？

UX（用户体验）关于产品的整体结构与流程——人如何从目标走到完成任务、出错后发生什么、这个序列是否讲得通。UI（用户界面）是让这套结构变得可见的视觉层——字体、颜色、间距、对比度、按钮与控制件的样子。你可以有"UX 好但 UI 朴素"的成品，也可以有"UI 很美但 UX 很差"的成品，这正是两者必须一起设计的原因。

高保真效果图之前，应该花多少时间在低保真线框上？

大约把设计时间的前三分之一花在流程和低保真结构上，在投视觉之前先用一个用户或利益相关者测这套结构。确切比例取决于功能体量，但一条管用的规则是：你能不改一处重画就改掉流程。如果只是调一下间距就得重排布局，说明你高保真得太早；如果在确认导航前就追像素级视觉，你很可能在打磨一个用户走不通的东西。

当 UI/UX 设计师需要会写代码吗？

不需要写生产代码，但对 HTML、CSS 以及布局原理有基本认知，会显著改善你的设计和交接质量。你会少画不现实的效果图、说得了开发者的语言、知道哪个交互便宜（一个 hover 态）哪个贵（复杂自定义动画）。很多设计师发现学会够用的 HTML/CSS 搭一个简单静态页，就让他们成为高效得多的协作者。

新手该从哪个工具开始？

从 Figma 免费层开始。它免费、浏览器端跑、有海量社区学习资源，而且是专业团队用得最广的工具，技能能直接迁移。新手要忍住不一次学一堆工具；挑一个，学它的组件和自动布局，然后做真实项目。Framer 和 Penpot 值得知道，但对第一个工具，免费 Figma 在成本、社区、就业匹配上是最优平衡。