为什么人人都会混淆
「UI/UX」被当作一个词说出口的次数太多了，以至于大多数人以为这是同一份工作。其实不是——而这种混淆并非无害。一个创始人如果把真正的「UX」问题误认为「UI」问题，就会雇一位视觉设计师去修一个其实出在结账流程里的问题，把预算花在一个更好看的按钮上，然后眼睁睁看着同样比例的用户在同一个步骤流失。解决方案从来不是视觉层面的，而是结构层面的。知道自己真正面对的是哪一种问题，决定了你是在花钱，还是在浪费钱。
开门见山的定义
UI —— 用户界面
你能看到并能实际操作的一切：按钮、颜色、字体、图标、间距、动效。UI是表层——是人与系统之间的视觉与交互层。它是你能截图记录下来的工艺。
UX —— 用户体验
一个人为完成某件事而经历的整个旅程——有多容易、需要多少步骤、是否合乎逻辑、这个人是感到自信还是迷茫。UX是结构性的——你无法截图记录它，只能通过完成或放弃的任务来衡量它。
区分两者的8个维度
关注点
UI
产品看起来和摸起来的感觉——颜色、字体、间距、图标。
UX
产品对使用者而言是如何运作的——从头到尾的整个旅程。
回答的问题
UI
「这看起来对吗？」
UX
「这说得通吗？」
交付物
UI
设计稿、样式指南、组件库、像素级精确的界面。
UX
用户流程图、线框图、用户画像、旅程地图、可用性测试报告。
专业工具
UI
Figma、色板、图标集、字体比例。
UX
用户访谈、旅程地图、A/B测试、数据分析、卡片分类法。
成功的衡量标准
UI
视觉一致性、品牌契合度、审美吸引力。
UX
任务完成率、任务耗时、流失率、满意度评分。
何时介入流程
UI
较晚——一旦流程被验证，UI才为其赋予外观。
UX
较早——在任何一个像素存在之前，UX就已决定了流程本身是什么。
「好」是什么样子
UI
一个看起来可点击的按钮。一致的间距。连贯的视觉语言。
UX
一个只需3步而非8步的结账流程，因为没有人需要停下来思考。
各自的失败方式
UI
一个漂亮却没人知道怎么用的界面——全是风格，没有路径。
UX
一个功能完美却像2004年产品的表单——全是逻辑，没有打磨。
自认为能分辨？来试试。
这里有6个真实的产品决策。针对每一个，判断它改进的是UI还是UX——然后查看解释。无需注册，不做追踪，只需六秒钟诚实面对自己到底有多懂这个区别。
结账按钮是紫色的，带圆角，鼠标悬停时有细腻的动画。
它们不是对手——而是彼此需要
把令人惊艳的UI包裹在一个令人困惑的流程外面，只会让这种困惑看起来更昂贵。把出色的UX埋藏在笨拙、不一致的界面之下，会让人们不信任一个其实能用的东西。真正能带来转化的网站和产品，从来不是二选一——它们是通过UI的工艺（建成后看起来和感觉如何）来表达UX的决策（要构建什么、按什么顺序、用多少步骤）。两者中的任何一个，都无法修复另一个搞砸的问题。
需要一个UX和UI真正协调一致的网站吗？
联系我们 →About
Patrick Chen —— Sublimearts.io背后的独立开发者和网页设计师。人们让我「改进UI」的次数，远比真正问题出在UI上的次数要多。通常问题都出在流程上。这是我希望能直接发给别人看的文章，而不用每次都重新解释一遍。