文档名称：

页面设计原则课件.ppt

文档介绍：页面设计原则课件




2021/6/17
2


课件的定位
有些人需要设计页面（比如学生需要设计社团活动的海报和宣传单；教师需要设计……），但完全没有设计背景，或者在设计方面没有经过正规的培训，这个课件正是为他们而做。

课件的定位
有些人需要设计页面（比如学生需要设计社团活动的海报和宣传单；教师需要设计PPT……），但完全没有设计背景，或者在设计方面没有经过正规的培训，这个课件正是为他们而做。

学习目标
本课件里将要介绍的四大设计原则：
几乎每一个精良的设计中都会用到。这些原则非常明确而且很具体。我相信，如果遵循了这些基本原则，你的设计看上去会更专业、更有条理、更统一，也更有趣。
亲密性
对齐
重复
对比

参考文献
《版式设计原理》
佐佐木刚士
《写给大家看的设计书》
Robin Williams

说明






2021/6/17
3


课件的定位
有些人需要设计页面（比如学生需要设计社团活动的海报和宣传单；教师需要设计……），但完全没有设计背景，或者在设计方面没有经过正规的培训，这个课件正是为他们而做。

课件的定位
有些人需要设计页面（比如学生需要设计社团活动的海报和宣传单；教师需要设计PPT……），但完全没有设计背景，或者在设计方面没有经过正规的培训，这个课件正是为他们而做。

学习目标
本课件里将要介绍的四大设计原则：
几乎每一个精良的设计中都会用到。这些原则非常明确而且很具体。我相信，如果遵循了这些基本原则，你的设计看上去会更专业、更有条理、更统一，也更有趣。
亲密性
对齐
重复
对比

参考文献
《版式设计原理》
佐佐木刚士
《写给大家看的设计书》
Robin Williams

说明






2021/6/17
4

彼此相关的项应当靠近，归组在一起。
亲密性
每个元素都应与页面上另一个元素有某种视觉联系。
对齐
设计中的视觉要素在整个作品中重复出现。
重复
避免页面上元素太过相似。
对比











2021/6/17
5


亲密性
新手的问题
亲密性原则
例子一
例子二
小结
要避免的问题
2021/6/17
6


亲密性
新手的问题
亲密性原则
例子一
例子二
小结
要避免的问题
新手的问题
在新手设计中，单词、短语和图片四处分布，连角落也不放过，它们占据了每一处空间，以至于根本没有任何留白。
看上去似乎是设计者们不敢留有空白。不过要知道，如果一个设计中充斥这太多的内容，这个页面会显得杂乱无章，读者也无法从中很快看到所需的信息。



2021/6/17
7


亲密性
亲密性原则
亲密性原则是指：将相关的项组织在一起，移动这些项，使他们的物理位置相互靠近，这样一来，相关的项将被看作凝聚为一体的一个组，而不再是一堆彼此无关的片段。
也就是说，元素之间距离的远近，也就是它们关系的远近。

新手的问题
亲密性原则
例子一
例子二
小结
要避免的问题


2021/6/17
8


亲密性
一个简单的例子

看看下面两个颜色列表，感觉有何不同？
两个列表之间的区别只是：第二个列表后面三个颜色和前面的有比较大的距离。而这个距离让我们感觉，前面三种颜色和后面三种颜色是不同的。这一眼就能感受到，无需任何提醒。
这正反映了亲密性的概念：在一个页面上，物理位置的接近就意味着存在着关联。

颜料
土黄
柠檬黄
桔黄
墨绿
草绿
橄榄绿
1

颜料
土黄
柠檬黄
桔黄
墨绿
草绿
橄榄绿
2
新手的问题
亲密性原则
例子一
例子二
小结
要避免的问题


2021/6/17
9


亲密性
例二

来看下面两个名片。
一种典型的无视设计规则的布局。在这样小的空间里可以看到五个独立的元素。
把类似的元素组织为一个单元，马上会带来很多变化。首先，页面会变得跟有条理。其次，你会清楚地知道从那里开始读信息，什么时候结束。另外，“空白”也会变得更有组织。

钟伟威
设计爱好者
159xxxx3585
潮州
韩山师范学院

钟伟威
设计爱好者
159xxxx3585
潮州
韩山师范学院
新手的问题
亲密性原则
例子一
例子二
小结
要避免的问题


2021/6/17
10