网页设计排版技巧

以下就是网页设计排版技巧等等的介绍，希望为您带来帮助。

1、分割屏幕

在这种网页设计中，网站要使用垂直分隔线来分割屏幕。这么做的原因有很多，通过大量的此类案例研究之后，其中主要的原因有两个。

第一，在一套设计中，的确存在两个同等重要的主体元素。

网页设计的通常方法，是按照重要性给内容排序。然后重要性会体现在设计的层次和结构上。但是假如你就是要推广两样东西呢?这种方式，可以让你突出两者，并让用户迅速在其中做出选择。

第二，有时你要表现出一种重要的两重性。有的网站建设案例中，可以看出核心竞争力是直根在数字领域，他们还有多才多艺的员工，这就成全了他们，通过屏幕分割来表现这一点，是种令人愉快的方式。

2、去界面化

网页设计中的主要元素之一就是容器元素，方块、边框、形状和所有类型的容器，用于将内容从页面中分离开。想象一个古板的页头，元素刚好容纳其中，与内容分隔开。如今的一项普遍趋势，就是去除所有这些额外的界面元素。这是种极简主义的方式，但它更进一步，带来一些有趣的转变。可以发现，移除任何感官上的页头和页尾后，内容得到了极大的强调。你会先看到公司名称，然后是关于他们经营内容(和场所)的清晰描述，而不是先看到页头。之后才是主导航。让用户浏览之前先重点强调品牌，它造就了优美的视觉流程。有趣的是，当你滚动页面时，页头和界面才出现。美观且有效的排版，这种模式的运用颇具启迪性。

3、基于模块或网格

接下来这些排版方式，建立在模块化或类似网格的结构上。在这些设计中，每个模块都力图根据屏幕尺寸伸缩调整。实际上这并不是什么新的方式，不过响应式网页设计让它变得更加有用。它暗示了一种自适应布局模式，可以像搭积木一样，由各种模块组件创建而成。

4、一屏以内

最后，还有一些网站采用这样的方式，让设计完全在一屏内展现。这是响应式设计的一个分支，因为它会适应屏幕尺寸。不过在这个绝佳案例中，整个设计的适应方式完完全全吻合屏幕，没有产生滚动条。没有滚动，意味着内容必须极度聚焦，而且要建立清晰的内容层次。我发现这些网站的聚焦能力和清晰程度，令人耳目一新。现代网页的布局丰富且多样化，足以满足不同群体的个性化诉求。

说到网页设计排版技巧，这是一个非常大的学问，大家都知道，网站上每一个元素都会影响浏览，而网页设计排版技巧绝对能考验一个网页设计师的基本功底。看来，好排版一定有着比较棒的阅读性，文字内容在视觉上是平衡和连贯的，并且有整体的空间感。布局、内容摆放和栏目设计都会影响文字的阅读性。从易读性来看，需要设计师考虑字体、字号、行距、间距、背景色与文字颜色对比等。在前面文章中已经重点介绍了字体和字号，以下最佳易读性规范则介绍行距和间距，分享适宜的行宽和行高，帮助浏览者保持阅读节奏，让读者拥有更好的阅读体验。

5、行宽

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

6、间距

行距是影响易读性非常重要的因素，过宽的行距会会让文字失去延续性，影响阅读;而行距过窄，则容易出现跳行。网页设计中，文字间距一般根据字体大小选1—1.5倍作为行间距，1.5—2倍作为段间距。比如12号字体，行间距是12px—18px，段落间距则是18px—24px。另外，行高/段落之间的空白=0.754。行间距正好是段落间距的75是非常常见的。比如简书16号字体，行间距27px/段间距36px=75。文字字号本身比较大，所以行间距也不需要严格按照1—1.5倍的比例设置，不过行间距和段间距的比例符合75，看起来很不错，这样的视觉效果让人在阅读时保持一种节奏感，这就是在实际情况中将规范的灵活应用。

7、行对齐

排版中很重要的一个规范就是把应该对其的地方对齐，比如每个段落行的位置对齐。不论哪种视觉效果，精美的、正式的、有趣的还是严肃的，一般都可以应用一种明确的对齐来达到目的。通常情况下，建议在页面上只使用一种文本对齐，尽量避免两端对齐。

8、文字留白

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

为了确保可读性和专业性,你的网页上不应该使用超过3种字体。使用过多的字体会干扰你的用户而且让你的网站看起 来很乱。相反,较少的字体让你的网站显得干净易读。你可以标题使用一种字体,正文使用一种字体,最后 logo或副标题使用另外的字体。

如果你是一位开发者你可能想贴一些代码在你的博客里。如果是这样,请使用等宽字体。 那么,什么是等宽字体?它就是字母和字符占相同水平宽度的字体。

CRAP是四项基本设计原理，包括对比(Contrast)、重复(Repetition)、对齐(Alignment)、亲密性(Proximity), 已经被设计师广泛应用。这四个基本原则在网页设计中对文字的排版也非常适用。

9、对比

我们将对比分为三类，主要是标题与正文的字体与字号对比、文字颜色对比，以及文字颜色与背景颜色的对比。

标题与正文对比

譬如标题使用18号的微软雅黑，正文使用12号的宋体，两种字体字号的对比让文字内容富有层次，很容易吸引读者眼球。

文字颜色对比

譬如，一部分文字采用了与主要文字不同的另一种颜色，这种对比是增加视觉效果的有效途径之一，突出展示了段落的重点。

文字颜色与背景颜色对比

这是非常常用的一种排版设计方式，正文文本与背景合适的对比可以提高文字的清晰度，产生强烈的视觉效果。

比如，白色背景、红色标题、黑色正文的对比，以及红色背景与白色文字对比的应用，将文字内容清晰衬托出来，既有丰满的层次感，同时有具有很强的视觉冲击力。设计师在使用这一原则时需要注意，必须确保文字是容易看清的，如果文字过小或过于纤细、色彩对比度不够，会适得其反，设计师如果对色彩的对比度还不够熟悉时，可以通过颜色对比检测工具检测色差和亮度差，确保网页设计的易读性。

10、重复

设计中的元素可以在整个网页设计中重复出现，对文字来说，可能字体、字号、样式的重复，也可能是同一种类型的图案装饰、文字与图片整体布局方式等。重复给用户一种有组织、一致性的体验，可以创造连贯性，显得更专业。比如一些网站在产品准则部分采用了统一的图片 标题 正文形式。内容不同，而布局方式统一，图片风格一致。用户一眼看过去，就能知道这是属于同一个版块的内容，这样的重复很容易有一种连贯、平衡美感。比如土巴兔装修网的流程，标题文字在图片同样的位置、采用同样形式，既与图片背景颜色形成对比，又是文字样式的重复。重复原则在网页设计上应用非常广泛，单一的重复可能会显得单调，设计师却可以根据不同网站的需求灵活使用，比如有变化的重复能增加创新，给网页设计增加活力。

11、对齐

在网页设计中，元素在页面上不能随意摆放，每一项都应与页面内容存在某种联系。对齐可对齐是网页设计必不可少的部分，它可以帮助设计师做出吸引人的设计，是优秀网页设计的潜在要求。左对齐和右对齐是文本看起来更清晰、效果分明;居中对齐显得更庄重、正式、稳重。

12、亲密性

位置的接近意味着存在关联，亲密性是指将相关项组织在一起让它们从整体看看起来和谐统一。亲密性可以从两点入手：适当留白、以视觉重点突出层次感。人眼首先被Banner图和里面文字吸引，然后再向下移动到文字描述及链接文字，这些元素的亲密性与对比形成一种平衡。

13、只给链接的文本加下划线

浏览器用在链接的默认样式一直是蓝色文本加下划线。虽然这个蓝色经常被改成另外的颜色,但下划线一直被当做是链接的常规样式。这就是为什么除了链接你不要给其他的东西加上下划线的原因。否则,这可能对你的用户造成很大的困惑。

14、创建样式库

让你的网站产生视觉震撼的一个简单高效的方法是给特殊的页面创建特殊的样式。例如,创建一个.warning的CSS类来向 你的用户显示“警告”。

15、按级别来排列标题和文本

为了增加可读性,给标题、介绍段落和常规文本创建标签层级是很重要的,这样你的用户可以看清你的文章结构并能很 快的找到他们感兴趣的部分。

16、正确使用标点符号

如果你想提升你的排版水平不容忽视的一点是正确使用标点符号。例如,引号经常用双撇符号代替(译者注:我想作者要表达的意思应该是全角符号和半角符号的区别,就像中文的引号和英文的引号不同一样)。

网页设计的排版技巧介绍

1. 减少不同类型字体的使用

使用超过3种不同的字体让网站看起来没有结构且不专业。记住，太多的尺寸类型和风格也可能破坏任何布局。

为了防止这种情况，尝试将字体数量限制在最小限度

一般来说，将字体数量限制在最小限度(两个很充足，通常一个就足够了)，并粘贴相同的字体到整个网站。如果使用多个字体，请确保字体系基于字符宽度互相补充。以下面的字体组合为例。Georgia和Verdana(左)的组合具有相似的价值，配对的很和谐。比较与Baskerville和Impact(右)的配对，其中大大加重的Impact使与其对应的衬线字体没有光彩。

确保字体系基于字符宽度互相补充

2. 使用标准字体

字体的嵌入服务(如Google Web Fonts或Typekit))可以为你的设计提供新鲜的和意想不到的许多有趣的字体。它们也非常容易使用。以Google为例：

选择任何字体，如Open Sans在HTML文档的中生成代码并粘贴。完成!

实际上，这种方法有一个很严重的问题：因为用户更熟悉标准字体，因此可以更快地读取它们。

除非你的网站对于自定义字体(如对品牌宣传或创建沉浸式体验)非常有吸引力，否则通常最好使用系统字体。最安全的方法是用一个系统的字体：Arial，Calibri，Trebuchet等。记住，好的排版可以吸引读者到内容中去，而不是排版本身。

3.限制行的长度

每行拥有适当的字符数量是让文本具有可读性的关键。它不是你的设计，决定你的文本的宽度，它应该是一个可读性的问题。考虑Baymard Institute关于可读性和行的长度的建议：

“如果你想有一个好的阅读体验，应该每行约60个字符。每行拥有适当的字符数量是让你的文本具有可读性的关键。”

如果行太短，视线必须经常返回，这就会打破读者的节奏。如果一行文字太长，用户的视线将很难专注于文本。

对于移动设备，应该每行30-40个字符。以下是在移动设备上查看的两个网站的示例。第一个是使用每行50-75个字符(打印和桌面的每行最佳字符数)，而第二个使是用最佳的30-40个字符。

在网页设计中，可以通过使用em或像素限制文本的宽度来实现每行最佳数量的字符。

4. 选择一个能在各种尺寸中工作的字体

用户会从具有不同屏幕尺寸和分辨率的设备访问你的网站。大多数用户界面需要各种大小的文本元素(按钮复制，字段标签，章节标题等)。选择一个能够在多种尺寸和重量上运行良好的字体以保持每个尺寸的可读性和可用性是非常重要。

确保你说选择的字体在较小的屏幕上清晰可辨!尝试避免使用草书的字体，例如Vivaldi(在下面的示例中)：虽然它们很漂亮，但它们很难阅读。

5. 使用可区分字母的字体

许多字体让相似的字形很容易混淆，特别是与“i”和“L”(如下图所示)以及在字母间距较小的空间中，例如当“r”和“n”看起来像“M”。因此，在选择你的排版时，请务必在不同的文本环境中检查你的排版，以确保不会为用户造成问题。

6. 避免所有的大写

所有大写字母：意思是文本中的所有大写字母，在不涉及阅读的上下文中很好(如首字母缩略词或标识)，但是当你的信息涉及阅读时，不要强制用户阅读所有大写文字。正如Miles Tinker所说，在他的具有里程碑意义的作品中，可读性的印刷，全部大写印刷与小写排版相比，大大地延缓了用户的阅读速度。

7. 行间距的重要性

在排版中，我们有一个特殊术语，用于两行文本之间的间距(或行高)。通过增加行高，可以增加文本行之间的垂直空白空间，通常提高可读性以换取屏幕空间。作为一个规则，行高应该是字符高度的30，以提高可读性。

好的间距有助于可读性。

正如Dmitry Fadeyev所指出的那样，正确地使用段落之间的空白已被证明可以将理解提高20。使用空白的技能在于为用户提供可消化量的内容，然后剥离无关紧要的细节。

左：几乎重叠的文字。右：良好的间距有助于可读性。

8. 确保你有足够的颜色对比度

不要在文本和背景中使用相同或相似的颜色。文本越明显，用户就能更快地扫描和阅读它。 W3C建议对身体文字和图像文字的对比度如下：

与其背景相比，小写文字的对比度应至少为4.5：1。大文字(14pt/ 常规18pt及以上)的背景对比度应至少为3：1。

这些文本行不符合颜色对比度的建议，难以根据背景颜色进行阅读。

这些文本行符合颜色对比度建议，易于阅读背景颜色。

一旦你选择了颜色，必须要在大多数设备上与真实用户进行测试。如果测试显示阅读副本有问题，那就可以确定你的用户具有完全相同的问题。

9. 避免文本为红色或绿色

色盲是一种常见的情况，特别是在男性中(8的男性是色盲)，建议使用除这些颜色以外的其他颜色来区分重要信息。也避免单独使用红色和绿色来传达信息，因为红色和绿色色盲是最常见的色盲形式。

10. 避免使用闪烁的文字

闪烁的内容可能会引发敏感个体的癫痫发作。它不仅可以引起癫痫发作，而且对于一般用户来说，这是令人讨厌且使人分心。

避免闪烁文字!

结论

排版是一件重要的事情。做出正确的排版选择可以让你的网站看上去更优雅。另一方面，糟糕的排版选择会让人分心，往往会引起对排版的注意。让排版具有可读性，可理解性和清晰度是至关重要。

网站排版设计的小技巧

1 干净，明快，清晰

通过提升文字内容和背景图片之间的明暗对比来提升可读性。通常使用纯黑和纯白的文字可以更为便捷地实现这一点。

2 保持简单

保持简单，但是别忘了最基础的原则。使用有对比度的配色，用稳固而均衡的排版框架。

3 原创性与创造性

和研究一样，平面设计的技能和思考一样需要原创性和创造性。你并不一定非得使用大家都在用的字体和样式，规避流行并探索自己的风格，会让你的设计工作与众不同。

4 时不时让你的双眼放松一下

7×24小时的奋斗固然突出，但是你很难保持并拥有持续的创造力。适当的放松能让你恢复效率，产生灵感。适时地离开电脑屏幕看点别的，常常会有意外之喜。

5 使用同族字体

想要让文字排版拥有高度的一致性，最好的方法是找到一套包含各类字重、字形的字体族，这样确保了多样性和一致性。此处我们使用了Libre Baskerville 字体族中的粗体、细体和斜体。

6 伟大的留白

留白会赋予设计中各种元素以足够的呼吸的空间，给用户以想象的空间。它让内容更加集中和易读，也不会因为凌乱而让用户分心。

7 创造情绪板

在设计之前，将你所搜集的相关的图片、色板和其他视觉作品集中到白板上，这样可以方便你寻找灵感，找到共同的特点、主题和调色板，并且最终应用到项目中去。

8 关注正在发生的事情

设计并不是脱离时代的存在。不论你此刻关注的是哪个领域，请务必关注正在发生的事情，保持对新动态的敏锐意识，从社交媒体到新闻时政，最新最重要的信息终归是对你有所裨益的。

9 跳出来思考

最有创意的思考者总会跳出条条框框来看待这个世界的。不要用随处可见的图标来装点你的设计，也许一个全新的设计更能代表你的想法。

10 随身携带笔记本

无论你是在火车上，在工作还是睡前，灵感会在任何时刻闪现出来，因此做好准备是很有必要的。在笔记本上用草图记录下你随时闪现的想法，也许它就是你下一次重要设计的核心思路。

设计页面的排版技巧

排版是什么?

排版是将文字、图片等元素在版面调整，使版面布局条理化的过程。一般来说，透过来版，让人们更容易的去阅读、接受这些提供给他们的资讯。

为什么要提供良好的排版?

一 个良好的资讯传递需要几个要素来达成，分别是对的内容与对的方式以及对的人，唯有这三个要素都成立的时候，资讯就能够有效率的被使用者给接受。排版扮演着 内容与使用者之间沟通的桥梁，良好的版面设计让使用者不需要特别的努力、训练就可以瞭解提供的内容;相反，糟糕的排版可能会让使用者拒绝接受这些内容。

排版最重要的四个要点

排版设计中有非常多需要注意的细节，各种细节也会因为不同的情境、需求而不同，底下列出了四项排版最重要的要点，如下：

1. 对齐(Alignment)

任何东西都不能随意摆放，每一个元素之间都有某种视觉关系。利用对齐建立一个清楚整齐的外观。

2. 亲密(Proximity)

彼此相关的内容应靠在一起，反之不相关的内容保持距离。利用亲密性，强调画面的组织与架构。

3. 重复(Repetition)

重复视觉要素的颜色、字体、大小、空间等，增强条理性，也增强了整体一致性。

4. 对比(Contrast)

避免页面上元素太过相似，如果它们不同，哪就让他们截然不同。让重要的内容引人注目，让使用者间看到它们。

文字排版要点

文字是内容的本质，人们透过文字、句子来阐述知识，让我们透过瞭解文字排版，让文字更容易被阅读、被接受：

1. 使用适合阅读的字体

字体大小与使用者萤幕大小、使用距离有关，清楚瞭解使用者使用的环境与习惯后，选择一个适当的大小。

2. 选用适当的字体

有些中文字体的英文版本其实是不合适的，挑选与中文字体相对应的英文字体作为搭配的字体。

3. 设定恰当的行高

也就是“文字密度”，太挤的文字在换行时，眼睛不容易找到下一行的起点，较不容易阅读。

4. 设定恰当的段距

清楚的段落区分，让读者可以清楚地瞭解现在正在阅读的段落。

5. 注意段落的宽度

注意文字最后显示的设备大小，太宽或太窄的段落宽度都会造成阅读上的困难，一行文字以45字元~75字元是比较恰当的。

6. 清楚的区分标题与内文

使用对比的方式(例如颜色、大小、位置)将内文与标题清楚的区分开来。