设计的法则【交互篇】

最近读了《设计的法则》,整理了一些平时经常听到却记不住是啥的法则。内容包括法则简短的定义、背景故事和应用案例。

可能并不是每一条都能应用在日常设计工作里~但了解下总是好的~


设计的法则【交互篇】


设计的法则【交互篇】


背景故事


1954年,Paul Morris Fitts 根据信息类比提出⼀个假设,该假设能够量化“移动到目标选择任务”这个操作的难度。我们现在经常看到的 Shannon 公式是由约克大学教授在 1992年提出的一个菲茨公式的变体。作为交互设计和UI设计的理论基础,它更简洁明了得阐述了了时间 T 和目标距离 D 以及⽬标⼤小 W 之间的函数关系:因为以 2 为底的指数函数是递增函数,所以,T 与 D 正相关 (D越大T越大) ,而与 W 负相关 (W越大T越小)。 


应用案例


因为鼠标指针可以在边角停止,因此边缘的宽度可以被认为是无穷大的。用户在此处的操作可以很精确,因为鼠标很容易就能到达边缘。这就是为什么系统的菜单都处于边角。


设计的法则【交互篇】

设计的法则【交互篇】

设计的法则【交互篇】


应用案例


弹出菜单会在光标附近显示,减少移动距离,减小移动时间。


设计的法则【交互篇】


应用案例

因为移动端用户通常为单手操作,也就是大拇指为主要操作工具,在现在大屏手机泛滥的情况下,屏幕很多地方是单手无法触及的,所以现在我们通常会把按钮和常用操作元素放在页面下方的易操作区域。


设计的法则【交互篇】


设计的法则【交互篇】


背景故事


1868年,Franciscus Donders 发现多􏰊刺激之下⼈们做出选择需要花更久的时间;1885年,J. Merkel 进一步发现当这些刺激变得更剧烈时,同样会阻碍人们做出选择。心理学家认为这种现象与信息理论⾼度吻合,故而做出进⼀步的研究。 

1981年,Hick 在研究中发现人们做出选择所需要的时间与候选数量是呈对数关系的,选择数量越多,我们就需要花费更多的时间作出决定。 


应用案例


淘宝商品品类繁多,如果不分类用户选择的时间会特别长。可以将女裙、女裤、上装等归为女装大类。每次选择时不需要面对太多的选项。


设计的法则【交互篇】


应用案例



印象笔记的注册流程,第一个页面只需要填写电子邮箱,将密码放在下一个页面。分布解决,减少没个页面的复杂度,也减少了用户的反映时间。


设计的法则【交互篇】



设计的法则【交互篇】


背景故事


1956年,哈多大学的认知学教授 George A. Miller 发表了了一篇名为 《神奇数字7》的论文,该论文是⼈人们关于短时记忆内容最早期的研究结果。该文章讨论了了⼀维绝对判断 (绝对二进⼀决策) 的极限和短期记忆极限之间的巧合:⼀维绝对判断的备选数目与短期记忆极限的数⽬大致相当,数字都在 7 左右徘徊。 

后来的研究虽然对 Miller 论⽂中的某⼀些概念进行了修正和完善,但是数字 7 却被保留了下来,成为了了 UI/UX 设计中的⼀条经典普适的定律: ⽶勒定律。 


应用案例


无论是 iOS 的应用文件夹一页最多只能展示 9 个应用,还是微信读书书架页每一屏最多 9 本书,设计师在进行设计时都在时刻注意着米勒定律的影响。


设计的法则【交互篇】


设计的法则【交互篇】


背景故事


简洁法则是所有格式塔设计原理的基石和纲领,也是 Wertheimer 知觉律中最基础的一条原则。

研究表明,我们的大脑善于将复杂的信息识别为更简单的形式,善于优先识别物体或画面的轮廓、外形、整体,善于将无意义的、抽象的、不熟悉的部分以某种共性互相联系起来组成有意义的、具象的、熟悉的事物,这将大大减少大脑处理信息的压力。也正是人类的这种近乎于本能的信息处理模式,我们的设计才具备坚实的理论性和生物性基础,所以简洁法则对我们的设计具有极大的指导意义。


应用案例


在简洁法则的影响之下,我们所看到的几乎所有界面都呈现出一定的几何规律,绝大多数界面中的组件/控件,不论它到底是不是真正的几何,在大脑中都会呈现出它是几何形的印象。

我们现在在界面设计中,多多少少都会自发的以「矩形或圆形」作为控件设计、信息排布的基本形状。


设计的法则【交互篇】


设计的法则【交互篇】


背景故事


邻近性原则是格式塔组织律中的一个部分,是简洁法则的一种具体的表现场景。在《写给大家看的设计书》中,Robin Williams 将邻近性原则变称为「亲密性」,称呼不一样,但表达的是同一个意思。


应用案例


同一个组内的元素间距更小,元素与元素之间的间距,比组与组之间的更小,因为他们接近,所以他们成组。


设计的法则【交互篇】


设计的法则【交互篇】


背景故事


相似性原则是格式塔组织律中的一个部分。

相似性则表达的是元素形式和内容上的接近,包括形状、颜色、大小、运动状态等等。如果在一堆元素中有一些具有某种相同的特征,那么在我们的认知中这些元素具有更强的相关性。


应用案例


界面内相同功能的组件保持样式统一。拥有相同功能、含义、层次结构的组件保持样式上的统一可以使用户快速理解这个组件的操作方式,降低用户学习成本。


设计的法则【交互篇】

应用案例


统一的风格能够让用户清晰地感知到自己处在同一个应用中,而不是觉得点一下就跳到了别人家的地盘里,这不仅仅是用户体验的要求,也是视觉上的需求。


设计的法则【交互篇】


设计的法则【交互篇】


背景故事


连通性原则是格式塔组织律中的一个部分,是简洁法则的一种具体的表现场景。

视觉上直接相连的元素,倾向于被看成一组。视觉的连接是一种极强的暗示,暗示我们它们之间的关联极大,超越了了邻近性和相似性,甚至有时候不⽤直接相连,也同样能够具有很强的分组感知的效果。 


应用案例


利用连接线强化元素之间的相关性。利用连接线来强化元素之间的相关性,暗示用户相连的元素是一个组。

除了显性的、可直接观测到的线之外,对齐线也是一种隐性的视觉连接线,对齐的元素通过一条「线」相互连接,所以对齐的元素相关性更高。


设计的法则【交互篇】


设计的法则【交互篇】


背景故事


同域原则是从格式塔知觉律和组织律中发展而来的一条亚原则,在少数文章中也属于连通性原理的某种细分应用场景,但这里将两者分开解释。

因为与原先已存在的知觉律(邻近性、相似性、连续性、闭合性)截然不同,所以在 1992 年 Stephen E Palmer 在论文《Common region:A new principle of perceptual grouping》中单独提出了同域原则。该论文表明人们在观察多个元素时,倾向于把在同一封闭区域内的元素视为一组,这种倾向强于邻近性和相似性。1999 年,Irvin Rock 将此理论进一步完善。

 

应用案例


从 iOS/Android 系统级的组件,到各种各样 APP 的设计,都频繁的应用同域原则,将相关联的元素放置在同一片区域/卡片,来使它们的联系更加紧密,不相关元素间的区分更加明显,同时页面内容的划分也更加规整。


设计的法则【交互篇】


设计的法则【交互篇】


背景故事


雅各布定律是由尼尔森十大原则的创立者、尼尔森诺曼集团的创始人之一 Jakob Nielsen 提出的。他认为雅各布定律更像是一种自然规律,只是在描述一个事实,这个事实就是用户在其他千千万万个网站(产品)上积累经验,学会如何使用网站,当一个网站跟其他网站一致的时候用户会立刻知道该如何操作,但如果违反了雅各布定律,那么用户会毫不犹豫地离开。


应用案例


一些功能性特别强的页面,各家设计的几乎大同小异,比如商品详情页,版式都高度相似,上方是图片,中间描述,底部悬浮的操作区域,这也是用户最熟悉、最容易接受的排版。


设计的法则【交互篇】


应用案例


有色彩的按钮提示着我们它「可被点击」,灰色的按钮提示我们它「不可点击」

元素、控件、组件,都需要符合所有互联网产品中类似元素的示能或者反示能。因为它们代表了用户默认的意识,我们要顺应这种意识进行设计,就可以减少用户操作的阻力。


设计的法则【交互篇】

设计的法则【交互篇】


背景故事


奥卡姆剃⼑本身是一种哲学思想,由中世纪 (⼗三到⼗四世纪) 英国学者、逻辑学家 William of Ockham 提出,如他在《箴⾔言书注》中所写: 「切勿浪费较多的东⻄去做⽤较少的东⻄同样可以做好的事情」。奥姆剃刀原理对现今的自然科学以及社会科学都具有广泛且深远的影响, 正因为它是一种普适的哲学世界观和⽅方法论,所以能够有效地指导我们的进⾏设计⼯作和决策。 


应用案例


比如搜索首页界面,设计简洁,专注搜索,页面上搜索框是最显眼的,用户刚进入时候就可以看到中间的搜索框,然后直接输入文字进行搜索。


设计的法则【交互篇】


设计的法则【交互篇】


背景故事


Cyril Parkinson 是英国的海军历史学家,他曾经作为英国公务员工作过很长一段时间。作为第二次世界大战期间英国的参谋,他观察到大型的官僚机构效率极其低下的现象。实际上,他还指出尽管英国已经开始没落,但殖民地办公室却依然年复一年的在增加。

在 1955 年为《经济学人》撰写的一篇极具讽刺性的文章中,他就上述现象讨论了一个庞大的组织如何因其自私自利而不受控制的增长规模,降低效率。他在文章中写到:任何任务都会拖延,直到所有可用的时间用完为止。

这就是著名的帕金森定律。


应用案例


既然在帕金森定律的规则之下所有任务都会被我们下意识地往 deadline 积压,那么此时分解任务和分解时间就可以更好地帮助用户完成他们所想要完成的任务。


设计的法则【交互篇】


设计的法则【交互篇】


背景故事


该原理也被称为鲁棒性原理 (Robustness Principle),1980年,Jonathan Bruce Postel 在他编写的最早期的 TCP 协议规范中有提到: Be conservative in what you send, be liberal in what you accept. 对发送的内容保持谨慎,对接收的内容保持⾃由。

伯斯塔尔法则有点像人类社会中的一个社交原则,“对自己严格,对他人宽容”,能够做到这个原则的人,相信人人都愿意和他交朋友,而能够做到伯斯塔尔法则的软件程序也是人人都喜欢用的。


应用案例


我们应当包容用户进行的所有可能的操作,他们可能会在搜索框里输入任何奇奇怪怪的内容,但你的产品不能因为输入的内容奇怪而崩溃、闪退、强制报错。我们还需要在一定程度上智能修正用户可能输入错误的信息,并预测他们的真实意图。


设计的法则【交互篇】


设计的法则【交互篇】


背景故事


最早由研究记忆的德国心理学家 Hermann Ebbinghaus 提出,描述了一个物体在序列中的位置影响人们对它的记忆。

系列位置效应主要分为两种:

首因效应(primacy effect):比起中间位置,人们对一个系列最前面的物体的记忆力更加清晰。

新近效应 (recency effect):比起中间位置,人们更容易对序列末尾的物体记忆更清楚。


应用案例


网页左上角大概率会是一个 logo,并且这个 logo 还能回到首页。这种固定的设计和操作模式每次都是首先出现在我们的视野里,并已储存在了长期记忆之中。此外,将 logo 放置在首因的位置还能很好地提升品牌形象的识别度和记忆度。


设计的法则【交互篇】


设计的法则【交互篇】


背景故事


冯·雷斯托夫效应 (Von Restorff Effect) ,也称为隔离效应 (Isolation Effect) 。1933年,德国精神病学家、儿科医生 Hedwig Von Restorff 在研究中发现,对被测试者提供⼀系列相似的项,⽽只有⼀项显得特别、孤立、与众不同的时候,这⼀项往往更容易被记住。 

在此之后,对冯·雷斯托夫效应的研究也有进一步的进展,从⽣理学上, ⼤脑对特异点有着更加明显的,这或许可以解释特异点更容易回忆的原因;再⽐如冯·雷斯托夫效应与年龄有着密不不可分的联系,老年人对特异点的记忆就没那么深刻。


应用案例


大众点评和咸鱼的底bar,中间的“+”操作按钮和两旁的icon样式有明显的差异化,视觉效果更突出。


设计的法则【交互篇】


设计的法则【交互篇】


背景故事


Bluma Wulfovna Zeigarnik ,前苏联⼼理学家和精神病理学家。她的导师首先注意到了了餐厅服务员能够很好地记住未付账单,但是却无法记住已付账单的更多细节。在研究中,她发现了了人存在⼀种天⽣的,做事有始有终的驱动力,这种驱动⼒使得⼈们对还没有完成的任务念念不忘,⽽对已经做完的任务印象不深。 

蔡格尼克效应证明了了完形现象不仅在感知中普遍存在,在认知中也是如此。⼀项任务被启动之后人会形成⼀种处于紧张状态的场,这会增强对所有与该任务相关信息的认知;任务完成后这个场就会崩溃,紧张的状态得到缓解。 


应用案例


如果一个任务存在多个步骤,那么在任务结束之前应该用某种形式(比如进度条)提醒用户任务还没完成,这能够激发用户完成任务的欲望。


设计的法则【交互篇】


设计的法则【交互篇】


背景故事


特斯勒定律 (Tesler’s Law) 是⼈机交互领域的一句格言。

既然产品固有的复杂性守恒不不变,那么该把谁置于复杂之下?是增加代码的复杂度而让交互更便利,还是增加⽤用户的交互成本让代码变简单? 

特斯勒认为产品的复杂度应该交由代码,开发⼈员应该多花⼀周时间⽤代码来简化应⽤用的复杂度,⽽不是让成千上万的用户在应⽤⾥为交互多花哪怕⼀分钟。 


应用案例


B站的一键三连小细节就是一个很好的例子,这个操作是这样的:用户长按点赞按钮,就能同时触发点赞、投币和收藏的操作,这就省去了用户挨个儿点的操作成本和时间成本。


设计的法则【交互篇】


设计的法则【交互篇】


背景故事


上世纪 70 年代后期,计算机研究人员依然认为计算机可以花费两秒的时间对使用者的操作做出反馈,2s一度成为了当年计算机响应时间的标准值。直到 1979 年计算机的算力开始大幅提升,也有了足够的能力在 2000ms 内做出响应,这时 IBM 的研究员 Walter Doherty 进行了一系列研究来评估算力的增长对生产力的影响。研究结果表明,计算机的响应速度直接影响了使用者做出下一个决定所要花费的时间(这个时间被称为用户响应时间),换句话说,计算机相应的时间越长,用户就要花费越多的时间来思考和决定下一步的操作。


设计的法则【交互篇】


背景故事


1896年,意大利经济学家帕累托出版了《经济政治学课程》其中描述了他所观察到的⼀些现象,⽐如意⼤利80% 的⼟地掌握在 20% 的⼈手中;⽐如花园里 20% 的豌豆荚产出了 80% 的豌豆。 

80/20 虽然只是一个相当不精确的数字,在很多具体情况之下,这个数字会有细微的波动,但这个数字背后所蕴含的思想或是规律却是不变的:更集中的投⼊将产出⼤于预期的结果。




参考资料:《设计的法则》

作者: 威廉·立德威尔(William Lidwell) 

克里蒂娜·霍顿(Kritina Holden) 

吉尔·巴特勒(Jill Butler) 

原文始发于微信公众号(大秘密mimi):设计的法则【交互篇】

0
0

评论

评论

这篇文章没有任何评论。成为第一个评论者!

微信二维码 扫一扫添加微信 保存二维码到本地相册
跟随

哦不,糟糕! 您的浏览器不支持。本网站针对这些浏览器进行了优化。请升级到支持的浏览器,并尝试再次加载网站。

立即升级