网页设计扁平化手册之四原则.pptx

图标網頁设计手册網頁設計課——袁四偉设计四原则色块颜色伪扁平图片字体设计四原则亲密相互关联，意思相近的内容应该放在一起。百事可乐王老吉可口可乐百事可乐王老吉可口可乐红烧牛肉梅菜扣肉酸菜鱼姜葱鸡叫化鸡凉拌青瓜红烧牛肉梅菜扣肉酸菜鱼姜葱鸡叫化鸡凉拌青瓜菜单菜单如果你要找一瓶可乐，那是不是要从头到尾看一次？很浪费时间对不对？经过亲密性原则调整后，你就可以很快地找到饮料区，从中找到可乐。对齐保证页面上的某两个元素之间总是围绕一条直线对齐。我是PPT的标题我是PPT的标题我是PPT的副标题我是PPT的副标题1、这个是第一个观点，主要是想说明…1、这个是第一个观点，主要是想说明…2、这个是第二个观点，然后…2、这个是第二个观点，然后…3、这个是第三个观点，所以说…3、这个是第三个观点，所以说…这个排版是想说明你的信息是乱“拍”上去的吧，信息量再大一点整个页面就崩了。调整之后马上简洁大气上档次了！善用“对齐”功能吧！对比有意识地增加不同等级元素之间的差异性，要么相同，要么完全不同。我是PPT的标题我是PPT的标题我是PPT的副标题我是PPT的副标题1、这个是第一个观点，主要是想说明…1、这个是第一个观点，主要是想说明…2、这个是第二个观点，然后…2、这个是第二个观点，然后…3、这个是第三个观点，所以说…3、这个是第三个观点，所以说…这个排版是简洁大气，但是略有点平淡，没有层次。先不论这样的调整适不适合，但是是不是马上就刺激眼球了，更有主次了？重复分析元素等级后，选取相同等级的元素来重复我是第一个转场页我是第二个转场页我是转场页的解释说明我是转场页的解释说明我是转场页的解释说明我是转场页的解释说明从单个页面来说，“解释说明”部分的字体、大小都体现出重复性原则，保证了单个页面的稳定性。我是第三个转场页从多个页面来说，转场页属于同一等级，所以他们应该具有某些重复的特征，如这三幅例子，除了颜色之外，其他特征都是相同的，而颜色的不同让PPT更有味道。我是转场页的解释说明我是转场页的解释说明小结介绍一种记忆方法，对英语无爱者可以忽略CP对比亲密ONTRASTROXIMITYRA重复对齐EPETITIONLIGNMENT颜色选色我的原则 鲜艳而不刺眼 什么意思啊？选色我的原则扁平化风格通常使用非常鲜艳的颜色小色块都刺眼了，你想象下大面积使用？小伙伴都会顶不住！刺眼组不刺眼，方便阅读，投影出来不会看不到。和谐组这里改变模式调灰点：微调色相，适当调低调饱和度和亮度。大家有需求的话我可以尝试做教程详细分享一下。配色确定背景色背景色重要到要单独拿出来了！白色干净简洁，最普遍的背景色，可在局部加装饰适当美化，提高档次！配色确定背景色非白色暖色、冷色、图片暖色不建议，容易亮瞎观众眼球，而且看久了眼睛会有视色错觉现象（就是跟残像一个意思，嗯，差不多）冷色比较常见使用的时候注意图元素颜色的兼容，例如跟图表、色块颜色的对比一定要够大。图片图片简单的可以直接使用，复杂的建议先做模糊、调暗处理或者加色块，遵循不刺眼、不影响信息的原则配色多色系确定主色，再选4到5种颜色做辅色，来做色块的颜色。服务介绍SundayJAN1524HOURSUPPORT300+BLOOMBERGIS DATA数据正在暴增！20YEARS OFCHARLEROSEPROFESSIONALSERVICESUBSCRIPTIONS配色单色系以主色为基础，改变颜色的饱和度和亮度。配色复古色近期比较流行的配色方案！Name电脑的普及给教育带来变革单色系多色系色块形状结构尽量简单建议简单、规则的图形避免复杂不规则的图形多边形最好不超过6边，边多的话，观众的注意力就转移到去数它有多少边了……样式“三去”去高光去阴影去渐变大小方块的大小也有讲究大小取决于内容一定要留有适量空白距离DEMO这个是DEMO这个是DEMO留有一点空间不行喘息的空间都没有了这样是不行的图标提炼图标的提炼是一门技术图标不是随意用For Example1图标帮助观众理解内容，让观众可以在图标就了解演讲内容的方向，并且加深观众的印象。Guangzhou TVNews Channel图标与标题同等重要2在有图标的情况下，图标与标题同等重要，甚至比标题更需要动脑。是不是看不懂英文都知道是广州卫视新闻频道？提炼图标的提炼是一门技术仅从标题或正文中的某些名词中提炼图标，在大部分情况下是正确的：促销活动电脑技术但是也存在图表贴切与否的问题：例如要表示广州市的农民人数：第二个图标明显比第一个贴切字体原则我的选字原则推荐无衬线字衬线无衬线字体简单，没有过多的修饰，符合扁平化风格。字迹够清晰字细笔画字体在投影的场合要保证字体够大。扁平化风格经常需要反白，所以字体笔画也要讲究。两字体最优字体系列保持在2种左右。字体我一般使用的中英文字体中文英文微软雅黑MS YAH