《页面设计原则》.ppt

对比 对比小结 在页面上增加对比能吸引人的眼球。我们的眼睛喜欢看到对比的事物。如果页面上放两个不完全相同的元素，它们就不能类似。要实现有效的对比，这两个元素必须截然不同。 对比的根本目的有两方面，这两个方面相辅相成，无法分开。一个是增强页面的效果，如果一个页面看起来很有意思，往往更有可读性。另一个目的是有助于信息的组织。 对比 根本目的 新手的问题 对比原则 例子 小结 要避免的问题 对比 要避免的问题 不要犹豫。如果你想形成对比，就加大力度。 不要将一种粗线与另一种更粗的线进行对比。不要将棕色文本与黑色标题建立对比。要避免使用两种或更多类似的字体。如果各个项不完全一样，干脆让它们截然不同！ 新手的问题 对比原则 例子 小结 要避免的问题 只需使用鼠标左键操作课件哦！ 课件的定位 有些人需要设计页面（比如学生需要设计社团活动的海报和宣传单；教师需要设计PPT……），但完全没有设计背景，或者在设计方面没有经过正规的培训，这个课件正是为他们而做。 课件的定位 有些人需要设计页面（比如学生需要设计社团活动的海报和宣传单；教师需要设计PPT……），但完全没有设计背景，或者在设计方面没有经过正规的培训，这个课件正是为他们而做。 学习目标 本课件里将要介绍的四大设计原则： 几乎每一个精良的设计中都会用到。这些原则非常明确而且很具体。我相信，如果遵循了这些基本原则，你的设计看上去会更专业、更有条理、更统一，也更有趣。 亲密性 对齐 重复 对比 参考文献 《版式设计原理》 佐佐木刚士 《写给大家看的设计书》 Robin Williams 说明 课件的定位 有些人需要设计页面（比如学生需要设计社团活动的海报和宣传单；教师需要设计PPT……），但完全没有设计背景，或者在设计方面没有经过正规的培训，这个课件正是为他们而做。 课件的定位 有些人需要设计页面（比如学生需要设计社团活动的海报和宣传单；教师需要设计PPT……），但完全没有设计背景，或者在设计方面没有经过正规的培训，这个课件正是为他们而做。 学习目标 本课件里将要介绍的四大设计原则： 几乎每一个精良的设计中都会用到。这些原则非常明确而且很具体。我相信，如果遵循了这些基本原则，你的设计看上去会更专业、更有条理、更统一，也更有趣。 亲密性 对齐 重复 对比 参考文献 《版式设计原理》 佐佐木刚士 《写给大家看的设计书》 Robin Williams 说明 彼此相关的项应当靠近，归组在一起。 亲密性 每个元素都应与页面上另一个元素有某种视觉联系。 对齐 设计中的视觉要素在整个作品中重复出现。 重复 避免页面上元素太过相似。 对比 亲密性 新手的问题 亲密性原则 例子一 例子二 小结 要避免的问题 新手的问题 在新手设计中，单词、短语和图片四处分布，连角落也不放过，它们占据了每一处空间，以至于根本没有任何留白。 看上去似乎是设计者们不敢留有空白。不过要知道，如果一个设计中充斥这太多的内容，这个页面会显得杂乱无章，读者也无法从中很快看到所需的信息。 亲密性 新手的问题 亲密性原则 例子一 例子二 小结 要避免的问题 新手的问题 在新手设计中，单词、短语和图片四处分布，连角落也不放过，它们占据了每一处空间，以至于根本没有任何留白。 看上去似乎是设计者们不敢留有空白。不过要知道，如果一个设计中充斥这太多的内容，这个页面会显得杂乱无章，读者也无法从中很快看到所需的信息。 亲密性 亲密性原则 亲密性原则是指：将相关的项组织在一起，移动这些项，使他们的物理位置相互靠近，这样一来，相关的项将被看作凝聚为一体的一个组，而不再是一堆彼此无关的片段。 也就是说，元素之间距离的远近，也就是它们关系的远近。 新手的问题 亲密性原则 例子一 例子二 小结 要避免的问题 亲密性 一个简单的例子 将相关的项组织在一起，移动这些项，使他们的物理位置相互靠近，这样一来，相关的项将被看作凝聚为一体的一个组，而不再是一堆彼此无关的片段。 也就是说，元素之间距离的远近，也就是它们关系的远近。 看看下面两个颜色列表，感觉有何不同？ 两个列表之间的区别只是：第二个列表后面三个颜色和前面的有比较大的距离。而这个距离让我们感觉，前面三种颜色和后面三种颜色是不同的。这一眼就能感受到，无需任何提醒。 这正反映了亲密性的概念：在一个页面上，物理位置的接近就意味着存在着关联。 颜料 土黄 柠檬黄 桔黄 墨绿 草绿 橄榄绿 1 颜料 土黄 柠檬黄 桔黄 墨绿 草绿 橄榄绿 2 新手的问题 亲密性原则 例子一 例子二 小结 要避免的问题 亲密性 例二 将相关的项组织在一起，移动这些项，使他们的物理位置相互靠近，这样一来，相关的项将被看作凝聚为一体的一个组，而不再是一堆彼此无关的片段。 也就是说，元素之间距离的远近，也就是它们关系的远近。 来看