怎么设计网页排版

在现在这个大数据时代，网页制作已经没有以前那么难了，那么，如何进行网页设计、网页设计需要注意些什么呢？今天我来跟大家分享一下怎么设计网页排版。

网页设计、制作

首先，我们需要确定网页的主题。

做网站一定要明确主题，就像我们平时做饭一样，知道做什么了，才能更好的准备食材。

第二步，收集材料

材料需要新颖，独特有利于后期的制作。

第三步，规划网站

网页的结构、栏目的设置、风格、颜色搭配、版面布局、文字图片的运用等都需要设计者一一规划好

第四步，设计网站选择制作网站的工具

网页设计最关键的一个过程，复杂而精细，需要设计者用足够的耐心去完成它。通常建议采取先大后小、先简单后复杂的程序来进行制作，即在制作网页时，先设计好大的结构，然后再逐步完善小的结构；先设计简单的内容，然后再设计复杂的内容，以便及时修改问题，提高制作效率。

根据自己的需求和喜好来进行选择，一款功能强大、使用简单的软件往往可以起到事半功倍的效果Dreamweaver或者其他的编辑器。

搭建站点购买域名和空间

购买域名空间并绑定好，然后把我们制作的网站上传到空间里面进行测试，正式运营。上传后，在浏览器中打开自己的网站，逐页逐个链接进行测试，发现问题，及时修改，然后再上传测试即可

后期的维护更新

网页制作好以后需要定期维护和更新，一潭死水，会变质，同样一个网页，如果长期不动，别人也不会喜欢，需要注意经常维护更新内容，只有不断地维持更新，网页才能保持活力，继续吸引浏览者

网页设计中常用的排版方法有哪些?

1. 把事情简单化

可读性是关键。你绝对不想过度使用书法字体，以至于读者几乎无法弄清楚你所写的字。事实上，使用标准字体可以更好地吸引读者，因为大多数人都熟悉它们。

简洁性增加了您网站的可读性并增强了其视觉吸引力。您应该努力在您的网站上使用最少数量的字体来保持结构和专业性。当内容变成难以辨认而让人感到混乱时，尝试使用书法字体显得过于复杂，对于您的网站来说可能是灾难性的。

2. 正确匹配和配对字体

对于网页设计师来说，系统字体是一种安全的选择，因为它们易于使用且不会给出复杂的布局。但是，要正确使用文本工具中可用的众多书法字体，您需要成对选择和匹配它们，从而提供出色的混合效果。

当与其他特定字体匹配时，一些书法字体会产生有利的结果; 因此，你需要巧妙地挑选和混合它们。有些网站提供了一系列免费字体，但确认它们是否获得许可以及是否允许您使用它们非常重要。

3. 避免冗长的线条

一行文本中的字符数很大程度上决定了用户阅读和掌握信息的难易程度。较短的句子比较长的句子具有更好的可读性; 因此，您的排版不应太宽或太窄。常见的Web排版规则是将每行的字符数限制为约50-60。要获得网站的最佳线长，您应该考虑修改布局的宽度。

4. 正确使用垂直白色空间

正确使用文本行之间的空白不仅可以提高可视性和视觉吸引力，还可以提高易读性。未能允许正确的线高测量可能会使您的网站看起来混乱，无法吸引读者的兴趣。您应该考虑在网站上的文本行之间应用正确的行高，以便更好地排版。

5. 充分利用色彩对比

颜色在网络排版最佳实践中扮演着重要角色。因此，仔细对比文本和背景颜色可以提高文本的易读性。

关于网页设计中常用的排版方法有哪些，环球青藤小编今天就和您暂时分享到这里了。如果您对网站设计、页面排版、图像处理方面比较感兴趣，希望分享的这篇文章可以给您的学习或工作提供帮助。如若您还想了解更多关于平面设计的素材及技巧等内容，可以点击本站的其他文章进行学习。

网页排版有哪些技巧?

1、使用网格系统

使用网格系统允许某种页面平衡。网格系统是印刷设计中遗留下来的一种经典的布局方法。近年来，网格系统帮助设计师完成了大量的在线设计工作，并成功地将网格系统的概念移植到数字媒体中。利用网格系统规划不同元素在页面上的位置，可以建立和促进页面上不同元素之间的联系，在页面上产生强烈的平衡感，为受众提供清晰的结构参考。

2、选择专注

在布局中找到焦点是创建平衡布局的最有效方法之一。例如，在设计中常用的大图是页面上最大的单焦点元素。好的视觉效果可以将观众吸引到页面中，并围绕页面安排其他内容。如果有多个视觉元素，则与格式塔理论的接近原则相结合，符合排列原则。标题或引文副标题也可以是重点。一个好的标题也可以有强烈的视觉吸引力，可以用来在其之上安排其他元素，从而形成一个平衡的页面布局。

3、使用三分法

三分法也是创建平衡页面布局的有效方法。简而言之，三分法就是将页面垂直和水平分为三分之一，网格线相交的点就是一个现成的焦点。三分法的常用方法是将最重要的元素放在页面的上(下)三分之一处，将主要焦点对齐以匹配其中的一个交叉点，然后将关键元素与四个点对齐，这样的构图就令人满意了。

教大家如何在网页中做出精彩的文字排版

说到排版，这是个大学问。网站上每一个元素都能影响浏览， 排版设计 的好坏绝对能考验一个设计师的基本功底，而短短的一篇文章并不能将 排版 介绍清楚，本文就先主要分享网站主题部分文字的排版，后期我们还会在不同系列文章中根据重点地穿插介绍排版技巧。

文字的排版需要考虑文字辨识度和页面易读性，本文就从最佳易读性规范和CRAP设计四原则的角度与大家分享怎样在网页中做出精彩的文字排版。

先想想，你觉得好的文字排版是什么样的？

在我们看来，好排版一定有着比较棒的阅读性， 文字 内容在视觉上是平衡和连贯的，并且有整体的空间感。

布局、内容摆放和栏目设计都会影响文字的阅读性。从易读性来看，需要设计师考虑字体、字号、行距、间距、背景色与文字颜色对比等。

我们在前面文章中已经重点介绍了字体和字号，以下最佳易读性规范则介绍行距和间距，分享适宜的行宽和行高，帮助浏览者保持阅读节奏，让读者拥有更好的阅读体验。

一、最佳易读性规范

1.行宽

我们可以想象一下：如果一行文字过长，视线移动距离长，很难让人注意到段落起点和终点，阅读比较困难；如果一行文字过短，眼睛要不停来回扫视，破坏阅读节奏。

因此我们可以让内容区的每一行承载合适的字数，来提高易读性。

传统图书排版每行最佳字符数是55—75，实际在网页上每行字符75—85更流行。中文在14号字体时，建议35—45个文字。

比如下图：

2.间距

行距是影响易读性非常重要的因素，过宽的行距会会让文字失去延续性，影响阅读；而行距过窄，则容易出现跳行。

网页设计中，文字间距一般根据字体大小选1—1.5倍作为行间距，1.5—2倍作为段间距。

比如12号字体，行间距是12px—18px，段落间距则是18px—24px。

另外，行高/段落之间的空白=0.754。行间距正好是段落间距的75%是非常常见的。

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

3.行对齐

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

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

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

4.文字留白

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

二、CRAP设计四原则在文字排版中的应用

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

1.对比

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

 标题与正文对比

在AnyForWeb网站案例页面中，标题使用18号的微软雅黑，正文使用12号的宋体，两种字体字号的对比让文字内容富有层次，很容易吸引读者眼球。

 文字颜色对比

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

 文字颜色与背景颜色对比

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

比如在埃森哲官网中，白色背景、红色标题、黑色正文的对比，以及红色背景与白色文字对比的应用，将文字内容清晰衬托出来，既有丰满的层次感，同时有具有很强的视觉冲击力。

设计师在使用这一原则时需要注意，必须确保文字是容易看清的，如果文字过小或过于纤细、色彩对比度不够，会适得其反，举个例子：

设计师如果对色彩的对比度还不够熟悉时，可以通过颜色对比检测工具（如Check My Colours、Colour Contrast Check）检测色差和亮度差，确保网页设计的易读性。

2.重复

设计中的元素可以在整个网页设计中重复出现，对文字来说，可能字体、字号、样式的重复，也可能是同一种类型的图案装饰、文字与图片整体布局方式等。重复给用户一种有组织、一致性的体验，可以创造连贯性，显得更专业。

比如HeyJuice网站在产品准则部分采用了统一的“图片+标题+正文”形式。内容不同，而布局方式统一，图片风格一致。用户一眼看过去，就能知道这是属于同一个版块的内容，这样的重复很容易有一种连贯、平衡美感。

比如土巴兔装修网的流程，标题文字在图片同样的位置、采用同样形式，既与图片背景颜色形成对比，又是文字样式的重复。

重复原则在网页设计上应用非常广泛，单一的重复可能会显得单调，设计师却可以根据不同网站的需求灵活使用，比如有变化的重复能增加创新，给网页设计增加活力。

3.对齐

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

对齐的案例就非常多了，我们随意列举两个。

曼秀雷敦网站的左对齐：

Darry Ring网站的居中对齐：

左对齐和右对齐是文本看起来更清晰、效果分明；居中对齐显得更庄重、正式、稳重。

4.亲密性

位置的接近意味着存在关联，亲密性是指将相关项组织在一起让它们从整体看看起来和谐统一。

亲密性可以从两点入手：适当留白、以视觉重点突出层次感。

比如以下案例中图文搭配，这是多个元素在一起的组合排版。

人眼首先被Banner图和里面文字吸引，然后再向下移动到文字描述及链接文字，这些元素的亲密性与对比形成一种平衡。

以上就是本次分享的内容啦。如前文所言，排版的好坏考验一个设计师的基本功底，平时的功夫可是必不可少的哟，我们期待大家设计的精彩排版！

本文地址：

提高网页排版水平的五种方式

排版是网页最基本的组成部分。易读性及可读性通常是用户体验必不可少的一部分。如果你知道如何排版，你就可以在用户会话中增加变换和持续时间，并且你的网页对于大众来说会更有价值。

首先，什么是文字？

字母,单词,句子,段落。人们用文字来表达想法。它包含情报和某些特定的信息，并且可以被阅读。如果你想在网上表达想法，那么文字就是必不可少的，这样人们才知道你说了什么。

作为 Thinking with type （ Ellen Lupton 著）的死忠粉，我必须引用作者所说的一句话：“在排版中，文字是持续排列的，不同于短标题或者标题。”

好的排版可以让用户很容易就找到他们想要的，在他们阅读的时候他们就会感到愉快且有成效，你的想法会最大程度地传递给人们。糟糕的排版会阻挠和干扰用户，让人觉得失望也没有读下去的欲望。

在下文中，我会告诉你一些建议，能让你提高排版水平，也能让你网页的字体更加清晰易读，那就开始吧。

几年前正文字体通常使用10或12px，现在我们用的都是FHD或者UHD显示，所以要扩大字体，使用大的字体可以增加文本内容的易读性。要想使你的内容更清晰易读，最佳字体大小是 16 到 22px 。当你为小屏幕设计设计界面的时候，可以将字体大小缩减至 14 到 18px 。

这些尺寸的最小值也适应视觉障碍的人阅读（这里指的是戴眼镜的人或者老年人）。

别忘了，最理想的字体大小总是取决于你为网页选择的字型。下图中你可以看到字母X的高度（从基线到小写字母顶端）在字体Helvetica Neue 和 Futura之间的区别。

设计网页时， 正文主体应该使用1.5倍以上的行高， 标题行间距推荐使用约1.1倍或1.2倍

这是什么意思呢？实际上，当你的正文主体使用16px大小的字号时，你的行高应该在24px左右（你可以看以下示例）。

如果有时你的段落很短但你想让排版看起来更和谐，你可以增加一点行间距。

在网页上，人们不会阅读大块的文字，浏览较长的行列会让人觉得很困难而且很不舒服。我想提醒一件很重要的事，就是人们不会定在一个地方一直阅读较长的文字，而是会短而快速地浏览（也称为跳阅）——法国眼科医生 Louis Émile Javal 发现的。

所以行的长度应该是有限的， 最佳选择是每行 60 到 80 字符 ，能给人最好的阅读体验。当你设计一个界面时，你要让行长度适配屏幕大小。 在手机上你应该选择每行30到40个字符。

一行超过80字符也会给阅读障碍的人带来巨大困扰。

从实用性的角度来说，对比是十分重要的，但也会影响易读性。

文本之间对比如果不鲜明，就会让人们阅读和使用网页变得十分困难（不仅是那些阅读障碍的人）。

现在的趋势是灰色字体加白色背景。但如果用户看内容时并不舒服的话这也没什么卵用。如果对比不明显的话，人们浏览的时候速度会变慢，他们无法抓取任何关键词，并且会错过重要信息，没办法看到连接也很难发现菜单栏——即使是用移动设备走在阳光下。

从可访问性角度出发,内容与背景对比度按照4.5:1的规则也可以让任何视觉障碍、低视力和色盲用户正确阅读屏幕上的内容。但达到最佳的对比往往十分复杂，不只需要一种颜色。例如患有色盲的用户很难看到超文本链接，所以你应该打上下划线(也能很好地解决人们注意不到的问题)。

人们在网页中不会阅读大块的文字，他们只是浏览大致内容,寻找重要信息。纵向分布让一切变得简单。为了让用户更舒适地浏览，我们使用纵向分布保持哥元素和模块(标题、段落、标题或图片)的一致。我们也使用纵向分布来引导用户快速找到重要的图片,给使用网站的人更多的轻松和积极的体验

但是如何运用纵向分布呢？

你可能已经听说过基线——在印刷设计中基线无形地影响着字符的位置。我们也使用这个词在网页设计中,但略有不同。网页设计中基线是由文字主体的行高(同时也是CSS属性)决定的。

当你定义基线和创建自己的基线网格,最基本的一点是根据你的正文文字大小 (p ) 和行高（css中的行高属性）来规划接下来的一切。

在下图中你可以看到,我使用16 px的字体大小和24 px行高,这意味着以24 px为基线(为了更好设置所有的字体的位置,我曾经把这个数除以2,3或4以供选择)。基于这个定义,所有空格(包括边界、填充或边框)必须可以被6xp整除。为了使段落和标题看起来一致，我决定以数字6的倍数创建空间,最后我使用24或36 px。我的字体大小、行高也是6px的倍数。

排版是网页设计的重要组成部分，也是你文本是否清晰可读易理解的决定性因素。如果用户在阅读和浏览你的网站时感觉良好他们会更加认可你网站的价值。

- 本文翻译来自Medium，

- 感谢  Patrik Michalicka   原文链接