交互、UI、UX的不同之处

·相辅相成
·交互通常规划整体概念和交互流程，UI通常处理交互过程，UX处理整体的体验感

UX设计师：整体用户体验
用户需求挖掘与探索
产品优化
用户体验感优化
原型验证
数据收集和分析

e.g.无法改变开车八个小时的本质问题，但是可以让八小时的体验优化到更舒适。

UI设计师：可视化处理，重在视觉工作高保真设计
动效设计
图标设计
视觉设计规范
输出物料

交互设计师：产品项目的整体规划，交互流程
产品框架
用户行为
研究结构，操作和交互流程
研究用户需求与产品逻辑的关系

用户研究员：
启发式评估
竞品分析
第三方研究
用户访谈/调查研究用户反馈和结果

提出房子需求的人=产品经理
规划房子布局的人=交互设计师
决定房子外观的人=视觉设计师（UI设计师
真正盖起房子的人=研发工程师

---

设计概念

目标的抽象化和具象化

交互倾向于团队的工作模式。

• 交互设计的注意事项
• 工作模式
• 设计流程
• 产品大局观
• 用户研究
• 设计概念的灵感来源和启发

 

• 设计的未来规划蓝图是什么？
• 现在的解决方案是什么？
• 项目或设计的核心价值是什么？为哪些群众服务？
• 对应的标杆项目是什么？（找竞品项目分析）
• 设计对UCD有什么要求？（User center design围绕用户需求设计）

在界面或者设计中提供什么/不提供什么

过量提供功能，用户反倒会不明所以。收敛收敛表达欲，不要用力过猛。

e.g.抖音的设计非常简单，减少了很多认知负担。碎片化时间用短视频填充，让用户产生了依赖。

从基于理论的知识，经验和常识的混合

---

交互设计

工作流程

发现问题→分析问题→设计方案→推动执行→用户测试→优化

交互的分工很重要。

用户研究&发掘→灵感来源&整合想法→用户画像&故事情节设计→准备工作&故事板→创建原型

普遍使用的方法

用户画像

用户画像指在真实用户数据的基础上创建目标用户模型，它围绕产品进行人群细分，确定项目的核心人群，从而有助于确定项目定位

e.g.虚拟受众群体，类似于真实用户的代表。通常十个人一组总结，创造三个用户画像描述一个问题。不同的虚拟人物，从不同角度同时围绕一个问题。从而完善这个需求，更好的确认项目的定位。

比如虚构一个70岁的老年人，退休教师，喜欢日常出门买菜吃饭。但因为记忆力逐渐衰退需要吃药，经常忘记吃。

故事版

展示产品使用的场景，以镜头的方式展示串联的完整体验。

故事情节设计

体验产品从0到1的体验过程。

用户体验感故事

共情地图

是一种协作可视化工具，通过说、做、想、感四个方面深入了解特定类型用户，以用户的视角体验产品以形成同理心

用户行为旅程图

用户历程

可用性测试

评估设计项目是否落地，是否满足需求。通过用户的使用来评估产品是否满足用户需求的方法。一般会提供专业表格，供使用者填写。

脚本

可能会进行对用户的访谈录像记录之类的。

 

交互倾向于对人。讲故事的方式更容易激发团队对于用户体验的理解，让大家更加紧密地围绕着用户构建清晰的体验设计

一个好的设计从一个好的故事开启！！

更像是产品思维~

---

Donald Norman交互设计原则

重要的七个交互设计原则

Visibility可见性

让用户知道存在交互的机会：引导发现和理解

让它合理地预测将要发生的事情

提供线索和信息，但不要过度，否则会产生认知负担。（尼玛这让我想到p社游戏，而且还不好好做新手教程）也就是用最简单的方式告诉用户该做什么。

良好的可见性意味着有明显的提示和提示，引导用户进行交互，指导他们完成一系列任务，指出哪些可能的操作对他们可用，沟通情况的上下文。（可以参见上文的抖音，简单明了的设计。还有搜索引擎的界面（有一说一感觉现在只有google、bing简洁了，别的多少站点搜索栏下广告啊啊啊））

Visibility prompts and cues可见性和提示

• 他能脱颖而出吗？容易找到吗？
• 颜色的使用——颜色能吸引注意力吗？
• 对比——是否容易看到给定的背景颜色？
• 尺寸——它与界面上的其他元素相比有多大？
• 突出的位置——他是放置在界面的哪里？中心吗？
• 布局/位置是否与类似的界面一致？
• 界面有多混乱？

Feedback反馈

反馈交流了已经做了什么和已经完成了什么，允许这个人继续进行这个活动。对用户行为进行反应。比如点击下载图标，开始下载后，会反馈下载进度；比如点击某个界面，icon变蓝进行反馈，表示正在当前界面。

反馈必须是即时和信息

Constraints限制性

限制可能执行的操作

帮助防止用户选择不正确的选项。

比如插头。通过把手，限制你直接接触金属。

在界面中：通常限制选择。例如，“强制符合特定的格式”，比如macOS界面的灰色选项，购票网站的灰色日期。

限制的好坏。比如TD的交互设计可以限制用户的互动速度，以达到更好的视觉体验

Consistency一致性

比较两个界面/交互元素之间的关系

一致性可以是：

• 外观（看起来一样）
• 使用的视觉隐喻、图标、元素（比如垃圾桶都表示回收站，只是风格有所变动。）
• 完成类似交互所需的步骤，或者标准管理

具有相似行为的组件应该具有相似的外观

• 例如，操作时总是使用ctrl键加上命令的首字母，ctrl+c，ctrl+s
• 具有不同行为的组件应该具有不同的外观

外部一致性意味着你从一个环境中学到的东西会转移到其他环境中=不需要再学习。

内部一致性意味着在应用/技术、协议、图标、元素的放置或者交互过程中始终保持一致，比如设计风格的统一

Affordances（没有统一的意思，但总体来说是感知、启示的意思）

直觉、感知。暗示、启发

比如物理感知。看到椅子，潜意识会想要坐；看到门把手，潜意识会想要往下压开门；看到容器，潜意识会想要可以装载点什么东西。

Anti-affordances反向感知/启发

• 给出启示不要做某事
• 比如某些公共场合的长椅，为了防止流浪者躺下休息设计得很阴间

Mapping映射

好的映射基于Visibility、Consistency、Appropriate use of Gestalt、Principles(还有其他)

好的用户让用户知道在哪里采取行动，做正确的事情。

• e.g.界面上的“转账”出钱了金钱￥符号，“联系方式”出现了📞符号，

两组事物的元素之间的关系。比如按键。

mapping和feedback对比来说

• mapping是深度：重点在强调两者之间的关系。两个元素之间的映射，强调“发送动作”和“发送行为”两者之间的概念关系。
• feedback是宽度：给予操作一个实时的反馈。动了就一定要有信号，表示当前的状态
• e.g.转账1元：“转账成功一块钱”的提示是feedback。成功界面的“查看详情”还有“收款方”和这笔转账有关系，不一定查看，不一定实时，但一定是mapping关系。

控件和显示的设计和布局中的一个重要概念

• 位置和距离
• 连接和相关性。与……相匹配
• 使用户无需记忆就能找出关系

Signifier提示

当可视性失败时，通常需要符号。用来向使用设备的人清楚地传达设备的目的、结构和操作。使人们了解如何正确地使用它。合理使用可以降低使用复杂度。

• e.g.“点击此处”“触摸开始”“推”“拉”“出口”