产品设计学习笔记-界面交互#

概念#

概念	关注	产出
交互设计	用户如何完成任务	任务流、状态机、控件行为、反馈规则
UI	界面元素的呈现	布局、颜色、图标、组件视觉
UX	用户跨触点的整体体验	旅程图、体验指标、服务蓝图
信息架构	信息如何组织与被发现	导航结构、分类体系、搜索与标签

设计路线#

一套完整的界面交互设计方法论可以分为六步：

场景定义：用户是谁，在什么场景下完成什么任务
平台对齐：这个产品运行在哪个平台，应遵守什么平台规范
信息组织：信息、功能、流程如何被用户理解
交互设计：用户如何操作，系统如何反馈
可用性与无障碍校验：是否好用、可控、可恢复、所有人都能用
实验验证：设计是否真的改善了行为和结果

定义场景#

首先从用户场景出发，找出交互重点

问题	说明
用户是谁	新手、专家、运营、审核员、管理员、普通消费者？
任务是什么	查看、填写、筛选、决策、审批、配置、生成、纠错？
场景是什么	高频/低频、移动/桌面、紧急/非紧急、轻任务/重任务？
成功标准是什么	完成率、耗时、错误率、转化率、满意度？
约束是什么	平台、权限、合规、无障碍、技术、数据质量？

比如同样是“筛选器”：

如果是移动端电商筛选器，重点是快速缩小范围；
如果是数据分析后台筛选器，重点是精确组合条件；
如果是审核系统筛选器，重点是高频操作和状态识别；
如果是 AI 搜索筛选器，重点是用户是否理解 AI 的推荐和过滤逻辑。

平台规范#

不同平台有不同的用户习惯

Apple HIG：Apple 平台习惯#

适用 iOS、iPadOS、macOS、watchOS、visionOS 产品

参考链接：Apple Human Interface Guidelines ↗

Material Design：判断组件、层级和动效是否统一#

适用 Android、Web、跨平台产品

参考链接：Material Design ↗

Fluent / Carbon：复杂生产力产品#

适用 B 端后台、管理系统、办公协作、数据看板、工作台

参考链接：Fluent 2 Design System ↗

WCAG / ARIA：无障碍底线#

所有产品要适用于包括视障、色弱、运动障碍、认知障碍、临时受限用户，以及屏幕阅读器等辅助技术能不能正确理解

参考链接：WCAG 2.2 ↗、WAI-ARIA Overview ↗

信息架构#

信息架构要设计好

维度	要解决的问题
分类	哪些功能应该放在一起？
命名	用户是否看得懂这些词？
导航	用户如何找到目标？
层级	什么是主信息，什么是辅助信息？

信息结构应该服务用户任务，而不是服务系统模块或组织分工。

可以用以下方法验证信息架构：

方法	用途
内容盘点	梳理页面里到底有什么信息和功能
卡片分类	看用户会如何给信息分组
树测试	验证用户能否通过导航找到目标
任务路径走查	检查信息顺序是否符合用户完成任务的顺序

交互原则#

当信息结构清楚后，才进入具体交互设计。

这里可以把 Norman、Nielsen、Shneiderman、Fitts、Hick 整合

参考文献：

Norman 设计原则 / 《The Design of Everyday Things》相关说明： Norman Design Principles - Interaction Design Foundation ↗

Nielsen 十项可用性启发式原则： 10 Usability Heuristics for User Interface Design - Nielsen Norman Group ↗

Shneiderman 八项黄金法则： Shneiderman’s Eight Golden Rules - University of Maryland HCIL ↗

Fitts’ Law： Fitts’ Law - Interaction Design Foundation ↗

Hick’s Law： Hick’s Law - Nielsen Norman Group ↗

Microsoft Human-AI Interaction Guidelines： Guidelines for Human-AI Interaction - Microsoft Research ↗

Human-AI Interaction Guidelines 论文 PDF： Guidelines for Human-AI Interaction - PDF ↗

Google PAIR People + AI Guidebook： People + AI Guidebook - Google PAIR ↗

生成式 AI 应用设计原则论文： Design Principles for Generative AI Applications - arXiv ↗

Norman#

界面首先要让用户知道“我能做什么”。

检查问题：

按钮看起来像按钮吗？
可点击元素是否有明显线索？
图标含义是否清楚？
用户是否理解这个开关、筛选器、弹窗会影响什么？
当前页面的规则是否符合用户预期？

如果用户总是问“这个能点吗”“点了会怎样”，通常是示能性、意符或概念模型出了问题。

Fitts’ Law#

用户知道能点之后，还要容易点。

检查问题：

重要按钮是否足够大？
移动端主操作是否在易触达区域？
图标按钮是否有足够热区？
危险操作是否和常用操作距离太近？
表格里的行内操作是否太小太密？

高频、重要、正向操作应该更容易触达；低频、危险操作应该更谨慎。

Hick’s Law#

用户面对太多选项时，决策会变慢。

检查问题：

页面是否一次性展示太多入口？
筛选项是否过多？
设置项是否没有分组？
弹窗里是否有多个主按钮？
是否可以使用默认值、推荐项、分组、搜索、渐进式披露？

不是功能越多越好，而是当前任务下的相关选项越清晰越好。

Nielsen#

好的交互不是等用户犯错后再提示，而是提前降低犯错概率。

检查问题：

输入格式是否提前说明？
错误是否能在提交前发现？
不可用操作是否被禁用并说明原因？
危险操作是否有确认？
批量操作是否展示影响范围？
是否有预览、草稿、撤销、回滚？

这里的方法论是：

优先预防错误，其次帮助恢复，再次报错

Nielsen / Shneiderman#

每个用户操作都应该有反馈。

检查问题：

点击后系统是否有 loading？
保存后是否显示成功？
上传是否有进度？
AI 生成是否显示正在处理？
批量任务是否有结果摘要？
异步任务是否能查看状态？

Shneiderman#

用户需要有掌控感

检查问题：

是否能撤销？
是否能退出？
是否能返回上一步？
是否能恢复误删？
是否能取消正在进行的任务？
是否能修改 AI 生成结果？

越是高风险操作，越要给用户掌控权。

测试和数据验证#

常用方法：

方法	适合验证什么
可用性测试	用户能不能完成任务，哪里卡住
认知走查	新用户是否能一步步理解流程
A/B 测试	两个方案哪个行为结果更好
日志分析	用户真实使用路径、流失点、误操作

对应指标可以是：

筛选完成率
筛选耗时
字段误用率
清空重选次数
查询后修改筛选次数
用户满意度

AI 产品#

ai产品之后另出一篇学习笔记