贼干的货 | 交互设计中的格式塔原理

小编说格式塔心理学认为知觉不能被分解为更小的组成部分,知觉的基本单位就是知觉本身,格式塔心理学的信条就是:整体不同于部分之和。格式塔心理学强调结构的整体作用和产生知觉的组成成分之间的联系。当我由测试转行到交互设计师时,我确认自己擅长辨别产品的优劣,和识别产品的待改善点,尽管很多时候这些待改善点还缺少数据和用户的论证。之前我还是典型的用户思维,对产品实际效果的判断非常依赖数据和用户反馈,直到我了解了格式塔原理,它改变了我对设计的思考方式,...

贼干的货 | 交互设计中的格式塔原理

 小编说 

贼干的货 | 交互设计中的格式塔原理

格式塔心理学认为知觉不能被分解为更小的组成部分,知觉的基本单位就是知觉本身,格式塔心理学的信条就是:整体不同于部分之和。格式塔心理学强调结构的整体作用和产生知觉的组成成分之间的联系。

当我由测试转行到交互设计师时,我确认自己擅长辨别产品的优劣,和识别产品的待改善点,尽管很多时候这些待改善点还缺少数据和用户的论证。之前我还是典型的用户思维,对产品实际效果的判断非常依赖数据和用户反馈,直到我了解了格式塔原理,它改变了我对设计的思考方式,并给了我一个分析原因的思考框架。这种思考方式和工作框架大大提高了我的工作能力和工作技巧。


在进行产品复盘时,有必要了解产品设计时使用的设计模式和范例,但通常这有局限性。有一个完整的思考框架,能让我们更容易理解和思考为什么以及怎么做,也会让设计方案更靠谱。格式塔原理就是这样的一个思考框架。


贼干的货 | 交互设计中的格式塔原理

格式塔原理


格式塔心理学(gestalt psychology),又叫完形心理学,是西方现代心理学的主要学派之一,诞生于德国,后来在美国得到进一步发展。该学派既反对美国构造主义心理学的元素主义,也反对行为主义心理学的刺激—反应公式,主张研究直接经验(即意识)和行为,强调经验和行为的整体性,认为整体不等于并且大于部分之和,主张以整体的动力结构观来研究心理现象。该学派的创始人是韦特海默,代表人物还有苛勒和考夫卡。


格式塔原理主要包括:主体-背景原则、接近性原则、相似性原则、连续性原则、封闭性原则、对称性原则、共同命运原则等。


本篇文章将结合互联网产品实例讨论格式塔原理在交互设计中的应用。

 主体-背景原则


这条原则可以理解为“什么重要,什么不重要”,或者说成“主体-背景原则”。

当用户处在一个场景中时,本能的第一反应是判断视野中哪些内容是重要的、需要马上感知的,哪些内容是不重要的。为了完成这一点,大脑需要将画面中的元素分开成主体元素(需要关注的元素)和背景元素(不那么重要的辅助元素)两部分。以下例子提供了一些可以用来区分主体和背景元素的视觉提示。


制造对比和反差


hero images是目前最常用的着陆页设计方式,通常还要搭配一个明显的CTA按钮。一个好的hero image使用主体和背景的关系原则快速传递信息,并使用户的下一个操作步骤显而易见。


Moosehead使用的hero image有清晰的主体和背景,通过字体、字号、颜色等细节优化凸出了主体信息,用户能够快速抓住页面想表达的主旨信息。


贼干的货 | 交互设计中的格式塔原理

文本(主体信息)是白色的、大字号、浅灰色阴影,这些能让文本产生在图片(背景)前面凸出的3D效果,深色图片上的白色文字十分吸引眼球,背景图做了模糊化处理,保证了用户对文本的迅速对焦。以上所有效果的作用,就是保证文本是主体信息,背景图只是辅助信息。


Heineken在hero banner上使用一个视频做为背景。


贼干的货 | 交互设计中的格式塔原理


使用视频背景时,对信息传递和CTA凸出上有一定挑战性,但是Heineken通过大号的白色文本和调暗视频亮度解决了这个问题。“Watch the prep talk”这个CTA放在半透明的黑色背景上,有两个作用:其一是保证了文本和视频的对比度,方便用户阅读文本信息;其二是告知用户这是个可以点击的按钮(按钮有亮度增加的悬停态)。


矩形元素


Molson Canadian使用矩形来区分主体信息和背景信息,其主页如下:


贼干的货 | 交互设计中的格式塔原理


打开网站主页,首先有三个元素映入眼帘:啤酒的图片;右上部的矩形(“Click here to nominate…”);白底的长条矩形(“Great Canadians deserve…”)。右上角的矩形显然是一个主体元素:白色边框清楚地将它和背景图区分开。啤酒图片与背景图的颜色对比明显;底部的白色矩形叠加在背景图的上面,有很好的凸出效果。


阴影


Molson着陆页上对于矩形的使用还有另一个重要技巧:阴影。注意到矩形是有阴影效果的,这就给人一种矩形是在麦田顶端的感觉。Molson在社交媒体的图片上也同样使用了这个技巧。


贼干的货 | 交互设计中的格式塔原理


Budweiser也使用了阴影的技巧。


贼干的货 | 交互设计中的格式塔原理


顶部导航栏和主图是有阴影的,这些都给用户一种它们是悬在背景上层的感觉。

相似性原则

相似性原则认为,具有相似视觉特征的事物被认为功能上也更相关。用于相似性的三个最常见的特性是颜色、形状和大小。还有其他特性,如纹理、方向等,但它们并不常见,而且在大多数情况下并不那么重要。


相似性和一致性是同一事物的两面。页面元素能够清楚的表达页面功能,这通常是页面风格一致性的事情。同一个产品的链接、布局、CTA等,应该尽可能地保持一致性,这样用户会更容易地学会如何使用这个界面。以下是一些流型的UX网站,看一下他们是如何使用颜色、形状、尺寸来表达相似性的。


Smashing Magazine

看下Smashing Magazine是如何在链接和CTA上使用一致性的。


链接

在Smashing Magazine的着陆页上使用了两种链接:内容链接和导航链接。


贼干的货 | 交互设计中的格式塔原理


内容链接

Smashing Magazine的内容链接有以下几种:


  • 链接颜色是浅蓝色,加灰色下划线;

  • 作者名字的字号更大,浅蓝色;

  • 标记和注释显然也是链接,同样采用浅蓝色,但没有下划线。

如果向下滚动页面,会发现链接规则是一致的,习惯这种规则后,浏览页面时就可以轻易识别每种链接。


导航链接

左侧导航菜单中的链接使用颜色和板式进行分组。


一级导航的字体全部大写,深灰色,加粗;二级导航首字母大写,浅灰色,不加粗;此外,也使用颜色来区分不同层级。


每篇文章的标题字号最大,加粗。即使以极快的速度滚动页面,也可以通过字体大小轻易地识别出文章标题。


CTA

Smashing Magazine使用两类CTA按钮:用户搜索和订阅的红色按钮,以及通常以省略号结束的蓝色按钮。


贼干的货 | 交互设计中的格式塔原理

红色按钮用于搜索和订阅,他们被附加到输入框的后面,刺激用户在输入文本后立即点击;蓝色按钮为了吸引用户更多地了解后置页面的内容。即使蓝色按钮位于不同位置,他们的样式也是相同的。这有利于用户理解这类按钮的作用:后置页面的触发按钮。


Boxes and Arrows


这是一个极简风格的网站,但是信息阅读效率极高。


贼干的货 | 交互设计中的格式塔原理


这个网站的使用和学习成本很低,因此内容的阅读速度极快。每个博客文章的标题都是最突出的元素,保证快速浏览页面时不会忽略标题;文本链接有下划线并突出;“Continue reading”的链接清晰且有一致性;每篇文章都严格遵循这种规则,整个页面展示了很强的相似性。


Mockplus


Mockplus使用的布局方式很常见:页面分为左右两部分,一侧是大图片,另一侧是文本。

页面布局 


贼干的货 | 交互设计中的格式塔原理

与其他例子一样,Mockplus通过尺寸(图像和文本)和布局来构造相似性。此外,还利用了形状来构造元素之间的相似性。

贼干的货 | 交互设计中的格式塔原理

从顶部探出的半圆形显然具有一致性,将这个设计方式复制,可以很容易地形成相似性,让用户理解,所有这种设计方式的元素,作用基本相同。

连接性原则

连接性原则背后的想法很简答:为了使事物看起来更像是一个整体,因此把它们装在一个盒子里,或者把它们连接起来


外壳


通过套外壳对页面内容进行分组的方法,已经应用在了各类互联网产品上。


社交媒体

贼干的货 | 交互设计中的格式塔原理

Facebook上有很多对外壳的应用,具体如下:


  • 整个帖子都在一个白色外壳里,很明显一个外壳就是一个基本单位;

  • 视频标题和视频被封闭在一个灰色外壳里;

  • 点赞图标和“Like Page”在灰色外壳里,显然点赞和喜欢有关联性;

  • 点赞、评论和分享都在白色外壳里,这些动作都与文章内容有关;

  • emoji表情、相机、GIF、贴纸图标都封闭在评论框里。

博客类站点


在相似性里已经列举了Boxes and Arrows的例子,这个网站同样还为使用外壳分离内容提供了很好的例子。


贼干的货 | 交互设计中的格式塔原理

另一个使用外壳封闭内容的好例子是CBC网站。


贼干的货 | 交互设计中的格式塔原理


表单


注册表单外面套一个外壳是很常用的做法,此外,对订阅表单套外壳也很常见。


贼干的货 | 交互设计中的格式塔原理

导航


对于任何产品,导航都是最重要的元素之一,同样也经常使用套外壳方法。以下是ABC顶部导航栏的例子


贼干的货 | 交互设计中的格式塔原理


ABC使用菜单下面的一条细线将导航条与内容分隔开,有效地将导航区的元素分组。戴尔也用了相似的方法,搜索框和导航菜单都被封闭在一个蓝色外壳里。


贼干的货 | 交互设计中的格式塔原理


 Logo


大量公司在Logo设计上利用了外壳的思路。对Logo套外壳可以很清楚的表明哪里是Logo的一部分,哪里不是。


贼干的货 | 交互设计中的格式塔原理

连接元素

除了外壳,连接线和思想气泡也能表达连接性原则。尽管气泡不是线条,但它们有很好的连续性。在网页设计中,使用连线或思想气泡来连接元素并不常见,但有时在PPT、脑图等场景下,使用连接线和气泡能起到很好的效果。


贼干的货 | 交互设计中的格式塔原理


接近性原则

另一个可以用来表达关联的格式塔原则是接近性。接近性原则可以这样理解:


更紧密地联系在一起的物体,通常被认为比物理距离更远的物体,更具有相关性。


接近性并不像连接性那么强大,但仍然是一种有效的分组技术,而且非常美观。适当地使用空白符是表达相关性的很好的方式。


空白


以下的例子能够表现空白大小所引起的不同效果。


贼干的货 | 交互设计中的格式塔原理

错误消息

对于如何提醒表单填写的错误信息,已经有比较成熟的方案。以下是Netflix的密码错误提示。


贼干的货 | 交互设计中的格式塔原理


Netflix的密码错误提示距离密码填写框较远,用户在上下滑动页面的时候需要记忆提示内容。Google则更好的利用了接近性原则。


贼干的货 | 交互设计中的格式塔原理


在页面顶部提示错误信息是必要的,但在输入框的下面直接提示错误信息则更有效,这些错误提示与相应的输入框更接近,用户可以很清楚的知道哪个字段填写错误。


 

译者:李小新

译文链接:http://www.woshipm.com/ucd/945761.html

原文作者:Jonathan Beer, Co-founder of ThinkUX (thinkux.ca). Programmer, UX Researcher & Designer.

原文地址:

https://thinkux.ca/blog/be-a-better-designer-with-gestalt-principles-part-1-figure-ground/


- END -


勤奋的搬运工:Vector


贼干的货 | 交互设计中的格式塔原理

OneUX全体小伙伴儿

祝大家元宵节快乐~~~~~~~~

祝大家元宵节快乐~~~~~~~~祝大家元宵节快乐~~~~~~~~祝大家元宵节快乐~~~~~~~~祝大家元宵节快乐~~~~~~~~祝大家元宵节快乐~~~~~~~~祝大家元宵节快乐~~~~~~~~祝大家元宵节快乐~~~~~~~~


贼干的货 | 交互设计中的格式塔原理贼干的货 | 交互设计中的格式塔原理

OneUX
用户洞察与互联网趋势
创新互动体验与新兴科技

贼干的货 | 交互设计中的格式塔原理

贼干的货 | 交互设计中的格式塔原理微信ID:oneuxer 
贼干的货 | 交互设计中的格式塔原理长按左侧二维码关注

原创文章,作者:交互精选,如若转载,请注明出处:https://www.iamue.com/35544/

(0)
交互精选交互精选
上一篇 2018-03-03
下一篇 2018-03-03

相关推荐

  • B2B、SaaS 等企业软件中的交互设计总结

    ♝点击上方“交互设计学堂”关注我们,送电子书我刚开始在VWO工作的时候,一直想弄清楚一个问题:企业软件(B2B)真的和B2C应用不一样吗?对于设计师或者设计流程来说,两者又有什么不同?这篇文章是我在过去几年里的一些经验梳理,希望能够帮助那些想去或者已经在企业软件团队工作的设计师们。什么是企业软件?下面是维基百科中的定义:企业应用是一种计算机程序,主要用来满足企业的需求,而非独立的用户。一些大家可能用过或者见过的企业软件。在现代企业中,大...

    2018-04-20
  • 大数据应用的用户体验分析

    版权所有©德塔精要,转载请注明出处用户对产品或服务的认同是由用户体验的过程所决定的,一个具备良好用户体验的IT系统对内可以提高员工工作效率,对外可以提高客户满意度和忠诚度,最终为企业带来不菲的经济效益或社会效益。因此,组织的IT战略必须实现IT与业务的融合,面向客户和关注用户体验管理。但目前用户体验管理是当前IT业务运营的弱项,也许我们能够了解IT资源的每个细节,但却不知道用户感受怎么样,不利于IT系统的优化和完善。缺乏用户体验管理以及...

    2018-03-12
  • 交互设计在商业中的价值

    转载自“创设空间”:chuangshe_space简书链接:http://www.jianshu.com/p/d0b5baa600d2作者:Mr汤进er一、前话问题:一句话概括你理解的交互设计是什么?部分回复摘录:@哎呀,我擦~:大概就是通过使用者的某些动作才能激发出的产品或包装的第二功能吧。@捉急的小慢~~O~~:界面设计,形式和功能相融而令人愉悦的互动。@lcy:信息的输入,输出的过程。从大家对于这个问题的回复,不难看出,不同人对于...

    2018-03-05
  • 灵兽奇谋之教你5招提升用户体验

    (来自梧桐树资本远方的祝福)007灵兽奇谋《灵兽奇谋》起源于我们携手100位行业大咖组成灵兽家族,每位家族成员都必须跟新零售007的粉丝们分享一篇,自己近年最干货的心得文章,可以是感悟,也可以是奇招,没有任何限制与约束,给予读者们干货与奇谋,是我们唯一的标准。每十篇奇谋为一季,2018年第一季,火热连载中。奇谋无高下,真诚见初心,谢谢每一位老师的付出,亦谢谢对面每一位乐于倾听的你。今晚灵兽奇谋来自灵兽家族代盐人兽哥,兽哥跟大家聊聊新零售...

    2018-02-11
  • Axure 从入门到够用

    第180篇Glen几个月前决定总结分享一个Axure教程系列,结果现在才腾出时间来梳理。Axure是最常见的产品原型工具了,看完这篇文章,你就基本具备了日常工作需要的产品原型能力了。Axure入门到够用教程1. 尺寸规范1.1 网页端产品尺寸优秀的产品原型是需要做到像素级高保真的,这样便于之后设计师输出设计图,毕竟眼见为实嘛。现在互联网主流屏幕分辨率有1920 * 1080、1366 * 768、1440 * 900。你在画网页产品原型...

    2018-03-06
  • 用户的体验属性

    人的记忆、欢乐、痛苦、友情、亲情和叛逆等,是每个人所共有的。这些不同的属性,反映着人们各种不同的体验属性。当下,我们每天都在说“用户体验”、“以人为中心”,但我们仔细想想便不难发现,几乎所有的产品及服务,都是在围绕着用户便利性这一单一属性的,人有那么多的体验属性,而我们却几乎没有去挖掘,何谈是以用户体验为中心呢?服务创新的一个思路,不是在纵向上,提高便利性或使用性等单一维度的体验属性而是如何在横向上,调动和反应出人的其他不同维度的体验属...

    2018-04-26
  • 从中国形式走向中国叙事:RSAA / 庄子玉工作室的2017

    *本文转载自RSAA鼓楼7号院刚刚过去的2017,对我们这个钟鼓楼旁的四合院是很特别的一年。虽然在RSAA北京公司成立后的八年间,我们一直埋头苦干,作品也算颇丰,但好像对大多数人而言,我们一直是一个相对默默无闻的团队,甚至很少有人知道RSAA是个正儿八经的德国独资公司;而在2017,RSAA和庄子玉工作室却因为几个极具当代中国调性的项目而广为人知;但只有我们自己知道,这也许不是偶然 - 以“在当下中国的社会和空间语境中寻找新的叙事性与类...

    2018-02-24
  • Axure原型管理与展示

    因为墨刀是自带生成分享链接以及分享二维码功能,这里主要写关于Axure的原型管理与展示。AxureShareAxureShare是Axure RP官方的免费原型托管网站,可以直接在Axure中共享发布。发布后Axure的源文件也会保存在官网的地址中,在其中还可以设置访问密码。But, 这么好用为什么用的人少呢?因为访问的时候,会慢的你心碎。2. 产品大牛产品大牛是济南公司开发的产品托管网站,解决了Axureshare连接速度慢,访问体验...

    2018-03-24
  • 交互设计 | UX设计想法表达太难?——试试故事版StoryBoard

    UX设计中一些针对用户调研的方法Workshop、Observation、Interview调研结束后需要将调研结果整合反馈单纯以文字去呈现无法将设计信息最大化故事板、线框图等视觉化的信息传达方式直观准确的解决设计问题下面小编将为同学们详细介绍故事板在交互设计作品集创作中的应用及优点,帮助大家在设计过程中能更高效的完成设计想法的交流和沟通。故事板的应用故事板可看作代表镜头的插画,同学们在设计时需要把图像排列在一起,使自己的设计能够故事化...

    2018-03-17
  • 不会编程?Axure一样可以做网站

    说起Axure,做产品的朋友再熟悉不过了,它是我们在日程工作中最常见的原型制作软件之一,今天分享的文章,主要是教大家如何使用Axure打造简单的个人网站,不会编程我们依然可以做网站。接下去将分为几个步骤去阐述:1. 这些我们必须知道的小知识axure是可以生成html文件的,这为我们使用它来制作网站提供了可能性axure只能搭建小型的个人网站 ,他不具备数据库,比较适合做展示类的网站和普通网站构建一样,我们需要购买域名和购置虚拟服务器2...

    2018-03-04