惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

Hugging Face - Blog
Hugging Face - Blog
Recent Announcements
Recent Announcements
V
Visual Studio Blog
博客园 - 叶小钗
H
Help Net Security
aimingoo的专栏
aimingoo的专栏
宝玉的分享
宝玉的分享
U
Unit 42
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
F
Fortinet All Blogs
V
V2EX
Stack Overflow Blog
Stack Overflow Blog
WordPress大学
WordPress大学
D
DataBreaches.Net
J
Java Code Geeks
H
Hackread – Cybersecurity News, Data Breaches, AI and More
A
About on SuperTechFans
酷 壳 – CoolShell
酷 壳 – CoolShell
量子位
C
Check Point Blog
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
小众软件
小众软件
Microsoft Azure Blog
Microsoft Azure Blog
M
MIT News - Artificial intelligence

博客园 - ui设计公司兰亭妙微

兰亭妙微设计|APP弹窗设计选型指南:模态vs非模态、阻断强度排序与位置策略 兰亭妙微|用户体验设计实战指南:五要素从战略到表现,UX设计师进阶必读 兰亭妙微 UI 设计|蓝色配色实战指南:3类方案+5套公式,界面高级感速成 兰亭妙微:信息过载时代,争夺用户注意力为何是未来设计的必然趋势 兰亭妙微移动端数据展示进阶:5个实用解法破解小屏表格适配难题 兰亭妙微儿童语言学习App设计白皮书:IP化视觉、全流程闭环与趣味化交互的实战应用 兰亭妙微UI品牌融入白皮书:品牌容器三要素、双图库推导与高频场景落地 兰亭妙微画册设计白皮书:12栏网格、三级信息分层与品牌VI色彩系统的实战应用 兰亭妙微大厂产品细节白皮书:8个高频复用的设计思路与典型应用案例 兰亭妙微UI设计细节白皮书:手势优化、动效点睛与情感引导的实战应用 兰亭妙微形状设计实战指南:从按钮圆角到底纹层次的UI组件规范与品牌识别 兰亭妙微产品趣味设计白皮书:10个案例中的情绪表达、互动引导与视觉创新策略 兰亭妙微B端树形选择实战手册:层级缩进、折叠图标与键盘交互的落地规范 兰亭妙微商业化设计白皮书:四大变现模式、视觉赋能策略与GSM价值量化模型 兰亭妙微产品设计白皮书:七大赛道UI/UX案例中的信息层级、色彩策略与趣味化交互 兰亭妙微设计思维进阶:激进式创新的问题挖掘、逆向思考与可行性评估策略 兰亭妙微移动端设计案例库:Web3、心理健康、B端营销等六大场景的交互逻辑与视觉表达 兰亭妙微B端树形选择设计白皮书:单选节点树、多选节点树与大数据量承载策略 兰亭妙微UI设计进阶:6个产品细节案例中的用户痛点洞察与交互创新方法论
兰亭妙微交互设计术语白皮书:从UI/UX区分到人机交互核心概念...
ui设计公司兰亭妙微 · 2026-04-13 · via 博客园 - ui设计公司兰亭妙微

很多刚入行的设计师常常混淆UI、交互、UX三者的边界,甚至将“画界面”等同于“做交互”。事实上,UI设计聚焦视觉呈现,交互设计制定操作规则,UX体验设计则是统筹全局的顶层设计。北京兰亭妙微设计团队深耕UI/UX设计多年,从三者核心定义与区分方法出发,系统解析交互流程、交互事件、交互方式、交互反馈、交互动效等高频术语,并深入探讨交互可用性这一衡量设计优劣的核心标准,为设计从业者提供一份从基础概念到专业术语的完整交互设计白皮书。

1

二、交互设计核心认知:分清 UI / 交互 / UX

很多刚入行的设计师,容易混淆 UI、交互、UX 三者的边界,先把核心定义与关系理清楚。

2

1. 三者核心定义

  • UI 界面设计:聚焦产品最终视觉呈现,负责排版布局、色彩、图标、视觉样式等落地工作,核心是把界面做美观、规整
  • 交互设计(IXD):制定界面操作规则与功能使用流程,比如外卖下单步骤、提醒设置逻辑、AI 对话交互方式等,核心是让用户会用、好用
  • UX 体验设计:以提升整体用户体验为目标,覆盖需求分析、交互设计、UI 设计、用户测试等全流程,是包含交互与视觉的顶层设计

2. 最简单的区分方法

3

  • 只做视觉落地、满足产品需求 → UI 设计
  • 制定操作流程、定义使用方式 → 交互设计
  • 以体验为目标,统筹视觉与交互 → UX 体验设计

3. 三者关系与工作流

三者并非孤立,而是高度关联、相互影响:

4

  1. UX 包含交互与 UI,先定交互方案,再做 UI 视觉是标准工作流;
  2. 交互逻辑直接影响用户体验与 UI 布局,UI 设计也必须适配交互操作;
  3. 好设计要兼顾操作流畅视觉协调,不能顾此失彼。

4. 交互设计的交付与工作场景

5

  • 核心产出:线框图 / 原型图,配合流程连线、逻辑备注说明交互规则;
  • 常见误区:不必死磕高保真可交互原型(Axure/Figma 动效),核心是输出清晰可落地的方案
  • 职场现状:简单需求可在 UI 设计中同步完成交互;复杂功能 / 逻辑(尤其 B 端)必须独立做交互设计,减少改稿、提升效率。

三、交互核心术语扫盲(一文看懂)

1. 基础概念类

6

  • 人机交互(HCI):人与机器 / 软件的所有互动行为总称,开关机、点击、输入、鼠标操作等都属于此,界面交互是其子集。
  • 交互设计(IXD):特指软件界面的操作规则与流程设计。
  • 交互界面(UI):可触发操作、获得反馈的可视界面,纯静态图片 / 视频不属于交互界面。
  • 交互原型:分静态(线框图,表达逻辑)与动态(可操作演示,用于验证)两类。
  • 交互文档:记录项目交互逻辑、规则、细节的团队协作文件,用于信息同步与存档。

2. 流程与行为类

  • 交互流程(User Flow):用户完成一个目标的完整步骤,如首页→选品→下单→支付的全路径。
  • 交互事件:用户单次操作 + 系统反馈的完整过程,包含触发、行为、反馈、动效,是 Figma 等工具的交互基础单位。
  • 交互方式(Trigger):界面预设的触发规则,移动端以手指操作为主(点击、长按、拖拽、重压),PC 端以鼠标 / 快捷键为主。
  • 交互操作(User Action):用户实际做出的操作行为,与 “交互方式” 匹配才能正常触发功能。
  • 交互反馈(Action):用户操作后系统给出的响应,如页面跳转、弹窗关闭、支付成功提示等。
  • 交互动效(Animation):反馈的视觉动画形式,如页面滑入、弹窗弹出、点击动效等。

3. 评价与体验类

    • 交互体验:用户使用功能时的操作感受,仅聚焦产品交互环节,不含定价、客服等外部因素。
    • 交互可用性(Usability):衡量交互是否好用、易上手的核心标准,决定设计方案的优劣。