名词百科
什么是 UI 设计 / UX 体验设计?
一句话定义
UI 设计关注界面的视觉呈现(色彩、排版、控件样式);UX 体验设计关注用户完成任务的整体感受与路径效率。前者管「看起来怎样」,后者管「用起来顺不顺」。
它到底是什么
两者的分工可以这样理解:UX 决定有几个页面、每个页面上有什么、顺序是什么;UI 决定这些东西长什么样。UX 出错,界面再美也不好用;UI 出错,流程再顺也显得廉价。
在软件项目里,UX 的产出通常是信息架构、流程图、线框图;UI 的产出是视觉稿与设计规范(色彩、字号、间距、组件状态)。两者常由同一人承担,但思考方式不同。
怎么运作的
UX 阶段:用户调研与任务分析 → 信息架构 → 关键流程 → 线框图 → 可用性验证。核心是把「用户要完成什么」翻译成页面与步骤,尽量减少判断与输入。
UI 阶段:视觉风格探索 → 页面设计 → 组件规范 → 标注与切图。核心是让同一套界面在不同页面、不同状态下保持一致。
设计规范:把颜色、字号、间距、圆角、阴影、按钮状态固化成可复用的规则。没有规范的项目,做十个页面会出现十种按钮。
交付:设计稿需要标注尺寸、间距、交互状态、异常状态(空数据、加载中、出错),只给正常状态的设计稿,开发只能靠猜。
容易混的几个概念
- 交互设计:UX 的一部分,专注操作流程与反馈。
- 视觉设计:与 UI 高度重叠,更偏品牌与美感。
- 设计系统:组件规范的体系化产物,包含代码实现。
- 可用性测试:UX 的验证手段,与视觉评审不是一回事。
常见问题
能不能只做 UI 不做 UX?
小项目可以简化,但不能省。没有流程设计的项目,通常会做出「每个页面都好看,但用户走不到最后一步」的产品。至少要明确核心任务的三步路径。
设计稿要交付到什么程度?
至少包含:正常状态、空状态、加载状态、错误状态、极端内容(超长文本、无图)。只给正常态的设计稿,开发会在异常场景上自行发挥,最终体验不一致。
B 前端终端 · 同组词条
微前端微前端是把一个大型前端应用拆成多个可独立开发、独立部署的小应用,再在运行时或构建时组合成一个整体的架构方式。可视化搭建可视化搭建是用拖拽、配置的方式组装页面或应用的技术,用户无需写代码即可完成布局与内容编排。常见于建站工具、活动页生成和后台装修器。SPASPA(单页应用)是页面切换不重新加载文档的前端架构,由 JavaScript 接管路由与渲染;SSR(服务端渲染)是在服务端先渲染出 HTML 再返回,首屏更快且利于爬虫抓取。前后端分离前后端分离是把界面展示与业务逻辑拆成两个独立部分开发的架构方式:前端负责页面与交互,后端提供接口与数据。两者通过 HTTP 接口通信。PWAPWA(Progressive Web App,渐进式网页应用)是在普通网页基础上增加离线缓存、桌面安装入口和消息推送能力的网页应用形态。它仍然运行在浏览器中,不需要应用商店。跨平台开发跨平台开发是用一套代码构建多个平台应用的方式,代表框架有 uni-app、Flutter、React Native、Taro。它降低重复开发成本,但平台差异仍需单独适配。公众号开发公众号开发是在微信公众平台的框架内,围绕图文推送、自定义菜单、用户消息和网页授权等能力进行的开发工作。它属于内容与消息载体,不是应用容器。企业官网企业官网建设是围绕企业展示、品牌传达和获客转化搭建官方网站的工作,通常包含信息架构设计、视觉设计、前端实现、内容管理和基础 SEO 配置。