经典原则:同域原则
如果元素处在一个具有明确边界的区域内,那么在用户的感知中,这些元素倾向于成组。
同域原则是从格式塔知觉律和组织律中发展而来的一条亚原则,在少数文章中也属于连通性原理的某种细分应用场景,但这里将两者分开解释。
因为与原先已存在的知觉律(邻近性、相似性、连续性、闭合性)截然不同,所以在 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 ...
经典原则:雅各布定律
用户将大部分时间花在别人家的网站(产品)上,而不是你的。这意味着他们希望你的网站(产品)跟别人的有相同的操作方法和使用模式。
雅各布定律是由尼尔森十大原则的创立者、尼尔森诺曼集团的创始人之一 Jakob Nielsen 提出的。他认为雅各布定律更像是一种自然规律,只是在描述一个事实,这个事实就是用户在其他千千万万个网站(产品)上积累经验,学会如何使用网站,当一个网站跟其他网站一致的时候用户会立刻知道该如何操作,但如果违反了雅各布定律,那么用户会毫不犹豫地离开。
设计案例一致的排版 雅各布定律并不是说所有页面统统要设计成一模一样,而是具有相同功能的页面,尽量保持一致。这在 UI 设计的领域并不鲜见,尤其是一些功能性特别强的页面,各家设计的几乎大同小异,比如商品详情页。
案例:商品详情页 在国内,不论是淘宝、造作、网易云音乐,不论是合家欢风格还是性冷淡风格,甚至不论是不是电商 APP,只要涉及到商品的详情页面,版式都高度相似,上方是图片,中间描述,底部悬浮的操作区域,这也是用户最熟悉、最容易接受的 ...
经典原则:法则
简介MAYA是most advanced yet acceptable的缩写,20世纪美国著名工业设计师雷蒙德·洛威合成了这个词。翻译过来是最先进但可接受,前卫又不失亲和力的意思,也就是现在一般惯称的前卫与亲近。
MAYA原则的三要素
典型性:对于特定的物体,人们会形成趋同的典型性印象。
新奇性: 顾名思义就是加入新的创意这点很好理解。
关联性:指在创造新奇性的时候,要注意新奇性与典型性或者其他元素的关联性,做到自然合理。
人们喜欢新鲜新奇的东西会被它们所吸引,但这也是有限度的,在可接受的范围内才能发挥其作用,如果超出这个接受范围,接受度就会逐渐下降。所以在做设计的时候,应该平衡好亲切熟悉和前卫新奇两方面,才能产生最好的效果。
经典原则:优美且简约原则
简介本条为“尼尔森十大可用性原则”的第八原则。
不要包含不相关或低频次的信息/操作,页面中的每个额外信息都会降低主要内容的相对可见性。
简单说来就是要求页面的内容能够清晰可见,方便用户快速捕捉到自己需要的信息,减少不必要的干扰。
详情合理的架构层级,清晰的板块划分。
在新版本的苹果手机自带的软件中标题都属于字体放大,界面简洁的设计风格。
例如音乐软件中,段落中的标题和正文区别是很明显的,标题明显很大,而正文部分相对较小,这就是优美简约原则的体现。
经典原则:人性化帮助原则
简介本条为“尼尔森十大可用性原则”的第十原则。
产品有必要提供帮助文档。任何信息应容易去搜索,专注于用户的任务,列出具体的步骤来进行。
详情一次性提示更多用在用户第一次使用,或者产品更新后,通常为气泡形式进行提示。
常驻提示用于操作时必须注意到的内容,在页面中以文本或者标签形式常驻显示。
帮助文档一般用于解释规则或者热点问题,通常以超链接的形式存在于页面中;或者以集合形式位于设置页中,此时需要注意要易于检索。
经典原则:一致性原则
简介本条为“尼尔森十大可用性原则”的第四原则。
对于用户来说,同样的文字、状态、按钮,都应该触发相同的事情。
详情结构一致性保持一种类似的结构,新的结构变化会让用户思考,规则的排列顺序能减轻用户的思考负担。
色彩一致性产品所使用的主要色调应该是统一的,而不是换一个页面颜色就不同。
操作一致性能让产品更新换代时仍然让用户保持对原产品的认知,减小用户的学习成本。
反馈一致性用户在操作按钮或者条目的时候,点击的反馈效果应该是一致的。
文字一致性产品中呈现给用户阅读的文字大小、样式、颜色、布局等都应该是一致的。
经典原则:古腾堡
简介把关键信息放在左上角、中间和右下角,能够更好的体现元素的重要性。
详情古腾堡原则是由15世纪西方活字印刷术的发明人约翰·古腾堡提出,早在15世纪50年代,他在设计报纸的过程中,提出了一项原则,认为人的阅读方式应该是遵循某种习惯进行的,就像读书一样,由左到右,从上到下。这其中蕴含着什么信息呢?
经过研究最终得出被后人所熟知的结论:古腾堡原则,并附上了一张图,名为「古腾堡图」。
古腾堡图将画面所呈现的内容分成四个象限:
第一视觉区(POA):左上方,用户首先注意到的地方
强休息区(SFA):右上方,较少被注意到
弱休息区(WFA):左下方,最少被注意到
终端视觉区(TA):右下方,视觉流终点
从图中可以看出,用户视线很自然的会从第一视觉区开始,逐渐移动到终端休息区。整个阅读过程视线都会沿着一条方向轴开始从左到右浏览。用户会更容易关注到页面的开始与结束区域,而中间的段落则很少被关注到。
古腾堡揭示了一个实用的视觉轨迹规律:阅读引力是从上到下,从左到右。
遵循古腾堡原则把关键信息放在左上角、中间和右下角,能够更好的体现元素的重要性。例如:我们平时所看到的页面弹窗、各种证明文件和合同文 ...
经典原则:峰终法则
简介人们对一件事的体验通常是由最高峰的感觉与结尾的感觉决定,而不是由总体决定。
详情峰终法则的意思是,人们对于一件事物的记忆好坏,取决于高峰和结尾的感觉。注意,这个高峰并不一定是正向高峰,也有可能是负向高峰。
诺贝尔经济学得主丹尼尔•康纳曼(Daniel Kahneman)曾经做过一次实验,让两组人带上耳机听噪音。两组人听的时长和音量都是一样的,唯一不同的是,第一组听完这段就结束了,而第二组听完这段后,还会再听一段音量小一些的。
从测试设计者的角度看,第一组的忍受噪音的时间更短,总量也更少,理论上应该比第二组体验好一点。
按常理推断,第二组的人听了更久的噪音,应该比第一组感觉更痛苦,但事后调查,愿意继续参加实验的人,居然是第二组较多!
参考
峰终定律,揭露用户宁愿长痛不愿短痛的秘密