名词解释教学工作区 · 课程 0007 · 形态 对比组 · 约 5 分钟 · 前置:0001 · CLI / TUI / GUI · 2026-10-01
UI 与 UX:眼前这一层,和走完的这一段
你能做到:听到一句抱怨,先说出它是在说眼前这一层还是走完的整段路;
再顺口答出这件事该谁去做 —— 视觉设计师,还是产品设计师和用户研究员;以及它会在哪一步露出来。
1 | 定义
两个词盯的是同一个产品的两个位置:一个盯此刻眼前这一层,一个盯从想用到用完的整段路。分开记:
- ① UI(User Interface,用户界面)
用户直接看见、直接操作的那一层:屏幕上的控件、文字、图标、配色,以及点下去之后立刻给出的反馈 —— 它只对当下这一屏负责。
就是餐厅的装修和菜单排版:桌椅干不干净、菜名一眼看得清、招牌亮不亮 —— 站着不动就能看见的那部分。
- ② UX(User Experience,用户体验)
一个人从打算用它、到用完它、直到事后的反应,这整段过程里的全部感受:好不好找、几步做完、出错能不能退回来。
就是从进门、看菜单、点单、等菜,一直吃到结账走人的这一整套 —— 哪一步卡住,你记住的就是那一步。
2 | 它们解决什么麻烦
两个词面对同一件麻烦:一个东西能不能用、好不好用,不能只靠"我觉得行"。说这句话的人往往是做它的人,不是用它的人。
- ① "好用"不给判据,就没人替它负责。于是把它拆成能数出来的事:几步做完、错几次、多久完成、能不能退回来 —— 这一边是 UX。
- ② 做出来得有人看得懂、点得动。控件在哪、字够不够大、点下去有没有回话;一次没交代清楚,用户第一步就走不下去 —— 这一边是 UI。
- ③ 两者不是同一件事,也不能互相顶替。面做得再精致,流程里有坑,照样办不成事;流程设计得再顺,面上一塌糊涂,用户第一步就卡住。
- ④ 它容易被当成口味。好不好看争得起来,好不好用却没人去量;于是同一处反复返工,每换一个经手人重新吵一遍。
3 | 特征矩阵
五列都是能当场回答的问题,不是"它是什么"。横着读一行,词基本就定了。
| 名词 |
盯的是不是看得见的东西 |
主要靠什么手段做 |
什么时候介入 |
谁来做 |
出了问题怎么发现 |
| UI |
是:控件、文字、颜色、间距 |
视觉稿、组件规范、设计系统 |
设计阶段动手,改版时再动 |
视觉设计师,前端照稿实现 |
看着别扭:不齐、看不懂、对不上 |
| UX |
不是:它管整段过程,不落在某一个像素上 |
用户研究、任务流程、可用性测试 |
从立项一直管到上线之后 |
产品设计师、用户研究员 |
用不下去:找不到、填不完、退不回来 |
"盯的是不是看得见的东西"这一列最先分开两个词;最后一列兜底 —— 看着别扭归 UI,用不下去归 UX。
4 | 各自怎么做
UI 这一边,交付的是"这一屏长什么样"。界面可以长成命令行、全屏文本界面或图形界面,三种形态的界面规矩并不一样(CLI / TUI / GUI);图形界面里的 UI 活儿最重,具体是这几件:
- ① 栅格与间距。按 8pt 栅格(尺寸都取 8 的倍数)定一套间距刻度,对齐靠刻度说话而不是靠眼睛;同一种元素在全站用同一个间距。
- ② 配色与对比度。正文与背景的 对比度(contrast)有硬门槛:WCAG 的 AA 级要求至少 4.5:1,大号文字可放宽到 3:1 —— 颜色是核对出来的,不是随手挑的。
- ③ 组件状态。默认、悬停、按下、禁用、加载中、出错,每种状态都要画出来;只给"正常那一版",剩下几种实现的人只能自己编。
- ④ 可访问性(accessibility)。于是键盘一路能走通、焦点看得见、图标旁配文字、图片写替代文字 —— 这些都能核对,不是偏好。
UX 这一边,交付的是"这条路怎么走"。
- ① 任务流。把用户想办的事拆成一条流程:先做什么、要填什么、在哪一步会犹豫;写下来才看得出多出来的那两步。
- ② 信息架构(information architecture)。内容怎么分类、菜单上写什么名字、藏深还是放浅,决定别人找不找得到;卡片分类、树测试是常用手段。
- ③ 可用性测试(usability test)。找几个真实用户做同一件事,记下完成率、出错次数、用时和卡住的位置 —— 这是把"好不好用"变成数字的一步。
- ④ 错误恢复。出错时给人退路:撤销、重试、自动存草稿;报错要说清下一步怎么办,而不是甩一串代码。
交付物也不同:UI 交设计稿加组件规范(颜色、字号、间距写下来,前端照着实现),UX 交流程图、线框图(wireframe)、可点原型(prototype)和一份研究结论。
5 | 各自的代价
- ① 只顾 UI,会做出"好看但办不成事"的东西。留白精致,主操作却藏在角落;配色讲究,对比度却不够;动效堆多了,首屏更慢、低端机上更卡 —— 而慢和卡本身也是体验的一部分。
- ② 只改 UI,改不掉流程里的坑。数据不对、响应太慢、退款要等三天,换十版配色也办不成事;判据根本不在这一层。
- ③ UX 研究花时间也花钱。招募、访谈、一轮可用性测试常常按周算;而且结论是概率性的:这一轮没踩到的坑,下一个用户换个用法就可能踩到。
- ④ 过度研究会耽误上线。每件小事都先调研一遍,版本就出不去了;文案措辞、按钮顺序这类判断,上线后看真实数据往往更快。
- ⑤ 改流程常牵动多个系统。流程一动,后端接口、数据模型、客服话术、帮助文档都得跟着改 —— 远不是前端这一层能收尾的。
6 | 区分使用场景
拿到一句需求或一句抱怨,先看它说的是哪一段,再决定谁去动手:
- ① 只有一屏文案和几个按钮 —— 改的是这一屏长什么样 → UI。间距、对比度、按钮状态先摆平。
- ② 要走完多步流程(注册、下单、退款、开票) → UX。先看这条路走不走得通、能不能少两步,再谈每一屏好不好看。
- ③ 对比度不够、字号太小、键盘走不到 → UI。它同时拖累整段体验,但判据落在页面本身,改的是样式与结构。
- ④ 转化率上不去、客服反复接到同一类投诉 → UX 为主。先找流程里的坑,别急着换配色。
- ⑤ 大改版,流程和界面一起重做 → 两者一起动,但有先后:先定流程,再定界面。顺序颠倒了,界面画完流程又改,前面的活全返工。
一句话收口:问眼前这一层就是 UI,问整段走完就是 UX。两者不对立 —— 界面做砸了,体验一定好不了;界面做得无可挑剔,体验仍可能不及格。
7 | 常见误解
- ① 「UI 就是美工。」美工只是其中一部分:对比度、间距刻度、组件状态、键盘可达都能核对,不是口味。把它当美工,结果是为字体吵半天,却漏掉"点按目标太小"这种硬伤。
- ② 「UX 就是想得周到。」周到是结果,不是方法。UX 有手段(用户研究、信息架构、可用性测试),也有指标(完成率、出错次数、用时);只靠"替用户着想",等于没有依据。
- ③ 「把 UI 做好就等于 UX 好。」UI 是必要条件,不是充分条件:界面挑不出毛病,可库里根本没有用户要的那条数据,整段体验照样不及格。
- ④ 「可访问性是给少数人做的额外版本。」键盘能走通、对比度够,对手抖的人、强光下的手机、临时腾不出手的人都有效;它是所有人的下限,不是另做的特殊分支。
8 | 练习
三个情境,每题四选一;选完立刻看到解释。选项是 UI、UX、两者都有、两者都没有。
1. 每个页面看着都干净利落;可提交订单时被要求重填一遍地址,还得重新选一次收货时间,最后放弃了。
对。每一屏都挑不出毛病,是走完整条路才发现要重填 —— 坑在多出来的那两步上,归 UX 管,也只能靠走完流程或用可用性测试发现。
2. 浅灰小字压在米色底上,低视力的人读不出来;用键盘按 Tab,也看不出焦点停在哪一行。
对。对比度和焦点样式都是这一屏上的事:WCAG 的 AA 级要求正文对比度至少 4.5:1,焦点要看得见。它确实拖累整段体验,但判据落在页面本身,改的是样式,不是流程。
3. 结账页要调整:按钮位置要落进 8pt 栅格、对比度要达标,同时还想确认改完能不能少一步、付款更快完成。
对。落栅格、够对比度是 UI;少一步、更快完成是 UX。大改版两件事一起做,但顺序不能颠倒:先定流程(几步、放哪儿),再定界面(间距、颜色),否则界面画完了流程又改,前面的活全返工。