交互七大定律

前言

之前的文章中尝试总结了交互设计的十大原则,本章继续来探讨一下交互的七大定律。

Fitts’ Law  菲茨定律

费茨定律指:使用指点设备到达一个目标的时间,与当前设备位置和目标位置的距离(D)和目标大小(S)有关。

用数学公式表达为:时间 T = a + b log2(D/S+1)

图片来自网络

用户移动到目标控件的动作可拆分为两个步骤:先朝目标的方向大幅度的移动靠近;在靠近前进行微小的幅度调整,保证准确定位目标。

设计启示

1.距离目标路径尽量短:指点设备距离点击目标越近,距离越短,操作时间越短。

下图是之前做的后台管理系统的一个表单填写界面的布局。当时是为了保持界面的一致性(各种提交按钮和功能按钮统一摆放在右上角或者右下角),但却大大增加了用户的移动路径。全屏截图,缩小后示例图有点小,可见移动间距确实是很大的。

表单填写


下图是Ant Design中的表单填写提交界面,常见的提交按钮一般都紧跟在最后一项的下方,移动路径小,操作快捷。

Ant Design基础表单


2.目标尺寸足够大:目标可点击区域在合理的范围之内越大越容易点击。

下图左侧部分为简书界面上的功能按钮,相比右边的按钮形态(笔者自行改动),尺寸更大,点击范围更大,也更便于点击。

图片来自简书

3.靠近屏幕边缘:屏幕边缘位置意味着“无限大空间“,大幅度的地靠近屏幕边缘甚至划出屏幕边缘,鼠标依然会定位在屏幕的边缘。

比如 Mac的桌面,鼠标移向底部、顶部或左部,应用栏、状态栏或标签栏都自动滑出显示。移动鼠标时完全不用考虑移动幅度的调整。

鼠标移动到底部边缘

Muzil主界面的左上角边缘放置了菜单图标,鼠标移向左侧的菜单图标区域,整个菜单即全部展开。向左侧移动鼠标时同样不用考虑移动幅度的调整。因为即使移除屏幕,鼠标依然能够定位在菜单上。

菜单收起
菜单展开


Hick’s Law  席克定律

席克定律是指:一个人面临的选择(n)越多,所需要作出决定的时间(T)就越长。

用数学公式表达为反应时间 T=a+b log2(n)。

事实上,做决定确实是一件很费神的事情,比如说点菜。(都想来一份)

设计启示

1.减少选择项:精简信息,尽量减少提供给用户的选择项。

火锅吃辣不?(1)
火锅吃辣不?(2)
图片来自网络

画外音:之前在日本吃拉面的时候,服务员先给一张单子,让我选择拉面的辣度和面的硬度,选项比较精细,又由于没有参考概念,我纠结了很久,最后都还是选了常规。。。其实我只想回答“是”或者“否”。。。

2.分类建立信息层级:建立清晰的信息层级,引导用户逐级找到目标。信息分层后,每一次决策的信息量就会大大减少,决策时间也会减少。

“你想吃啥?”--- 不知道耶。(继续纠结)

“你想吃火锅呢,还是西餐呢,还是东南亚菜呢 ?”--- 吃火锅吧。

“你想哪家火锅呢?是小龙坎呢,还是川西坝子呢,或者去海底捞呢?”--- 就海底捞吧。

你想吃啥?

清晰的层级,帮助用户更为清晰的确定目标,避免迷失在庞大的信息量。

3.分步解决:对于一些流程步骤多或者决策较多的复杂界面,分步骤引导用户决策,可以更好地提升体验。

如新版墨刀中引导用户进行旧数据迁移的功能,通过分步引导完成整个操作,大大降低用户决策时间和操作难易度。

分步引导

神奇数字 7±2 法则

7±2法则是交互设计中一个常用的法则。1956年美国心理学家乔治米勒对短时记忆能力进行了定量研究,他发现人类头脑最好的状态能记忆含有7(±2)项信息块,在记忆了5-9项信息后大脑就容易出错。

设计启示

1.PC 端导航或选项卡尽量不要超过9个,移动端应用的选项卡尽量不会超过5个。

如站酷PC端网页导航选项卡为8个,移动端的底部标签为5个,导航栏的选项卡默认显示5个。

站酷PC端首页
站酷移动端首页

2.如果导航或选项卡内容很多,可以通过信息结构分层来展示各段及其子段。(同上席克定律的信息分层显示。)

3.分段式记忆(银行卡,电话号码的分段显示)

图片来于支付宝


The Law Of Proximity 接近法则

接近法则是格塔式原理当中最常用的一项法则。观察者看到彼此邻近(空间或时间)的物体时会将它们视为一个整体,并认为它们有相近的含义。

随着扁平风和极简风的盛行,越来越多的应用开始抛开线条的束缚,更多地使用留白、间距来呈现信息层次。此时,我们需要依循接近法则,在设计时,格外注意间距的使用.

下图,airbnb PC端界面呈现了大量精美的图片,没有分割线的界面确实比较清爽,图片与描述文字,图片与图片,图片与标题之间的层次都是通过不同的间距来做视觉上的区分,表达各信息之间的亲疏关系。

airbnb


Tesler’s Law 泰思勒定律

每一个过程都有其固有的复杂性,存在一个临界点,超过了这个点过程就不能再简化了,你只能将固有的复杂性从一个地方移动到另外一个地方,这就是复杂守恒,也是泰思勒定律的核心思想。

设计启示

1.功能之间的转嫁

比如说使用滴滴出行软件时,为了快速输入上车地址,一般会使用自动定位当前位置。但如果出现定位不准确的时候,用户还需要拖拽地图上面的定位标进行准确定位。自动定位功能的偏差就将使用成本转嫁给了手动定位功能。

滴滴出行

2.用户使用成本转嫁到开发者身上

以前的手机相册管理,一般需要自己命名建立相册,然后把照片归类。现在大部分手机相册都有了自动分类的功能,通过时间、节日、人物等分类方式帮助用户对照片进行智能分类管理,很方便查找。在转嫁成本可接受的范围内,也是提高用户使用体验的一种方式。

相册管理


新乡重夫:防错原则

防错原则认为大部分的意外都是由设计的疏忽,而不是人为操作疏忽。通过改变设计可以把过失降到最低。如经典的开门问题,是推还是拉?

设计时,最好遵循主流设计语言的表达方式,避免挑战用户既有认知,导致操作错误。常见方法如保证控件状态可见,提供引导信息等。

推还是拉?


Occam’s Razor 奥卡姆剃刀原理

奥卡姆剃刀定律(Occam's Razor, Ockham's Razor)又称“奥康的剃刀”,由14世纪英格兰的逻辑学家、圣方济各会修士奥卡姆的威廉提出。次原理称为“如无必要,勿增实体”,即“简单有效原理”。交互设计中,我们追求通过最少的功能,最简洁的步骤,最少的点击帮助用户完成操作。

产品最好的状态应是“无可减少”的。

图片来自网络


参考资料

实例解析「菲茨定律」在设计中的应用 – 学UI网

交互设计七大定律 | 人人都是产品经理

7±2法则 - 简书

用超多实例,解析「交互设计七大定律」在设计中的应用(上篇) - 优设网 - UISDC

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,189评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,577评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,857评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,703评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,705评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,620评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,995评论 3 396
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,656评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,898评论 1 298
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,639评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,720评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,395评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,982评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,953评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,195评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,907评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,472评论 2 342

推荐阅读更多精彩内容