APP推广合作
联系“鸟哥笔记小乔”
一文读懂格式塔心理学在产品设计中的应用
2022-03-22 15:09:11

格式塔作为心理学术语,具有两种含义:一指事物的一般属性,即形式;一指事物的个别实体,即分离的整体,形式仅为其属性之一。通俗地说格式塔就是知觉的最终结果,是我们在心不在焉与没有引入反思的现象学状态时的知觉,强调经验和行为的整体性。

大脑如何运作

我们像其他动物一样,依据整体的对象来感知周围的环境,所以格式塔原理是基于人类大脑视觉系统的神经系统基础处理信息原则,是一个合理的描述框架。为图形和用户界面设计准则提供了有用的基础。

设计师了解大脑的运行机制尤为重要,可以结合大脑视觉系统的处理方式来设计最有效的视觉方案。使用视觉元素,引导用户的注意力。在用户界面中对实现产品目标和用户目标非常重要。

什么是格式塔原理

格式塔原理是 20 世纪早期的德国心理学家研究小组发现的人类视觉工作原理。

人类视觉是整体性的,我们会对看到的事物自建结构,并且在神经系统层面上感知形状,图形和物体。而不是单独的互不相关的边,线,区域。「形状、区域」在德语中是 Gestalt,所以这些理论也就叫做视觉感知的格式塔原理。格式塔原理描述的是人类视觉从神经系统对事物的感知方式,它主要包含以下几条原理:接近性、相似性、连续性、封闭性、对称性、主体/背景、共同命运。

接近性

物体之间的相对距离会影响我们感知它们的关系。相互靠近的物体被认为比相互距离较远的物体更有关联性。

关于格式塔设计原理,你了解多少?


接近性原理在 web 端或者 app 端的排版布局中有非常广泛的应用。设计师也会应用此原则,调整距离或者用分割线等来分开不同设计模式的构建。此原理使设计界面层次有序,视觉清晰。减少视觉噪音。按照原理,我们会将内容相似的元素位置放置得更接近,在 UI 设计中的卡片设计,列表组合等信息整合设计都会应用到此原理。并且不同内容之间我们使用分割线,留白,卡片区分等方式来使不同的内容区分更为明显。

如下图所列举的支付宝和知乎界面中,运用卡片设计框架,将信息聚合靠近展示来体现关联性,层次清晰有序。

关于格式塔设计原理,你了解多少?


如下图所示界面中,支付宝将统一优先级的图标靠近展示,形成视觉上的组合模块。iOS 设置页面,将功能相近的列表靠近展示,不同功能列表使用留白来产生距离差,形成不同的功能区块。在 iOS 设置闹钟的界面,计次列表和功能点在垂直和水平线上都靠近放置。

关于格式塔设计原理,你了解多少?


相互关联的控件和内容之间距离越近,用户越能感知它们的相关性。反之,如果距离太远,用户很难感知到它们是相关的,那么产品在体验上就更加难学也不方便记忆。

相似性

格式塔原理中的相似性通常和接近性一起运用在产品设计中。它指出了影响我们感知分组的另外一个原则:有共同视觉元素的物体看起来更有关联性。我们倾向于将看起来相似的对象视为一组或者一个模式,并且将它们与特定含义或者功能联系在一起。

关于格式塔设计原理,你了解多少?

那么相似性的视觉元素可以由哪几部分构成呢?比如颜色、形状、大小、方向以及纹理等视觉元素,组成相近的样式。UI 设计规范中的控件组合成的组件,大部分都会使用到相似性原则,统一视觉样式,来表达统一的功能性。比如标签栏。安卓规范中对标签栏设计的规范如下:

关于格式塔设计原理,你了解多少?


iOS 的设计规范中对标签栏的定义原则之一是,确保标签栏在视觉和交互上保持一致和平衡。

关于格式塔设计原理,你了解多少?


当在相似性的元素中,如果想凸显其中一个元素,那么就用不一样的视觉来呈现,以达到凸显效果的目的。强烈的对比性使其他相似元素显得平庸,而吸引了用户注意力。

关于格式塔设计原理,你了解多少?


关于格式塔设计原理,你了解多少?


连续性

我们的视觉倾向于感知连续的形式,而不是离散的碎片。并且能感知到整个物体的倾向。连续性通过构图来帮助我们感知事物的形状和运动方向。界面中的设计元素,会引导眼镜在平面中的移动,提高界面的可阅读性。创建顺序并且指导用户浏览不同的内容分组。

关于格式塔设计原理,你了解多少?


连续性目前在 app 产品中应用非常广泛。比如在电商产品中 banner 区域的左右滑动交互模块,滑动组件和进度条展示。主要应用范围包括:导航栏中的连续性设计、卡片模块中的连续性设计、模块的连续性设计、滑动条的连续性设计。

关于格式塔设计原理,你了解多少?


关于格式塔设计原理,你了解多少?


关于格式塔设计原理,你了解多少?


关于格式塔设计原理,你了解多少?

封闭性

人们在观察一个物体的时候,视觉系统倾向于把不完整的局部当作一个整体来感知。将不连续的,敞开的图形自动补充,从而感知到它为完整的物体,而不是分散的碎片。这个原理和人类的心智模型有相关性,当我们在辨识一个物体的时候,我们会将不完整的物体与我们的认知模型中的原型相匹配,从而达成认知。所以封闭性原则的前提之一是,把握局部不完整物体的尺度,如果太零散,太碎片,就会出现认知混乱。封闭性在图形设计中有非常多著名的案例,比如苹果 logo。

这个原则也非常适用于图形用户界面的图标设计中。运用省略或者减法处理图形,不仅可以节省空间,同时也让用户产生联想,产生趣味性。

关于格式塔设计原理,你了解多少?


关于格式塔设计原理,你了解多少?


关于格式塔设计原理,你了解多少?

共同命运

共同命运原理指出我们倾向于将一起运动的物体,感知为一个彼此相关的整体。视觉系统会将运动规则一致的物体感知为一组。这个原则适用于交互设计中,当一些元素的动作一致的时候需要保持相似性,或者有相同的运动倾向。

关于格式塔设计原理,你了解多少?


在苹果 mac 的文件夹中我们经常会使用到这种原则。比如当我们选择一些文件夹想要丢入垃圾桶,那么这几个被选中的文件夹拥有一致的运动方向。共同命运是将会被扔进垃圾桶。

关于格式塔设计原理,你了解多少?


在产品设计中,当我们想要对一些元素操作同样的动作会常常使用到这个原则。比如苹果手机的长按删除 app 的交互动作,所有的 app 都有一致的运动倾向,告知用户界面处于可编辑状态,非常直观。

主体/背景

我们的大脑将视觉区域分为主体和背景两个部分。这个特征有利于我们对重要信息和次要信息的感知。主体和背景的区别可以从以下两个方面来控制:1.场景大小——我们倾向于将处于大场景中的中间小区域部分视为主体,而大场景视为背景;2.层级关系——如果在同一个平面中,我们倾向于将处于视觉第一层级的物体视为主体。

此原则可以帮助设计师在设计界面的过程中抓住用户注意力,并且让用户优先看到我们想让他们看到的事物。比如重要信息的弹窗提示以及弱化背景从而突出内容等界面中都有运用到此原则。

关于格式塔设计原理,你了解多少?


关于格式塔设计原理,你了解多少?


赵同学
分享到朋友圈
收藏
收藏
评分

综合评分:

我的评分
Xinstall 15天会员特权
Xinstall是专业的数据分析服务商,帮企业追踪渠道安装来源、裂变拉新统计、广告流量指导等,广泛应用于广告效果统计、APP地推与CPS/CPA归属统计等方面。
20羽毛
立即兑换
一书一课30天会员体验卡
领30天VIP会员,110+门职场大课,250+本精读好书免费学!助你提升职场力!
20羽毛
立即兑换
顺丰同城急送全国通用20元优惠券
顺丰同城急送是顺丰推出的平均1小时送全城的即时快送服务,专业安全,准时送达!
30羽毛
立即兑换
赵同学
赵同学
发表文章6505
确认要消耗 羽毛购买
一文读懂格式塔心理学在产品设计中的应用吗?
考虑一下
很遗憾,羽毛不足
我知道了

我们致力于提供一个高质量内容的交流平台。为落实国家互联网信息办公室“依法管网、依法办网、依法上网”的要求,为完善跟帖评论自律管理,为了保护用户创造的内容、维护开放、真实、专业的平台氛围,我们团队将依据本公约中的条款对注册用户和发布在本平台的内容进行管理。平台鼓励用户创作、发布优质内容,同时也将采取必要措施管理违法、侵权或有其他不良影响的网络信息。


一、根据《网络信息内容生态治理规定》《中华人民共和国未成年人保护法》等法律法规,对以下违法、不良信息或存在危害的行为进行处理。
1. 违反法律法规的信息,主要表现为:
    1)反对宪法所确定的基本原则;
    2)危害国家安全,泄露国家秘密,颠覆国家政权,破坏国家统一,损害国家荣誉和利益;
    3)侮辱、滥用英烈形象,歪曲、丑化、亵渎、否定英雄烈士事迹和精神,以侮辱、诽谤或者其他方式侵害英雄烈士的姓名、肖像、名誉、荣誉;
    4)宣扬恐怖主义、极端主义或者煽动实施恐怖活动、极端主义活动;
    5)煽动民族仇恨、民族歧视,破坏民族团结;
    6)破坏国家宗教政策,宣扬邪教和封建迷信;
    7)散布谣言,扰乱社会秩序,破坏社会稳定;
    8)宣扬淫秽、色情、赌博、暴力、凶杀、恐怖或者教唆犯罪;
    9)煽动非法集会、结社、游行、示威、聚众扰乱社会秩序;
    10)侮辱或者诽谤他人,侵害他人名誉、隐私和其他合法权益;
    11)通过网络以文字、图片、音视频等形式,对未成年人实施侮辱、诽谤、威胁或者恶意损害未成年人形象进行网络欺凌的;
    12)危害未成年人身心健康的;
    13)含有法律、行政法规禁止的其他内容;


2. 不友善:不尊重用户及其所贡献内容的信息或行为。主要表现为:
    1)轻蔑:贬低、轻视他人及其劳动成果;
    2)诽谤:捏造、散布虚假事实,损害他人名誉;
    3)嘲讽:以比喻、夸张、侮辱性的手法对他人或其行为进行揭露或描述,以此来激怒他人;
    4)挑衅:以不友好的方式激怒他人,意图使对方对自己的言论作出回应,蓄意制造事端;
    5)羞辱:贬低他人的能力、行为、生理或身份特征,让对方难堪;
    6)谩骂:以不文明的语言对他人进行负面评价;
    7)歧视:煽动人群歧视、地域歧视等,针对他人的民族、种族、宗教、性取向、性别、年龄、地域、生理特征等身份或者归类的攻击;
    8)威胁:许诺以不良的后果来迫使他人服从自己的意志;


3. 发布垃圾广告信息:以推广曝光为目的,发布影响用户体验、扰乱本网站秩序的内容,或进行相关行为。主要表现为:
    1)多次发布包含售卖产品、提供服务、宣传推广内容的垃圾广告。包括但不限于以下几种形式:
    2)单个帐号多次发布包含垃圾广告的内容;
    3)多个广告帐号互相配合发布、传播包含垃圾广告的内容;
    4)多次发布包含欺骗性外链的内容,如未注明的淘宝客链接、跳转网站等,诱骗用户点击链接
    5)发布大量包含推广链接、产品、品牌等内容获取搜索引擎中的不正当曝光;
    6)购买或出售帐号之间虚假地互动,发布干扰网站秩序的推广内容及相关交易。
    7)发布包含欺骗性的恶意营销内容,如通过伪造经历、冒充他人等方式进行恶意营销;
    8)使用特殊符号、图片等方式规避垃圾广告内容审核的广告内容。


4. 色情低俗信息,主要表现为:
    1)包含自己或他人性经验的细节描述或露骨的感受描述;
    2)涉及色情段子、两性笑话的低俗内容;
    3)配图、头图中包含庸俗或挑逗性图片的内容;
    4)带有性暗示、性挑逗等易使人产生性联想;
    5)展现血腥、惊悚、残忍等致人身心不适;
    6)炒作绯闻、丑闻、劣迹等;
    7)宣扬低俗、庸俗、媚俗内容。


5. 不实信息,主要表现为:
    1)可能存在事实性错误或者造谣等内容;
    2)存在事实夸大、伪造虚假经历等误导他人的内容;
    3)伪造身份、冒充他人,通过头像、用户名等个人信息暗示自己具有特定身份,或与特定机构或个人存在关联。


6. 传播封建迷信,主要表现为:
    1)找人算命、测字、占卜、解梦、化解厄运、使用迷信方式治病;
    2)求推荐算命看相大师;
    3)针对具体风水等问题进行求助或咨询;
    4)问自己或他人的八字、六爻、星盘、手相、面相、五行缺失,包括通过占卜方法问婚姻、前程、运势,东西宠物丢了能不能找回、取名改名等;


7. 文章标题党,主要表现为:
    1)以各种夸张、猎奇、不合常理的表现手法等行为来诱导用户;
    2)内容与标题之间存在严重不实或者原意扭曲;
    3)使用夸张标题,内容与标题严重不符的。


8.「饭圈」乱象行为,主要表现为:
    1)诱导未成年人应援集资、高额消费、投票打榜
    2)粉丝互撕谩骂、拉踩引战、造谣攻击、人肉搜索、侵犯隐私
    3)鼓动「饭圈」粉丝攀比炫富、奢靡享乐等行为
    4)以号召粉丝、雇用网络水军、「养号」形式刷量控评等行为
    5)通过「蹭热点」、制造话题等形式干扰舆论,影响传播秩序


9. 其他危害行为或内容,主要表现为:
    1)可能引发未成年人模仿不安全行为和违反社会公德行为、诱导未成年人不良嗜好影响未成年人身心健康的;
    2)不当评述自然灾害、重大事故等灾难的;
    3)美化、粉饰侵略战争行为的;
    4)法律、行政法规禁止,或可能对网络生态造成不良影响的其他内容。


二、违规处罚
本网站通过主动发现和接受用户举报两种方式收集违规行为信息。所有有意的降低内容质量、伤害平台氛围及欺凌未成年人或危害未成年人身心健康的行为都是不能容忍的。
当一个用户发布违规内容时,本网站将依据相关用户违规情节严重程度,对帐号进行禁言 1 天、7 天、15 天直至永久禁言或封停账号的处罚。当涉及欺凌未成年人、危害未成年人身心健康、通过作弊手段注册、使用帐号,或者滥用多个帐号发布违规内容时,本网站将加重处罚。


三、申诉
随着平台管理经验的不断丰富,本网站出于维护本网站氛围和秩序的目的,将不断完善本公约。
如果本网站用户对本网站基于本公约规定做出的处理有异议,可以通过「建议反馈」功能向本网站进行反馈。
(规则的最终解释权归属本网站所有)

我知道了
恭喜你~答对了
+5羽毛
下一次认真读哦
成功推荐给其他人
+ 10羽毛
评论成功且进入审核!审核通过后,您将获得10羽毛的奖励。分享本文章给好友阅读最高再得15羽毛~
(羽毛可至 "羽毛精选" 兑换礼品)
好友微信扫一扫
复制链接