网页设计中的格式塔原理

2016-02-17 05:05 26 1 收藏

下面图老师小编要向大家介绍下网页设计中的格式塔原理,看起来复杂实则是简单的,掌握好技巧就OK,喜欢就赶紧收藏起来吧!

【 tulaoshi.com - 平面设计 】

轮廓/区域关系是一种最基本的视觉感知法则。

轮廓即感知元素内部与外部的区分(我们可以理解轮廓为无限精细的线段)。
讨论
贴近 Proximity

当多个可见元素出现时,眼睛和大脑配合起来,倾向于根据它们的贴近和靠近关系进行分组。

网页设计中的格式塔原理,PS教程,图老师教程网

这些圆形在你的视觉中分为几组?

元素与另外的元素越贴近,用户越从视觉上认为它们团结的越紧密(可以理解为是一种闭合)。设计师通常使用贴近的办法对同类内容进行分组,同时留下间距,给用户的视觉以秩序和合理的休憩。

延续 Continuation

当许多元素有组织的素排列在一个直线或曲线路径上,这个原则将让用户的视觉系统认为元素正在按照路径在延续下去。

网页设计中的格式塔原理,PS教程,图老师教程网

视觉向量的指示作用

通常设计师使用这种构图原则将告诉浏览者的视觉系统按照元素组成视觉向量进行延续。

在网页上,这种延续的设计经常被用来指引用户在可以点击处停留,或者指引用户滚动页面进行浏览的延续;用户的眼睛会在视觉向量的引导下一页一页的进行浏览。

相似 Similarity

元素具有近似外观时会被看成是一组;同组中的元素可能具有相似的颜色、外形、大小、文本样式。

网页设计中的格式塔原理,PS教程,图老师教程网

相似度首先决定了区分度,此时贴近关系被弱化

当大量相似的元素出现的时候,视觉系统倾向于不把它们分开。

当元素之间的相似性比较弱时,视觉系统倾向于使用贴近的原则对它们进行组织,形成统一的整体。因此在创建网站的风格时,设计师可以使用近似的文本、颜色、图像和留白,让网页保持一致。

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/pmsj/)

来源:http://www.tulaoshi.com/n/20160217/1578762.html

延伸阅读
标签: Web开发
这个CSS书写格式是我自创的,常有朋友提出异议,这里做个简单总结: 分类,一个模块或者同类功能定义为一类定义,每类定义之间用段落隔开; 分级,每类定义中的每个定义语句,根据结构或语意级别使用Tab缩进纵向对齐; 分断,每个定义内的每个属性定义之间,用分号+空格隔开,注意定义语句与分号间无空格,{}内前有空格而后无空格; 连排,...
说起 按钮 ,不得不先提一下链接,因为在大部分人看来,似乎按钮与链接差不多,都是完成一个页面的跳转。其实不然,按钮与链接还是有一定的区别。 先简单说说他们的区别吧。 按钮:按钮代表着做某件事,即点击了按钮代表着操作了一个功能,做的这件事是有后果的,不易挽回的。例如典型的google,QQ邮箱。像信息搜索、回复、注册,他们的共同...
格式塔的基本理论 本节中的部分图片资料由Sunlei.name视觉机构提供,请您在转载时务必说明相关著作权归属。 不是一座塔也不是人名! 不要以为格式塔是一座建筑物,也不要认为它是什么国外著名人物的名字;格式塔是德文Gestalt的译音,意思就是模式、形状、形式。 格式塔是一个著名的心理学派,基于这个学派的格式塔视觉原理还有一个小名:...
标签: Web开发
网页是通过视觉元素的引人注目而实现信息内容的传达,为了使网页获得最大的视觉传达功能,使网络真正成为可读强性而且新颖的媒体,网页的设计必须适应人们视觉流向的心理和生理的特点,由此确定各种视觉构成元素之间的关系和秩序。因此,设计时应该研究各种视觉造型元素之间的距离、位置、面积和视觉流程的问题。 视觉流程的形成是由...
标签: Web开发
在网页设计发展到一定阶段的时候就必然会和其他学科或领域只是产生交汇和共鸣,在阅读《超越CSS:web设计艺术精髓》这本书的时候,发现原来web设计还可以这样。比较突出的例子是现在经常被设计师提到的网页栅格设计,TAOBAO UED曾经探讨过这个问题(http://ued.taobao.com/blog/2008/09/17/grid_systems/),通过很有逻辑性的公式换算加上一...

经验教程

637

收藏

31
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部