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

相关推荐

  • 微信热点

    这样学Axure,效果更好,面试更容易拿高薪|1433人的经验贴

    众所周知,Axure是产品经理必备的工作软件。但为什么要学好Axure,仅仅是因为它是必备的软件?为了不错过更好的发展机会BAT对于产品工作2-3年的面试者,均要求熟练使用Axure。别等要用时,才发现自己没有!别让Axure阻碍你的高薪产品路。怎样学Axure,效果更好?想学好Axure,不让Axure阻碍自己的发展,却苦于这些问题?没人监督指导,自学还没到一个周,就想放弃按教程操作,却出不了效果,又不知错在哪里难的知识内容看着费劲,...

    2018-04-20
  • 【笔记】北美大公司里做UX Designer是啥体验?(附视频)

      UXRen北美社区成立至今,旨在聚集华人UX设计师群体,为提供大家一个交流的平台。此外,我们希望大家也能够能线下碰面、聊天、互相认识,分享彼此的UX设计宝贵经验。   本期撰文/Leecy 会议记录/陈若涵 整理/Leecy…

    交互专题 2017-08-07
  • Web页面中的表格设计,远没那么简单 交互设计

    Web页面中的表格设计,远没那么简单

    表格的设计远远没有想象的那么简单,除了纯粹的数据展示,现在的表格越来越兼顾到一些导航的功能在里面,不仅仅纵向展示数据,在横向方面也做了相应的扩展。本文作者将来详细聊一聊表格。

    2017-05-02
  • 探讨移动电子商务网站中的图文滚动切换设计 交互设计

    探讨移动电子商务网站中的图文滚动切换设计

    很多人都会和我说,网站中的滚动切换设计一般都是弊多利少,尽量不要使用。但是,本文会告诉你并非所有情况都是如此。 我写这篇文章就是希望我们能够更多理解网站中的滚动切换设计,不要听信传闻。我将用我们的调查数…

    2015-04-03
  • “空状态的设计“值得更多关注 交互设计

    “空状态的设计“值得更多关注

    空状态,或称零数据状态,很多时候不太招设计师的待见。我们基本都是在主要流程界面的设计工作完成之后才会回过头来考虑完善一下,因为从表现上来看,空状态给人的感觉就是临时性的,有些微不足道。 不要被空状态的…

    2015-08-17
  • 微信热点

    在Axure中,如何用动态面板实现banner的轮播效果(附Axure教程及软件)

    axure功能太强大,动态面板可能已经搞得你头晕眼花了,更别提7.0版本的中继器了。废话不多说,还是和大家分享一下动态面板实现banner轮播的效果,对动态面板还不熟的,不妨来看看这个效果的制作过程,然后自己试着做一做,绝对增加自己的信心。就拿某宝首页banner轮播效果为例进行说明:1前期线稿图,部件准备01先画个大概的位置线框图,如下图所示,做了3张banner的轮播效果02banner位置的占位符转换为动态面板(鼠标右键,转换动态...

    2018-03-06
  • 这个按钮不简单 交互设计

    这个按钮不简单

    Slack 将保存时的「状态提示」设计在了同一按钮中。Flava 通过按钮的不同状态将「删除」与「确认」两个操作结合在了一起。Arent & Pyke 巧妙的将进度提示设计在了提交按钮中。Fantastical 2 利用了 iOS 的 Switch Button 来对 Event 和 Reminder 两种类型进行切换,并在按钮中加入了相应的图标用以识别。Wifeel 将 iOS 和 Android 版 App 的下载按钮统一设计在了一个按钮中。Tidy 在进行「归档」和「添加至相册」操作时,会在顶部以同色的方式来标识所对应的操作按钮。在 Tumblr 中关注某个用户时,「Follow」按钮会变为当前用户的头像并以一个小动画来作为关注成功的提示。

    2017-06-05
  • 微信热点

    《用户体验可视化指南》视频讲书(1)

    我们选择了人民邮电出版社2018年出版的《用户体验可视化指南》作为第一本,带着大家啃书。原因是这本书真的非 常 好,好到可以成为用户体验设计和研究领域的大辞典了。作者引经据典,却因为篇幅受限,很多没有详细展开。不知前因后果的读者,因此会错过很多有意思的观点。所以UXREN为你详细拆解《用户体验可视化指南》,每次10-20分钟,3首歌曲的时间,日积月累,透彻理解经典书籍。第1期: 前言《用户体验可视化》前言部分,介绍了为什么会提出共线图(...

    2018-03-27
  • 微信热点

    深入智能商业用户体验 —— 艺土咨询(ETU)

    4月10日下午,本协会会长王日华和副秘书长王索飞等一行前往位于长宁区凯旋路166号上的本协会理事单位上海艺土界面设计有限公司走访,该公司董事长林钦、资深用户体验设计师梁雯琦热情接待了王会长一行。在该公司的会议室,林总首先用PPT形式向王会长一行简单介绍了艺土公司的发展情况。她说,艺土(ETU)自2004年成立以来,深耕用户体验行业14载,通过与160多个知名企业进行760多个项目的深度合作探讨,帮助企业通过洞察市场价值、理解用户价值需求...

    2018-04-12
  • Reading Your User | 设计心理学书籍推荐 交互设计

    Reading Your User | 设计心理学书籍推荐

    研究大众的心理学对于设计是很有帮助的。用户在围绕着你的产品所进行的一系列行为举止背后的动机是什么,与之互动时进行过哪些心理活动,外部的哪些因素能够成功影响用户的决策……这些都能够设计师完成更好的设计。

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

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