平面设计新手需要掌握的基础知识

一、注意字体

无论是标志还是排版。作为标志，有时图形是次要的，字体可以帮你解决很多问题，努力学习，掌握字体的设计。

一切字体都离不开版式，一切版式都离不开字体。作为东方文化最杰出的代表——中文字体，你得好好琢磨。一开始，你最好先想到是宋体还是黑体。简单的讲，宋体很严谨，很庄重，也很尊贵;黑体，很现代，很整齐，很简约。

其次，字体的间距最好小于常规间距。以“0”为标准，你最好取“-50”，这可适用于标题类字体排版，作为大面积的正文排版，同样需要稍微缩小字体的间距，稀疏的间距不但不能完成轻松阅读的任务，反而会让眼睛疲惫。把握“紧凑”和“稀疏”的区别。

最后，字体的高度，最好压一压，就是压扁一些，这样，汉字看上去，会更象汉字一些。说的不如做的，不妨试一试，都是很简单的处理。只有自己试过之后，才能记在自己的脑子了。活学活用。

二、版式

优秀的版式设计是现代设计艺术最重要的组成部分，也是视觉传达效果的重要手段，我们可以看出版式设计不仅是一门编排学问，更是一种技能，实现了艺术与技术的高度统一，优秀的版式设计是现代优秀设计师必备的技能之一。

1、保证清晰易读。为了让版面醒目突出，往往大部分设计师会忘记信息的明确传达。他们就会使用各种工具制作很炫目的图形，而把文字内容放的很小很不起眼。这恰恰犯了版式编排的大忌，吸引不是重点，信息的传达才是重点!

2、不要使用过多的字体。如果一个页面里有十种不同的字体，那么这个排版一定会很难看，控制着少用几种字体，将会让你的页面脱颖而出。同时你也可以在字体的大小、重量和其它方面创造更多的对比变化。

3、不要盲目赶潮流。那些时尚网站的现代字体固然很精致，但是它并不适合所有的页面。真正深入了解你的内容来设计会比你盲目地用许多最新的字体叠加，使你的版面看起来更加自然和谐。其实，字体也不光是网络才有。有时候，打开一本书或者一本杂志，看看

那些经久不衰的经典字体，也会让你受益良多。

4、保持不同。当你选择字体，将他们放在一起时，确保他们的字体相互独立的而不是相互接近的。因为如果您选择两个相似的字体放在一起，会给大家一种错别字的感觉。

5、适当使用衬线字体无衬线的字体看起来会很现代，同时很简洁干练，被许多设计师所采用。不过对于一些抒情性强的页面时，偶尔使用一些衬线字体，会让你的版面看起来更加富有感情，更加经典。

6、多尝试新字体。挑选合适的字体需要花费大量时间，但是不要一遍又一遍地让自己陷入对同一类型的字体挑选中。因为人们往往习惯于从自己熟悉的字体或者偏爱的字体开始，多花些时间去发现探索新的类型，这样你才能慢慢地发现自己对一种字体的细微差别的

敏锐度，真正地让字体自己告诉你合适不合适。

7、建立层级次序。决定了哪些字体要用来做什么，对他们要怎么处理，依次遵守设立一个层级系统，这样就能很容易地编排，也能让读者更容易地阅读。

8、让版面有节奏感。确保各个部分的内容都被合理地放置而不是混乱地堆在一起，字距要小于行间距，行距要小于字体高度，行距要小于段间距，段间距又小于周边距。

9、有版权意识。从网上获得或者从朋友那里得到的字体，并不是想怎么用就怎么用。考虑它们有没有版权信息，在打印之前要确保你是否需要从原作者那里获得使用权。

10、小一点更好。小巧一点，不是任何时候都适用的，但要是想显得精致和高品位一些，小一点是没错的，前提是可以轻易辨认。平时在已经完成一个页面后，多推敲看看字体的字号能不能再小一点。有时候会起到出乎意料的效果!

11、注意主次顺序。图片和文字应该并用，以图片为主，但是文字承载的信息也必须有表达的机会。重要的信息要居中表达，安排在最显眼的地方。

12、符合阅读习惯。在兼顾趣味性的同时，也要符合阅读习惯，要考虑到浏览网站的用户的心理特征，排版要平和自然。

四、节奏

回到“稳重”的版式上来，最重要的一点是：节奏。什么叫节奏?因为不同，所以产生了节奏。对比，反差，无论是面积也好，色彩也好，结构也好，不要什么都一样，也不要什么都不一样，否则，就没有节奏可言。可以用音符如何产生旋律来理解排版中的“节奏”。

五、色彩

简单地说，色彩是可见光投射带物体上再反射如人眼的一种视觉现象，没有光，就没有色彩。色彩有三大要素，包括色相，明度，饱和度。

色彩是人们生活中必不可少的调味料，大自然也正是因为有了色彩才变化万千，丰富多姿。色彩作为平面设计中的重要元素更是艺术专业不可缺少的研究题材。色彩本身是没有内容的，它只是一种物理现象,反应在人们的视觉上，作用于人的心理感受。色彩作为造型

术的要素和主要手段之一，它在平面设计中起着最直观的视觉作用，无论是整体的.用色还是局部的用色，色彩对整个画面都有着重大的影响。

在色彩的运用上，可以根据主页内容的需要，分别采用不同的主色调。因为色彩具有象征性，例如：嫩绿色、翠绿色、金黄色、灰褐色就可以分别象征着春、夏、秋、冬。

其次还有职业的标志色，例如：军警的橄榄绿，医疗卫生的白色等。色彩还具有明显的心理感觉，例如冷、暖的感觉，进、退效果等。另外色彩还有民族性，各个民族由于环境、文化、传统等因素的影响，对于色彩喜好也存在着较大的差异。充分运用色彩的这些特

性，可以使我们的主页具有深刻的艺术内涵，从而提升主页的文化品位。

下面介绍几种常用的配色方案：

1.暖色调。即红色、橙色、黄色、赭色等色彩的搭配。这种色调的运用，可使主页呈现温馨、和煦、热情的氛围。

2.冷色调。即青色、绿色、紫色等色彩的搭配。这种色调的运用，可使主页呈现宁静、清凉、高雅的氛围。

3.对比色调。

即把色性完全相反的色彩搭配在同一个空间里。例如：红与绿、黄与紫、橙与蓝等。这种色彩的搭配，可以产生强烈的视觉效果，给人亮丽、鲜艳、喜庆的感觉。当然，对比色调如果用得不好，会适得其反，产生俗气、刺眼的不良效果。这就要把握"大调和，小对比

"这一个重要原则，即总体的色调应该是统一和谐的，局部的地方可以有一些小的强烈对比。

最后，还要考虑主页底色(背景色)的深、浅，这里借用摄影中的一个术语，就是"高调"和"低调"。

底色浅的称为高调;底色深的称为低调。底色深，文字的颜色就要浅，以深色的背景衬托浅色的内容(文字或图片);反之，底色淡的，文字的颜色就要深些，以浅色的背景衬托深色的内容(文字或图片)。

这种深浅的变化在色彩学中称为"明度变化"。有些主页，底色是黑的，但文字也选用了较深的色彩，由于色彩的明度比较接近，读者在阅览时，眼睛就会感觉很吃力，影响了阅读效果。当然，色彩的明度也不能变化太大，否则屏幕上的亮度反差太强，同样也会使读

者的眼睛受不了。

色彩的心理效应

色彩的直接心理效应来自色彩的物理光刺激对人的生理发生的直接影响。

心理学家对此曾做过许多实验。他们发现，在红色环境中，人的脉搏会加快，血压有所升高，

情绪兴奋冲动。而处在蓝色环境中，脉搏会减缓，情绪也较沉静。有的科学家发现，颜色能影响脑电波，

脑电波对红色反应是警觉，对蓝色的反应是放松。

红色热情、活泼、热闹、革命、温暖、幸福、吉祥、危险......

橙色光明、华丽、兴奋、甜蜜、快乐......

黄色明朗、愉快、高贵、希望、发展、注意......

绿色新鲜、平静、安逸、和平、柔和、青春、安全、理想......

蓝色深远、永恒、沉静、理智、诚实、寒冷......

紫色优雅、高贵、魅力、自傲、轻率......

白色纯洁、纯真、朴素、神圣、明快、柔弱、虚无......

灰色谦虚、平凡、沉默、中庸、寂寞、忧郁、消极......

黑色崇高、严肃、刚健、坚实、粗莽、沉默、黑暗、罪恶、恐怖、绝望、死亡......

1、保证清晰易读。为了让版面醒目突出，往往大部分规划师会忘掉信息的清晰传达。他们就会运用各种工具制造很炫目的图形，而把文字内容放的很小很不起眼。

2、不要运用过多的字体。假如一个页面里有十种不同的字体，那么这个排版一定会很难看，操控着少用几种字体，将会让你的页面锋芒毕露。一起你也可以在字体的大小、重量和其它方面创造更多的对比变化。

3、不要盲目赶潮流。那些时尚网站的现代字体固然很精美，可是它并不适宜一切的页面。真正深化了解你的内容来规划会比你盲目地用许多最新的字体叠加，使你的版面看起来愈加天然和谐。

4、保持不同。当你选择字体，将他们放在一起时，保证他们的字体彼此独立的而不是彼此接近的。由于假如您选择两个相似的字体放在一起，会给大家一种错别字的感觉。

5、适当运用衬线字体无衬线的字体看起来会很现代，一起很简练干练，被许多规划师所采用。不过关于一些抒情性强的页面时，偶然运用一些衬线字体，会让你的版面看起来愈加富有爱情，愈加经典。

6、多尝试新字体。选择适宜的字体需求花费大量时刻，可是不要一遍又一遍地让自己堕入对同一类型的字体选择中。

7、建立层级次第。决议了哪些字体要用来做什么，对他们要怎样处理，依次遵守设立一个层级系统，这样就能很容易地编列，也能让读者更容易地阅读。

网页包括：网站logo，导航栏，banner，内容栏，版尾。

logo的大小标准：88*31普通规格；120*60一般大小规格；120*90大型logo。

好logo所具备的条件：符合国际标准，精美独特，兼容网站风格，能提现网站类型。

导航栏是索引网站内容和快速访问所需内容的辅助工具。同级项目数以3~7项为宜。

banner是可由图像，文字，动画结合而成的网页栏目。主要作用是展示网站广告。

内容栏是网页内容的主体，由一个或多个子栏组成，包含网站提供的所有信息和服务项目。内容可以是文字，图像，或者两者相结合。

版尾可以申明版权，法律依据，以及各种提示信息。版权的书写应符合所在国家的法律依据，以及遵循一般书写习惯。

除此之外，版尾处可以提供一个导航条，为将页面滚动到底的用户提供一个导航方式。

成功的网页版式设计，有助于吸引用户对网页的注意，增进用户对内容的理解。因此，要使网页具有诱导力，突出诉求主题，就要通过对版式的空间层次，主从关系，视觉秩序，以及逻辑条理性的把握和运用来共同完成。

传统媒体是以线性方式提供信息，即根据信息提供者个人感受来传播。在web环境下，用户不再是被动接受者，而是以一个主动参与者的身份加入到信息的加工处理发布之中。

网页媒体使用的交互性，多维性，和多种媒体的综合应用，是网页版面设计的完美体现。即时的交互性是web成为热点的原因，也是版面设计需要考虑的问题。

多维性源于超链接，主要体现在导航的设计上。使用超链接，网页的组成结构会更加丰富。用户可自由切换，打破了传统的线性接收方式。但需注意页面之间的关系不能太复杂，这会给用户带来负担。

网页中所使用的多媒体视听元素主要有文字，图像，声音，视屏等。运用这些元素，可以满足和丰富用户的多种感官需求。

网页设计的装饰应该简洁化，功能与装饰应有效结合。复杂的装饰会影响加载速度，影响点击率。

网页设计要遵循和谐，均衡，重点突出的色彩规则。当人们的色彩经验与外界色彩刺激发生呼应，就会在心理上引发强烈的情绪。

1.网页的标题设计

好的标题设计可令人赏心悦目，能形成网页的整体风格。标题所在的栏目一般在网页的上方，并左右贯穿整个网页。标题的背景可以使用动态或静态的图片，主要由网页的交互式特性决定。

2.文字的编排

通常情况下，适合网页正文显示的文字大小在12磅左右。然而，在很多综合性网站中，由于在一个页面中安排的内容较多，字号通常采用9磅。

在同一页面中，字体种类少，版面雅致，有稳定感；字体种类多，则版面活跃，丰富多彩。关键是如何根据页面内容来掌握这个比例关系。从加强平台无关性的角度来考虑，正文最好采用默认字体。如果必须用到特殊字体，那么可以将文字制成图片。

通常字号与行距的比例应为：字号8点，行距10磅.即8：10.但对于一些特殊的版面而言，字距与行距的加宽或紧缩，更能体现主题的内涵。所以说字距和行距不是绝对的，得根据实际情况而定。

强调文字有三种常见形式：第一种是行首强调，又称为下坠式，有吸引视线、装饰和活跃版面的作用；第二种是引文强调，引文概括了一个段落、章节或者全文的大意，所以需要给予特殊位置来强调；第三种是个别文字强调，将个别文字作为页面的诉求重点，可以通过加粗、加下划线等强化文字的视觉效果。

3.图文的结合

在网页的版式设计中只应用文字也不适合人们长期阅读，所以网页在版式上采用图文结合的方式更为恰当。

图文结合主要有两种表现形式：1.文字匹配图片的形式，图形是网页的主体，文字是辅助存在。2.图形匹配文字的形式，要把握图形和文字的关系，根据不同类别的网站灵活搭配。

4.页面的节奏韵律

页面的韵律需要根据设计的风格和受众情感综合起来体会。一个音乐类的网站，给人的感觉是轻松欢畅的；一个新闻类网站，给人的感觉是快速律动的；而一个军事类网站给人的感觉是严肃庄重的。所以这就需要设计者根据内容来选择设计风格。

网页设计如果仅从网页版式构成进行分类，则主要有骨骼型、满版型、分割型、中轴型、曲线型、倾斜型、对称型、焦点型、三角型以及自由型十种。

1.骨骼型：是一种规范的、理性的设计形式，类似于报刊的版式。常见的骨骼有竖向和横向的通栏、双栏、三栏、四栏等。一般以竖向分栏为多，这种版式给人以和谐、理性的美。几种分栏方式结合使用，会使网页既有条理又有弹性。

2.满版型网页：以图像充满整版。页面主要以图像为诉求点，将少量文字嵌于图像之上，视觉传达效果直观而强烈。多见于强调艺术性或个性的网页设计中。美中不足的是，它对网络宽带有着一定要求。

3.分割型：把整个页面分为上下或左右两部分，分别安排图片和文案。令部分形成鲜明对比：有图片的部分感性而具有活力，文案部分则理性而平静。

4.中轴型：沿着页面的视觉中轴将图片或者文字进行水平或者垂直方向的排列。水平排列的页面，给人稳定、平静、含蓄的感觉；垂直排列的页面，给人舒畅的感觉。

5.曲线型：将图片或文字在页面上作曲线的编排，这种编排方式能产生韵律感与节奏感。

6.倾斜型：将页面主题形象或多幅图片、文字进行倾斜编排，从而造成页面强烈的动感，引人注目。

7.对称型：页面版式给人以稳定、严肃、庄重、理性的感觉。它分为绝对对称、相对对称以及四角形三种。一般采用相对对称的手法，避免版式呆板。而四角形对称手法是在页面四个角安排相应的视觉元素，这种构成方式也能很好使页面产生安定感。

8.焦点型：通过对视线的诱导，使页面具有强烈的视觉效果。常见的几种方式有：一是将对比强烈的图片或者文字置于页面视觉中心；而是视觉引导浏览者视线向页面中心聚拢，形成向心的版式；三是视觉元素引导浏览者视线向外辐射，形成离心的网页版式。

9.三角型版式：网页视觉元素是三角型排列。正三角形具有最稳定性，倒三角形则产生动感。侧三角形构成一种均衡版式，既安定又有动感。

1.缺乏主色调

在网页经常可以看到这样的网站，元素色相众多，令人眼花缭乱，给人一种复杂混乱的视觉效果，使访问者无法明确地识别重点内容。

这是一个国外从事汽车产业方面的公司，所以在页面上方选用了和网页同色系的一辆红色跑车，这是网页上的一处亮点。深浅不同的灰色对整个网页的区域进行了划分。整个网页版式设计条理清楚，色彩简单不呆板，体现了工业产品的特点。

这是松下家电制造公司的网站。以金属灰为主色调，与家电产品的主体相吻合。页面采取了一分为二的设计，上半部分展示公司的各大产品，下半部分主要是子目录，其中包括新闻、其他产品、广告等等。

2.文字能见度低

网页上的色彩或者图片通常结合在一起，要么成为文字的背景色，要么成为文字本身的颜色，这就出现了文字的色彩的对比问题。对浏览者来说，最重要的是文字，因此，画面色彩运用就必须注意文字的可识别性，也就是文字的易见度。

.在高明度的背景上，低明度的文字易于识别，如果背景和文字名都接近，就容易出现难以辨别的问题，如遇到图文叠印的网页，文字可以采用白色或者反白色处理；或者使用与背景同色系，不同饱和度的方式来处理。

3.增加视觉负担

网页配色要尽量少用视疲劳度高的色调，一般来说，高明度、高纯度的颜色刺激强度高，疲劳度也大。无色系中，白色的明度最高，黑色明度最低；有色系中，最明亮的是黄色，最暗的是紫色。

用明度太高的色彩作为背景看起来很刺眼，所以设计师们要尽量减少高明度背景的使用。反之，使用少量的高明度颜色作为点缀，会大大激发浏览者的探究欲望。

1.人性化

网页设计在遵从艺术规律的同时，还要考虑到人的心理特点。色彩搭配合理，则给人一种和谐、愉快的感觉，因此应避免采用高纯度、刺激性强的单一色彩，否则容易造成视觉疲劳。

这是一个休闲游戏的网站，连接每组连接点都绘制出一个完整的图案。绿色和黄色的搭配让游戏者看着很舒服，搭配一个简单的按钮，让网页看起来比较人性化。

艺术源于生活，又高于生活，通常情况下，生活中常见的东西没有必要在网页上再次重复。人的感觉是喜新厌旧的，总会偏向于一些新奇的东西，因此，一个新奇的创意或者有感染力的色彩，平面构成会更勾起访问者的兴趣。

这是一个阿根廷漫画家的个人网站，很有生活创意。作者有着新奇的想象力和出色的构成表现能力。虚拟与现实相结合，将漫画家的生活进行了记录，生动有趣。

2.符合网站风格和主题

不同类型的网站就要使用不同的色彩和视觉元素，达到内容和形式上的统一，这样做更符合人们的认知习惯。

例如珠宝首饰类的网站就要使用看起来贵重、豪华的配色，如黑色、金色。总让人联想到财富，黄金。遇到购物类等女性网站可利用粉色来表达女性站点的柔美性。

3.个性鲜明

每个网站都有自己独特的个性和气质，缺乏个性就很难让访问者记住这个网站，千篇一律的设计只能让浏览者感到乏味。通过色彩组合以及元素构成能很好的实现网页的个性化。

法国DJECO玩具设计工作室主要以设计儿童玩具为主营业务，DJECO设计工作室网站场景设计温馨精美，强烈的儿童插画风格与儿童玩具的设计定位扣合。网站风格活泼可爱，站点的亮点是极具特色的动画元素设计，在整站中起到了非常好的点缀作用。

转载请注明：片头模版 » 十种版式设计对比(版式设计有哪些注意事项)