1310-6499-520
今天是:
站内搜索:  
您的当前位置:主页 > 知识博客 > 设计管理 >
联系我们

名称:九分网络科技

联系:13106499520

地址:福建省福州市仓山区金榕南路553号


扫一扫添加微信

让设计更有说服力的20条经典原则:相似性--九分科技

时间:2020-06-27   分类:设计管理    作者:网络   来源:网络整理   点击:130

让设计更有说服力的20条经典原则:相似性

九分网络

本文来自九分网络

编者按:「让设计更有说服力的 20 条经典原则」系列文章已经到了第 8 篇,每篇文章针对一个设计原则进行探讨,通过真实案例为你解析在设计中该如何运用。

www.9fen.net

在本篇文章中,带你了解相似性原则与邻近性原则有何不同,在设计中又是如何运用的。

内容采集来自9fen.net

往期回顾: 内容采集来自9fen.net

《让设计更有说服力的20条经典原则:美即好用效应》 www.9fen.net

《让设计更有说服力的20条经典原则:多尔蒂门槛》 九分网络

《让设计更有说服力的20条经典原则:菲茨定律》

copyright 9fen.net

《让设计更有说服力的20条经典原则:希克定律》 copyright 9fen.net

《让设计更有说服力的20条经典原则:雅各布定律》 九分网络

《让设计更有说服力的20条经典原则:简洁法则》

内容采集来自9fen.net

《让设计更有说服力的20条经典原则:邻近性》

本文来自九分网络

简介说明

1. 理论表述

copyright 9fen.net

相似的元素倾向于被视为一个组。

copyright 9fen.net

2. 理论背景 本文来自九分网络

相似性原则是格式塔组织律中的一个部分,是简洁法则的一种具体的表现场景内容采集来自9fen.net

上一篇邻近性表达的是元素空间位置上的接近,而相似性则表达的是元素形式和内容上的接近,包括形状、颜色、大小、运动状态等等。如果在一堆元素中有一些具有某种相同的特征,那么在我们的认知中这些元素具有更强的相关性。 本文来自九分网络

设计案例

首先我们需要达成一个共识:元素的相似并不等于完全一致,更多时候细节统一我们就会认为元素是相似的。 本文来自九分网络

细节包括但不限于: 九分网络

矩形比例、圆角大小、描边样式 www.9fen.net

不同字段对应的字体、字重、字号、色彩 copyright 9fen.net

颜色的明度、饱和度、色相

copyright 9fen.net

图标样式、色彩、大小 本文来自九分网络

1. 界面内相同功能的组件保持样式统一

这一点想必不用多说,拥有相同功能、含义、层次结构的组件保持样式上的统一可以使用户快速理解这个组件的操作方式,降低用户学习成本。想一想,如果为一个新闻 APP 的首页做卡片式设计,使用不同的样式,不仅作为设计师会很累,用户也会很累。 九分网络

图1:虾米、京东、小黑盒 内容采集来自9fen.net

让设计更有说服力的20条经典原则:相似性

copyright 9fen.net

内容采集来自9fen.net

所以,相同的组件保持样式上的统一是十分有必要的,不论是对快速制作原型完成界面设计的要求,还是对降低用户学习成本的考量,都不应该把相同的组件设计得相去甚远。 本文来自九分网络

2. APP风格保持统一

除了页面内部的组件或元素具备一定的相似性之外,页面与页面之间也需要,这是为了 APP 整体风格的统一。 本文来自九分网络

应用(或网站)风格的统一是 UI 设计中相当重要的一个论题,统一的风格能够让用户清晰地感知到自己处在同一个应用(或网站)中,而不是觉得点一下就跳到了别人家的地盘里,这不仅仅是用户体验的要求,也是视觉上的需求。

www.9fen.net

正如我之前强调的那样,细节上面保持统一就可以使用户将这些页面联系起来,认为它们属于同一个应用。 内容采集来自9fen.net

应用案例2:小黑盒发现页、游戏页、个人页

内容采集来自9fen.net

让设计更有说服力的20条经典原则:相似性 本文来自九分网络

www.9fen.net

我们会觉得这几个页面属于同一个应用,因为它们都具备一些相同的细节特征,比如一致的分页组件、相同大小的圆角、不断复现的色彩(小黑盒中主要是主色黑色)、相同的字体、有规律的字号字重、一些相同形式的 icon 等等,这些小细节相互影响并不断加强我们对页面相似处的感知,所以我们会觉得这些页面的风格是统一的。 九分网络

习惯使用 XD 或 Sketch 中的 Symbol 功能,并不断去复用色彩、字体字重字号、矩形元素的圆角和比例,相信你可以更快速地做出一套风格一致的页面。 本文来自九分网络

3. 特异点更易获得视觉焦点

反过来思考,在相似的元素中,突然蹿出一个截然不同的东西,你立马就会被其吸引,这其实也是相似性原理的一种逆向应用的方法。

copyright 9fen.net

应用案例3:豆瓣书影音页特异点的应用

九分网络

让设计更有说服力的20条经典原则:相似性 www.9fen.net

copyright 9fen.net

标签: 设计原则 设计法则 优设 优设网 相似性

郑重声明:本文版权归原作者所有,九分网络转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。


九分网络专业提供公众号、小程序、PC及移动端站点搭建!网站程序及服务器维护:13106499520。微信:452570709

----相关文章----