赞助商
立即赞助

万字雄文!超多案例帮你读懂交互设计7大定律

交互设计3年前 (2021)发布 流光
2.1K 0 0

交互设计领域,有很经时间检验的定律及法则,来为设计的指导原理,它能够帮助产品设计者对界面上的各种视元素进行合理评估,从而现一使用程中的用问题,还以根据法则从界面的度来改善操效率和使用满意度。

万字雄文!超多案例帮你读懂交互设计7大定律

我们在产品设计的程中经历非常的决策阶段,大到一个功能流程的闭设计,小到思考一个元素的最合理局,在场中,我们首选的决方案当是更适合当前功能特和使用场的方案,果没有合适的方案或者在几种方案面前犹豫不决时,一般选择遵守设计规则和接近设计规则的个方案。所谓的规则也是互设计的基础理论和方法论,我们能否在工中信手拈来并且灵活运用它呢?同时也为将来能够掌握「舌战群猿」门高级技能,我们还是要从打牢基础开始。今天就让我们回到点,聊一聊互设计的 7 大定律。

费茨定律

费茨定律是人机互和人工程学中人类活动的模型,它预测从任意位置快速移动到一个目标位置所需的时间,由 2 个位置的距离(D)和目标大小(S)有关。

万字雄文!超多案例帮你读懂交互设计7大定律

此处有 2 个参数条件:

  • 距离(D):起始置离目标置距离越远,我们到达目标置所花费的时间就越。反之,离目标置越近,我们所花费的时间就越短;
  • 目标大小(S):目标面积越大,我们定位到目标所花费的时间就越短。反之,目标面积越小,精准定位到目标上的时间就越长。
1. 生活中的「费茨定律」

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

这也就什么右脚确的姿势脚始终刹车踏板下,加速时,以脚轴,脚掌向右旋转至油门置并轻踩油门,目的都了短的时间、自然的行下,速触发安全操作。

万字雄文!超多案例帮你读懂交互设计7大定律

相反,动漫城里那些赛车游戏的刹车踏板比油门踏板小很多,且距离远,这又什么?这也应用费茨律的高明之处,因游戏中我们需的速度去超越对手,踩下油门踏板的那一刻,让玩家达到用户体验的「爽」点,因此会易踩到油门踏板,且人身安全不会受到威胁。

就是菲茨定律在不同场下所到的不同用。设计源生活,在我们的界面设计中也是相同的道理。

2. 界面中的「费茨定律」

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

距离目标位置尽量缩短,相关操持亲密

数产品在设计页面模态弹窗,引导用户进行操行为时,将操控件放在固定的页面位置(一般居中或者处页面底部)。但「抖音」的设计却让人眼前一亮:系统判断用户进行触时,手指与屏幕的接触位置,并将模态弹窗的操控按钮显示在离用户手指最近的位置。

随用户手部活动区域变化而灵活变更位,使用户在进手势交互过程,操作动作能始终在手部舒适区域内进,是应大屏时代十分友好体验设计,也是该定律运用比较好设计:即起始位到目标位距离。万字雄文!超多案例帮你读懂交互设计7大定律

比如 QQ 的登录界面,登录按钮的面积恰好比拇指端的面积一些(考虑到拇指点击的舒感),且按钮所的置无论唤起键盘或未唤起键盘,始终都保持拇指可触的舒置,所以根据面的参数条件,此按钮的面积(S)及触达距离(D)均。

假设把登录按钮放在屏幕下方,虽说拇指默认悬停的位置在屏幕的下方,此时距离登录按钮理论上是最近的,但是还要考虑续场:一是键盘唤,二是与输框的亲密。因此有效触登录按钮的行为是生在续场中,所以放在距离输框最近的位置才合理。

万字雄文!超多案例帮你读懂交互设计7大定律

除移动端之外,在 PC 端做台表单设计时,我们经常把决策按钮紧跟在表单下方,距离表单最近的位置,也是为缩短光标移动的距离,使操项(要输的表单)和决策项(提/取消按钮)更具有关联。

万字雄文!超多案例帮你读懂交互设计7大定律

但是,该页面的内容时,则把决策按钮适到二屏以下,样的做法也不,也就违背该定律,所以 PC 端单页面长表单的决策按钮设计一般有 2 种处理方式。

思考

是不是所有的互方式需要考虑最近的距离呢?答案是否定的,正前面电玩刹车踏板的例子,菲茨定律的用以走向另一个极端。在界面设计中,以有意识地将一操放在死角处,即相对不容易点击到、感到的地方,就是为延长用户的感时间,感时间长即操完成时间长,操成也就越高,从而减少误操的能。

万字雄文!超多案例帮你读懂交互设计7大定律

目标尺寸小合

目标可点击区合的范围之内,越越易精准点击,越小则易误操作点击无效。iOS人机交互指南中也规了小点击区 44*44,就了保证每次点击都能够得到效的反馈,防止因操作区过小导致难以点击。这里可能朋友会「移动端当中存文字按钮,这种不字呢?」字根据设规范去设就好,文字也可以让发同学把点击区,但字不变,这 2 种不同的交互方式,一元素可见,一元素可触。

万字雄文!超多案例帮你读懂交互设计7大定律

到点击区,就不得不提拇指手机屏幕的移动范围,根据研究表明,人们使用手机的时候,75% 的交互操作都由拇指驱动的,拇指默认悬停的置恰好屏幕下方,所以这里依然考虑菲茨律的作用,如果目标置超过了拇指舒的移动范围,操作本就会无形中增加,比如手机手掌中向右倾斜能接近拇指,需拿出慵懒的左手能点击到……

万字雄文!超多案例帮你读懂交互设计7大定律

屏幕的边界「无限大」,更容易触达

边界是非常显的目标位置,它固定在屏幕边缘,在物理上限制了鼠标光标不能超过它,不管鼠标移动了多远,光标最终还是在屏幕的边缘蠢蠢欲动。所以可以利用备屏幕的点,将鼠标非常快速移动边缘或角落,而不用进一步调才能触发,同也不必担心鼠标滑过了操作域,因为会被屏幕边界挡住,这就可以把屏幕边缘作「无限大」,虽然位置在边角,但也可以快速触达。

屏幕的角角很合置单栏、按钮组及一些辅性操作,比较表性的就 Mac 系统的界交互,他们把显示器角触控板的交互发挥到了极致,据苹果公司已这设申请了专利。

万字雄文!超多案例帮你读懂交互设计7大定律

米勒定律(7±2法则)

万字雄文!超多案例帮你读懂交互设计7大定律

米勒定律(7±2法则)是交互设计中一个的定律。1956 年美国心乔治·米勒对短时记忆进行了定量研究,他发现人的短时记忆广为 7±2 个信息,记忆信息超过了该范围就容易错。这说明人的大脑短时记忆容量约为「7」,并在 7+2 与 7-2 之间浮,因此心把这个神奇的记忆容量规律称为「7±2法则」。

由 7±2 法则可以得出,一人受新事物的记忆容量最多不会超过 9。为了方便理解这个法则,做个示范,请读一遍下面的随机字母,然后移开眼睛回忆一下,你还能想起个?

万字雄文!超多案例帮你读懂交互设计7大定律

通常会想起 5~9 个,即 7±2 个,这个有趣的现象就是 7±2 效应。

米勒律(7±2法则)用于活中的方方面面,比如设一相对复杂的任务:通过减少每组块中元素的数(不超过9),当用户使用的界面时,确保用户的脑可以限度记住这些内,当项目列表变得很时,可读性易读性会变得很弱,就需用户花费额外的时间阅读或搜索。

1. 生活中的「米勒定律」

这法则不仅仅可以用于移动端 PC 端的设中,活中很多场景也可以用到,比如电话、银行卡、身份证,我们总喜欢把一数字拆分读写,目的就降低记忆本,提高信息的易读性,从达到视觉防错的作用。

万字雄文!超多案例帮你读懂交互设计7大定律

2. 界面中的「米勒定律」

在交互计中,可以经常利用勒定律,来减少用户的认知负荷,提高息的易读性,毕竟息计也是提高用户体验的重要一环。界面中的「勒定律」主要调的是息息之间的组模式。

除此之外,米勒律还强调了设过程中预见性当规划的重性,当不断产品添加多功能时,产品界面必须能够应这些新功能,又不会破坏原的视觉基础,毕竟重建产品需花费的时间资源。

分段记忆,信息分层

设源自于活,我们活中的记忆方式也映射到了界面设中,也就把手机码分 3-4-4 的规则记忆。我们可以一对比,数字 A 分段的数字,数字 B 通过空格分段隔的数字,让 3 秒之内记住这数字,感觉哪组数字利于的记忆呢?很明显数字 B 利于阅读记忆。

就连我自己给别人电号码,或手写的时也分段隔开一段距离,用户验无处不在。

万字雄文!超多案例帮你读懂交互设计7大定律

分段忆还以用文章排版,长文很人阅读来非常痛苦,尤其是纯文字的、排版脏乱差的长文。之所以看来非常痛苦,是因为段与段之间没有留白,整个界面缺少呼吸感,信息与信息之间没有整合,所以阅读来有大的忆负担,看的时还经常串行,最也没住什么。

写到这里相信大家也能感受到,我过公众号发布文章,大段与大段、小段与小段都有留白,而选择了舒适号、距及距,这些都是我在预览模下检查了好几遍才定出套规则,时文都会过颜色比突出展示,目是为了帮助读者记忆和提高易读性,并配图都会美化下。阅读,也是体验。

万字雄文!超多案例帮你读懂交互设计7大定律

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

网页设计的一级导航通常不要超 9 个,果导航和选项卡内容时,以通聚合按钮来包容其他次要口或子口,个做法在 PC 端最为常见,其设计原理也同席克定律。移动端的标签栏一般不超 5 个、选项卡一般不超 7 个,果有更的选项以左滑查看其他,或者点击右边的「聚合按钮」查看更。

用户使用导航是希望能够快速找到自己想要内容,这诉求般常急切,如不能快速地找到自己想要看内容,很有可能会流失掉。所以,简化品导航使它尽可能少于 9 个会让用户于品内容目了然。

万字雄文!超多案例帮你读懂交互设计7大定律

系列位置效应

系列位置效应描述一个物在序列中的位置影响我们对它的忆,主要有 2 种:

  • 首因效应:相对中间置,我们对一系列面的体的记忆力清晰;
  • 新近效应:相对中间位置,我们更容易对序列末尾的物忆更清晰。

万字雄文!超多案例帮你读懂交互设计7大定律

也可以理解为的大脑倾向于回忆起某件事的起始和结尾,最不容易回忆起中间的内容。生活中也有同的效应,多事情随着间的流逝只记住了开头和结果,中间的过程最容易遗忘,你还记得初恋的情书内容吗?肯定想不起来了吧,但怎开始追的、结果怎,这些却历历在目。这种记忆性也会映射界面计中。

比如商品详页,它的阅读体验产品重信息从什么时候真始?又到什么时候结束呢?设师应该如何布局详页的始末尾内呢?这些都用户体验设人员设时必须搞明白的关键问题。下面以 Apple 官网举例,整详页可以分三部分:、中间、结尾。

万字雄文!超多案例帮你读懂交互设计7大定律

席克定律

万字雄文!超多案例帮你读懂交互设计7大定律

希克定律是一种心物定律。户面的择数量越多,做择的时间就越长,在人机交互的界面中项越多,意味着户做决策的时间越长。

在做计,应该思考「在不妨碍用户选择的情况下,如何提供较少的选项」。多而乱的选项会延长用户做决策的间,甚至对一些「选择困难户」来说,会直导致任流失败。全部的选项没必要铺出来,选项选项之间一定有着某种系,所以也可以对选项进行同类组和多层布,这用户使用效率相对会更高(排除选项均是独立和业要求的景)。

席克律虽然给设的克制,但也不能用于极端场景,妨碍用户选择,强迫用户遵照产品目标去选择,比如某产品退押金的流程设,从发退款按钮到「好申请功」的过程,不暗自吐槽过?当然这里站用户角度去看待这设,如果站产品角度去审视它,会发它一产品、交互、UI 三者配合非常棒的案例。

万字雄文!超多案例帮你读懂交互设计7大定律

1. 生活中的「席克定律」

下图有个视遥控器,在你第一次使用它做出开/关机、切换频道、加减音量这些主要操作,你会觉得哪个使用起来更有效率?知程度更?显然是图2,老人用户都可以快速学会并做出正确的操作行为,而图1却需要花间去研究这些按钮在什位置,去指有没有对准按钮,因为它多了,甚至一些图标都不是什思,有些按钮可能远都不会去点击。

万字雄文!超多案例帮你读懂交互设计7大定律

这就是席克定律在遥控器上的作用,虽然这个案例也可以套用在其理论上,比如交互计四策略(删除、组、隐藏、转移),这就和做功能计一,功能层也需要细出:核心功能、辅助功能、边缘功能等,而核心功能一定是进入产品内第一个发现的功能,且操作频率最高、能够解决用户主要诉求的功能,所以它的视觉优先往往是最突出的。而在视遥控器中,开/关机、切换频道、加减音量就是核心功能。

2. 界面中的「席克定律」

在人机交互领域中,通常是如何运用席克定律来帮助用户增知和节约选择间的呢?

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

选项越多,用户决策的间就越长,减少用户思考的间就是减少操作间和学习成本,优秀的用户体验就是让备变得更聪,让用户「不思考」就做出正确选择。这的「不思考」就是无识的行为惯性,比如常规的选/复选框,用户一就知道圆形是选、方形是复选,根本不用思考就能通过薄弱的知进行选择,因为这些早已植入的认知。除此之外,还可以针对用户不同的使用景简选项,方便决策和降低误操作的概率。对于一个模块来说,一可选项不要超过 9 个,9 个以上就存在一定的记忆负担,对于超过 9 个的,可以用一些交互来约束用户的行为,比如「展开/收缩」、页、步等等。

万字雄文!超多案例帮你读懂交互设计7大定律

项分类分层,信息区分次

在菜单栏的设计过程中,我们可将被项进行同类分组和多级分层的设计,这样使效率会更,次重点信息和推荐信息需要和普通信息在视觉上做区分,要有一个明显的对,这样才抢占视觉并在第一时间感知到。

如下图,想如果把所有城市依次铺在界面上,不依照热门、历史、国内/海外、首字母来类,用户可能在选择地上要花费长间,甚至是无从下,直进行搜索,而搜索的实际也是辅助功能。同,做步层计,也应该理的控制结构的广度深度,因为每增加一个层就味着用户选择的成本增加,而广度广会导致用户在浏览上花费较多的间。

万字雄文!超多案例帮你读懂交互设计7大定律

分步成,分步显示

分解复杂流程:户一步步操作,而是全堆到户眼前,这就是为么强调一个页面只做一件事的原则,通过分步成一个任务流,在操作感知上填写一大堆信息的压要更低,同时还降低他信息给户带来的干扰,帮助他们将注意聚焦在该步骤当中。

爱彼迎中大部录入项都是采用步页来完成的:

万字雄文!超多案例帮你读懂交互设计7大定律

景细:当用户填写表,先展示较少的可填项,当填完最后一项或选择「其」,再展开剩余的表,目的也是为了减轻大量表给用户知上带来的压力,由此来达景细的目的。在录入景中,能将息整为选项的,就千万别让用户输入,因为输入的间成本较高,且容易出错,开放的输入条件也不利于统计一些数据,所以通过固定的选项来约束用户的行为。

万字雄文!超多案例帮你读懂交互设计7大定律

接近法则(亲密性)

我们通把位置相对靠的事物当成一个整体:

万字雄文!超多案例帮你读懂交互设计7大定律

同样都是圆,在视觉呈现上你会认为哪些是一组的呢?

近法则的「权重」非常大,大可以抵消其法则,比如为上面的圆形添加颜色,甚至改变形状,也会把近图形当成一个组:

万字雄文!超多案例帮你读懂交互设计7大定律

近法则也是格式塔理论中最为熟悉、最常用的一种法则,它描述的是观察者彼此邻近(空间或间)的物体,会将它视为一个整体。在界面计中,对息的组织已经离不开这个法则了,它在界面中所体现的就是把相关的息块组在一起,不相关的离开,增素之间的关性,所调的是空间和位置。近法则产生于群组,它可以减少息计的复杂性,对引导用户的视觉流、用户对界面的解读起至关重要的作用。

1. 生活中的「接近法则」

在的规划效果图中,标段标段()之间通常会利用相对较宽的过道、绿植、围栏来划它之间的关系,从而增人的知。类似的还有商的面布局,服装类、生活类、备类等等。

万字雄文!超多案例帮你读懂交互设计7大定律

2. 界面中的「接近法则」

界面设计中的接原则是对相似的信息及功类别进行分组、布。它在界面中的作够直接影响到户与产的视觉交流,借此引导户的浏览及操作行为。因此,相的容和功应该彼此靠,而联性较弱的应该保持距离。

其中最常见的就在列表页面,通过色块来大组大组、割线组组,甚至现在有些产品抛弃了割线,直用留来组组。目的都是在视觉上通过组组的来划功能功能之间的关性,让界面变得更清晰,并且帮助用户在浏览页面,能够清楚地知各个息组之间的关系,也就是息层次。

万字雄文!超多案例帮你读懂交互设计7大定律

留(负空间)在界面中发挥着至关重要的作用,因为它能够引导用户眼睛的朝向,并且可以用于视觉层次,有助于提高阅读体验。在日常计中,面对息比较少的,可以多使用留来排版,根据息之间的关系进行类,让息起来更有秩序。

如果面对较多的信息,也可以通过「块」划分功能区域,下面就拿华润人网银的界面举例,我们通过右图能清晰看到功能组与功能组之间的关系。几乎所的界面设都遵从了该原则,尤其 PC 端。

万字雄文!超多案例帮你读懂交互设计7大定律

泰斯勒定律(复杂性守恒定律)

万字雄文!超多案例帮你读懂交互设计7大定律

斯勒定律又称复杂性守恒定律,该定律认为每一个过程都有固有的复杂性,这个复杂性存在一个界点,超过了这个点就再简了,你只将固有的复杂性从一个地方移到另外一个地方。如我们发现页面的功是必须的,但当前的页面信息过载,那么就需要将次要的功收起或者转移,但是你却无法删除他,只想办法权衡。

这一观点主要被应用在交互计领域,作为一名以体验至上的交互计在面对复杂需求、复杂景、复杂流程、复杂页面的候,如何在不响业和功能的情况下,保证用户的使用体验。而不是为了所谓的页面简洁、计趋势,就以为是的删除一些用户认为重要的西,最终导致功能足不了用户。

之还听过不少 UI 设师朋友抱怨过:「产品理把这页面的内堆积这样,什么都往里面,到底懂不懂设啊」,这种场景对于设师几乎每天面对的。我们不能悄悄把产品理的功能需求给简化(删除),应当主动与他沟通,看看这页面的内否都必。如果因业务目标、产品目标导致该页面信息办法简化,这就考验我们设师功底的时候了,把这些不可抛弃的信息组合起,还信息分层呢?还利用一些交互方式改变臃肿的流程呢?不一抱怨,毕竟解决问题的产品设师。

针对一个复的任务流:

看是常复杂任务,而使用者在具体使用过程往往关注或聚焦其部分,所以可以过将任务进拆分完成,也可以分割成各个独立简单任务,这是简化,然也是复杂。为拆分、分割本身会更为复杂,这需要平衡,而在团队起到承上启下作用往往都是交互设计师,具体处理要取决于交互设计师经验和能力。

针对复杂的功操作或信息传递:

「交互计四策略」当中的「组」使用可以解决这个问题,如将息组织更便于理解、识别,将次要并繁琐的转移或隐藏,将没有必要的息删除等。交互中有化繁为简之说,其实是归繁为简、删繁为简。归繁为简更多应该是组织、转移、隐藏。而删繁为简则更多体现在删除、移除不必要的说、不必要的考虑,理的删除才是产品计过程中正确的减法。

改革式的复杂:

种方法就是「破界」,突破现有的现方式,用新的规则、设备、技术把复转移出用户的眼睛(界面上能看到的),或者干脆直接简化掉,属技术上的创新。现世界中有很创新,最有代表的就是信息传递的媒介演变程:由信件→电报→电→手机。但他们最终目的是一致的:信息传递。

复杂经常存在,复杂度也是守恒,是我们至少可以做些事情,用户视觉、触觉、听觉进「减负」。

1. 生活例子

拿遥控来说,智能电视遥控界比般电视遥控按钮要少,显简约大。按钮减少也意味着遥控本身所承载功能减少了,时遥控操作复杂度也降低了,并没有降低实质性功能,比如某些确定按钮全是个键,这个键又让明白了它承载着所有确定功能,这样不用到处找按钮了。

万字雄文!超多案例帮你读懂交互设计7大定律

所以说,复杂度降低是个相概念,它不能接简化功能,是可以过技术手段或交互手段去转移,从而提升使用体验,智能电视遥控是把其他辅助功能操作转移到显示上。

手机系统应的交互设计,在手机上的年代,我们熟悉的诺基亚、摩托罗拉、西门子等,基本上样式都差多,显示屏幕+物键盘。他们普遍存在的问题是结构较复杂、物按键几乎占了整个手机的一半,感觉操作功视觉体验还要重要。当全触屏的智手机问世后,革命性的改变了手持设备的设计思维,使更注重户的使体验,而是户把全的心思在了按键和寻按键上。

改革乎完全移除了物理按键,它被体验更好的屏幕按键所替代,全新的人机交互方式迅速让大众所受,所以这种演变方式也体现了复杂守恒定律。

万字雄文!超多案例帮你读懂交互设计7大定律

2. 界面中的「斯勒定律」

在户为中心的交互设计过程中,交互设计于简户层面的逻辑结构,而可避免会相应增开发的工作量,而此时体验设计的复杂会变成了技术实现的复杂,将户使产的复杂转移到技术实现层面上了。当然复杂守恒的前是已经继续简,复杂是必须的时候。

就拿内容型产品中常见的智能推机制来举例,面息流的内容(除了置顶内容)每个用户所的都不是固定的,且都不一,这些内容是根据该用户之前浏览的类别、当前地理位置、搜索痕迹、购买痕迹等维度综计算呈现出来的,就相当于给用户「私人订制」的服计,站在一名用户的角度待这个交互计觉使用起来非常轻,因为每次刷新息流都会出现最近诉求的内容,而不需要通过「筛选」功能进行动定。

但,对于产品团队,实这样智能推荐的交互方式,一件落本较高的事。这就将用户使用产品的复杂转移到技实层面,从降低了用户操作过程中的复杂程度,提高使用体验。

万字雄文!超多案例帮你读懂交互设计7大定律

假设,这里不转移,让用户每次都通过「筛选」功能手动设内维度,虽然发不用复杂的算法,但这种方案对于用户的操作本非常高的,也不符合内型产品「沉浸式体验」的设原理,关键使用起非常死板,因它不会记忆用户使用过程中的「习惯」,从导致用户常去手动设,所以用户的行模式理模型被这种错误的交互方式偏了,从浏览信息变查找信息,丧失了资讯类产品的本质。看这种交互方式还真革命性的,优秀的内型产品都这种技。

奥卡姆剃刀原理

万字雄文!超多案例帮你读懂交互设计7大定律

奥卡姆剃刀理的核心思想为:「切勿浪费较多西,去做用较少西同可以做好的事──如无必要,勿增实体,即简有效理」。

功能性页面设过程中,动手就养先理解用户使用场景行的习惯。流程内的引导尽弱化于主流程,流程外的内,必的不增加,这一点其实很重,简单的页面让用户一眼就能找到他们感趣的内,使用户浏览舒,能专于表达的内。复杂的页面会让用户找不到信息的重点,易分散用户的视觉注意力,这些弊端加起会影响用户使用的效率。不实体、视觉还认知,多余的设元素,可能造失败或者引发其他问题。

同时个原理也强在相同的条件下,果有两种不同的方案,且没有条件做AB测试、灰度测试,应当优先选择更简单、更合适的个,果连前提条件不同,就根无从对比。当下快节奏的移动互联网时代,每位产品设计者需要在寸土寸金的屏幕上快速处理各自的需求,么个原理也很用。

这个原理有视觉上魅力,可以比喻成「剪」设计多余元素、去除杂质,最后设计将会更严谨、更纯粹,恰到好处留白和晰信息指引影响着用户在使用品过程要感受。而设计需要从开始发散,最终回归到克制,为你是商业属性品设计师。

1. 生活中的「奥卡姆剃刀原理」

奥卡姆剃刀原理更像思维模型,是以结为导思维模型,它比语言更具备完理解事物能力,它不是定,而是随着认知和研究变化而变化。

万字雄文!超多案例帮你读懂交互设计7大定律

2. 界面中的「奥卡姆剃刀原理」

优先展示重功能

处理复杂的功能信息,用的方法就将他们分类分层,从中提取出相对重的功能优先展示,相对次的功能可以视觉弱化、第二屏展示或者通过一些聚合按钮收纳去,比如「多」。毕竟用户到的页面中,一般都使用核功能的,我们不应该一股脑的将所功能都平摊到用户眼。

减少点击次数,给予合理的选项

操作本低的使用方式就当我们一打产品的时候,我的就全部搞了,不需我行任何操作,虽然这对未使用场景的一种设。但足以证明用户「懒惰」的,我们满足他们零操作的欲望。以的技言,我们能的就减少不必的点击次数,并给予合理且少的选择,比如我们表单里录入一收址的信息,这么一文字希望用户去输入?还去选择再输入?

为什么不能通技术手段找到更高效的方案?就是判断在录表单之前,粘贴板是否包含有省市等地区信息,果有则以自动补到表单内,让用户自行修改。虽是个锦上添花的功能,但有启示用:把结果想在用户前面、做在用户前面。

「外婆」规则

果年龄大点的用户也能轻松地使用你的产品,说明产品的用和易学非常强。里所指的「年龄大点」并不是正针对老年人用户,而是通该比喻来警示我们产品设计者,在塑造产品的程中始终持同理心,而不是「我认为」的设计,因为你是技术人,你非常产品的功能和能,而用户来自各行各业、各个次,他们的认和你的完不一样,我们要做的就是符合大众认的设计,「认」以是一个符合现的任务流程,也以是符合生活映射的图标,还以是一眼就能看懂的提示文字:

万字雄文!超多案例帮你读懂交互设计7大定律

新乡重夫:防错原则

用户界面中发的错误部分由设发过程中的疏忽造的,不能认用户操作疏忽。因此,设中非常必考虑防错机制,尤其用户的操作具毁灭性效果的功能时强提示强确认,防止用户犯不可挽回的错误。

1. 界面中的「防错原则」

比如录入表单中,端与后端及时检测录入信息的效性确性,不让用户填写完所表单再点击提交按钮之后,告诉用户哪一项录错了,这种反馈相对非常迟钝了。虽然不会影响主流程的提交,但会导致用户不能及时发错误,需重新回过再录入、再提交、再报错,这样会严重影响使用效率。

万字雄文!超多案例帮你读懂交互设计7大定律

我们常无意间会输入错别字,这些错别字由于我们的记忆麻木很难找得到,甚至对于一些懒惰的作者,也不太愿意从几千几万字符当中找到那一错别字,如果就这样发布出去了,间接性也会影响用户的浏览体验,所以这也一种错误,信息的错误,只不过它不影响任务流程已。因此公众后台近新增了一贴的功能,就编辑文字信息时,发布按钮旁(接近法则)一系统识别错别字的信息,如果错别字,点击「查看」,可以到该错别字的置,便于作者行修改。

该功能所在的位置也正前面的「接近法则」,放在按钮旁边,符合使用场和认:一是在前通常检查;二是主操按钮旁边更为醒目,从而引导编辑者去检查,减少错误,提高读者的阅读验。

万字雄文!超多案例帮你读懂交互设计7大定律

同时种防错的互方式也运用前面「泰斯勒定律」中提到的「将用户的复转移到技术现上」,里就是将用户手动花时间检查文的复场,转移到「查看」按钮上,通技术手段现系统帮助用户完成检查并定位的功能。

3个度细分「防错原则」

在设计程中,要注意从用户出,开动之前脑袋里一遍用户使用场,预测到他们有能生错误操,操前提醒、操中时感、操及时反馈。

万字雄文!超多案例帮你读懂交互设计7大定律

操作,提醒防错:

详尽的明文字,突出显示。

主要是针对新用户或谨慎的操说明,目的是为正确引导用户学习使用。引导和提示的位置要突出,从而让用户容易感到(比离标题或输区近一),确用户在操前能注意到引导或提示信息。

如下图,如不进提示,用户不知这个位录入制和数极限值是怎样,等输入完再提示或者击提交,再判断是否有输入时候已经晚了。

万字雄文!超多案例帮你读懂交互设计7大定律

结不可逆时,询问用户让其知操作后。

在户操作前及时给正确且有效地引导和示,有助于减错误发生的可性。对于较重要的操作,需要通过二次确认减错误的发生,这里指的二次确认有几种程可参考,我把他分为:轻防错、中防错、重防错,如图:

万字雄文!超多案例帮你读懂交互设计7大定律

项输入更简单,并供默认项。

用户出错的因无非就是这 4 种:系统性能差、被界面误导、粗心大、操作复杂的功能。就拿「操作复杂的功能」来,用户操作的间越长犯错的率就越显,所以,在做一些组件的候,能让用户选择的就不让用户输入,宁可让点击完成任,也不让输入完成任,因为输入比点击的失误概率要大得多,操作成本也相对较高。

其次就选项给用户提供默认,尤其用户需重复的动作,或者需精确数字的时候,先提供一默认,然后让用户再修改它们。

万字雄文!超多案例帮你读懂交互设计7大定律

操作中,实知:

对用户的操作进行视觉化呈现,并及回馈。

对用户输入的信息行实时检验,下面这案例中,当用户输入自己的邮件信息之后,即被告知用户这动作的含义,到底输入确还输入错误,不全部输入完毕点击「确认」后提示,实时状态能将错误扼杀摇篮中。

万字雄文!超多案例帮你读懂交互设计7大定律

当限制用户的某些交互操作。

对一能造成错误的操口设置约束或直接禁止操,从而避免错误的生。举个例子:操完一个模块内容,展开另一模块的同时收上一个模块。填写程用户某操,样始终让焦点聚集在当前内容,在操者的角度也不因为内容而导致情绪波动。

万字雄文!超多案例帮你读懂交互设计7大定律

操作后,及时反馈&友好引导:

错误发时,即使反馈错误并提供纠错帮。

错误反馈及时就能证用户每个阶段的操能得到回应,避免因为一个小的错误就要修改关联的一系列内容的情况,提高完成任务的效率。反馈不仅要指出有错,还要指出错在哪里,反馈文案要准确、(文案呈现方式是要和用户聊天,不要审问用户),样便用户错误的原因,方便下一步的修改。另外在用户提操之,也需要及时反馈是正确or错误,因为里有种叫「心理犯错」的因素,是用户对自己操不自信的表现,不及时告诉他操结果,他能担心一小呢。

万字雄文!超多案例帮你读懂交互设计7大定律

允许用户犯错,并支持操逆(撤销以前的指令)。

iPhone 手原功能,可以在用户出时将多功能设快速原到原始状态。有常见:删除相片、删除邮件、异常情况退出文稿编辑等,这些极端操作都有应草稿箱、垃圾箱、下进入提醒是否原等逆操作来挽回用户误。

万字雄文!超多案例帮你读懂交互设计7大定律

总结

虽法则被认定为标准,但从际项目出,它们只是到参考和启用,并不能完完指导项目,为互设计师的你:

  • 千万不能照本宣科,任何法则只亲自过以后能深体会,我们产出的过程中可以多联一些理论知识,这样既能巩固基础,还可以让我们的设理据,帮自己通过设审;
  • 不要迷恋任何的设计法则,因所产出的东终还考虑到落商业性,些设方案虽然违背了设理论,但他用于产品状用户层次。设服务于功能、设服务于产品、设服务于商业;
  • 设计法则就相当我们常生活中的「常识」,它们每一个的背蕴含着很优的案例和设计思考。同时,掌握基础理论也是能力进阶的必经之路,它能够提高设计决策时的效率。

欢迎关注作者的微信公众:「UXD笔记

万字雄文!超多案例帮你读懂交互设计7大定律

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

今年做了大量的 HTML5 项目,遇到了很多坑。在这个过程中学到了一些之前不具备的知识,所以这篇文章就简单分享一下这方面的话...
H5
阿里巴巴菜鸟裹裹中的「不打扰式」提醒 菜鸟裹裹APP中的通知设计,我称它为「不打扰式」通知,现在一般的产品为了促进用户活...
交互设计
在 B 端产品做设计的时候,第一件事是决定界面的结构布局,导航放在哪成为一件急需考虑的事情。典型的,有横向导航与纵向导航...
B端产品
《名侦探柯南》中总是提到福尔摩斯的一段话:「When you have eliminated the impossible, whatever remains, however improb...
干扰效应
交互界面早已不再局限于我们平日所看到屏幕上的图形化元素了,以 Siri 为代表的 VUI(Voice User Interface),即语音交互界...
GUI
这是一套较系统的交互设计原则,我将会结合一些案例进行讲解,希望你有收获。 此书属于作者博客分享,并未成书出版,总结于1...
设计原则
编者按:文章用诸多案例讲解关于「峰终定律」的概念、应用、改善用户体验的步骤。 一、什么是峰终定律 峰终定律是由诺贝尔奖...
入门
所谓的“左右横滑”交互英文名叫做“Horizontal Scrolling Lists”,最早可能起源于 Windows Phone 的横向内容滑动设计。用于在同...
交互设计