1.通过对需求的理解确定⻛风格&配⾊色2.形式感&构图的设计3.利⽤用现有字体的改造设计标题4.素材的添加和处理4个步骤：格式塔原则百度高级设计师 徐丽如约书亚树一个小女孩，她的父亲送了她一本识树的书 书中第一种树，小女孩很认真的背了它的名字——约书亚树 因为，她觉得世界上不会有长得这么怪异的树 之后她闲着没事，决定揣着书出去逛街，顺便认识些树 刚出门不久，就发现她所居住的街区，80%的庭院里，都种植了这种长相怪异的叫做约书亚树的树 但是，之前的她却根本没注意过，哪怕她在这个街区已经住了13年一个故事兴起于20世纪初的德国，是一门心理学派 格式塔理论明确地提出：眼脑作用是一个不断组织、简化、统一的过程，正是通过这一过程，才产生出易于理解、协调的整体也就是视觉对知觉的影响由此产生出了格式塔适用于布局和界面设计的一些基本原则 格式塔原则Gestalt格式塔原则：那什么是原则呢？ “说话、行事所依据的准则 格式塔原则就是我们判断一个设计方案好坏的衡量标准 “有毛病，不舒服，奇怪”等直观感受的词汇却很难帮到设计师修改方案设计师需要明确的知道“WHY”.透过现象看本质格式塔原则Gestalt03050204接近原理相似原理闭合原理连续原理格式塔原则Gestalt01图底原理图底原理01•图形：视觉聚焦明显的元素 •背景：除了中心图形以外的背景or图片非图形即背景图底原理01你看到了什么？灰色底色（背景） 白色LOGO（图形）非图形即背景图底原理01• 我们的大脑将视觉区域分为主体和背景。
主体就是一个场景中占据我们主要注意力的元素，其余则是背景 • 图形与背景的对比越大，图形的轮廓越明显，则图形越容易被发觉图底原理01图形背景正面案例1主图形和背景在颜色和形状上对比强烈，主体图形十分突出，背景安静统一图底原理01图形图形背景主图形和背景在色相上和谐统一，主图形在颜色上提高明度，在对比上增强对比，使得主体精致而图形突出，背景低调而统一正面案例2图底原理01无处安放的视线，所有的元素都在说：看我看我；左上角的标题部分，右上角的播放区域，左侧的任务，右侧大面积的信息； 所有这些信息，搭配形状各异、色彩明度和饱和度都非常高的背景，使得用户眼花缭乱，第一时间不知道该看什么； 如此，即使视觉设计得很漂亮，也使得它的功能和实用性大打折扣，这样的设计也称不上好设计反面案例02接近原理02接近原理一个大矩形 四个小矩形 并且这四个矩形由多个圆组成你看到了什么？•整体看来，距离近的关联紧密，距离远的独立成组 •整体上单个圆的特征已不明显，但圆球之间的接近组合形成了清晰的矩形整体02接近原理• 单个视觉元素之间无限接近，视觉上会形成一个较大的整体 • 距离近的单个视觉元素会融为一个整体，而单个视觉元素的个性会减弱。
02接近原理02接近原理顶部左侧的tab模块 顶部右侧的搜索模块 中部的图片模块 底部左侧的简讯 底部右侧的咨询正面案例102接近原理利用接近原则，信息组之间用留白区分，页面元素会更简洁，阅读信息时的干扰也少，相近信息的关联也更紧密正面案例102接近原理02接近原理顶部：LOGO信息和简介作为一个信息层级成组置于顶部 中部：登录注册信息为一个信息层级成组置于中部 底部：其他登录方式正面案例202接近原理国外一个设计师的部分简历版式 我们的大脑会将左侧的信息自觉编组成为一个整体，然后右侧的信息自觉编组成为另一个整体反面案例102接近原理然而事实上信息的正确编组应该为横向引导与阅读反面案例102接近原理其中问题就出在距离的远近把控上本来不应该成组的信息由于距离近关联紧密，应该成组的信息由于距离远独立成组 反面案例102接近原理该登录框的信息填写栏之间的间距过大 使得底下的信息填写栏与点击按钮更像一个整体反面案例202接近原理同理 该登录框的设计也是不合理的反面案例203相似原理03相似原理形状相似大小相似颜色相似• 我们的眼睛很容易关注那些外表相似的物体，且不管它们的位置是不是相邻，总是把它们联系起来。
形状相似大小相似颜色相似我是宇宙超级⽆无敌美少⼥女徐丽如啊哈哈我是宇宙超级⽆无敌美少⼥女徐丽如啊哈哈我是宇宙超级⽆无敌美少⼥女徐丽如啊哈哈相似原理03我是宇宙超级⽆无敌美少⼥女徐丽如啊哈哈我是宇宙超级⽆无敌美少⼥女徐丽如啊哈哈我是宇宙超级⽆无敌美少⼥女徐丽如啊哈哈相似原理03•差异不同起到重点突出的作用，让更重要的元素和信息突显 •差异越大，对比也就越大对比度越大，越重要的元素就会显现相似原理03该界面中顶部的标题栏目、中部的tab栏，下部的信息栏，由于它们之间在颜色、大小、形状等上面有做出了差异化的设计，所以我们会很容易将它们三者区分开正面案例相似原理03同在tab栏目中，选中的tab使用突出的红色，没有选中的tab使用浅灰色，这样的颜色上差异化设计也使得他们之间有一个强对比正面案例相似原理03同时，同在信息栏目中，重点信息用深色、大字号，次要信息用浅颜色、小字号，使用了大小、颜色进行对比正面案例相似原理03同时，同在信息栏目中，不同的信息个体之间用同样的图文编排与表现方式，综合使用了形状、颜色、大小相似正面案例相似原理电梯提醒方案⽅方案⼀一⽅方案⼆二⽅方案三03根据相似原理，哪个方案更合理？相似原理03颜色相似 危险区域用黄色来标示，建议人站的位置如果也用黄色，黄色代表危险，用户也许会困惑，黄色的脚印能踩吗？ 方案一相似原理03表现手法相似 使⽤用了不同颜⾊色，既表明危险的地⽅方，也表明安全的位置， ⾮非常容易分辨，似乎是合理的但是，它的表现手法上都是使用颜色来做区分，这其实同时平等地强调了危险区域与安全区域的重要性，使得用户在使用的时候也会在视觉与知觉上关注到危险区域，反而增加了产品的信息层级与用户的认知负担。
方案二相似原理03增强差异化 区分了信息层级，弱化了警告（去掉⻩黄⾊色警告），直接给 出了建议（绿⾊色脚印），有和⽆无的区别，增强了差异化， 重点突出如此看来，该⽅方案提⽰示会更友好！方案三04闭合原理•人们在观察熟悉的视觉形象时，会把不完整的局部形象当作一个整体的形象来感知， 这种知觉上的结束，称之为闭合•如果局部形象过于陌生或简略，则不会产生整体闭合联想04闭合原理•简单说来，就是“脑补”！04闭合原理04闭合原理正面案例 字体设计 将重要的结构与骨架做了保留 将不重要的笔画进行删减 但是不影响用户的阅读 并且产生独特的设计感04闭合原理正面案例 LOGO设计 日本新日美术馆的LGO设计 在不影响识别性的前提下， 设计师将笔画之间进行拆分、删减 但是我们可以清楚地知道它就是“新”04闭合原理正面案例 图形设计 日本设计大师福田繁雄为绝对伏特加设计的一张招贴，绝对伏特加的瓶形设计一定程度上就是它的品牌识别 该招贴运用矛盾空间、断开与连结做的设计，丝毫不影响瓶形的形象识别闭合原理04正面案例 ICON设计 该组中的每个ICON都在设计上都有一些小断开，但是不影响他们被识别闭合原理04反面案例 我们很难发现，它是由道路和树叶结合而成的，因为它的闭合与结合过于抽象，以至于我们很难脑补。
闭合原理04反面案例 局部形象过于陌生或简略，不会产生整体闭合联想 符合用户预期做设计05连续原理05连续原理•人的视觉有追随一个方向的延续，以便把元素连接在一起，使它们看起来是连续向着 特定的方向05连续原理•或者理解为：当知觉轻松的发现一个视觉规律后，倾向于主动的将对象按照规律延续 下去05连续原理startendVS强调方向性强调始终连续原理05正面案例 视觉设计 视觉受到连续原理的影响，会对数据的趋势与走向有一个感知连续原理05正面案例 视觉设计 在该地图中，路线延伸到了页面之外，我们就能有一个预期——到达目的地还有一段距离连续原理05正面案例 交互设计 当用户在使用一个产品习惯某个交互方式之后，会按照这个习惯继续延续下去 如交互设计中常使用左滑进入上一层级，如果一个交互方式是左滑进入下一层级，那么用户一定会不习惯⼀一个案例百度彩票 改版需求 产品经理给出的改版需求：从视觉角度进行改版优化，无新功能增加百度彩票 不符合图底原理——从格式塔角度来分析 比赛双方应该是用户来到该界面最先、最需要感知的信息，而此处并不突显 百度彩票 不符合相似原理——从格式塔角度来分析 往期的比赛分析、亚盘、欧赔信息与胜平负选择按钮本不属于同一个信息层级与重要性等级，但在该设计表达上处理得很相似，应该增强差异，突出重点。
百度彩票 不符合相似原理——从格式塔角度来分析 往期的比赛分析、亚盘、欧赔信息与胜平负选择按钮本不属于同一个信息层级与重要性等级 但在该设计表达上处理得很相似百度彩票 足彩投注界面改版前 界面的内容从上到下依次是：比赛双方，往期的比赛分析、亚盘、欧赔信息，胜平负选择按钮，投注方案，倍投按钮，投注按钮，返回按钮百度彩票 不符合相似原理——从格式塔角度来分析 1. 足彩界面的内容从上到下依次排开：比赛双方，比赛分析、亚盘、欧赔信息，胜平负选择按钮，投注方案，倍投按钮等 篮彩界面将比赛双方，比赛分析，胜平负选择按钮等信息融合展示在界面上部 2. 足彩的倍投按钮为滑动选择，篮彩为点击按钮；百度彩票 图底原理 增加主体图形与背景的差异，突显用户关注的比赛双方百度彩票 相似原理 将不是一个信息层级与重要性的信息做差异化处理，突显胜平负信息，弱化其他次要的文字信息百度彩票 连续原理 足彩与篮彩这两个界面在版式布局、信息组合上做延续的处理，只是在颜色（足彩用足球绿，篮球用篮球黄）上做差异化出来，使其符合用户的预期该⽂文档的版权为百度UE讲堂所有，如需转载请注明出处THANKS。