给不完整视觉信息寻找最简单直接的解读办法


  如果你对某个设计的第一印象非常深刻,又或者你本能的觉得某个设计十分给力,那么其实极有可能你被“格式塔”了!

  目前许多设计偏好运用一个或多个格式塔心理学的原则。这一举动不但能让设计有更多灵动的感觉,还比一般的设计更容易留住欣赏者得目光。

  格式塔是德文Gestalt的译音,英文往往译成form(形式)或shape(形状),因此格式塔心理学所研究的出发点就是“形”。但这里的形又不止于一般所指的形式或形状,还包括由知觉活动组织成的经验中的整体,中文又译作“完形”。它认为整体决定部分的性质,而部分依从于整体。

  格式塔心理学的核心:给不完整的视觉信息寻找最简单直接的解读办法。

  除了设计,在日常生活的交流中,格式塔心理学也有发挥其作用:例如在电邮或信息中的笑脸表情:D,它仅仅由一个符号加一个字母,人们却通过它们表达了大笑的含义。“符号表情”也是格式塔心理学在发挥着作用呢。


  格式塔心理学中最经典的案例之一

  因此,格式塔心理学在网页或应用的交互设计中,可以指导设计师们如何在有限的空间中向用户传达更加丰富的信息。灵活的使用格式塔心理学可以帮助设计师去设计一个架构或者页面内的从属关系,还可以利用这些原则去设计页面内一些特别需要用户注意到的模块元素,制造一些具有深刻影响的平衡和牢固。这一些设计能够让用户更轻易去解读我们的界面。

  我们已经大约了解了格式塔心理学是什么了,那么接下来我们又如何去运用格式塔心理学来让我们的设计更有影响呢。

  现在,我们来了解一下格式塔心理学的五项原则:

  相似法则:人的潜意识里意识会根据形状, 颜色, 大小, 亮度等视线内一些相似的元素自动整合成集合或是整体。

  我们对比下面这两幅图,左边那幅图是的黑点,会让我们觉得他们是一块整体。这时候,如果我们将其中的一些黑点换成红色的点点(右边那幅图),根据我们在潜意识分类,会自动将黑色的点集合在一起,红色点集合在一起,各自成为一个分组。如此一来原本单一的整体就被切开成为五个组了。(如下)


  根据相似原则,我们很容易的将属于同种类目的元素集合在一块。举个我们最经常会遇到的例子,下图是个系统文件夹的内容截图,通常同种类型的文件会以同样的图标呈现在文件夹里,所以就算文件零散无章,我们也会潜意识地把下面这些文件进行分组。


  而另一种情况,就是当我圈选了一部分文件后,选中的和没选中的文件就会在视觉上变成了两组不一样的内容。


  因此相似法则可以在如下表单设计中得到应用,即使输入框与主体内容相隔甚远,但是用户依然会将它们两个一一对应的联系在一起。


  接近法则 :在意识里,我们常常倾向于空间上或时间上接近的元素整合成集合或一个整体。

  继续拿之前的点点举例,这个时候的点点们,虽然红色和黑色排布在一块,但我们却会在此时将距离近的红色和黑色点归为一组。


  这个原则在网页中的页面内容归组设计最常见,通过留白(Whitespace or native space)进行页面内容的归组。

  比如底下这个百度贴吧目录局部设计。通过将同目录下的内容距离稍近的摆放在一块,并与另一个目录隔了一个比较大的距离。在视觉阅读上,用户自然会认同以下内容分属两个主题。


  再例如页面的导航设计,主导航和辅助导航一般都尽量的靠近,处于同一区块。这样用户更容易理解到主辅导航的一体性,并会将辅助导航与内容区别开来。


  而在手机应用的设计中,接近原则最常见的便是IOS的分组以及导航栏的分隔了。


  以上两条原则及其引申,十分广泛的应用于页面内容的组织,以及分组设计中。对于引导用户的视觉流及方便用户对界面的解读起到非常重要的作用。

  闭合法则:当元素不完整或者不存在的时候,依然可以被人们所识别。

  根据过去以往的经验和视知觉的整体意愿驱使,我们习惯性的将图形作为一个整体去观看,于是我们在脑袋里将缺少的形状补充进去之后,便形成最终我们识别出来的图形效果。例如下图这个图形,即使缺了一个小口,人们依然会根据自己固有的经验,将其视作圆形。


  这条规则最常见的便是图标设计,用极简的语言传达更多的内容,例如:


  我们同样也能在网页设计中发现闭合原则的踪影。比如闭合原则让我们看见导航的存在,或者理解一系列圆圈组成的完整导航而不是一个个独立的圆圈。

  对称法则:对称的多个物体会被作为一个整体被意识接受,即使他们之间有一定距离。

  对称的设计会给人以稳定,平衡,一致的感觉。其中所对称并不一定是文字结构,也有可能是颜色或者区块性的对称。

  例如下面这个bbc news world的导航设计,即使中间有所间距,但是对称且类似的构造模式,使得受众将其视为一体,明了他们之间的区别与联系。


  连续法则:意识会根据一定规律做视觉上的,听觉上的,或是位移的延伸。


  人们的视觉具备一种运动的惯性,可以根据相关规律的延伸对其视觉流进行引导,例如下面这个网站的视觉引导。


  再比如,手机设计中最常见的便是所谓的露角了。

  下面这张便是最常见的coverflow设计。即使两边的内容没有完全显示出来,但是用户却能连贯的将露出来的内容小角与正在阅读的内容轻易地联系起来,明白之后还依然含有内容。并且明白如何到达下一个内容。


  另外,在以上五条原则的基础变换下,后来的学者为格式塔总结出更多的关于知觉的法则,如图形-背景感知,同向原则,尺寸恒定律等等,更多内容百度一下,你会知道更多。

  文章来源:百度MUX

时间: 2024-09-15 15:09:28

给不完整视觉信息寻找最简单直接的解读办法的相关文章

引导用户的视觉流设计:视觉信息最简单的解读办法

文章描述:给不完整的视觉信息寻找最简单直接的解读办法. 如果你对某个设计的第一印象非常深刻,又或者你本能的觉得某个设计十分给力,那么其实极有可能你被"格式塔"了! 目前许多设计偏好运用一个或多个格式塔心理学的原则.这一举动不但能让设计有更多灵动的感觉,还比一般的设计更容易留住欣赏者得目光. 格式塔是德文Gestalt的译音,英文往往译成form(形式)或shape(形状),因此格式塔心理学所研究的出发点就是"形".但这里的形又不止于一般所指的形式或形状,还包括由知觉

用vbs实现的简单的服务器文件备份办法压缩文件名自动按日期命名_vbs

简单的服务器文件备份办法压缩文件名自动按日期命名 dim FileName,WshShell,fs,MyCommandFileName=cstr(now)+".RAR" MyCommand="rar a "+FileName+" 要压缩的文件名或目录名" Set WshShell = WScript.CreateObject("WScript.Shell") Set fs=CreateObject("Scriptin

这里我就教大家一些不花钱又简单的建站办法吧!

很多新开公司或者出来创业的朋友,可能都想做网站了,但是出去找网建公司报报价,动不动就上千几千元的花费,肉痛吧,经费有限呀:自己学习吧,隔行如隔山,没几个月估计学不上来,只有放弃: 这里我就教大家一些不花钱又简单的建站办法吧!! 1.论坛,分类信息,文章发布,博客类网站: 只需要申请一个域名,http://www.aliyun.com/zixun/aggregation/14840.html">虚拟主机,接着去网上下载程序安装就可以了.国内外常见的论坛程序用的比较多的,就是动网论坛程序.Di

简单生成静态页面办法

最近无意中发现一种简单的办法,比较适合新手,不敢独享,拿出来给大家分享一下. 中心思想就是调用动态模板(也就是你做好ASP网页).用这种办法可以把几乎所有的ASP网页都变成HTM页,从而实现生成静态页的梦想. 例子:<textarea name="a" cols="60" rows="6" id="a"><!--#include file="index.asp" --></te

关于“完整安装之前向导已中断…”的解决办法

安装一些软件时,每次安装到特定位置后,它总是提示:在某某软件完整安装之前向导已中断.系统未被修改,要再次完成安装过程,请重新运行安装程序. 解决办法: 方法之一:首先,确定你的电脑是用管理员登陆,并且没有设置密码.如果两条件同时具备,再安装试试.我之所以说"试试"是因为此方法来源于网上,但经我自己验证,此路不通. 方法之二:用其他优化软件(如360安全卫士,QQ电脑管家等)搜索一下系统注册表(也可以尝试使用他们自带的卸载程序功能,如QQ电脑管家的软件管理-程序卸载功能),有关某某软件的

快速简单申请google adsense办法

现在正规渠道申请GG广告已经很难了,很多朋友因为之前作弊K了好多帐号,现在想要重新申请,却很难通过.怎么办?没有GG会少很多收益.今天在这给大伙说个方法吧: 第一步: 浏览器登陆 http://www.flixya.com/ 见图1   第二步:点"Sign Up" 这时候页面跳转到 图2   图 2 请按照图上红字描述的准确填写: username 填写用户名,例如 rabbit email 填写电子邮件地址 password 和 confirm password 填写密码(一样)

wowexec.exe比较简单的查杀办法(毒霸就是wowexec.exe专杀工具)_病毒查杀

注意:wowexec.exe是系统进程,但是如果前面带一个空格,就是病毒.wowexec.exe病毒解决办法: 1.下载毒霸,并升级到最新病毒库,进入安全模式,关闭系统还原,查杀该病毒,下载地址::http://www.duba.net,避免感染病毒变种,引起文件或照片被破会: 一般第一步就可解决问题,建议大家安装360,这样对于添加注册表运行的功能就没有了,下面的操作也就不必要了.2.删除病毒的注册表键值,HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Window

msnet.sys、jet300.dll的简单分析与清除办法_病毒查杀

江民对该病毒的定义名为:trojanspy.agent.rw       释放文件       %system%\drivers\svchost.exe       %system%\drivers\msnet.sys       %system%\jet300.dll       添加注册表信息       [HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services]       msnet %system%\drivers\msnet.sys

简单而又复杂的ASP.NET编程模型

asp.net|编程 作者: 崔驰坤(Richard Troy-Rex, RickTroy)联系: RickTroy@126.com, http://ricktroy.cnblogs.com/ 昨天一直在寻找可以简单解决Ajax在ASP.NET V1.1.4322中使用的方案,但是发现ASP.NET页面模型很"怪异".它拥有的所有事件及内部方法中,似乎没有一个能收取方案但是不刷新页面的.即使用页面里面的XmlHttpRequest进行HTTP GET, Page_Load事件也没有执行