经典原则:帕累托原则
对于许多事件,大约 80% 的影响来自 20% 的原因。
1896 年,意大利经济学家帕累托出版了《经济政治学课程》(Cours d’economie Politique),其中描述了他所观察到的一些现象,比如意大利 80% 的土地掌握在 20% 的人手中;比如花园里 20% 的豌豆荚产出了 80% 的豌豆。
上世纪 40 年代,美国一位管理顾问 Joseph M Juran 观察到一个在商业以及生活中普遍存在的现象:在某一过程中,80% 的影响来自于 20% 的投入。他将这一现象以帕累托为名,称为「帕累托原则」。
80/20 虽然只是一个相当不精确的数字,在很多具体情况之下,这个数字会有细微的波动,但这个数字背后所蕴含的思想或是规律却是不变的:更集中的投入将产出大于预期的结果。
设计案例将时间投入到用户常用的页面 一般来说,一个 APP 大多拥有几十上百个页面,但是这些页面并不是用户都能用到的,有时候大多数用户只会常用那么几个页面,所以将有限的时间和精力投入到这些页面 ...
经典原则:蔡格尼克记忆效应
人们对未完成任务的记忆比已完成的更深刻。
Bluma Wulfovna Zeigarnik,前苏联心理学家和精神病理学家。她的导师首先注意到了餐厅服务员能够很好地记住未付账单,但是却无法记住已付账单的更多细节,针对这种现象,她进行了更加深入的研究。在研究中,她发现了人存在一种天生的,做事有始有终的驱动力,这种驱动力使得人们对还没有完成的任务念念不忘,而对已经做完的任务印象不深。
蔡格尼克效应被用于证明格式塔现象不仅在感知中普遍存在,在认知中也是如此。勒温的场论给出了一种解释:一项任务被启动之后人会形成一种处于紧张状态的场,这会增强对所有与该任务相关信息的认知;任务完成后紧张的状态就会得到缓解。
注:勒温的场论(Lewin’s Field Theory)是格式塔心理学的一条分支,该理论受现代物理学场论的影响颇深,认为人在认知过程中大脑会形成一种场,这个场影响着人的感官信息的处理。
设计案例对未显示完全的信息设置「悬念」 在文字较多的组件中时常能看到这样的一个符号出现:「… ...
经典原则:冯·雷斯托夫效应
当存在多个相似的物体时,与众不同的那个更容易被记住。
冯·雷斯托夫效应(Von Restorff Effect),也称为隔离效应(Isolation Effect)。1933 年,德国精神病学家、儿科医生 Hedwig Von Restorff 在研究中发现,对被测试者提供一系列相似的项,而只有一项显得特别、孤立、与众不同的时候,这一项往往更容易被记住。
在此之后,对冯·雷斯托夫效应的研究也有进一步的进展,比如从生理学上,大脑对特异点有着更加明显的 ERP(事件相关电位),这或许可以解释特异点更容易回忆的原因;再比如冯·雷斯托夫效应与年龄有着密不可分的联系,老年人对特异点的记忆就没那么深刻。
不管如何,我们还是在频繁地应用着冯·雷斯托夫效应,并能够看到它在视觉设计中卓著的效果。
设计案例 冯·雷斯托夫效应可以应用的场景分成两种:环境差异和经验差异。环境差异是指在空间尺度上做出的差异(同一平面内),而经验差异是指在时间尺度上做出的差异(不同时间点的同一平面),我们来详细聊 ...
经典原则:系列位置效应
用户更容易记住系列中出现的第一项(首因效应)和最后一项(近因效应)。
系列位置效应(Serial Position Effect)是一种心理学现象,它由两部分组成:首因效应(The Primacy Effect)和近因效应(The Recency Effect)。1913 年,德国心理学家 Hermann Ebbinghaus 在对自己的研究中发现当自己回忆一系列项目时,回忆的准确性会随着项目在列表中位置的改变而改变,于是他创造了「系列位置效应」这个词汇。
在随后几十年里,Deese、Kaufman、Bennet 和 Murdock 对近因效应和首因效应进行了更为详细和深入的研究。
研究结果表明,人们回忆一系列单词的准确性和单词在系列中的位置关系如下表格所示:
设计案例 首因效应和近因效应虽然整合在了系列位置效应中,但是针对这两者分开进行解释或许对我们在设计中应用系列位置效应更有帮助。
首因效应 系列中最开始的几个项目能够更有效、更长久地储存在长 ...
经典原则:伯斯塔尔法则
接受多变,输出保守。
该原理也被称为鲁棒性原理(Robustness Principle),1980 年,Jonathan Bruce Postel 在他编写的最早期的 TCP 协议规范中有提到:
Be conservative in what you send, be liberal in what you accept.对发送的内容保持谨慎,对接收的内容保持自由。(直译)
至此之后,该原理便被称为伯斯塔尔法则(Postel’s Law),广泛应用于计算机协议以及系统控制理论中。虽然最近几年计算机界中出现了一些质疑伯斯塔尔法则的声音,但这并不妨碍其核心思想被应用于 UI/UX 的领域。 该原理表达的最核心思想是:系统/产品应保有一定程度的容错能力。
设计案例允许用户进行任何操作,即便是错的或无效的 正如 Lyle Mullican 在《Your Website has Two Faces》中写到的,应用(或Web)应当具备两幅面孔,一幅给人看,一幅给机器看。&ems ...
经典原则:奥卡姆剃刀
如无必要,勿增实体。
奥卡姆剃刀本身是一种哲学思想,由中世纪(十三到十四世纪)英国学者、逻辑学家 William of Ockham 提出,如他在《箴言书注》中所写:「切勿浪费较多的东西去做用较少的东西同样可以做好的事情」。奥卡姆剃刀原理对现今的自然科学以及社会科学都具有广泛且深远的影响,正因为它是一种普适的哲学世界观和方法论,所以能够有效地指导我们进行设计工作和决策。
设计案例以苹果为首的简约化设计潮 在设计圈里,苹果不论在哪一个层面都属于「简约化」的代表和集大成者,上至硬件产品下至系统软件,无不在一刀一刀剃去繁琐的,无必要的东西。比如 iPhone、Mac 的开孔,比如 iOS 的重拟物质感。如果重新审视十年前和现在苹果的软硬件产品,可以发现苹果手里的那把奥卡姆剃刀从来都没有放下。
案例:iOS 的演变
如无必要,勿增实体 从苹果回归 UI 设计上来,这句话到底作何解? 那就要理解表述中所提到的两个最重要的概念,一是实体(Entity),二是必要(Necessity ...
经典原则:米勒定律
在短时记忆中,人平均只能记忆 7(±2)个项目。即人们最多只能够记住 7(±2)个项目组成的一组。
1956 年,哈多大学的认知学教授 George A. Miller 发表了一篇名为《神奇数字 7》的论文,该论文是人们关于短时记忆内容最早期的研究结果。该文章讨论了一维绝对判断(绝对二进一决策)的极限和短期记忆极限之间的巧合:一维绝对判断的备选数目与短期记忆极限的数目大致相当,数字都在 7 左右徘徊。
后来的研究虽然对 Miller 论文中的某一些概念进行了修正和完善,但是数字 7 却被保留了下来,成为了 UI/UX 设计中的一条经典普适的定律:米勒定律。
设计案例 米勒定律可以应用在每一个需要排列项目组的地方,就比如我们常常能在 UI 设计中遇到这些问题:为什么是这个数字?为什么最多只能这么多?为什么分页组件的选项从来没有一次展示超过 7 项的?为什么功能入口一行最多只有 5 个?为什么 iOS 官方建议的 Tabbar 项目最多只有 5 个?等等。
审视每一种需要排列的选项组 需要去控制每一 ...
经典原则:同域原则
如果元素处在一个具有明确边界的区域内,那么在用户的感知中,这些元素倾向于成组。
同域原则是从格式塔知觉律和组织律中发展而来的一条亚原则,在少数文章中也属于连通性原理的某种细分应用场景,但这里将两者分开解释。
因为与原先已存在的知觉律(邻近性、相似性、连续性、闭合性)截然不同,所以在 1992 年 Stephen E Palmer 在论文《Common region:A new principle of perceptual grouping》中单独提出了同域原则。该论文表明人们在观察多个元素时,倾向于把在同一封闭区域内的元素视为一组,这种倾向强于邻近性和相似性。1999 年,Irvin Rock 将此理论进一步完善。
设计案例 利用共同区域来强调元素相关性 同域原则在 UI 设计中的应用极其广泛,从 iOS/Android 系统级的组件,到各种各样 APP 的设计,都频繁的应用同域原则,将相关联的元素放置在同一片区域/卡片,来使它们的联系更加紧密,不相关元素间的区分更加明 ...
经典原则:连通性
视觉上相连的元素倾向于被感知为具有更强的相关性(相较于不相连的元素)。
连通性原则是格式塔组织律中的一个部分,是简洁法则的一种具体的表现场景。
设计案例利用连接线强化元素之间的相关性 在某些情况之下,可以利用连接线来强化元素之间的相关性,暗示用户相连的元素是一个组。
案例1:Twitter Twitter 的评论区设计是一个非常典型的案例,评论的回复与评论主体之间用连线来表达他们之间的相关性,不仅清晰易懂,而且与其余应用做出了足够的差异化,也算是具备了比较高的识别度了。
案例2:游戏时光
利用运动的下划线表达页面可滑动到达 有些分页组件的动画设计非常有趣,当用指尖在屏幕上划过,页面平移至另一个页面的同时,分页组件下方的线也是平移至另一个字段下,这是一种相当强烈的暗示:下一个页面可以通过滑动到达。
案例:新草、知乎、Twitter 新草、知乎、Twitter 都是底部有一条可以运动的下划线,这条线将左右两个分页相互连接起来,所以利用左右滑动去切 ...
经典原则:相似性
相似的元素倾向于被视为一个组。
相似性原则是格式塔组织律中的一个部分,是简洁法则的一种具体的表现场景。 相似性表达的是元素形式和内容上的接近,包括形状、颜色、大小、运动状态等等。如果在一堆元素中有一些具有某种相同的特征,那么在认知中这些元素具有更强的相关性。
设计案例 首先需要达成一个共识:元素的相似并不等于完全一致,更多时候细节统一就会认为元素是相似的。 细节包括但不限于:
矩形比例、圆角大小、描边样式
不同字段对应的字体、字重、字号、色彩
颜色的明度、饱和度、色相
图标样式、色彩、大小
界面内相同功能的组件保持样式统一 这一点想必不用多说,拥有相同功能、含义、层次结构的组件保持样式上的统一可以使用户快速理解这个组件的操作方式,降低用户学习成本。想一想,如果为一个新闻 APP 的首页做卡片式设计,使用不同的样式,不仅作为设计师会很累,用户也会很累。
应用案例:虾米、京东、小黑盒 所以,相同的组件保持样式上的统一是十分有必要 ...
经典原则:邻近性
彼此靠近的元素倾向于被视为一个组。
邻近性原则是格式塔组织律中的一个部分,是简洁法则的一种具体的表现场景。 在《写给大家看的设计书》中,Robin Williams 将邻近性原则变称为「亲密性」,称呼不一样,但表达的是同一个意思。
设计案例 邻近性原则在 UI 设计领域中的应用随处可见,小到一个 icon 的制作,大到一整个界面的排布,无处不在体现着邻近性原则,它也确实更多地应用在界面大大小小各种元素的排版当中。
同一个组内的元素间距更小
应用案例:起点、闲鱼、虾米音乐 如果对这些页面中的元素进行划分,可以得到 n 多不同的组,每一组内又由不同的元素构成。仔细观察可以发现元素与元素之间的间距永远要比组与组之间的更小,因为它们接近,所以它们成组,这就是邻近性原则的应用。
组之间的距离比边距更小 当在做双排(或多排)列表的时候,时常会思考格与格之间的间距到底能不能比边距更大(有边距的情况下,且主要指横向)?看过很多实际的线上案例之后会发现,格与格的间距通 ...
经典原则:简洁法则
为了更方便地理解这个世界,人类会将接受到的大量信息进行过滤和简化。
简洁法则是所有格式塔设计原理的基石和纲领,也是 Wertheimer 知觉律中最基础的一条原则。 1910年,心理学家 Max Wertheimer 在铁路道口观察到一系列灯光闪烁时有此发现,这现象看起来就像是一束光在灯泡之间移动,其实不然,这只是一系列灯泡挨个开/关所呈现出的效果,这种现象被称为「似动现象」。在似动现象中格式塔心理学家看到了一种人类认知和识别外部信息的模式,简洁法则也就在这样的背景下由 Wertheimer 提出了。 研究表明,我们的大脑善于将复杂的信息识别为更简单的形式,善于优先识别物体或画面的轮廓、外形、整体,善于将无意义的、抽象的、不熟悉的部分以某种共性互相联系起来组成有意义的、具象的、熟悉的事物,这将大大减少大脑处理信息的压力。也正是人类的这种近乎于本能的信息处理模式,我们的设计才具备坚实的理论性和生物性基础,所以简洁法则对我们的设计具有极大的指导意义。
设计案例与简洁法则的第一次接触 &em ...