恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
基于格式塔原则的一些设计思考
0.0°
2015-12-17 原创文章 经验/观点 举报 3232 11 19 2

一、Gestalt是什么?

    词意为“形式”,但与我们说的形式的意义不完全相同,它揭示了人的感知,特别是占主要地位的视知觉,并不是直接的镜像反应,它能对所看到的的“形”(视觉、声音或触觉信息)进行选择、组织、加工,也就是阿恩海姆所说的“知觉本身具有一定的'思维'能力”,视知觉并不是对刺激物的被动重复,而是一种积极的理性活动。简言之,格式塔就是由知觉活动组织过经验中的整体。


二、Gestalt Psychology 5大规律

    Gestalt Psychology 在研究人知觉的“思维能力”的过程中,发现了大量的知觉(主要是视觉)规律,尽管还没有哪种学说可以令人信服地解释这些规律背后的心理机制,但是作为非常稳定的现象和规律,它们可以常常被运用与设计中,主要的知觉规律包括完型论(整体论)、选择论、简化论、连续性、相似性。


三、Gestalt Psychology 的规律应用

    1.完型论(整体论)

    完型论强调人们通过视知觉活动,将感知到的形态加以组织,形成经验中的整体,而非客体本身。

Image title

    刺激物的形状、大小、颜色、强度等物理属性方面比较相似时,这些刺激物就容易被组织起来而构成一个整体。设计中通过相似性和秩序性的元素牵引用户的视觉,使用户意识到单独模块内容之间是关联的。图中的小米商城就运用色彩和形状的相似性、顺序标识引导,当用户处在购买详情页时,就能马上意识到这4块内容是相关联的,都是为了选择机型所做的操作。


Image title

    2.选择论

    积极的选择是视觉的基本特征。然而当图的轮廓出现不完整、未封闭、形状不规则、面积较大等图底关系不明确的情况下,就容易出现错觉中的“两难图形”,整个界面很难Don't make me think。中国的传统国画在这方面做的很棒,国画中的白色为底,可以是湖水、可以是远山、可以是天际,可以是云海。这些元素具备了“底”的特质:“不完整”、“未封闭”、“形状不规则”、“面积较大”等。留白在被赋予各种各样的意义同时,在不影响“底”的表达情况下,增加了画面的意境。

Image title

    Opera Coast在构图上巧妙的遵循了“图”与“底”法则,与国画类似,开放式的“底”(冷峻磅礴的高楼)在被赋予“情怀”体验的同时,保证了聚焦式“图”(网站导航)的信息的准确传递,与此同时还彰显了产品独特的气质(品质、典雅)。

Image title

    3.简化论

    人们对一个复杂对象进行知觉时,只要没有特定的要求,就会常常倾向于把对象看作是有组织的简单的规则图形。

Image title


    在设计过程中,要注意外界线索的充分性,从而保证用户图式与产品图式之间的正确映射。界面中信息传递元素、视觉元素该如何表示?哪些是可操作的?哪些是不可操作的?这些元素代分别代表什么意思?如果我们处理不好,很有可能会使用户的简化倾向与现实中的这些困惑产生冲撞。这方面,Twitter处理的很好,Icon 或Icon+文字组合(Icon视觉面积更大)表示可操作Button、蓝色的文字或蓝色的文字+Icon组合表明支持点击的Button或导航链接、附在不可点击的文字说明(灰色)的旁边的Icon(文字面积更大)作为该文字的一种状态补充,比如这位用户真的是盖茨,因为在他昵称旁边有认证标识、盖茨住在西雅图,因为在地名旁边有地理位置标识。

Image title

    4.连续性

    如果一个图形的某些部分可以被看作是连接在一起的,那么这些部分就相对容易被我们知觉为一个整体。

Image title

    界面设计中连续性主要体现为减少冗余的步骤和干扰项,避免用户的注意力转移。这方面苹果原生天气软件做的很好,一个天气界面需要承载很多信息元素,为了避免用户看了这个忘了那个,保持信息传递的连续性,界面首先运用了“图底关系”,以开放式的天气状态动画作为底,烘托产品氛围,现在是晴天,再往下浏览详细信息时,界面又运用了“标题栏式浮层交互”保留上一模块中的重要信息,保证了信息接收的连续性。

Image title


    5.相似性

    在整体论里已经提过:“刺激物的形状、大小、颜色、强度等物理属性方面比较相似时,这些刺激物就容易被组织起来而构成一个整体。”

今日头条通过相似性原则将已读的资讯进行灰度处理,帮助用户明白哪些资讯已经浏览过了。

Image title

    这样的相似性手法还有很多,6.1.0版的QQ面板将5.9.1的蓝色Navigation Bar改为与面板底色相同的白色,保持了面板的整体性,使用户能够更加聚焦于面板内容本身。

Image title

四、写在最后

    Gestalt 原则在具体的设计实施过程中扮演着人的视觉认知与界面设计之间的跨海大桥,一定程度上减少了可用性测试阶段中的诸多问题,对于提升界面设计效率与产品气质有着显著的作用。好了,就说这么多,让我们赶快试试这个神奇的 Gestalt

 

更新:2015-12-17

收藏

11人已收藏

交互实验狮

致力于UX方法论的探索和实践

  • 18

    作品

  • 440

    粉丝

  • 8

    关注

  • 设计师修炼记
  • 研霸君孕育记
  • 以Emotional Design解构有缘网
  • 产品用户体验规划之八卦连环掌

    猜你喜欢

      2015-12-17 原创文章 经验/观点 举报 3232 11 19 2

      基于格式塔原则的一些设计思考

      0.0°

      你确定要举报基于格式塔原则的一些设计思考

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2015年12月17日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      19
      11
      2

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录