《交互设计》课件-11交互设计原则

交互设计项目二

·UI交互设计原则人机交互界面设计的基本原则尼尔森十大原则交互设计七大定律01人机交互界面设计的基本原则

美学完整性(Aestheticintegrity)

美学完整性并不是要求设计出的界面有多么好看，而是要求应用程序的视觉界面、交互行为和功能更加匹配。1.人机交互界面设计的基本原则

例如，一款应用程序的目的是帮助用户完成某项任务，在设计时就应该使用一些标准化的控件和交互行为，或是一些不太明显的背景和图案作为点缀，旨在给用户传达清晰的信息，突出应用程序的目的，便于用户理解和操作。一致性（consistency)

人机交互界面的一致性，指在设计时遵守有关系统的设计规范，尽量使用系统提供的界面元素、图标和文本样式，保持应用程序整体的风格统一，且包含人们所熟悉和期望的功能与行为。1.人机交互界面设计的基本原则

直接操作

（directmanipulation)

直接操作是指直接与屏幕上的对象进行交互，而非通过按钮交互，使用户更能理解自己的任务和操作结果，提高用户的参与感。1.人机交互界面设计的基本原则

直接操作隐喻

（metaphor)

当虚拟的物品和操作行为与现实生活中的物品有相似性时，用户就可以快速学会此操作。1.人机交互界面设计的基本原则

例如，在界面中，用户通过轻扫来翻阅书籍，就与现实生活中人们翻阅书籍的操作相似，因此用户可以很快理解并掌握这个操作。交互设计中的隐喻可以不受现实生活的限制。例如，在现实生活中，文件夹可放内容是十分有限的，并且只能放纸质文件，而在计算机中则可以放入很多音乐、视频、文档等文件。用户控制

（usercontrol)

在交互设计中，让用户来控制操作行为，应用程序可以对用户提供建议，并对可能造成严重后果的操作行为发出警告，但不应该替用户做决定，好的设计可以在用户行为和不想要的结果之间做出平衡，巧妙化解错误的发生。在通常情况下，用户会希望在某些操作时可以进行确认，并且可以随时停止或取消操作，这都是交互设计中需要考虑的问题。1.人机交互界面设计的基本原则

02尼尔森十大原则

系统状态可见原则

（Principleofvisibilityofsystemstatus)

系统状态可见指用户在界面上的任何操作，无论是单击、滚动还是按下键盘，页面都应该及时给出反馈，让用户清楚当前处于什么状态。

2.尼尔森十大原则

例如，在App界面中点击爱心，图案会由白色线条变为显眼的红色图形，界面下方也会有已收藏的提示字样，及时给予用户收藏成功的反馈；在App界面中点赞，会出现鼓励的文案和很多表情包，在给予用户清楚反馈的同时又兼具趣味性。App界面的及时反馈2.尼尔森十大原则

环境贴切原则

（Environmentalappropriatenessprinciple)

使用用户熟悉的语言、文字、短语及概念，而非系统术语，遵循现实世界的惯例和思考逻辑，使界面信息尽可能地贴近现实世界，以便用户理解和使用。2.尼尔森十大原则

可控原则

（principleofcontrollability)

用户要能对当前情况有很好的了解和掌控，能够自由地操作软件。例如，当App遇到卡顿时，双击home键可以退出，消息发送错误可以撤回，订单下错可以申请取消，软件中设置有重做和撤销功能等。2.尼尔森十大原则

相机和时钟图标

撤销、重做功能一致性原则

（consistencyprinciple)

对于用户来说，相同的语言、按钮、操作行为应该触发相同的事件，所以在设计时要遵循平台惯例，从结构、色彩、操作、反馈、文字等方面保持一致。2.尼尔森十大原则

防错原则

（error-proofprinciple)

比出现错误提示更好的设计是避免错误发生，设计师可以通过对产品界面的设计、重组与安排来防止用户产生混淆，导致错误操作的发生，或者将错误发生的可能性降到最低。2.尼尔森十大原则

去哪儿旅行App中，用户在购票选择日期时，已过去的日期会变为灰色，不可被选中，这有效防止了用户因误操作导致选错日期而产生负面情绪。易取原则

（principleofaccessibility)

尽可能减少用户的记忆负担，将动作、选项和页面信息设计为可视化，应用程序的使用指南也应该是可见的，并且可以随时调用。2.尼尔森十大原则

灵活高效原则

（Principleofflexibilityandefficiency)

中级用户的数量远高于初级和高级用户，在设计时要考虑大多数用户的需求，但也不能低估和轻视少数用户的需求，保持应用设计的灵活高效性，尽可能满足所有用户的需求。2.尼尔森十大原则

微信表情包中的“最近使用”模块，将用户经常使用的表情包放到界面上方，大大缩短了用户寻找表情包的时间，体现出了交互设计的灵活高效性。易扫原则

（easy-to-sweepprinciple)

易扫原则是指在界面设计中突出重点信息，弱化次要信息，让信息结构一目了然，使用户可以快速准确地获取重要信息。支付宝理财界面在这方面就做得很好。2.尼尔森十大原则

支付宝理财界面

容错原则

（Faulttoleranceprinciple)

容错原则是指能够帮助用户从错误状态中恢复，将损失降到最低，当无法恢复时，要提供详细说明和解决建议，只给一个简单的错误代码是不可取的。QQ在这方面就做得很好。。2.尼尔森十大原则

QQ错误提醒界面人性化帮助原则

（PrincipleofHumanizedAssistance)

对于应用程序来说，不使用帮助文档是最好的，但也应该在用户需要时提供必要的帮助。2.尼尔森十大原则

03交互设计七大定律

费茨定律

（Fittslaw)

1954年，当时担任美国空军人类工程学部门主任的保罗·费茨博士，对人类操作过程中的运动特征、运动时间、运动范围和运动准确性进行了研究，提出了著名的费茨定律。3.交互设计七大定律

3.交互设计七大定律

用户点击的按钮要尽可能做大点击目标放在距离它近的地方网页设计中，屏幕的边界“无限大”，更容易触达希克定律

（Hick'sLaw)

希克定律指的是，一个人面临的选择越多，需要做出决定的时间就越长，应用于UI交互设计领域就是指界面中选项越多，用户做出选择的时间越长。因此，在UI交互设计中要给用户尽量少的选择，减轻用户的决策成本。3.交互设计七大定律

3.交互设计七大定律

苹果APPStore不论是从产品还是设计，苹果都义无反顾地遵循着希克定律改版后的APPStore不仅减少了选项的数目，也大幅提高了选项的质量，所以体验更好也是毋庸置疑的7±2法则

（7±2rule)

7±2法则由心理学家乔治米勒于1956年提出，他经过研究发现，人类大脑的最好记忆状态为5～9个信息块，这个发现被广泛应用于UI交互设计中的导航栏中。

3.交互设计七大定律

7±2法则在UI交互设计中的应用如下：（1）在UI交互设计中，相同元素尽量不超过9个，以减少客户选择。

移动端应用程序中，导航栏的选项一般在5个左右。

PC端由于界面尺寸较大，导航栏的选项数量相比移动端要多，但也不会超过9个。移动端支付宝和QQ界面的导航栏3.交互设计七大定律

PC端苹果官网和

UI中国官网的顶部导航栏3.交互设计七大定律

（2）当选择内容过多时，可以用层级结构展示。

UI中国官网的导航栏设计成了抽屉式，将选项归类后进行隐藏，淘宝的商品分类选项卡，将内容分为多个层级来归类并展示商品。PC端的

UI官网和京东官网3.交互设计七大定律

接近法则（lawofproximity)

格式塔理论由韦特海墨在1912年提出，是心理学中为数不多的理性主义理论之一，而接近法则则是格式塔理论中最为大家所熟知的，在UI交互设计领域最常用到的一项法则。

接近法则说的是物体之间的相对距离会影响人们的感知，当对象离得很近时，意识会认为它们是相关的。它被广泛应用于组织界面内容，在引导用户进行浏览及方便用户解读界面信息方面起到了至关重要的作用。

接近法则例图3.交互设计七大定律

3.交互设计七大定律

泰思勒定律（Taylor'slaw)

泰思勒定律也称“复杂性守恒定律”，该定律认为，每一个过程都有其固有的复杂性，存在一个临界点，超过了这个点，过程就不能再简化了，就只能将固有的复杂性从一个地方转移到另一个地方。

在UI设计中，每个过程都有其内在的、无法简化的复杂度，无论是在开发环节还是在用户与产品的交互环节，其固有的复杂度决定在界面元素删减到一定程度之后就只能通过转移、隐藏的方法来简化界面。3.交互设计七大定律

3.交互设计七大定律

新乡重夫：防错原则

（ErrorPreventionPrinciple)

防错原则中提到，人们不可能消除差错，但是必须及时发现和立即纠正差错，防止其形成缺陷。并且它认为，大部分的意外都是由设计的疏忽导致的，所以在设计中需要包含必要的防错机制。3.交互设计七大定律

3.交互设计七大定律

事前——提前预防（操作提示+限制）3.交互设计七大定律

事中——实时提示（实时反馈+二次确认）3.交互设计七大定律

事后——错误弥补（反馈逆转+为用户的错买单）奥卡姆剃刀原理(简单有效原理)

（simpleandeffectiveprinciple)

由14世纪的逻辑学家奥卡姆威廉提出，被称为“如无必要，勿增实体”。该原理指出，不必要的设计会降低设计和交互效率，并增加不好后果的发生概率。有时越是简单的设计，可能越会吸引用户，获得用户青睐。

3.交互设计七大定律

在使用简单有效原理指导设计时，需要注意以下两点。（1）只放置必要的东西，减少用户的选择。（2）简化项目流程，让用户用最少的步骤完成任务。

例如