交互设计法则之接近法则与格式塔

早在20世纪早期,一个由德国心理学家组成的研究小组试图解释人类视觉的工作原理。他们观察了许多重要的视觉现象并编订了目录。格式塔理论明确地提出:眼脑作用是一个不断组织、简化、统一的过程,正是通过这一过程,才产生出易于理解、协调的整体。我们的视觉系统自动对视觉输入构建结构,并且在神经系统层面上感知形状,图形和物体,而不是只看到互不相连的边,线和区域。“形状”和“图形”在德语中是“Gestalt”,因此这些理论也被称为视觉感知的格式塔(Gestalt)原理。

接近法则是格式塔理论中最为我们所熟知的,也是我们最常用到的一项法则。说的是物体之间的相对距离会影响我们感知它们是否以及如何在一起。相对于其它物体来说,彼此之间靠近的物体看起来属于一组。越接近,组合在一起的可能性就越大,强调的是位置。如下图(图1),我们在意识中会将其分为两组。

30300wx_fmtjpeg3

接近原则被广泛应用于页面内容的组织,以及分组设计中。对于引导用户的视觉流及方便用户对界面的解读起到非常重要的作用,通过接近原则对同类内容进行分组,同时留下间距,会给用户的视觉以秩序和合理的休憩。 设计者们经常使用分组框或分割线将屏幕上的控件和数据显示分隔开,如图2、图3。

31310wx_fmtjpeg3

34340wx_fmtjpeg3

除了接近法则之外,还有很多重要的原则你知道吗?接下来我将逐一向大家介绍。

相似原则:

相似,听起来跟接近非常类似,但是他们确实是不同的两个概念。接近强调位置,而相似则强调内容。人们通常把那些明显具有共同特性(如形状、大小、颜色等)的事物组合在一起,即相似的部分在知觉中会形成若干组。在图4中,我们会将黑帽子蛋和红帽子蛋自然的分成两组。

33330wx_fmtjpeg3

在页面设计中分类使用文本、颜色、图像等,可以更好的区分各个模块和内容。如下图(图5)中雅虎读书导航,通过相似原则我们很容易的将一级导航和二级导航区分开来。

32320wx_fmtjpeg3

换一个角度来思考,颜色的变化很清楚的区分了不同的内容,相似中的逆向思维是获取焦点的好方法。这种方法在导航和强调部分信息的设计上有着广泛地应用,如图6。

39390wx_fmtjpeg3封闭原则:

当元素不完整或者不存在的时候,依然可以被人们所识别。根据过去以往的经验和视知觉的整体意愿驱使,我们习惯性的将图形作为一个整体去观看,于是我们在脑袋里将缺少的形状补充进去之后,便形成最终我们识别出来的图形效果。如下图(图7),没有三角形和圆,但是在我们心理模型中填充缺失的信息,创建我们熟知的形状和图形。

35350wx_fmtjpeg3

封闭原则常被应用于图形界面和页面设计中,例如:在页面中经常会用堆叠的形式表示对象的集合,只要显示一个完整的对象和其“背后”对象的一角就足以让用户感知到这是由一叠对象构成的整体,如图8所示。

36360wx_fmtjpeg3连续原则:

与封闭性相关的是连续原则,连续原则说的是我们的视觉倾向于感知连续的形式而不是零散的碎片。在图形设计中,使用了连续原则的一个最广为人知的例子就是IBM的标志。它由非连续性的蓝色块组成,但一点也不含糊,我们很容易就能识别出三个粗体字母,就像透过百叶窗看到的效果一样,见图9。

37370wx_fmtjpeg3

关于格式塔的原则还有很多,而且可以复合使用。在我们设计了一个东西之后,可以试着使用格式塔原理来考量一下自己各个设计元素之间的关系是否复合设计的初衷。希望通过对格式塔原始理论的介绍可以给大家带来一些启发:>

38380wx_fmtjpeg3

文章来自:wechat非凡进修学院

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

(0)
iouedioued
上一篇 2015-11-04
下一篇 2015-11-05

相关推荐

  • 认知心理学与交互设计(1)--识别容易,回忆很难

    ♝点击上方“交互设计学堂”关注我们,送电子书这是一个新的系列,主要内容来自《认知与设计--理解UI设计准则》,经过重新整理并加入一些自己的思考。识别和回忆是记忆的两个重要功能,识别是指根据记忆对某个物体做出…

    2017-08-01
  • 腾讯大神教你写出合格的产品交互文案

    做产品的时间越久,越发现文案的重要性;今天我们来聊聊交互文案。 文案最初是桌子的指代,后来演变成一种职业;现在说起文案一般指以文字表现创意策略。交互中当然会涉及文案,虽说在整个前端展示中并不算突出,但…

    2016-01-13
  • 2017年设计师该如何转型?来看阿里UED掌门人的演讲!

    温馨提示,扫文章底部二维码可看相关视频。UXD(User experience designer)概念为何在当下越来越热?这个新Title对设计师意味着什么?UXD对设计师提出了怎样的新要求,设计师们又如何去转型UXD呢?在设计师转型UXD的背景下,还需要讲求专业精深吗?纯视觉设计师VD(Visual designer)又有怎样的发展路径?三位阿里巴巴UED掌门人分别从自身视角对设计师转型UXD进行了解析。汪方进:阿里巴巴BBC UED...

    2018-03-20
  • 别逗了,真正的“用户体验”并不如你们所说!

    User Experience is “a person’s perceptions and responses that result from the use or anticipated use of a product, system or service”.— ISO 9241-210The extent to which a product can be used by specified users to achieve specified goals with effectiveness, efficiency and satisfaction in a specified context of use.— ISO 9241-11— Baekdal, T., 2006. The Battle Between Usability and User-Experience [Online] Available at: The Battle Between Usability and User-Experience–Nielsen Norman Group, 2007. User Experience – Our Definition [Online] Available at: http://www.nngroup.com/about/userexperience.htmlBy Alan Penn, director of the Virtual Reality Centre for the Built Environment at University College LondonReference:Why User Experience Cannot Be DesignediA | Can Experience be Designed?文章一:Eric Baczuk, Design and the (Ir)Rational Mind: The Rise of Affective Sensing
    https://designmind.frogdesign.com/2014/05/design-irrational-mind-rise-affective-sensing-2;
    文章二:Daniel H. Pink, A Whole New Mind Moving from the Information Age to the Conceptual Age
    http://www.goodreads.com/book/show/99315.A_Whole_New_Mind“做项目久了,难免就会职业病发,没成想现在最大的爱好就是拆字玩儿,总想着能从字本身的意思去弄点洞察出来。现在哪哪儿都在说用户体验,说实话,这个概念本人听的是真有点腻了,凡是个东西都要扯上“体验”二字。顺手在网上搜了下在线词典,这下面倒是有对于体验的几种原生态解释:1.亲自处于某种环境而产生认识2.指通过亲身实践所获得的经验3.所谓亲身经历与实地领会4.也含有查核,考察的意思
    从这些个解释里不难看出,从1,2,3的解释中,体验是包含有时间概念的:体验当下的那一刻,体验后的回想总结,以及建立下一次体验的心理预期和评判标准,其中反复强调的是“亲身”一词,这个时候,人的概念就被带出来了,不难看出所谓“体验”又包含了多少亲历者的主观意识;从4的解释中,个人觉得特有嚼头,这似乎是来了个总结:大多数的人都是带着“挑刺儿”的情怀去走完整个时间线的。
    最后,简单的总结下我想说的1.体验设计的who 是别人,体验包含太多主观因素,设计师要懂得如何充分提炼每个人情怀背后的深层共性。2.体验设计是围绕过去,现在和将来这条完整时间线的设计,绝对不是一锤子买卖。3.只要是人,就会对你为他们所架构的体验进行“审核”,所以作为设计师,千万要宽容要大度,那个被“骂”的点或许就是支撑前行的机会。文章中揭示的“互联网产业中对于User Experience和Interaction Design的混淆”可谓是一针见血。作为一名有着一点用户体验sense的互联网从业者,我往往会花费很多时间去说服决策者将投入更多地精力去研究用户,用更加宏观的角度去看待用户体验,但由于自己对于用户体验理解和阐述的局限性,这样的尝试往往无疾而终。我觉得这篇文章提供了很好的逻辑结构和对比佐证,让设计师能够更好地理解用户体验的同时也可以更好地把这个概念传输给别人。
    对于文章中提到的两个工具,Customer Journey Map和User Experience Questionnaire,在我看来虽然被证明在设计咨询和设计用户研究领域非常有效。但是在产品迭代迅速的互联网行业,决策者往往会更倾向于快速地推出产品、快速地试错、快速地更新迭代这样的“野蛮”方式来获取更加直接与准确的用户反馈。在这样的一种大环境下,相对传统的用户研究工具似乎因为周期长与结论的不确定性显得有些“笨重”,这也间接导致了部门互联网公司的决策者对于类似调研方式的抵触。如何做出改变,让这些有效地工具和理论在这样相对“野蛮”的环境中显得“接地气”,我觉得是作为一名设计师需要思考的问题。这篇文章很是解答了大家对于“用户体验”,“易用性”,包括“体验设计”的差别。非常赞同对于未来设计世界和人类世界对于情感化消费需求的方向,很多时候人们看似理性的消费实际上也是出于背后难以明状的亦或是潜意识亦或是外界的多重的信息刺激。神经科学(neuro science) 主张的决策下达从来都不是由内而外的,而是由外而内的。从这一点看,似乎“体验“还是可以被”设计“的,这种预设,结果当然越接近最终的现实越好。在《Thinking fast and slow》这本书中提到了诸多人们下决定的包括背后存在的偏见,所谓主观的意见实际也掺杂了背后潜意识的,本能的,直觉的迅速的判断,在这样的情况下,消费者的“体验”可以”被操控”的因素也大大增加了。说到底,人都是很有同理心(empathy)的动物,再正经地挣扎表现出理性的样子,也不过是那层薄如蝉翼的外壳罢了。“用户体验”就是在不停地触碰这层外壳,让“体验”直入你心。作为一个Service Design背景的设计策略师,用户体验之与我并不是虚拟产品中的手势,按钮,和A/B测试。用户体验融合在一整套服务系统里无形或有型的用户触点中。正如文章所提到的,实体体验的内容层级要远远超越互联网产品的易用性,它是一个更加复杂而庞大的系统,它需要深入挖掘人类需求的本源与动机,而并非只是依照某种需求本身位用户提供某类的便捷工具。
    正如Pine II和Gilmore在The Experience Economy一书中所述,任何企业在喝消费者互动时都是在导演体验,以一种个性化,令人难忘的方式与消费者建立联系,以服务为舞台,产品为道具,以品牌故事为剧本,当我们购买的是体验时,我们花钱享受的事商家为我们提供的一场难忘的回忆,就如同参与一场戏剧演出,其价值将长久地存在于我们的心里。
    试想一下MM巧克力世界,乐高积木世界,苹果体验中心,以及把体验做到极致的迪斯尼。他们永远不可能收到互联网产品的冲击。许多人说随着互联网服务的发展,电影院,商场,美容院,餐厅,所有的产业都将受到影响。然而,良好的体验是在一个人心理,生理,智力和精神水平处于高度刺激状态下形成的,这并非是互联网产品的良好易用性就可以轻易满足的需求。
    对于“用户体验”而言,“易用性”是衡量整个体验过程中所需要的某一工具的标准之一,而体验则应该思考如何通过全方位的营造让服务变乃至于整个生活状态变的更加丰满和人性。“用户体验”被广泛的使用和探讨,说明随着经济发展,消费者的需求已不再单薄。以设计为主导商业创新挑战才刚刚开始,作为这个时代的设计师,我们更应该以开放和学习的心态来迎接新的挑战!关于用户体验的未来的展望非常有趣。说到底是对人的更深入的了解是用户体验的根本。传统上来说,用户体验是基于对于用户更深切的研究,是以用户研究为基础的。也就是根据用户的所说,所做,所想,甚至所感挖掘出真实的用户的能力,需求和期待。而从上文用户体验不能被设计上来说,Context of use和User两个都是影响的因素。也就是说,未来对于User本身的了解的加深, 以及Context of use的改变也会对用户体验本身有着极大的影响。

    2017-06-03
  • iOS和Android规范解析——确认弹框、全屏弹框和模态视图

    今天介绍三个控件,前两个是Material Design(简称MD,下同)规范中的确认弹框(Confirmation Dialog)和全屏弹框(Full-screen Dialog),后一个是iOS规范中的模态视图(Modal View)。下面先说MD中的两个。

    2017-05-01
  • 别让这10个设计误区毁了你的APP

    色彩:鲜艳的色彩更抓眼球,适宜于可点击的元素使用
    空间:在关键元素周围留下足够的空间,让用户更容易发现,也更容易操作
    排版:使用简单干净的字体(尽量使用笔画粗细统一的字体),并且挑选适合屏幕的字体,确保整体可读性。

    告知用户他们所处的位置,或者显示当前状态(比如光标悬停色彩改变等)
    当某个动作执行的时候,应当给出相应反应(比如提交表单完成之后给予成功提交的提示)
    告诉用户发生了什么,以及接下来将会发生什么(比如加载中的进度条)

    2017-05-21
  • 选择爱情与用户体验

    用计算机思维的视角来看爱情和用户体验。一、做结婚教练的互联网产品经理最近发现一个心理咨询师现在转型做了一个结婚教练。她是我的一个心理咨询师朋友,现在做的工作就是指导30多岁下定决心要结婚的女生,如何能够在一年半之内搞定结婚。她的方法已经帮助了30多个30多岁的女生完成了结婚。那么这个结婚教练以前是干什么的呢?她以前也是做过一个互联网公司的产品经理。她的这一套结婚的体系内容挺多的,这堂课我想把她最重要的一个环节拿出来分享。这个环节就是如何...

    2018-02-03
  • 12个关于用户体验的界面设计细节

    点击上方"工信商务培训学校"↑文章列举了一些界面设计中的案例细节,希望对产品设计工作有所帮助。UI设计工作中,设计师们往往不喜欢将界面设计得与原型图一致,总会刻意的去寻求存在感与原型做出差别,那么对于UI设计师来说,更应该懂得用户体验,成为办个用户体验设计师。以下列举了一些界面设计中的案例细节,希望对设计师们有所帮助。一.图标1.统一图标的样式图标在界面设计中还是占着较大的比重,它的存在有利于平衡界面,也让页面看起来更加的美观,也有一定...

    2018-04-06
  • 用户体验很重要,外卖小票了解一下

    失恋了,今天很丧,老板给我画一个小猪佩奇好吗?这个要求是四川资阳的一个女孩子点外卖时,在订单上给店主留的言。没有想到,店主竟然答应了。1当顾客在向外卖商家提需求时他们究竟要的是什么?不久前,一个在外卖小票上画画的帖子在网上刷了屏。原来,四川资阳一女子失恋点外卖要求画小猪佩奇,店主竟然答应了。据店主回忆,“大概在下午4点的时候,店里接到订单,在备注栏中,顾客称‘失恋了,今天很丧,老板给我画一个小猪佩奇好吗?’ ”为了安慰失恋的顾客,王女士...

    2018-03-26
  • 设计如何操纵人的想法—来自于Google的设计伦理学家

    作者:Tristan Harris 译者:@Steve-Mr 与 @WayneMaa 和 Oscar Wei   愚弄人们,要比让人们相信自己被愚弄了简单。 我十分了解科技如何劫持我们心理上的弱点,这也是过去三年,我在谷歌研究防止上亿人的心智被科技…

    交互专题 2017-08-07