QER's Space

Appearance

大四上·人机交互 ​

更新: 2021-12-28 18:16:16

什么是人机交互？ ​

（1）人机交互是一门跨学科的学科（工程学、计算机学、心理学、平面设计学等）。

（2）它涉及系统的设计、评估与实现。

（3）同时考虑了人的需求、能力和自身局限性。

（4）目的是让用户安全、高效、有效、愉悦地执行任务。

human 在人机交互中的三种角色以及这些角色给人机交互设计带来的挑战 ​

【要掌握】 人的能力 - 可以是 感知器 - 认知器，在设计和评估方面都有要求，无关，细节的感知、行动、等等   human.pdf

（1）感知器。用户通过视觉、触觉、听觉等对周围环境进行感知，因此在交互设计中要考虑人生理局限性，比如避免使用过饱和的颜色，文字排版方式要符合人的阅读习惯等。

（2）解释器。用户首先对感知的信息记忆，之后根据自身认知对信息进行解释。因此设计中要考虑人的认知水平，比如避免让用户记忆过多信息，考虑不同受教育层次的用户等。

（3）环境中的执行者。用户根据解释做出相应的回应。设计中要考虑用户和执行环境，比如人可以移动的速度、文件背景等。

可用性(Usability)原则、界面设计原则 UI Design、 ​

【了解】 可用性原则，三个分类，每一类都有很多原则 4-usability

（1）可用性指的是在某一特定的环境下，用户可以通过机器或系统来高效、有效、愉悦地完成某一特定的任务。

（2） 它包含三个层次：Meta-display level、Display Layout、Element level。

（3） 它包括：易学习性、灵活性、鲁棒性等。

易学习性：

– 可预测性 – 可综合性（比如移动文件） – 熟悉性 – 通用性（UI Developers guidelines） – 一致性 (interacting, output, screen layout)

– Predictability – Synthesizability – Familiarity – Generalizability – Consistency

灵活性：

– 初始对话框 – 多线程 – 任务迁移（spell-checker 代替用户） – 可替代性 （many ways to do）– 可定制性

– Dialog Initiative – Multithreading – Task migratability – Substitutivity – Customizability

鲁棒性：

– 可观察性 – 可恢复性 – 响应性 – 任务一致性

– Observability – Recoverability – Responsiveness – Task Conformance

Affordance 以及生活中常见的两个例子。 ​

（1）功能可供性，指一件物品实际使用方法与通过感知被认为的使用方法相符。主要通过功能可见性来实现。

（2）比如通过在门上安装门把手，可以告诉用户这是一扇门，同时指导用户以什么样的方式打开门。或者水龙头设计成带螺旋的圆形可以指导用户以旋转的方式打开水龙头。

UCD (User Centered Design)、UCD的步骤 ​

（1）UCD是一种以人为中心的设计方式，在设计过程中充分考虑了用户体验，强调用户优先，

（2）步骤：1定义上下文；2描述用户；3任务分析；4功能分配；5系统布局/基础设计；6模型；7可用性测试；8迭代“测试-重设计”；9更新与维护

[交互设计](https://zh.wikipedia.org/wiki/%E4%BA%A4%E4%BA%92%E8%AE%BE%E8%AE%A1)[学习曲线](https://zh.wikipedia.org/wiki/%E5%AD%B8%E7%BF%92%E6%9B%B2%E7%B7%9A)
[用户交互界面](https://zh.wikipedia.org/wiki/%E5%9B%BE%E5%BD%A2%E7%94%A8%E6%88%B7%E7%95%8C%E9%9D%A2)[软件开发者](https://zh.wikipedia.org/wiki/%E8%BB%9F%E9%AB%94%E9%96%8B%E7%99%BC%E8%80%85)

​

视觉设计中的 CRAP 原则 ​

https://www.zcool.com.cn/article/ZMzg5ODIw.html

（1）对比Contrast，使不同的事物与众不同，带出主导元素，忽略小元素，创造活力

（2）重复Repetition，在整个界面上重复设计，一致性，创造unity

（3）对齐Alignment，视觉上连接元素，创建视觉流

（4）亲密Proximity，相关元素成组，无关元素分离

Direct Manipulation ​

笔记：https://zhuanlan.zhihu.com/p/112954252

**定义：**界面元素的直接操控、语法与语义通过象征的映射（即实际显示出来的行为和操作的含义）、界面元素的反馈、可视化的界面元素和操作方式

五种基本的交互风格：

  1. Direct Manipulation 2. Menu Selection 3. Form Filling 4. Command Language 5. Natural Language
1640675663422-b042f7f2-d0b8-4a3f-9f8e-d67aa984f1bf.png

三项原则**：**可视、实时反馈、由行为代替规则

遵循

一致性

让经常使用你产品的用户可以使用快捷键

提供有意义的反馈

告知状态

提供简单的错误处理

允许轻松地进行撤销操作

让用户有掌控感

减少短期记忆负载

————————————————

原文链接：https://blog.csdn.net/mystonelxj/article/details/90171603

类似文章：http://www.woshipm.com/pd/973962.html

Multitouch 对 ui 设计新的挑战

两种硬件实现方式：光学处理、投射式电容触摸屏 Projected Capacitive Touch。

存在的问题：精度（触控面积小，手指粗）、手势记忆负担

Human Info Processor (HIP) 的模型 ​

五个流程

– Perceptual

– Cognitive

– Motor

– Working memory

– Long-term memory

Interaction Cycle ​

用户感知 -> 思维建模 -> 用户行为 -> 输入设备 -> 输出设备 -> 用户感知

1640678593324-ea236be6-eb12-4f8f-8d0a-aac7b199c55c.png

Hicks law: 菜单越多越慢

Fitts law:

Power law: 练得越多找到的速度越快

Fitts’Law 并用它比较分析以下两种菜单的用户性能。 ​

（1）

1640671164818-a3d97640-54e3-4692-9b60-2e7d892e52ab.png

MT movement time中心的

（2）圆形菜单的性能更好，圆形菜单的平均D要小于下拉式菜单的平均D，扇形的宽度W随离中心的距离增加而增加。以上圆形菜单性能更好。

例子：油门和刹车 距离和大小；windows 和 macOS 菜单栏 W无限大 https://blog.csdn.net/moonlightpeng/article/details/84234529

Heuristic Evaluation 启发式评估 ​

不用记 根据原则找到问题 违背了什么原则（应该要自己记一些原则详细指什么）

根据原则调整网页视觉设计（作业上的内容）

原始版：

  • H1-1: Simple & natural dialog
  • H1-2: Speak the users’  language
  • H1-3: Minimize users’ memory  load
  • H1-4: Consistency
  • H1-5: Feedback
  • H1-6: Clearly marked exits
  • H1-7: Shortcuts
  • H1-8: Precise &  constructive error  messages
  • H1-9: Prevent errors
  • H1-10: Help and  documentation

订正版：

  • H2-1: Visibility of system status
  • H2-2: Match between system &  real world
  • H2-3: User control & freedom
  • H2-4: Consistency & standards
  • H2-5: Error prevention
  • H2-6: Recognition rather than recall
  • H2-7: Flexibility and efficiency of use
  • H2-8: Aesthetic & minimalist design
  • H2-9: Help users recognize, diagnose,  & recover from errors
  • H2-10: Help and documentation

具体内容 hints：

  • [Visibility of system status] 设计应该始终让用户了解正在发生的事情，在合理的时间内通过适当的反馈。
  • [Match between system &  real world] 设计应该说用户的语言。使用用户熟悉的单词、短语和概念，而不是内部行话。遵循现实世界的惯例，使信息以自然和逻辑的顺序出现。
  • [User control & freedom] 用户经常错误地执行操作。他们需要一个明确标记的“紧急出口”来离开不需要的操作，而不必经过一个扩展的过程。
  • [Consistency & standards] 用户不应该怀疑不同的词语、情况或行动是否意味着同样的事情。遵循平台和行业惯例。
  • [Error prevention] 好的错误信息是很重要的，但最好的设计是仔细地从一开始就防止问题的发生。要么消除容易出错的条件，要么检查这些条件，并在用户承诺行动之前向他们提供一个确认选项。
  • [Recognition rather than recall] 通过使元素、操作和选项可见，尽量减少用户的记忆负荷。用户不应该记住从界面的一个部分到另一个部分的信息。使用设计所需的信息（如字段标签或菜单项）应该是可见的，或者在需要时容易检索到。
  • [Flexibility and efficiency of use] 对新手用户隐藏的快捷方式可以加快专家用户的交互，这样设计就可以满足没有经验和有经验的用户的需求。允许用户定制频繁的操作
  • [Aesthetic and minimalist design] 界面不应该包含不相关或很少需要的信息。界面中每一个额外的信息单元都会与相关的信息单元竞争，并降低它们的相对可见度。
  • [Help users recognize, diagnose, and recover from errors] 错误信息应该用简单的语言表达（没有错误代码），精确地指出问题，并建设性地提出解决方案。
  • [Help and documentation] 如果系统不需要任何额外的解释，那是最好的。然而，可能有必要提供文件以帮助用户了解如何完成他们的任务。

MVC 的概念 ​

1640681380000-f823dc61-f3fa-45ac-8b6b-a6196a37bd8c.png

How might we? 我们可以怎样？HMW questions ​

Desgin Process ​

【了解】try & error 理解用户、怎样 观察、Interview 、设计过程 02-design-discovery.pdf

Empathy map Hypothetical

**过程：**discovery——design exploration——design refinement——production

Guidelines：

（1）提供一个好的概念模型，用户对事物如何工作有一个心理模型，设计应该能够让用户预测动作的影响。

（2）使事物可视化。即visual affordance,mappings, constraints.

提醒用户该做什么及如何做。

原则：

（1）使用简单自然的对话

（2）力求一致性，注意弹出按键的顺序

（3）提供信息反馈，告诉用户正在做什么

（4）最小化用户的记忆负担

（5）提供撤销键

Interview

Inro -> Background -> Build Rapport -> Evoke stories -> Explore emotions -> Reflection -> Wrap-Up

介绍、背景、建立关系、引出故事、表达情感、反馈、总结

1640682219329-21e55e32-48b5-47d1-8423-b46932464624.png

**Empathy map **https://zhuanlan.zhihu.com/p/86873570

1640682685655-1291927f-5331-4ba4-bcba-f95d564d25d2.png

Mobile UI design faces new challenges ​

Challenges: small screens、fat fingers、poor text entry

**Simplify: **Follow design patterns、Use touch gestures where possible

（1）effective use of screen real estate（屏幕的充分利用）

Navigate（导航，记住看到的内容并完善原始上下文），Embrace Minimalism（拥抱极简主义，限制每个屏幕上可用的功能，并使用针对性的小型设计功能）,Use a Visual Hierarchy（使用清晰的视觉层次结构）,Stay Focused（在整个开发过程中保持专注）

（2）understanding mobile application users（了解移动应用的使用者）

Gestalt principles，为用户设计简便的交互方式，如手势设计、多功能操作等等，界面内容丰富充实、清晰简明。

（3）understanding mobile information design（了解移动端的信息设计）

信息展示（information display），访问模式：导航、固定菜单、下拉式菜单、滚动式选择、信息反馈、内容控制等， 界面设计：主页、加载页面、广告页。

（4）Understanding mobile platforms（了解移动端平台）

Android，BlackBerry，WP7或iOS设备不仅具有类似Web的较小界面，还可以拨打电话以及记录和传输地理位置信息等上下文信息。

Android（具有多样化的生态系统，制度化限制更少，移动设备种类更广泛）：视图控制选项卡放置在屏幕的顶部、视差滚动（Parallax scrolling）、使用主应用程序图标（icon）进行时间以及分层导航。

IOS（严格的设计标准）：主要导航项应在用户的手指够不到的地方、控件的目标区域至少应为44 x 44点、支持标准的iOS手势、非标准手势绝不能成为获取和使用重要功能的唯一方法。

输入输出设备 ​

（1）input device:

  • Text entry: keyboards and keypads, etc.
  • Pointing: 鼠标，apple pencil
  • Natural User Interface (NUI)：语音通话
  • 其他：Hand Tracking，Eye Tracking

（2）output device:

  • 2D/3D display
  • Audio
  • Haptics,利用触觉设计的输出设备。
  • Motion Simulators，运动模拟器

开放题目 ​

请设计一个AR应用场景以及对应的用户界面和交互方式

在线零售：

（1）主要帮助商业实时可视化3D模型。允许消费者在家中先行“体验”产品然后再下单购买。比如想知道活动躺椅摆在客厅的样子，是否与整合环境相称。

（2）用户通过AR头显作为一个移动设备，然后通过手势和语音进行交互，选择想要物品，然后对物品进行操作，比如位置的移动旋转等。

无人车的用户界面和交互设计

炉灶问题：1. 开关位置不明确，2. 大小炉灶位置混乱，不满足一致性

改进：开关和图形都相互对应；更改炉灶位置

排版问题：1. 全大写不好 2. 留白问题 3. 没有突出重点信息 4. 文字没有对齐 CRAP

给7张门的图片，问哪个门最容易打开，哪个最难打开

1640681162139-bb243c5a-9c30-409f-b0cf-4932d7988d4e.jpeg

设计一个AI应用的用户界面和交互设计

常用软件交互案例分析，交互界面设计及改进

请介绍一个你日常生活中最感兴趣的软件或者手机APP的界面， 指出它所存在的题并给出一定的解决思路。

更新: 2021-12-28 18:16:16
原文: https://www.yuque.com/qer233/sdu_note/hci