-
呃···开头,这算是篇原创吧。
讲到设计,之前我们牵扯了太多的感性,我们常常会说“没有灵感”之类的话,没有效率?那就来了解下设计的方法吧。
{dy}步
我们通过临摹,看教程,使用PS不同的表现技法,如:高斯模糊,蒙板使用,阴影,发光等,提高效率,又可以学习到东西。
前面的教程,梓峰给了几个很不错的网站。多去看看。
?实战练习+节日logo展示
?星空设计实例讲解+素材网站
?Photoshop工具使用
?平面出版物概念
第二步
遵循设计原则,一步步的去完善。
你现在有了一份还不错的初稿,但就是感觉有点“山寨”。我常常会说你没有领会到优秀设计的精髓。
亲密性
对齐
重复
对比
四个原则亲密性
亲密原则之一是空白的使用,一个网站可以有很多空白,但是如果这些元素不能很好的组织在一起,那么用户会感觉很混乱,正如下面的对比图片所示。
左边图片中虽然使用的很多空白,但是各个元素在逻辑上并无关联,整个 Card 逻辑上无组织,所以这个设计并不好;再看右边的 Card,其中名字与地址紧密的结合在一起,他们就成为一个视觉单一,给人一种他们之间有所关联的感觉。所以整体来说:把相关的元素分在一组,使他们建立更近的亲密性。建立视觉层次结构
通过留白和群组是网页层次架构中很重要的因素,当然,网站中的层次结构是也是基本的网页亲密性表现
网页中通过组和子组来说明其层次结构,层次让人知道你所处的位置,以及你想到达的地方,同时也能使网站内容重点突出,从下面的例子我们可以看到层次带来的好处。
图示中左侧一列使用阶层+空白相结合的方式来增加相关元素之间的相关性,用户很容易区分不同的内容;而右边的一列,你能一眼区分它们哪些元素是相关的么?我想应该不容易吧!
小结
1. 亲密性的根本目的:实现组织性。尽管其他原则也能达到这个目的,不过利用亲密性原则只需要简单的将相关的元素分组,就能自动的实现条理性和组织性。如果信息很有条理,将更容易阅读,或者记忆,此外,利用亲密性原则,还能够很好的利用空白。
2. 如何实现:微微眯起你的眼睛,统计你的眼睛停顿的次数来数一数页面上有多少个元素。如果页面上的想超过3-5个,就要看看哪些孤立元素可以归在一组建立更近的亲密性,使之成为一个视觉单元。
3.要避免的问题:
- 不要仅仅因为有空白就把元素放在角落或中央
- 避免一个页面上有太多的孤立元素
- 不要在元素中央留出同样大小的空白,除非各组属于同一个子集
- 标题、子标题、图标标题、图片能否归入其相关资料?在这个问题上一定要非常清楚,在有很近亲密性的元素之间建立关联。
- 不属于同一组之间的元素不要建立关系!如果元素彼此无关,把他们分开!
对齐
设计新手往往很草率,只有页面上刚好有空间,就会把文本和图片放在那里,而xx不考虑页面上的其他项,这样就会给人一种杂乱无章的感觉,这有点像你的卧室,可能电脑桌上有个烟灰缸,旁边有个咖啡杯,上面放置一大堆的书籍,或者床上放置很多换洗衣服,地上很多垃圾,等待,如果要清理这些应该会花掉不少时间吧。
Robin 对齐原则是:“在页面上任何东西都不能在随意安放。每个元素都应当与页面上的另一个元素有某种视觉上的联系。”这样能够建立一种清晰、精巧而且清爽的外观。对齐原则要求特别小心,而不能像从前那样,只要页面上有空间,就随处“扔”放。
如果页面上的一些元素是对齐的,这就会得到一个更内聚的单元,即使对齐的元素物理位置是彼此分离的,但在你的眼里,他们之间也会有一条看不见的先把他们连在一起。尽管你可以通过分组放置来指示他们的关系(亲密性原则),但对齐原则很神奇,它会告诉读者,即使这些项并不靠近,但他们属于同一组,之前的亲密性原则中就有一张图片很好的说明了这点,这里再借用一下,呵呵。
上图中,左边的图片上的元素就好像是随意扔上去并被粘贴一样,这里的所有元素和其他元素都没有关联。稍微花点时间区分哪些应该放置在一起,哪些应该区分开,分别运用亲密性和对齐原则,可以得到右边的图示,其中:把所有的元素都移至右侧,使他们按同一种方式对齐,现在信息立刻就有条理了。当然其中亲密性原则起到了很好的作用。在看看下面两张图片:
这个图片看起来很凌乱,各种矩形方框放在一起,各个元素之间没有联系,看完让人心情很压抑(像厚黑学中的乱石,所以会带给人以压抑的情绪)。虽然有的时候设计师会故意用凌乱来表达一种情绪,凌乱也是美!可是希望你要记住,凌乱是有规则的凌乱,每个物件的摆放存在其内在的联系,凌乱只是表象,实质上他还是一个整体。这方面的作品有很多,可以参考09年比较流行的涂鸦式设计,这里重点不是讲这个,需要了解相关信息请 google 去吧。哈哈!
左边通过对齐线来重新布局,给人整齐归正的感觉,这归功与对齐与网格,在网页设计中,有很多不错的网格框架供大家参考,比如960,Buleprint,YUI Grid,我比较喜欢960gs 再自己修改修改,这样你能够在 PS 中很好的布局设计,相信你也会喜欢上他的,Bulepringt、YUI 也比较不错,不过 YUI 自动生成的代码不太喜欢,所以很少使用,其实 Yahoo!页面使用的也是960px 宽度,大家不妨去看看。
小结:
任何元素都不能在页面上随便摆放,每个元素应当与页面的另一个元素存在某种视觉联系。
在设计中,统一性是一个重要概念。要让页面上的所有元素看上去统一、有联系而且彼此相关。需要在各个元素之间建立视觉纽带。
对齐的根本目的:使页面统一而且有条理。其效果类似于把客厅的桌椅板凳、沙发摆放整齐,靠墙的靠墙,居中的居中,总之就是形成一种对比。
如何实现对齐:要特别注意元素放在哪里,应当总能在页面上找到与之对齐的元素,尽管这两个元素之间的距离很远。
要避免的问题:
1. 在一个页面上混合使用多种文本对齐方式(也就是说,不要将某些元素居中,另外的左对齐)。
2. 另外,要着力避免使用居中对齐,除非你有意识地要创建一种比较正式、稳重(通常也更乏味)的表示。并不是xx杜绝使用居中对齐,有时可以有意识地选择这种对齐方式,但{zh0}不要把它作为默认的对齐方式。
重复
通过亲密性原则,我们可以将一个页面中的元素按照某种逻辑理解上的差异划分成不同的元素组合;再通过对齐原则,使这些不同的元素组合在视觉上看起来彼此相关。
不同的元素组合之间的关系可以是平等的、从属的或是毫不相关的,这些元素组合之间的关系在视觉上仅靠亲密性原则以及对齐原则并不能完整的呈现。比如两个平等关系的元素组合,虽然通过亲密性原则使其之间保持一定的距离,再通过对齐原则使其在一个页面中看起来彼此相关,但如果这两个元素组合使用不同的字体以及字号,我们依然无法从视觉上辨别出它们之间的关系。
拥有良好的组织性,同时保证了元素间的统一性,但很有可能缺乏一致性。这样的页面设计会成为妨碍读者通过视觉快速获取页面正确的内容的关键。这就需要使用到第三个原则——重复原则。
?
同样的顶线及底线、同样是两端对齐的方式、同样的字体及字号,还有三角形。这两个页面有太多相同的东西,所以很容易从视觉上快速判断出这两张纸是属于同一本书里的内容。
这就是重复的力量!
重复原则并不仅仅只是表现在字体上,页面中任何一个元素都可以成为设计中重复的对象:字体、字号、颜色、图案,甚至是版式。
犹如在上一个对齐原则中所说的一样,规则是可以打破的。在设计中使用到的重复元素并没有规定必须保证高度的一致性,高度的一致性很有可能会导致页面设计的呆板无趣。
同样的字体及字号,可以使用不同的颜色;同样的形状,可以使用不同的大小……这些都是可以使重复性在页面上的运用不会那么枯燥的方法。
小结:
重复使用一个元素可以看上去是一个风格。就像我很容易看出那是梓峰的风格,炊事班的风格,梓健的风格···别人也可以看的出是我的风格,因为我们都有自己的喜欢的癖好。
字体,大小,颜色。
重复也可以体现前面提到的亲密性,同类的字,同样大小。同一张板上,字体使用大多一致。
对比
假如一个页面中的文本采用的都是同样的字体、同样的字号、同样的颜色,做为读者的你能轻易的区分出哪里是标题,哪里是正文内容吗?所以通常情况下,设计师会对标题采用加大字号、加粗字体、改变字体、更换颜色等方式进行处理以使其区别于正文内容。
这就是对比原则的一个表现。
没有对比的页面,在读者的眼里就像是平静的海面,视线可及之处没有一个焦点;当出现了对比,突出了视觉重点,也即意义着平静的海面上有个小岛之类的可以吸引住视觉焦点。
?
对比要强烈!这是书中一直强调的一个观点,其本意应该是通过视觉上的强烈差异化来增强页面的效果,以及强调元素之间的差异性。可是这个强烈依然涉及到一个度的问题,过于强烈的对比,很有可能导致读者对于在页面中处于对比弱的那些元素的忽视。
纸面及网页这两种载体有着各自的局限性,在对比的处理上,网页所受到的局限性会更大。比如在字体的对比上,这一点尤其是在中文网页上,利用字体进行对比处理的局限性相当之大,因为系统默认带有的中文字体不多,所以很多时候在中文网页上对于文本的对比处理依然是在字号、加粗以及颜色上面。
对比元素可以做为重复元素来使用,而与亲密性原则对元素的归类组织类似,对比原则除了可以增强视觉效果外,同样有助于信息的组织。
完结
亲密性、对齐、重复、对比,这是四个相辅相成的设计原则,单一的处理方式并不能给设计带来多大的改观,但当同时应用这四个原则的时候,虽然不可能说让设计变得非常精美,起码也可以让读者在扫视后快速正确的获取到设计中所想表达的内容。
“山寨”的表现就已经消失了!