交互设计七大定律之The Law Of Proximity 接近法则

最近在整理交互设计七大定律,发现了这篇老文,内容很精彩,翻译下与大家分享。

最近在整理交互设计七大定律,文章要系统的看。

目录:【交互设计七大定律】关于交互设计法则“除非有更好的选择,否则就遵从标准——交互设计之父阿兰·库珀”

交互设计七大定律之The Law Of Proximity 接近法则

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

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

交互设计七大定律之The Law Of Proximity 接近法则

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

交互设计七大定律之The Law Of Proximity 接近法则交互设计七大定律之The Law Of Proximity 接近法则

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

相似原则:

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

交互设计七大定律之The Law Of Proximity 接近法则

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

交互设计七大定律之The Law Of Proximity 接近法则

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

交互设计七大定律之The Law Of Proximity 接近法则

封闭原则:

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

交互设计七大定律之The Law Of Proximity 接近法则

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

交互设计七大定律之The Law Of Proximity 接近法则

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

交互设计七大定律之The Law Of Proximity 接近法则

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

交互设计七大定律之The Law Of Proximity 接近法则
交互设计七大定律之The Law Of Proximity 接近法则

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

(0)
iouedioued
上一篇 2015-08-27
下一篇 2015-08-27

相关推荐

  • 在不同屏幕和设备上,创建用户体验设计的8个步骤

    从具有微型屏幕的智能手表到最广泛的电视屏幕,其中所开发的内容,应以便在各种屏幕尺寸之间进行查看和交互。但针对不同设备的设计更多的只是调整在不同的屏幕上显示的内容大小。它涉及到很多复杂性:设计师需要把每个设备中的用户体验最大化,以便用户相信实际上应用程序是为他们的设备设计的,而不是简单地拉伸到适合屏幕。为了创建一个好的用户体验,有必要制定一个针对各种设备和屏幕尺寸的策略。

    2017-04-29
  • 关于“用户体验动效”的十二项原则

    前言关于“用户体验动效“的十二项原则,本文分为四部分来引入说明:1. “用户体验动效” 不等于 “界面动画”;2. 实时与非实时交互的区别;3.  动效的四种可用性提升方式;4. “用户体验动效”的十二项原则。1.  “用户体验动效”不等于“界面动画”在用户界面设计中,大部分动态的效果被设计师理解为“界面动画”,事实却并非如此。在介绍“用户体验动效”的十二项原则之前,我们先明确一下二者之间的不同。大部分设计师认为,“界面动画”是为了让用...

    2018-04-01
  • 用户体验是玄学吗

    XINYI00梁欣怡2018年3月5日用户体验的解释有很多种,我比较倾向的一种是“用户体验是人对于使用一个产品、系统、服务时的预期和反应。”首先明确第一个概念,体验是一个过程,生活中的一切皆是体验,我们赤裸裸的来到这个世界,最后赤裸裸的离开,来人世走一遭就是来体验来了。从广义上来看,体验的主体是人,客体可以是一切物体和事情,媒介是我们的感官;当我们的感官作用在一切事物上,会产生相应的心理行为,比如预期,比如反馈,比如情绪,着所有的一切一...

    2018-03-06
  • 如何在界面设计中“色”诱用户?

    在设计过程中,如何最佳地搭配颜色,诱导用户视线?是不是在为图标选择什么颜色而烦恼,反反复复地尝试,总不能达到想要的效果。是不是总在羡慕“别人家的设计”,而苦于无从下手?其实所有的颜色都有些小规律,今天@Micu设计 就和大家聊一聊“色”。

    2017-06-05
  • APPLE WATCH 中文手册:WatchKit使用iOS语言

    WatchKit应用扩展可以使用绝大多数iOS技术。由于应用扩展和应用还是有一些不同,因此某些技术的使用可能会受到限制,或者不受到推荐。下面是决定是否使用特定技术的准则: · 避免使用需要用户权限的技术,比如Core …

    2015-06-15
  • 互联网公司官方标志Logo的颜色选择依据

    小编导读 : 颜色的作用,就是在图形都追求尽可能简约的时候,又可以保持企业标识的高度识别性。

    2014-12-28
  • 交互设计七大定律之Occam's Razor 奥卡姆剃刀原理(简单有效原理)

    最近在整理交互设计七大定律,发现了这篇老文,内容很精彩,翻译下与大家分享。 最近在整理交互设计七大定律,文章要系统的看。 目录:【交互设计七大定律】关于交互设计法则“除非有更好的选择,否则就遵从标准——交…

    交互设计 2015-08-27
  • 清华美院交互设计考研经验分享:考试要懂得“扬长避短”

    2018年清华美院交互设计-黎娜大家好,我叫黎娜,我本科毕业于广州美术学院工业产品设计系。产品设计主要是偏向于生活家居类的小产品。我大概是在去年快毕业的那段时间第一次从考研的同学那里了解到“信息艺术设计交叉学科”,2017年6月底就决定报考这个专业。接下来我想与大家分享的是自己的一些备考经验,希望能对你们有一些帮助。第一部分是关于专业一“上机”考试。我认为上机考试最重要的两部分分别是app和ppt。  app的练习方法有很多,这里我想分...

    2018-04-23
  • 在设计功能时,怎样的交互才是合理的?

    或许在本文中,你不会得到所谓的干货。但小编相信,一旦你读完了,你的思想认知会更上一层的。具体想了解关于《从这四个点,正确完善地拆解一款 App》的,可以看下这篇文章,要从多角度去看文章去分析。

    2017-05-07
  • 为流畅的交互体验,创建完美的用户流程

    如果有人问你:你怎样定义“流程”这个词,或者说举一个案例来进行描述,你会怎么说?这篇译文,作者给出了详细的解答。一是外文文章一般与当地的文化有关,所以翻译成中文很多时候都失去了它原来的味道,让中国读者感到有点不顺畅,这个是很正常的,很多小说翻译成中文阁主也不爱看。所以为减少这个情况的影响,阁主会在文章后加上阁主自己对文章的总结和建议~以下是原文~

    2017-04-28