技术分享|交互设计七大定律（上篇）

除非有更好的选择，否则就遵从标准。——交互设计之父阿兰·库珀

交互设计是一门将艺术、设计、科学、工程、技术结合起来的新型学科，从事该学科需要设计师们不仅仅了解一个产品的完整设计、开发、测试流程，还需要具备艺术美感知识。然而在工作中我们仍然会面临各种困难和抉择，正如阿兰·库珀所说在没有更好的选择时，我们就遵从标准。

上周，和合信诺负责交互设计的小伙伴乐平子和小琴子（两位均为和合信诺资深交互设计师，曾参与设计多款公司产品并在交互设计领域有很丰富和专业的经验积累）为我们带来了《交互设计七大定律》的知识分享。小编将分享会上的干货整理出来，供大家一起阅读学习。

费茨定律

预测了从任意位置快速移动到一个目标位置所需的时间由2个位置的距离（D）和目标大小（S）有关。

即起始位置离目标位置距离越远，我们到达目标位置所花费的时间就越长。即目标面积越大，我们定位到目标的所花费的时间就越短

生活中的费茨定律

汽车上的刹车踏板和油门踏板相距很近，并且刹车踏板的物理面积要比油门踏板大。这样可以使驾驶员能在相对最短的时间内把脚从油门踏板移动到刹车踏板上，从而最快最准确的触发刹车踏板，确保事故的发生率和减少事故的损伤。

界面中的费茨定律

费茨定律在产品界面设计中的主要作用是提高产品的可用性。更准确的说，它所提高的是产品可用性中的效率指标，帮助用户更快速的完成某个操作或任务流。

距离目标位置尽量缩短，相关操作保持亲密性

A. 系统会判断用户进行触发时，手指与屏幕的接触位置，并将模态弹窗的操控按钮显示在离用户手指最近的位置。（如上图）

B.按钮所在的位置无论是唤起键盘或未唤起键盘，始终都保持在拇指可触的舒适位置，所以根据前面的参数条件，此按钮的面积（S）及触达距离（D）均是最佳。

C.在PC端做后台表单设计时，我们经常把决策性按钮紧跟在表单下方，距离表单最近的位置，缩短光标移动的距离，但若页面的内容过多时，则会把决策性按钮适配到第二屏以下，这样的做法也不友好，所以PC端单页面长表单的决策按钮设计一般有2种处理方式:

米勒定律（7±2法则）

米勒定律（7±2法则）是交互设计中一个常用的定律。1956年美国心理学家乔治·米勒对短时记忆能力进行了定量研究，他发现人的短时记忆能力广度为7±2个信息块，记忆信息超过了该范围就容易出错。心理学家把这个神奇的记忆容量规律称为“7±2法则”

生活中的米勒定律（7±2法则）

在生活中很多场景也可以用到，比如电话号、银行卡号、身份证号，我们总是喜欢把一长串数字拆分开来读写，目的就是降低记忆成本，提高信息的易读性，从而达到视觉防错的作用。

界面中的米勒定律

交互设计中，我们可以经常利用米勒定律，来减少用户的认知负荷，提高信息的易读性，毕竟信息设计也是提高用户体验的重要一环。界面中的“米勒定律”主要强调的是信息与信息之间的组合模式。

分段记忆，信息分层

A. 设计源自于生活，我们生活中的记忆方式也映射到了界面设计中，也就是把手机号码分为3-4-4的规则来记忆

B.分段记忆还可以用于文章排版，尤其是纯文字的、排版脏乱差的长文本，之所以看起来非常痛苦，是因为段与段之间没有留白，整个界面缺少呼吸感，信息与信息之间没有整合，所以阅读起来有较大的记忆负担。

可以通过大段与大段、小段与小段之间都有留白，而且选择了舒适的字号、字间距及行间距，同时重点文字都会通过颜色对比突出展示，目的就是为了帮助读者记忆和提高易读性。阅读，也是一种体验。（如下图示）

导航和选项卡通常不要超过9个

网页设计的一级导航通常不要超过9个，如果导航和选项卡内容过多时，可以通过聚合按钮来包容其他次要入口或子入口;

移动端的标签栏一般不超过5个、选项卡一般不超过7个，如果有更多的选项可以左滑查看其他，或者点击右边的“聚合按钮”查看更多。

用户使用导航是快速找到自己想要的内容，这种诉求一般非常急切，如果还不能快速的找到自己想要看的内容，很有可能会流失掉。所以，简化产品导航使它尽可能的少于九个会让用户对于产品的内容一目了然。

系列位置效应

首因效应：相对中间位置，我们对一个系列最前面的物体的记忆力更清晰。

新近效应：相对中间位置，我们更容易对序列末尾的物体记忆更清晰。

也可以理解为我们的大脑倾向于回忆起列某件事的起始和结尾，最不容易回忆起中间的内容。生活中也有同样的效应，很多事情随着时间的流逝只记住了开头和结果，中间的过程最容易遗忘。

基于首因效应和新近效应，在设计电商页面时就可以在开头重点描述“为什么要购买这个产品、品牌（型号）宣传”，中间添加产品的细节和参数；结尾处告诉用户“如何购买？有什么优惠？支付、客服、售后的曝光”

席克定律

席克定律是一种心理物理学定律。用户所面临的选择数量越多，做出选择所花费的时间就越长，在人机交互的界面中选项越多，意味着用户做出决策的时间越长。

我们在做设计时，应该思考“在不妨碍用户选择的情况下，如何提供较少的选项”。多而乱的选项会延长用户做决策的时间，甚至对一些“选择困难户”来说，会直接导致任务流失败。

生活中的“席克定律”

功能层级也需要细分出：核心功能、辅助功能、边缘功能等

界面中的“席克定律”

减少选项并提供默认值，方便用户选择

选项分类分层，信息区分主次

分步完成，分步显示

分解复杂流程：这就是为什么强调一个页面只做一件事的原则

剩余4个定律，详见下篇分晓

和合信诺公众号

动动小手，点击关注哦

扫描二维码，惊喜不断

技术分享|交互设计七大定律（上篇）相关推荐

用超多实例，解析「交互设计七大定律」在设计中的应用（上篇）
交互设计之父阿兰·库珀说过这样一句话:"除非有更好的选择,否则就遵从标准".在交互设计领域中,有很多被时间和前人验证过的设计法则,这些法则是从用户的行为逻辑中总结出来的,掌握这些法 ...
UI培训技术分享：设计大神都在用的10种技法!
越来越多的人开始学习UI设计,想要进群到UI设计这个行业,本期小编为大家介绍的UI培训教程就是关于设计师会经常用到的一些技巧,帮助大家后期的工作中的应用. UI培训技术分享:设计大神都在用的10种技法 ...
产品设计--七大定律
一.菲次定律: 菲次定律:增加目标元素的尺寸,缩短一段的距离 1)对于权重高的信息何功能,尽量放置在页面靠上的中间核心区域 2)对于不重要的信息和功能,则放置在角落或者页面下方的区域二.席客定律 1 ...
臭鱼的产品交互设计分享
臭鱼的产品交互设计分享-- 交互设计,就是一边是用户,另一边是应用,中间是用户与应用的交互,总的原则是关注用户的目标,而不是任务. 一.应用根据用户使用频率进行划分 1.低频率的应用的交互设计,功能 ...
Hover States - 有趣的用户界面及交互设计
Hover States 一组新潮的和有趣的用户界面和交互设计的集合.Hover States 的目标是要成为设计师和开发人员灵感来源,向人们展示目前人们正在做的各种网站中令人惊奇的效果.他们认为交互 ...
Origami – 用于 Quartz 的免费的交互设计框架
Origami 是一个为 Quartz Composer 开发的免费的工具包--由Facebook设计团队创建,让交互设计原型更加简单,不需要编程. 如今,大多数设计师通过创建静态原型来表达要实现的应 ...
学交互设计要懂什么：交互设计师的知识体系
先为大家分享交互设计金字塔知识体系: 界面基础知识界面基础知识包括:控件.布局.流程,即设计稿上可见部分. 1.控件: 控件就是界面上的最小单元,如搜索框.单选按钮.复选框.下拉框等. 认识控件 ...
2023年必备的10款交互设计软件
交互设计可以帮助明确产品需求和功能.进行用户测试和获取反馈.减少开发成本.促进团队合作,并在展示和推销产品时起到关键作用.通过有效的产品交互设计,可以提高产品的质量.用户体验和市场竞争力. 什么是产品 ...
互联网产品的交互设计方法
目前交互设计在互联网产品中的应用状况 "交互设计可以提高产品可用性."在国内的互联网行业中,建立在这个认识基础上,交互设计得到了普遍的接受."产品设计开始的时候应该先交互 ...

技术分享|交互设计七大定律（上篇）

技术分享|交互设计七大定律（上篇）相关推荐

最新文章

热门文章