IAMUE
  • Home
  • 文章分类
    • 交互
      • 从零开始学交互
      • IxD案例
      • 微信热点
    • UXD
    • Wireframes
    • GUID
    • PM
  • More
    • AID
    • 资源下载
    • 作品集
    • 电子书:《从零开始做交互》
    • Sketch 4.9 - Sketch全系列免费下载(更新Sketch4.9)
    • 淘宝手机H5版UX移动交互设计规范
    • Axure基础入门
    • 隐私政策

「大产品小细节」5分钟了解格式塔原则

Catherine • 2017-08-04 15:13 • 交互设计

这一篇「大产品小细节」想跟大家聊聊设计中很常用的一个心理学原则——格式塔原则。

文章目录[隐藏]

  • 一、格式塔原则
  • 二、说明与举例
    • 1. 相近(Proximity)
    • 2. 相似(Similarity)
    • 3. 封闭(Closure)
    • 4. 连续(Continuity)
    • 5. 简单(Simplicity)
  • 三、总结
    • 相关阅读

这一篇「大产品小细节」想跟大家聊聊设计中很常用的一个心理学原则——格式塔原则。

「大产品小细节」5分钟了解格式塔原则

一、格式塔原则

首先我想简单介绍一下格式塔原则,格式塔原则分成五个部分:

  1. 相近(Proximity):距离相近的各部分趋于组成整体
  2. 相似(Similarity):在某一方面相似的各部分趋于组成整体
  3. 封闭(Closure):彼此相属、构成封闭实体的各部分趋于组成整体
  4. 连续(Continuity):我们倾向于完整地连接一个图形,而不是观察残缺的线条或形状
  5. 简单(Simplicity):具有对称、规则、平滑的简单图形特征的各部分趋于组成整体

二、说明与举例

1. 相近(Proximity)

人们通常把位置相对靠近的事物当成一个整体。我用一幅图来说明一下:

「大产品小细节」5分钟了解格式塔原则

同样都是16个圆形,左图你会把16个圆形当成一个整体;但是右边那幅图,上面8个圆形和下面8个圆形靠得更近,所以你会把上面8个圆形当成一个整体,下面8个当成另外一个整体。

这里需要注意的是,相近性作为第一条原则,它的「权重」非常大,大到可以抵消其他原则,比如为上面的圆形添加颜色,甚至改变其形状,人们也会把相近的事物当成一个整体:

「大产品小细节」5分钟了解格式塔原则

那么相近性原则的实际应用,又有哪些呢?

是的,最常见的地方就在一些功能列表页面,比如设置,或者像微信的「发现」页面那样的功能列表页面。大家会把「扫一扫」和「摇一摇」、「购物」和「游戏」当成一个整体,这样可以让界面显得更加清晰,同时还能突出重点,这个列表的两头实际上是最突出的,像「朋友圈」和「小程序」。如果没有使用格式塔的相近原则,界面就会显得非常杂乱了。

「大产品小细节」5分钟了解格式塔原则

2. 相似(Similarity)

人们会把那些明显具有共同特性(如形状、大小、共同运动、方向、颜色等)的事物当成一个整体。比如下方第一幅图,大家会把同行的正方形当成一个整体,其他圆形当成一个整体。第二幅图,人们就会把大正方形当成整体,小正方形当成另一个整体。
「大产品小细节」5分钟了解格式塔原则

而这里需要注意的一点就是人们对形状、大小、共同运动、方向、颜色的「感受权重」是不一样的,在着这里颜色属性会覆盖其他属性的影响:
「大产品小细节」5分钟了解格式塔原则

左边这幅图,大家会把正方形当成一个整体,加了颜色后的右图,就变成竖列圆形+方形是个整体了。

全面提到了一个叫共同运动的东西,估计大家会很陌生,这里我想以安卓的交互规范为例,说明共同运动。安卓的悬浮按钮,就是一个用了相似性(共同运动)的设计,点击右下角的分享,从下往上会出现多个操作按钮,他们虽然 icon 不是一样的,但是因为同样是从下往上移动,所以人们会把他们当成一个整体。(这里我想强调一点,前面提到的形状、大小、共同运动、方向、颜色等条件,是可以组合使用的。这个悬浮按钮实际上用了共同运动、相同形状、同一颜色,从而达到相近性的目的。)

「大产品小细节」5分钟了解格式塔原则

3. 封闭(Closure)

人会将不完全封闭的东西当成一个统一的整体,所以有些时候完全闭合是没有必要的。比如世界自然基金会的 Logo,就是一个典型地用到封闭原则的设计:
「大产品小细节」5分钟了解格式塔原则

熊猫的头部和背部并没有明显的封闭界限,但是我们依然会把它当成一只完整的熊猫。

那么封闭性原则又在哪些使用呢?

这一原则其实很多地方都用到,不过我们一般不叫其为封闭性原则,而是叫截断式设计。为了让用户感知到还有内容,一般我们会使用截断式设计。像微信的钱包页面,底部因为屏幕大小的关系被截掉了部分内容,但是用户可以通过残留的部分,「脑补」出下方仍然有个完整的整体:

「大产品小细节」5分钟了解格式塔原则

4. 连续(Continuity)

我们倾向于完整地连接一个图形,而不是观察残缺的线条或形状。首先请大家看看这幅图片:

「大产品小细节」5分钟了解格式塔原则

大家觉得图里的是两个圆形呢?还是两个残缺圆和一个两圆相交的重合?

「大产品小细节」5分钟了解格式塔原则

按照格式塔原则,我猜大家看到的应该是上方左边的两个圆形吧!

这个法则我们在交互设计上会用得比较少,但是在视觉设计中会多一点,比如某些应用就喜欢把 App Store 上的应用截图做成连续的图片。(欢迎大家留言说说哪些应用使用了连续原则哦~)

「大产品小细节」5分钟了解格式塔原则

5. 简单(Simplicity)

具有对称、规则、平滑的简单图形特征的各部分趋于组成整体。给大家看看一个例子:

左边的界面就是个对称页面,所以我们会觉得左边的各个卡片是个整体,下方还有一个新的卡片。但是右边的卡片就不是了,因为整个页面不是对称的,用户可能会疑惑右边是不是还有卡片?

「大产品小细节」5分钟了解格式塔原则

三、总结

看了这几个例子,估计各位也发现,其实这几个原则都是可以混合使用的。希望这篇文章可以帮助大家设计出更优秀的界面!不过,在这里我想强调几点:

  1. 以前读书的时候,对这些理论不屑一顾,但是真的工作后,才发现熟练使用这些理论可以极大地提高你的工作效率。
  2. 原则不是一成不变的,熟练使用这些理论后,可以尝试「打破」这些原则,说不定可以创造出更棒的效果!

相关阅读

「大产品小细节」5分钟了解费茨定律

 

作者:王梓铭,云之家用户体验部交互设计师。前产品汪, 还能偷偷撸几行代码。时常做梦,想改变世界。怀揣着这个梦想,跌跌撞撞尝试了各种各样的东西。录过视频,开过 Podcast,玩过博客。 最后发现,其实改变世界并不难。从小事做起,帮助能帮助的人,改变能改变的人就已经足够了。

本文来源于人人都是产品经理合作媒体@金蝶云之家体验中心(微信ID:UXD-Cloudhub),作者@王梓铭

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/20784/

logoUIUX交互交互设计交互设计师产品产品经理分享小程序微信心理学格式塔原则用户用户体验界面设计视觉视觉设计设计设计师设计技巧
赞 (0)
CatherineCatherine
0
生成海报
交互设计控件之按钮设计
上一篇 2017-08-04 14:44
转化率低是设计师的问题?这锅我们不背!
下一篇 2017-08-04 15:29

相关推荐

  • 微信热点

    【用户体验】Chiphell论坛网友Raise3D N2打印体验实录

    以下是来自Chiphell论坛的一位@xm79 网友的使用Raise3D N2 3D打印机后的体验分享帖。让你看到Raise3D N2 3D打印机最真实的一面。之前用了好一阵工作室的makerbot 之后,也想着买一台自己的。主要每次打都要排个队,十分麻烦。而且每到出图季就要没日没夜的看守在打印机旁,通宵不起了。思量着买一台放家里吧。本来考虑着买makerbot的,因为速度是真的快,软件算法比用ultimaker系的快了一倍。但是问题就...

    2018-02-05
  • 移动端搜索功能设计:3个阶段解析搜索流程设计要点 交互设计

    移动端搜索功能设计:3个阶段解析搜索流程设计要点

    这篇文章笔者想和大家聊一聊有关搜索功能的设计,搜索功能是每个内容型APP的核心,它的易用性决定了用户是否能从APP里快速找到自己想找的内容,那么决定搜索体验好坏的关键点又是什么呢?这里我总结了两点,“操作的易用性”和“结果的准确性”。看似简单的两点却有很多的学问,笔者把搜索的交互流程划分成三个关键阶段,“搜索前、搜索中及搜索后”,接下来将从这三个阶段逐一分析整个搜索流程中的相关设计。

    2017-05-11
  • 交互设计应该学的软件有哪些? 从零开始学交互

    交互设计应该学的软件有哪些?

    数十万互联网从业者的共同关注! 作者:Yoojoo,作者授权早读课发表,转载请联系作者。来源:知乎仅针对现有企业交互设计师常见设计范围(网页,桌面app,移动端app)作答。1-7为交互设计师必备,8-10有兴趣的…

    2017-08-01
  • 微信热点

    基于Axure的移动端APP产品设计规范

    文章结构:① 全局元素与控件设计规范 ② 全局注释规范 ③ 一些基本的产品设计原则一、全局控件元素设计规范我们经常会看到很多产品都有一个标志颜色,来增加产品的辨识度,例如淘宝的橙色,小黄车的黄色等。在产品设计过程中,为了保持视觉的统一性,通常会有一套配色方案,配色方案确定了产品的主色调和辅色调,所有的控件和元素都应用这一套配色来设计。除了配色还有,还有字体元素,按钮元素,以及其他控件元素等,产品设计开始就应该定义好这些基本规范,不仅能保...

    2018-03-04
  • 一个精美的手机的原型怎么产生的-第二集

    阿西录了下视屏尝试下最直接的方式 ,你看着阿西怎么做原型设计的。最简单方式往往最有效。 这段是:安卓手机,Axure手机框组件的视屏教程-2 在线播放! 第二集: 第一集下载地址:点我点我 第二集下载地址:点我点…

    交互设计 2014-09-06
  • 从“注意力”的角度,谈交互设计如何避免入坑 交互设计

    从“注意力”的角度,谈交互设计如何避免入坑

    前段时间UIMAX团队在做“新浪新闻客户端用户画像项目”时,用研人员访谈用户的过程中,发现一个这样的问题:多数用户完全没注意到过页面上的“长按可排序或删除”这段文字,反馈“不知道可以对新闻频道进行排序” 设计师…

    2017-06-05
  • 微信热点

    【上海实习】上海最TOP实习

    TG实习狗每日发布北上广深最新鲜的实习信息,陪伴你从大学到职场TG旗下媒体:TG实习狗、TG校招狗、TG内推狗▲ 点击图片马上了解 ▲招收15-20名高潜质学员进行为期1-2年系统定制化培养助力高潜质人才进入顶尖名企今日求职贴士发表于1秒前老狗查看:66666回复:233你真的适合咨询行业吗?在我看来任何选择咨询的人都会不可避免的询问自己以下几个问题1.Do I Love Solving Problems?2.Do I Think in...

    2018-04-09
  • 设计的三个层次,帮你重开情感化设计的大门 交互设计

    设计的三个层次,帮你重开情感化设计的大门

    我们正在进入一个信息复杂度远超以往的时代。我们所面对的是一个物质和信息都极大丰富的世界,从产品竞争的角度上来说,越来越激烈的对抗和冲击是必然的。许多产品已经从单纯的“谈配置”过渡到了“谈感情”的阶段,情感化设计已经在不同的设计领域中崭露头角,甚至成为了最核心的组成部分。

    2017-05-15
  • 微信热点

    【招聘】阿里、腾讯、网易、百度、亚马逊、德勤、滴滴、京东、华兴资本、去哪儿、蚂蚁金服、特斯拉等

    上海|携程+实习携程运营实习生工作内容 一周内入职1、携程app微领队社交功能“结伴”、“旅友圈”运营(删违规帖+内容运营)2、旅途聚会物料负责、寄送、整理3、旅途聚会新产品冷启动4、聚会产品上货至其他平台(搬砖+运营)5、公用区图片库等内容整理6、大型活动报名信息收集+统计(不定期,非日常)7、临时日常行政工作协助加分项1、熟练excel、ppt、word,书面表达佳2、足够耐心、细心,强责任心3、有办公室实习经验4、可来携程坐班至少...

    2018-04-08
  • 微信热点

    美甲店如何做好用户体验?【下】 | 互联互生

    上周的一篇文章我们说到了“用户体验”对于美甲店铺的重要性,文章中我提出了一个“峰值和终值的一个概念”,以及举了几个服务性的行业的例子,它们是如何利用“多数被遗忘,偶尔特漂亮”这个心理给用户带来不一般的体验感。今天这篇文章我们重点来谈谈咱们美甲店可以怎样在“用户体验”上有一些创新。好客服的法则随着网络越来越普及和重要,大部分美甲店主都开始注重自己的店铺在网络上面的评价,我们就先拿大众点评这个平台作为例子。一个店铺在大众点评上面肯定有很多的...

    2018-05-06
  • UED书单
  • 微信精选
  • 投稿说明
  • 赞助

Copyright © 2024 WPCOM 版权所有 粤ICP备000000000号 Powered by WordPress