设计的个基本原则实用教案

1、这样的信息栏，大家(dji)都觉得不好，但是可以说出不好的原因吗？第1页/共46页第一页，共46页。优秀设计(shj)的4个基本原则C.R.A.P对比(dub)（Contrast）重复 （Repetition）对齐（Alignment）亲密性（Proximity）第2页/共46页第二页，共46页。亲密性亲密性（Proximity） 亲密性（Proximity）：将相关的项目组织在一起，使他们(t men)的物理位置相互靠近，如果某些项彼此间并无关联，这些元素就不应该靠近。第3页/共46页第三页，共46页。 你的眼睛(yn jing)是不是停留过5次？第4页/共46页第四页，共46页。 亲密性（

2、即紧密( jnm)型）意味着存在关联。第5页/共46页第五页，共46页。这是一张舞蹈课的宣传这是一张舞蹈课的宣传(xunchun)卡片卡片第6页/共46页第六页，共46页。运用亲密性重新运用亲密性重新(chngxn)组织组织第7页/共46页第七页，共46页。 左侧的列左侧的列表问题在表问题在于，所有于，所有的元素的元素(yun s)(yun s)都与其他都与其他元素元素(yun (yun s)s)凑在一凑在一起，看不起，看不出他们之出他们之间的关系，间的关系，也无法知也无法知道信息的道信息的组织组织 右侧还是右侧还是同样的列同样的列 表，但表，但是已经有是已经有意识地形意识地形成了多个成了多个

3、组组第8页/共46页第八页，共46页。经过亲密性原则组织后，信息变得如此清晰经过亲密性原则组织后，信息变得如此清晰(qngx)，一眼就可以收获很多的信息量一眼就可以收获很多的信息量 第9页/共46页第九页，共46页。有什么区别有什么区别(qbi)，看出来没有？，看出来没有？第10页/共46页第十页，共46页。这个这个(zh ge)用好了亲密性吗？用好了亲密性吗？第11页/共46页第十一页，共46页。看到变看到变化化(binhu)了吗？了吗？第12页/共46页第十二页，共46页。亲密性小结亲密性小结(xioji) 根本目的：相关联的元素，靠拢在一起 如何实现：眯起眼睛(yn jing)统计，超过

4、35个元素，就需要行动 要避免的问题：没有关系，就不要建立联系，要分开第13页/共46页第十三页，共46页。对齐(du q)（Alignment） 对齐（Alignment）：任何(rnh)元素都不能在页面上随意安放，每一项都应当与页面上的某个内容存在某种视觉联系。第14页/共46页第十四页，共46页。第15页/共46页第十五页，共46页。这里右侧这里右侧(yu c)有一条看不见的有一条看不见的线，将彼此分离的文本，连在了一线，将彼此分离的文本，连在了一起起第16页/共46页第十六页，共46页。这个图中可以看出，这个图中可以看出，那一小段引用的文那一小段引用的文本，虽然在页面的本，虽然在页面的

5、元素之间是打破元素之间是打破(d p)了对齐规了对齐规则的，但是其仍然则的，但是其仍然与标题是左对齐的。与标题是左对齐的。对于打破对于打破(d p)对齐规则的设计的对齐规则的设计的好坏，关键在于其好坏，关键在于其在对齐性上所针对在对齐性上所针对的范围。的范围。 第17页/共46页第十七页，共46页。第18页/共46页第十八页，共46页。找出10处未对齐(du q)的错误第19页/共46页第十九页，共46页。第20页/共46页第二十页，共46页。对齐对齐(du q)小结小结 根本目的：统一而且(r qi)有条理，将衣服收到柜子里 如何实现：注意各元素位置，不管距离多远，首尾有呼应 要避免的问题：

6、尽量不要混合使用多种对齐方式 第21页/共46页第二十一页，共46页。对齐对齐(du q)小结小结 根本目的：统一而且有条理，将衣服收到柜子里根本目的：统一而且有条理，将衣服收到柜子里 如何实现：注意各元素位置如何实现：注意各元素位置(wi zhi)(wi zhi)，不管距离多远，不管距离多远，首尾有呼应首尾有呼应 要避免的问题：尽量不要混合使用多种对齐方式要避免的问题：尽量不要混合使用多种对齐方式 第22页/共46页第二十二页，共46页。重复(chngf)（Repetition） 重复（Repetition）：设计的某些方面需要在整个作品中重复。重复可以看作是一种一致性，目的是为了保持(bo

7、ch)进一步统一。第23页/共46页第二十三页，共46页。读到信息的末尾时，你的视线是不读到信息的末尾时，你的视线是不是会在名片上四处是会在名片上四处(sch)漫游？漫游？第24页/共46页第二十四页，共46页。 读到信息的末尾时，现在你的视线会移向哪里？会在粗体元素(yun s)之间来回跳吗？可能会，这正是重复的主旨，它能把整个作品联系在一起，提供一致性。第25页/共46页第二十五页，共46页。要创建重复要创建重复元素，可以元素，可以从标题和子从标题和子标题入手，标题入手，这是一个这是一个(y )很好的起很好的起点，因为这点，因为这些元素很可些元素很可能在某个方能在某个方面是一致的面是一致的

8、第26页/共46页第二十六页，共46页。使一致使一致(yzh)的元素更为突的元素更为突出，如标题和出，如标题和子标题的字体。子标题的字体。第27页/共46页第二十七页，共46页。第28页/共46页第二十八页，共46页。这里这里有多有多少个少个重复重复(chngf)的元的元素素第29页/共46页第二十九页，共46页。重复重复(chngf)小结小结 根本目的：统一，增强视觉效果 如何实现：把现有的一致性，更向前(xin qin)推进一步 要避免的问题：避免太多地重复同一个元素，否则将混淆重点，重复太多，会让人讨厌！ 第30页/共46页第三十页，共46页。对比(dub)（Contrast） 对比（c

9、ontrast）：如果2个项不完全相同，就应当使之不同，而且应该(ynggi)是截然不同。第31页/共46页第三十一页，共46页。两个简报，哪个感觉(gnju)更想拿起看看？第32页/共46页第三十二页，共46页。第33页/共46页第三十三页，共46页。第34页/共46页第三十四页，共46页。第35页/共46页第三十五页，共46页。 这本好书这本好书(ho sh)(ho sh)的的摘要，至少摘要，至少增加了哪增加了哪4 4种种对比？对比？第36页/共46页第三十六页，共46页。这个这个(zh ge)是寻是寻狗启狗启事吗？事吗？第37页/共46页第三十七页，共46页。 这样看起来像个广告了 天壤之别的原因，只是(zhsh)因为运用了4大原则第38页/共46页第三十八页，共46页。对比对比(dub)小结小结 根本目的：增强页面效果，有意思，更有可读性 如何实现(shxin)：对比一定要强烈！ 要避免的问题：不要犹豫！ 第39页/共46页第三十九页，共46页。复复 习习 一份中规中矩的报告(bogo)封面 请大家来修改设计第40页/共46页第四十页，共46页。第41页/共46页