#产品设计# 设计入门原则

知觉组织原则,是设计中的入门原则,能用到游刃有余,能至少用起来舒服。

知觉组织原则在格式塔心理学(Gestalt Psychology)中得以深入研究。代表心理学家有考夫卡、科勒、韦特海默。他们主张,心理现象只有被视为有组织有结构的整体时,才能被理解;整体不等于局部之和。

关键词:整体 结构 形式


1. 主体/背景:

人们具有区分主体和背景的倾向性。如下图,我们将下图知觉为什么,取决于我们认为哪部分是主体,哪部分是背景。这样的选择性,收到主观倾向性和经验的影响。

两可图是美的,有不可忽视的吸引力,让人忍不住多看两眼,再多看两眼。

图1:人脸-花瓶两可图
图2:天使-恶魔两可图
图3:玫瑰-恋人两可图

【应用】

①很常规的确认弹窗

利用蒙层区分主体和背景。

图4:确认弹窗-jq22

②更好用的TAB切换标签

用颜色区分处于“主体”和“背景”的标签,能让用户一眼明白自己处在哪个功能/分类下,无需根据线条走向去推理出当下的状态。

图5:用底色区分主体和背景-jq22

当然,还有其他方式去标记当前使用中的标签:

图6:标记当前状态-拼多多商家后台

2. 接近性

因为更接近,所以我们将它们知觉成一个整体。比如,下面的句号组成了多少个整体?你一定会回答是3个整体,而非12个整体。

。。。。      。 。 。 。      。  。  。  。

在功能的设计中,功能点应该跟随相关展示、说明,需做到相融与突出。

【应用】

①(反例)“更多”按钮让人疑惑

今年618当当大促,随便逛逛大促活动页:翻到下图所示位置时,我想看看更多文学类书籍,该怎么办?1. 点击更多按钮试试,万一是文学类书籍呢?2. 翻到最前端或者最后,看看更多按钮的安排规律?3. 深入思考,一般看到最后才会想看看更多,所以更多按钮应该是被安排在每个模块的最后?——这些都浪费着我的时间,让用户思考的设计,不是好设计。

图7:“更多”按钮归上归下?-当当618大促

APP端提供了一个解决办法

相似的特征,让人们自动将他们知觉到一起。

图8:用色块将它们联系在一起

还有一个更简单的方式,我保证用户会明白“更多”按钮属于谁:让“更多”按钮离上面更近,离下面更远。

②(反例)有点游离的check box

实际上,check box于周字的间距是10 px,与日字的间距是15px,它们之间是有区分的。但是这5px不足以让用户一眼知道check box的归属。如果我们这里展示的不是一周7个选项,而是月份有12个选项,用户在选择过程中还是会对自己的选择产生疑惑,目光不得不回到最开始,去确认自己的操作。

图9:有点游离的check box-outlook

3. 相似性

因为更相似,所以我们会自动将它们知觉成 1 个整体。就像创造101,公演的每支队伍会穿上风格一致的服装,我们能在最后pick时一眼认出她们所属不同的队伍。

设计中,如果没有利用其他方式引导用户,就会造成让用户迷惑的车祸现场。

图10:宣仪组公演-创造101

【应用】

①(反例)被淹没的层级

outlook附件-共享首选项设置内容有三个层级:

第一层:共享首选项

第二层:对于从我的计算机中选择的文件&对于我从OneDrive中选择的文件

第三层:第三层下的三个radio button

——整个设计中第二层的【对于我从OneDrive中选择的文件】淹没在第四层选项中。一方面层级之间的间距没有差异;另一方面画面中文字较多,我们很容易将问题知觉为一个整体——因此第二层的第二个选项就被淹没了。

将radio button向右缩进,让它们的相似特征更明显,是个可行的解决方案。

图11:被淹没的层级-outlook

4. 连续性

即便线条被截断,我们也会将它们知觉为连续的。如下图的蛇,我们会觉得它是一条可能被一页白纸挡住的完整的蛇。

图12:可能被白纸挡住的蛇

【应用】

①不必担心用户找不到路线

你能找到图中在建的14号线的线路图吗?即使路线是用不连续的线段来表示的,我们仍然能够将它们知觉为连续的一条路线。当然这里面也有相似性的功劳。

图13:虚线的在建线路-百度地图

5. 封闭性

当图形是一个残缺图形,但主体有一种使其闭合的倾向,即主体能自行填补缺口而把其知觉为一个整体。

图14

【应用】

①logo图案设计

图15:世界自然基金会会标
图16:晨光文具品牌logo

【小结】

5条常用的知觉组织原则:

①主体/背景;②接近性;③相似性;④连续性;⑤封闭性


大家更喜欢正例还是反例呢?欢迎留言~

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,290评论 6 491
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,107评论 2 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 156,872评论 0 347
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,415评论 1 283
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,453评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,784评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,927评论 3 406
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,691评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,137评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,472评论 2 326
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,622评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,289评论 4 329
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,887评论 3 312
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,741评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,977评论 1 265
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,316评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,490评论 2 348

推荐阅读更多精彩内容