排版设计绝招-格式塔原理与技巧

《排版设计绝招-格式塔原理与技巧》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、4个步骤：1.通过对需求的理解确定风格&配色2.形式感&构图的设计3.利用现有字体的改造设计标题4.素材的添加和处理格式塔原则百度高级设计师徐丽如一个故事一个小女孩，她的父亲送了她一本识树的书。书中第一种树，小女孩很认真的背了它的名字——约书亚树。因为，她觉得世界上不会有长得这么怪异的树。之后她闲着没事，决定揣着书出去逛街，顺便认识些树。刚出门不久，就发现她所居住的街区，80%的庭院里，都种植了这种长相怪异的叫做约书亚树的树。但是，之前的她却根本没注意过，哪怕她在这个街约书亚树区已经住了13年。格式塔原则Gestalt兴起于20世纪初的德国，是一门心理学派。格式塔理论明确地提出：眼脑

2、作用是一个不断组织、简化、统一的过程，正是通过这一过程，才产生出易于理解、协调的整体。也就是视觉对知觉的影响。由此产生出了格式塔适用于布局和界面设计的一些基本原则。格式塔原则Gestalt格式塔原则：那什么是原则呢？“说话、行事所依据的准则。”格式塔原则就是我们判断一个设计方案好坏的衡量标准。“有毛病，不舒服，奇怪”等直观感受的词汇却很难帮到设计师修改方案。设计师需要明确的知道“WHY”.透过现象看本质。图底原理0102接近原理格式塔原则相似原理03Gestalt04闭合原理连续原理05图底原理01图底原理01你看到了什么？灰色底色（背景）白色LOGO（图形）非图形即背景•图形：视觉

3、聚焦明显的元素•背景：除了中心图形以外的背景or图片图底原理01非图形即背景•我们的大脑将视觉区域分为主体和背景。主体就是一个场景中占据我们主要注意力的元素，其余则是背景。•图形与背景的对比越大，图形的轮廓越明显，则图形越容易被发觉。图形图底原理01正面案例1主图形和背景在颜色和形状上对比强烈，主体图形十分突出，背景安静统一。背景图底原理01图形正面案例2主图形和背景在色相上和谐统一，主背景图形在颜色上提高明度，在对比上增强对比，使得主体精致而图形突出，背景低调而统一。图形图底原理01反面案例无处安放的视线，所有的元素都在说：看我看我；左上角的标题部分，右上角的播放区域，左侧的任务，

4、右侧大面积的信息；所有这些信息，搭配形状各异、色彩明度和饱和度都非常高的背景，使得用户眼花缭乱，第一时间不知道该看什么；如此，即使视觉设计得很漂亮，也使得它的功能和实用性大打折扣，这样的设计也称不上好设计。02接近原理02接近原理你看到了什么？一个大矩形四个小矩形并且这四个矩形由多个圆组成•整体看来，距离近的关联紧密，距离远的独立成组•整体上单个圆的特征已不明显，但圆球之间的接近组合形成了清晰的矩形整体02接近原理•单个视觉元素之间无限接近，视觉上会形成一个较大的整体•距离近的单个视觉元素会融为一个整体，而单个视觉元素的个性会减弱。02接近原理02接近原理正面案例1顶部左侧的tab模

5、块顶部右侧的搜索模块中部的图片模块底部左侧的简讯底部右侧的咨询02接近原理正面案例1利用接近原则，信息组之间用留白区分，页面元素会更简洁，阅读信息时的干扰也少，相近信息的关联也更紧密。02接近原理02接近原理正面案例2顶部：LOGO信息和简介作为一个信息层级成组置于顶部中部：登录注册信息为一个信息层级成组置于中部底部：其他登录方式02接近原理反面案例1国外一个设计师的部分简历版式我们的大脑会将左侧的信息自觉编组成为一个整体，然后右侧的信息自觉编组成为另一个整体02接近原理反面案例1然而事实上信息的正确编组应该为横向引导与阅读02接近原理反面案例1其中问题就出在距离的远近把控上本来不应

6、该成组的信息由于距离近关联紧密，应该成组的信息由于距离远独立成组02接近原理反面案例2该登录框的信息填写栏之间的间距过大使得底下的信息填写栏与点击按钮更像一个整体02接近原理反面案例2同理该登录框的设计也是不合理的相似原理03相似原理03大小相似形状相似颜色相似•我们的眼睛很容易关注那些外表相似的物体，且不管它们的位置是不是相邻，总是把它们联系起来。相似原理03我是宇宙超级无敌美少女徐丽如啊哈哈大小相似我是宇宙超级无敌美少女徐丽如啊哈哈形状相似我是宇宙超级无敌美少女徐丽如啊哈哈颜色相似相似原理03我是宇宙超级无敌美少女徐丽如啊哈哈我是宇宙超级无敌美少女徐丽如啊哈哈我是宇宙超级无敌美少

7、女徐丽如啊哈哈•差异不同起到重点突出的作用，让更重要的元素和信息突显。•差异越大，对比也就越大。对比度越大，越重要的元素就会显现。相似原理03正面案例该界面中顶部的标题栏目、中部的tab栏，下部的信息栏，由于它们之间在颜色、大小、形状等上面有做出了差异化的设计，所以我们会很容易将它们三者区分开。相似原理03正面案例同在tab栏目中，选中的tab使用突出的红色，没有选中的tab使用浅灰色，这样的颜色上差异化设计也使得他们之间有一个强对比相似原理03正面案例同