网页设计排版要点

网页设计排版要点

文字颜色的选择一般视网站的整体风格而定，与文字背景颜色搭配要舒适，但通常不采用亮色系的色彩作为全部文字的主体颜色。下面介绍网页设计排版要点，希望可以帮助到大家。

1、文字颜色影响网站视觉效果

文字颜色的选择一般视网站的整体风格而定，与文字背景颜色搭配要舒适，但通常不采用亮色系的色彩作为全部文字的主体颜色，用户对亮色系的色彩视觉较为敏感，篇幅较长的文字显得过于刺眼，是一种极差的视觉反应，若文字颜色使用恰当，能够提升网站内容的魅力。譬如，在白色背景的网站中，使用红色文字标题以及黑色文字正文，能将重点内容突出的同时，使整个网站充满层次感，在视觉上更加清晰明朗。

2、文字排版不同间距影响网站阅读性

网站上文字间距的设置，不仅影响了整个网站的美观程度，同时也影响了可阅读性。在文字内容较多的情况下，排版文字间距，以及每行的文字长度在用户体验角度上有严格的要求，根据用户的阅读习惯，更多的人喜欢看清晰明朗的文字，间距太小，每行文字太多，呈现的是密密麻麻的效果，很难让人有足够的耐心阅读下去，哪怕网站的其它部分够好，用户也根本不会有兴趣再看。

3、文字排版格式是否统一影响网站协调性

文字排版格式在网站中通常要遵循统一风格原则，所有的文字排版采用相同的颜色搭配以及行距间距，让整个网站看起来整齐划一，当然这些没有强制性要求，也可根据网站的需求适当灵活变动，但不宜过于另类。若网站上所有的文字板块都采用不同的散，影响网站协调性的同时让用户找不到重点。排版格式，会让网站风格变得混乱，看起来失去平衡感，同时使得网站被认为关联性不强，主体表达不得分。

网站上的每一个元素都将影响着用户的浏览体验，优秀的云客网网站建设必定包含了注重内容的排版，好的文字排版很大程度上影响用户视觉，增强页面平衡感，让整个网站更富有阅读价值。

网页设计的要点

网页设计有两大要点，分别是：整体风格和色彩搭配。

整体风格

网站的整体风格及其创意设计是难以学习的，难就难在没有一个固定的模式可以参照和模仿。给你一个主题，任何两人都不可能设计出完全一样的网站。

风格(style)是抽象的。是指站点的整体形象给浏览者的综合感受。这个“整体形象”包括站点的CI(标志、色彩、字体、标语)、版面布局、浏览方式、交互性、文字、语气、内容价值、存在意义、站点荣誉等等诸多因素。举个例子：我们觉得网易是平易近人的，迪斯尼是生动活泼的。IBM是专业严肃的，这些都是网站给人们留下的不同感受。

在这里，一些参考经验：

将你的标志，尽可能的放在每个页面上突出的位置。

突出你的标准色彩。

相同类型的图像采用相同效果，比如说标题字都采用阴影效果，那么在网站中出现的所有标题字的阴影效果的设置应该是完全一致的。

色彩搭配

无论是平面设计，还是网页设计，色彩永远是重要的一环。当我们距离显示屏较远的时候，我们看到的不是优美的版式或者是美丽的图片，而是网页的色彩。

关于色彩的原理有许多，在此我们不可能一一阐述，大家可以看看相关设计书籍，有利于系统地理解。在此我们仅仅想告诉大家一些网页配色时的小技巧。用一种色彩。这里是指先选定一种色彩，然后调整透明度或者饱和度，这样的页面看起来色彩统一，有层次感。

用两种色彩。先选定一种色彩，然后选择它的对比色。

用一个色系。简单的说就是用一个感觉的色彩，例如淡蓝，淡黄，淡绿;或者土黄，土灰，土蓝。

在网页配色中，还要切记一些误区：

不要将所有颜色都用到，尽量控制在三至五种色彩以内。

背景和前文的对比尽量要大(**不要用花纹繁复的图案作背景)，以便突出主要文字内容。

网页设计要注意的几个要点

一、精简代码

为了更有利于网站优化，要符合web2.0标准，尽量使用DIV+CSS设计网页，合理布局标签要尽量减少div层，使用描述标签，精练的描述网页，将网站重点内容与经常更新的内容代码尽量靠近的位置，还要注意页面不要超过125K。

二、网站导航重点设计

网站的导航是网站优化很重要的武器，网站的导航全站通用，要尽量用文字导航，千万不要用图片和flash等，若非得要用图片请一定加上alt属性。Flash则尽量避免，Flash的效果是很好的，但加载很慢，搜索引擎也无法读取Flash文件，不利于之后网站优化。

三、少用脚本和外部调用

网站的JavaScript和CSS等文件一律外部调用，不要把代码写在网页中，并且尽量减少脚本文件个数，这样不仅仅有利于网页加载速度也有利于搜索引擎蜘蛛的抓取，之后网站优化才会更给力。

四、避免页面重复

每个页面包换标题、描述和关键字等都应该不一样，需要注意的是很多设计师会做一个通用的模板，而用的时候又忘记修改。标题一定要是具有独特性的

五、图片与文字链接加上属性

记得要给所有图片加上alt属性，还要符合W3C标准，搜索引擎会读取alt属性，图片的alt属性还可以帮助用户浏览。给文字链接加上TITLE属性，8U网络推广提醒大家要尽量减少用图片代替文字

六、网页布局结构

面包屑型导航，树状扁平化结构。为了更有利于网站优化，有利于百度收录，要降低页面的层次，首页点击不出三次可以到达网站任何一个页面，任何页面都可以很快的回到想要的页面。文章内容部分先于其他部分显示，设置上一篇、下一篇文章，根据文章的关键词设置相关文章，如果文章内容多分几页显示，需要保持每页的网页标题、文章内容均不同，避免出现复制内容问题。

网页设计中文字排版设计的技巧

行长

我们随手拿起一本书或者一份报纸，数一数每行的文字，一般情况下都不会超过40个汉字。这是因为如果每行文字过长，读者会不停的转动脖子，感到疲惫的同时也会降低阅读效率;目光从行尾移至下一行首，也很容易串行，影响读者浏览文章的节奏。这点同样适用于网页上的文章阅读。由于显示器是横向的，我们更要注意划分阅读区域。文本宽度控制在450-700px为宜，此范围内参照字号大小;英文每行80-100个字母(空格算一个字母)为宜;中文每行30-40个汉字为宜。

行宽

我们可以想象一下：如果一行文字过长，视线移动距离长，很难让人注意到段落起点和终点，阅读比较困难;如果一行文字过短，眼睛要不停来回扫视，破坏阅读节奏。因此我们可以让内容区的每一行承载合适的字数，来提高易读性。传统图书排版每行最佳字符数是55—75，实际在网页上每行字符75—85更流行。中文在14号字体时，建议35—45个文字。

间距

通过设置间距，我们就可以控制文字的密度。网页设计中，如果每行间距太小，与文字过长一样，读者浏览文章时也容易串行;如果行距过宽，阅读时就会感觉文章不够连贯。间距没有固定的值，通常是根据字体大小来定义的。在word里我们常看到双倍行距、单倍行距和1.5倍行距的选项。网页上行距的单位常用em来表示，不管是中文网站还是英文网站，大家多喜欢用1.5em-1.8em的行距。以1.6em的行距为例，字号16px的字，行距就是25.6px。

关于段距，我们要考虑一下具体实际情况。比如文章篇幅较短，就不需要很宽的段距;二文章篇幅很长，特别是那些偏学术的比较枯燥的文章，就要多利用段距把握文章的节奏，给阅读者喘息和思考的机会，且使文章更有层次和可读性。如(图)所示，1.5-1.8em的行距的确是非常适于阅读的文字密度。

另外，行高/段落之间的空白=0.754。行间距正好是段落间距的75%是非常常见的。比如简书16号字体，行间距27px/段间距36px=75%。文字字号本身比较大，所以行间距也不需要严格按照1—1.5倍的比例设置，不过行间距和段间距的比例符合75%，看起来很不错，这样的视觉效果让人在阅读时保持一种节奏感，这就是在实际情况中将规范的灵活应用。

行对齐

排版中很重要的一个规范就是把应该对其的地方对齐，比如每个段落行的位置对齐。

不论哪种视觉效果，精美的、正式的、有趣的还是严肃的，一般都可以应用一种明确的对齐来达到目的。

通常情况下，建议在页面上只是用一种文本对齐，尽量避免两端对齐。

文字留白

在排版文字时，在版面需要留出空余空间，留白面积从小到大应该遵循的顺序是：字间距、行间距、段间距。此外，在排版内容区之前，需要根据页面实际情况给页面四周留出余白。

对齐

在网页设计中，元素在页面上不能随意摆放，每一项都应与页面内容存在某种联系。对齐可对齐是网页设计必不可少的部分，它可以帮助设计师做出吸引人的设计，是优秀网页设计的潜在要求。

亲密性

位置的接近意味着存在关联，亲密性是指将相关项组织在一起让它们从整体看看起来和谐统一。亲密性可以从两点入手：适当留白、以视觉重点突出层次感。比如以下案例中图文搭配，这是多个元素在一起的组合排版。