《写给大家看的设计书》 - UCD大社区

《写给大家看的设计书》阅读笔记之色彩

摄氏度 — 2009-07-28 01:38:06

做设计的时候，如何配色是经常让人头痛的问题，尽管很多时候，很多人都说对于色彩的掌握更多的是靠感觉，但是不得不说，感觉也是要有依据的。所以颜色色轮表实及家中必备的设计良药！

友情提醒：此图压缩后颜色值有误差，只为演示用，请勿以此为准！

首先需要了解是关于颜色的一些基本知识，当然本日志讲的也尽是这些基本知识，高深的等我学会了再告诉你们！

图片中的标注为“A”的即是三原色，也即是红色、黄色、蓝色，这三种颜色是无法通过其他颜色的混合来创建的。而使用这三种颜色的任意两种等量混合则可以创建出三间色（B），比如红色与蓝色的混合得到紫色、黄色与红色的混合得到橙色、蓝色与黄色的混合得到绿色。任一三原色与其相临的三间色的组合成创建出第三色（C）。

在色轮表上，相对的两个颜色即组成互补色，由于互补色中的两个颜色是对立的，所以使用其中的一种为主色，另一种颜色则用来做为强调色，可以形成比较鲜明的对比。

而在色轮表上，彼此等距的三种颜色则形成三色组，比如三原色形成的三色组称之为基色三色组，而三间色形成的三色组则称之为间色三色组。而另一种形式的分裂互补三色组则是由某个颜色与其互补色两边的颜色组成的。

色轮表上彼此相临的颜色组成类似色，不管这些相临的颜色是两种还是两种以上，他们都有相同的基础色。

对于一个设计中的颜色来说，仅仅是依靠这些基本的色调是不行的，设计中有明暗的表现，所以也就有了亮色与暗色。亮色即是向色调中增加白色，同理暗色即是向色调中增加黑色。如色轮表上所显示的，暗色的最终即为黑色，而亮色最后即是白色。

由一种色调及其相应的多种暗色与亮色的组合即称为单色组合。

在单色组合中，如果暗色或是亮色过于接近的话，就会导致画面的模糊不清晰，比如在浅灰色的背景上写上白色的字时，字体会变得模糊不清。其实这不仅是在单色组合中才会出现，这是由于色质太过于接近导致对比过于微弱而引起的。色质即是指某种颜色的特定明暗度、深浅度或是色调。

就像人类有男人跟女人之分一样，颜色也有暖色与冷色之分。暖色即意味着其中包含红色或是黄色，冷色则是其中包含蓝色。对于同等程度的强调意义来说，暖色只需要一点即可达到，而冷色则往往需要更大面积的展示。这在一定程度上与暖色是趋进型的，而冷色是后退型的相关。

第五个基本设计原则

kent.zhu — 2009-07-12 01:36:49

       在《写给大家看的设计书》（The Non-Designer’s Design Book）的第一个部分，作者Robin把设计的基本原则概括为4条，首字母缩写为不太文明的单词“CRAP”。这就是大家耳熟能详的对比（Contrast）、重复（Repetition）、对齐（Alignment）、亲密性（Proximity）。
       对比（contrast）：如果2个项不完全相同，就应当使之不同，而且应该是截然不同。对比的方式有很多，包括字体、线条、色彩、材质、元素、间隔等。对比能够吸引眼球，目的是有助与信息的组织，并增强页面效果。因为是比较，对比必然要加大力度。
       重复（Repetition）：设计的某些方面需要在整个作品中重复。可能是字体、线条、某个符号、颜色、设计要素、格式、空间关系等。重复可以看作是一种一致性，目的是为了保持统一，并增强效果。但是，要避免太多的重复一个元素，重复太多会让人讨厌。
       对齐（Alignment）：任何元素都不能在页面上随意安放，每一项都应当与页面上的某个内容存在某种视觉联系。对齐包括左对齐、右对齐、居中对齐，不过对于初学者而言作者强烈建议我们强制自己避开居中对齐。通过亲密性，并结合明确的右对齐或左对齐，整个设计将有意想不到的改观。对齐的根本目的是使页面统一而且有条理，不过要避在页面上混合使用多种文本对齐方式。
       亲密性（Proximity）：将相关的项目组织在一起，使他们的物理位置相互靠近，如果某些项彼此间并无关联，这些元素就不应该靠近。亲密性的根本目的是实现组织性。亲密性的敌人是害怕留白或者是留出同样大小的空白。

       以上是作者Robin一直在强调的4个基本设计原则，但是读完第一部分你会发现，其实作者还说了第五个更加基本也是最重要的一个设计原则——打破规则！我觉得这才是最最基本最最重要的一个设计原则。
       当然，规则都是用来打破的，但是在打破规则之前必须要清楚规则是什么！比如，如果设计中的对齐很明确，那么可以有意识地打破对齐，而且一定要表现出这是有意的。一定要干脆一些，要么全部采用一种方式，要么全都不采用这种方式，千万不要保守；比如你不能重复太多的元素，适当的时候需要使用对比。
       作者也不止一次的提到一定要大胆的去做，作者认为这是一个指导性的大原则——不要畏畏缩缩。比如：
       不要害怕在设计中留白，不要看到空间中有空白就把元素都往这里塞，留白能让用户的眼睛稍作休息；
       不要害怕因为不对称而使用居中对齐，不居中往往效果更强烈；
       不要害怕把单词设置的非常大或者非常小，对比就是需要很强烈；

      正如卷首语所言，“人们通常都很教条地去追求可读性，并且常常因为过分强调而变得千篇一律”！只要最后的结果能够支持或者强调你的设计或观点，勇敢的去打破那些规则，不要畏畏缩缩的！

读《<写给大家看的设计>第三版》

相关话题：《写给大家看的设计书》源地址：http://www.ikent.me/blog/1634

《写给大家看的设计书》阅读笔记之重复原则

摄氏度 — 2009-07-09 21:11:30

通过亲密性原则，我们可以将一个页面中的元素按照某种逻辑理解上的差异划分成不同的元素组合；再通过对齐原则，使这些不同的元素组合在视觉上看起来彼此相关。

不同的元素组合之间的关系可以是平等的、从属的或是毫不相关的，这些元素组合之间的关系在视觉上仅靠亲密性原则以及对齐原则并不能完整的呈现。比如两个平等关系的元素组合，虽然通过亲密性原则使其之间保持一定的距离，再通过对齐原则使其在一个页面中看起来彼此相关，但如果这两个元素组合使用不同的字体以及字号，我们依然无法从视觉上辨别出它们之间的关系。

拥有良好的组织性，同时保证了元素间的统一性，但很有可能缺乏一致性。这样的页面设计会成为妨碍读者通过视觉快速获取页面正确的内容的关键。这就需要使用到第三个原则——重复原则。

同样的顶线及底线、同样是两端对齐的方式、同样的字体及字号，还有三角形。这两个页面有太多相同的东西，所以很容易从视觉上快速判断出这两张纸是属于同一本书里的内容。

这就是重复的力量！

重复原则并不仅仅只是表现在字体上，页面中任何一个元素都可以成为设计中重复的对象：字体、字号、颜色、图案，甚至是版式。

犹如在上一个对齐原则中所说的一样，规则是可以打破的。在设计中使用到的重复元素并没有规定必须保证高度的一致性，高度的一致性很有可能会导致页面设计的呆板无趣。

同样的字体及字号，可以使用不同的颜色；同样的形状，可以使用不同的大小……这些都是可以使重复性在页面上的运用不会那么枯燥的方法。

就像大部分单一的设计都会让人感到无趣一样，在设计中使用单一的重复元素，仍然会让设计显得枯燥无味，然而物极必反的道理也是通用的，过多的使用重复元素则会让页面显得凌乱。

这里就涉及到一个对比度的问题。

《写给大家看的设计书》阅读笔记之对比原则

摄氏度 — 2009-07-09 21:11:03

假如一个页面中的文本采用的都是同样的字体、同样的字号、同样的颜色，做为读者的你能轻易的区分出哪里是标题，哪里是正文内容吗？所以通常情况下，设计师会对标题采用加大字号、加粗字体、改变字体、更换颜色等方式进行处理以使其区别于正文内容。

这就是对比原则的一个表现。

没有对比的页面，在读者的眼里就像是平静的海面，视线可及之处没有一个焦点；当出现了对比，突出了视觉重点，也即意义着平静的海面上有个小岛之类的可以吸引住视觉焦点。

对比要强烈！这是书中一直强调的一个观点，其本意应该是通过视觉上的强烈差异化来增强页面的效果，以及强调元素之间的差异性。可是这个强烈依然涉及到一个度的问题，过于强烈的对比，很有可能导致读者对于在页面中处于对比弱的那些元素的忽视。

纸面及网页这两种载体有着各自的局限性，在对比的处理上，网页所受到的局限性会更大。比如在字体的对比上，这一点尤其是在中文网页上，利用字体进行对比处理的局限性相当之大，因为系统默认带有的中文字体不多，所以很多时候在中文网页上对于文本的对比处理依然是在字号、加粗以及颜色上面。

对比元素可以做为重复元素来使用，而与亲密性原则对元素的归类组织类似，对比原则除了可以增强视觉效果外，同样有助于信息的组织。

亲密性、对齐、重复、对比，这是四个相辅相成的设计原则，单一的处理方式并不能给设计带来多大的改观，但当同时应用这四个原则的时候，虽然不可能说让设计变得非常精美，起码也可以让读者在扫视后快速正确的获取到设计中所想表达的内容。

《写给大家看的设计书》阅读笔记之对齐原则

摄氏度 — 2009-07-07 13:41:15

如果说亲密性原则是对元素的归类组合，是将元素之间逻辑理解上的差异在视觉上表现出来，是属于信息分类的话，那么对齐原则即是在视觉上串起这些差异化元素组合之间的那根线，即是保证元素之间的统一性。

虽然亲密性原则说的是在逻辑理解上没有关系的元素组合之间应该以更远的距离表现出来，但对于同一个页面内的元素组合而言，它们都是围绕着同一个主题核心的，它们的差异性在逻辑上只是同一个主题的不同属性而已，所以需要一种方式，让页面中的所有元素看上去统一、有联系而且彼此相关，将这些不同元素之间的关联在视觉上表达出来。

这种方式，即是对齐。

对齐的方式可分为左对齐、右对齐、居中对齐以及两端对齐。虽然对齐的方式有多种，但并不意味着可以在一个页面中使用多种对齐方式，那样只会让页面中的元素显得凌乱，而在页面中只使用一种对齐方式将会使页面统一而有条理。

在这四种对齐方式里，左对齐或是右对齐是最经常被使用到的，而对于有一定行长的文本而言，两端对齐也是一个好的方式，而居中对齐则是四种对齐方式中最不推荐使用的对齐方式。因为对于读者而言，居中对齐可能导致视线的跳跃性太大，尤其是当页面中存在大量文本，那简直就是一种灾难。

在明白对齐的规则之后，可以试着有意识的去打破这个规则，然而即使是打破对齐规则的设计，在更大的范围之内依然是遵循着对齐原则的。

从上面这个图中可以看出，那一小段引用的文本，虽然在页面的元素之间是打破了对齐规则的，但是其仍然与标题是左对齐的。

对于打破对齐规则的设计的好坏，关键在于其在对齐性上所针对的范围。

购买链接：写给大家看的设计书(第3版)

《写给大家看的设计书》阅读笔记之亲密性原则

摄氏度 — 2009-07-07 00:12:08

也许光从字面上来说，版式设计中的“亲密性”似乎不太好理解，正常的情况下，我们都会把“亲密性”理解为人与人之间的关系的一种表现，事实上在版式设计中的“亲密性”的确也有类似人与人之间的关系的意思。

也正是印证了那句话——物以类聚，人以群分！

“亲密性”的原则即是将逻辑上存在关联的元素排列组合在一起，使其被看作是一个密切相关的整体，而不是一堆杂乱无章的元素。

从书中所给的例子，可以看出版式设计中的“亲密性”实际上是对信息的分类整理。即是通过这个“亲密性”原则，对页面中出现的杂乱无章的元素重新组合，使其有一个清晰明了的结构，可以让读者在最短的时间内获取页面中的正确的内容。

进行“亲密性”原则设计的第一步，即是对元素的归类组合，将页面中所需要出现的元素按照某种逻辑进行归类划分，对于同一组合内的元素在物理位置上赋予其更近的距离，而不同组合之间的物理位置显然要更远。

这也是页面留白设计的一个核心。

然而对于一个页面的设计来说，仅仅只是依靠“亲密性”原则并不能解决问题，除了“亲密性”之外，在页面的设计中还需要使用到对齐、对比、重复等原则，“亲密性”只是版式设计的第一步，更多的意义是在于对元素的组织性上。

购买链接：写给大家看的设计书(第3版)

写给大家看的设计书--之精要

sotion@163.com(admin) — 2009-03-11 16:02:34

下面先来看看哪些设计原则，知道它们的名字，然后你将逐步控制页面。

4大基本原则
以下是对基本设计原则的概述，每一个优秀的设计中都应用了这些设计原则。尽管我在后面将逐个讨论各个原则，不过要记住，它们实际上是相互关联的。只应用某一个原则的情况很少。
对比
对比的基本思想是，要避免页面上的元素太过相似。如果元素（字体，颜色，大小，线宽，形状，空间等）不相同，那就干脆让它们截然不同。要让页面引人注目，对比通常是最重要的一个因素，正是它能使读者首先看这个页面。
重复
让设计中的视觉要素在整个作品中重复出现。可以重复颜色，形状，材质，空间关系，线宽，字体，大小和图片，等等。这样一来，既能增加条理性，还可以加强统一性。
对齐
任何东西都不能在页面上随意安放。每个元素都应当与页面上的另一个元素有某种视觉联系。这样能建立一种清晰。精巧而且清爽的外观。
亲密性
彼此相关的项应当靠近，归组在一起。如果多个项相互之间存在很近的亲密性，他们就会成为一个视觉单元，而不是多个孤立的元素。这有助于组织信息，减少混乱，为读者提供清晰的结构。

《写给大家看的设计书》 - UCD大社区

《写给大家看的设计书》阅读笔记之色彩

相关日志

第五个基本设计原则

《写给大家看的设计书》阅读笔记之重复原则

相关日志

《写给大家看的设计书》阅读笔记之对比原则

相关日志

《写给大家看的设计书》阅读笔记之对齐原则

相关日志

《写给大家看的设计书》阅读笔记之亲密性原则

相关日志

写给大家看的设计书--之精要