网页排版设计的10个小技巧

容排版的存在是为了荣誉。

沟通在设计中起着至关重要的作用。这是建立用户和网站之间的明确联系，并帮助你的用户实现目标的关键。当我们谈论网页设计环境中的沟通时，这通常是指文本。排版在这个过程中起着至关重要的作用：网络中超过95％的信息是以文字的形式出现。

好的排版提高了用户的阅读积极性性，反之，差的排版会降低用户的阅读积极性。正如Oliver Reichenstein在他的文章《Web Design is 95% Typography》中所说：

优化排版就是优化可读性，可访问性，可用性！让整体的图形平衡。

换句话说：优化你的排版就是优化你的用户界面。在这篇文章中，我将提供一组规则，帮助你提高文本内容的可读性。

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

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

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

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

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

2. 使用标准字体

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

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

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

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

3. 限制行的长度

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

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

图片来源：Material Design

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

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

图片来源：Usertesting

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

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

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

Google的Roboto字体

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

Vivaldi字体很难以在小屏幕上阅读

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

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

6. 避免所有的大写

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

7. 行间距的重要性

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

好的间距有助于可读性。图片来源：Microsoft

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

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

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

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

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

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

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

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

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

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

10. 避免使用闪烁的文字

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

避免闪烁文字！

结论

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

内容排版的存在是为了荣誉。

排版应以不会增加用户认知负荷的方式来尊重内容。

译者：SKYUI

原文作者：Nick Babich

本文由 @SKYUI 翻译发布于人人都是产品经理。未经许可，禁止转载。

近忙里偷闲，给自己加油充电的时候，发现自己脑海中布局这块非常的凌乱混杂，于是花了一些时间将一些常用的布局及其实现方法整理梳理了出来，在这里，分享给大家。

单列布局

单列布局是最常用的一种布局，一般是将一个元素作为容器，设置一个固定的宽度，水平居中对齐。

单列布局一般有两种形式：

(图片来源：https://blog.csdn.net/Ace_Arm/article/details/81036129)

一栏布局

一栏布局头部、内容、底部宽度一致

效果图

代码实现

html

<header></header>
<main></main>
<footer></footer>
复制代码

css

header,footer{
    width: 1200px;
    height: 100px;
    margin: 0 auto;
    background: black;
}
main{
    width: 1200px;
    height: 600px;
    background: red;
    margin: 0 auto;
}
复制代码

一栏布局（通栏）

一栏布局（通栏）头部和底部宽度一致，占满整个页面，中间内容区域宽度较小不占满屏幕。

效果图

代码实现

html

<header></header>
<main></main>
<footer></footer>
复制代码

css

header,footer{
    width: 100%;
    height: 100px;
    background: black;
}
main{
    width: 1200px;
    height: 600px;
    background: red;
    margin: 0 auto;
}
复制代码

单列布局是最为基础和简单的一种，实现方法并不局限于以上两种，大家可自由发挥，找到更多的方法来实现。

2列布局

2列布局的使用频率也非常高，其实现效果主要就是将页面分割成左右宽度不等的两列。一般宽度较小的一列会设置为固定宽度，作为侧边栏之类的，而另一列则充满剩余宽度，作为内容区。

在后台管理系统及api文档中使用较为广泛。

效果图

先来看看效果：

代码实现

实现两列布局的方法有很多，这里主要介绍两种方法。

calc函数

calc() 函数用于动态计算长度值。实现思路很简单，侧边栏宽度固定，设置绝对定位，使其脱离文档流，内容区域通过calc()函数计算剩余宽度并设置宽度，再加一个margin-left，值为侧边栏的宽度。

代码如下：

html

<div class="slider"></div>
<div class="main"></div>
复制代码

css

*{
    margin: 0;
    padding: 0;
}
body,html{
    width: 100%;
    height: 100%;
}
.slider,.main{
    height: 100%;
}
.slider{
    position: absolute;
    left: 0;
    top: 0;
    width: 100px;
    background: black;
}
.main{
    width: calc(100% - 100px);
    background: red;
    margin-left: 100px;
}
复制代码

flex属性

通过flex属性实现思路也很简单，将父元素设置为flex，侧边栏宽度固定，内容区域设置flex:1即可充满剩余区域。

代码如下：

html

<div class="slider"></div>
<div class="main"></div>
复制代码

css

*{
    margin: 0;
    padding: 0;
}
body,html{
    width: 100%;
    height: 100%;
}
body{
    display: flex;
}
.slider,.main{
    height: 100%;
}
.slider{
    width: 100px;
    background: black;
}
.main{
    flex: 1;   
    background: red;
}
复制代码

3列布局

3 列布局在日常开发中使用频率也是很高的，其按照左中右的顺序进行排列，通常中间列最宽，左右两列次之。左右两边定宽，中间自适应，能根据屏幕大小做响应。

效果图

还是先来看看效果图

代码实现

三列布局的实现方法也很多，这里主要介绍两种（双飞翼布局、圣杯布局、flex布局）

在介绍双飞翼布局和圣杯布局之前要先说一下margin设置负值的作用：

当margin的值设为负值的时候，元素会对应的像那个放向移动，比如margin-left为负值，元素则会左移

双飞翼布局

代码如下：

html

<div class="main">
    <div class="middle">
        <div class="content">
            中间
        </div>
    </div>
    <div class="left">
        左边
    </div>
    <div class="right">
        右边
    </div>
</div>
复制代码

css

* {
    margin: 0;
    padding: 0;
}

body,
html {
    width: 100%;
    height: 100%;
}
div{
    height: 100%;
}
.main>div {
    float: left;
}

.left {
    width: 200px;
    background: red;
    margin-left: -100%;
}

.right {
    width: 200px;
    background: blue;
    margin-left: -200px;
}

.middle {
    width: 100%;
    background: yellow;

}

.content {
    margin-left: 200px;
    margin-right: 200px;
}
复制代码

圣杯布局

代码如下: html

<div class="main">
    <div class="center">中间中间中间中间中间中间中间后</div>
    <div class="left">左边</div>
    <div class="right">右边</div>
</div>
复制代码

css

* {
    margin: 0;
    padding: 0;
}

.main {
    height: 200px;
    padding: 0 150px 0 200px;
    background: greenyellow;
    *zoom: 1;
}

.left,
.center,
.right {
    float: left;
}

.center {
    width: 100%;
    height: 200px;
    background: red;
}

.left {
    width: 200px;
    height: 200px;
    background: yellow;
    margin-left: -100%;
    position: relative;
    left: -200px;
}

.right {
    width: 150px;
    height: 200px;
    background: gainsboro;
    margin-left: -150px;
    position: relative;
    left: 150px;
}
复制代码

双飞翼布局其实和圣杯布局的精髓是一样的，都是通过设置负margin来实现元素的排布，不同的就是html结构，双飞翼是在center元素内部又设置了一层inner-center的元素并设置它的左右margin，而非圣杯布局的padding，来排除两边元素的覆盖。所以这两种布局原理基本一样，关键就是在于设置负margin的技巧，和元素浮动的相对定位技巧来实现。

flex布局

代码如下: html

<div class="main">
    <div id="left">左边定宽</div>
    <div id="main">中间自适应</div>
    <div id="right">右边定宽</div>
</div>
复制代码

css

* {
    padding: 0px;
    margin: 0px;
}
body,html{
    width: 100%;
    height: 100%;
}
body{
    display: flex;
}

#left,
#right {
    width: 100px;
    background-color: #0FC;
}
#main {
    flex: 1;
    background-color: #999;
}
复制代码

如果不考虑浏览器兼容问题的话，运用flex布局是最简单的方式。

垂直方向的布局（sticky footer）

这种布局将页面分成上、中、下三个部分，上、下部分都为固定高度，中间部分高度不定。当页面高度小于浏览器高度时，下部分应固定在屏幕底部；当页面高度超出浏览器高度时，下部分应该随中间部分被撑开，显示在页面最底部。

这种布局也称之为sticky footer，意思是下部分粘黏在屏幕底部。

代码实现

首先我们先构建简单的HTML代码

<body>
　　<div class="content"></div>
　　<div class="footer"></div>
</body>
复制代码

其中content为我们的内容区。下面开始介绍解决方法。

为内容区域添加最小的高度

这种方法重要用vh(viewpoint height)来计算整体视窗的高度(1vh等于视窗高度的1%),然后减去底部footer的高度，从而求得内容区域的最小高度。例如我们可以添加如下样式：

.content{
     min-height:calc(100vh-footer的高度);
     box-sizing:border-box;
}  
复制代码

从而这个问题就解决了，但是如果页面的footer高度不同怎么办?每一个页面都要重新计算一次，这是很麻烦的，所以这种方法虽然简单但却是不推荐的。

使用flex布局

这种方法就是利用flex布局对视窗高度进行分割。footer的flex设为0，这样footer获得其固有的高度;content的flex设为1，这样它会充满除去footer的其他部分。

代码如下：

body { 
    display: flex; 
    flex-flow: column; 
    min-height: 100vh;
 }
 .content {
    flex: 1; 
}
.footer{
    flex: 0;      
}
复制代码

这样的布局简单使用，比较推荐。

在content的外面可以添加一个wrapper

这种方法就是在content的外面添加一个包裹容易，将html代码改成这样：

<body>
    <div class="wrapper">
        <div class="content"></div>
    </div>　
　　<div class="footer"></div>
</body>
复制代码

然后添加以下样式：

html, body, .wrapper {
     height: 100%;
}
body > .wrapper {
     height: auto; 
     min-height: 100%;
}
.content {
    padding-bottom: 150px; /* 必须使用和footer相同的高度 */
}  
.footer {
    position: relative;
    margin-top: -150px; /* footer高度的负值 */
    height: 150px;
    clear:both;
}
复制代码

另外，为了保证兼容性，需要在wrapper上添加clearfix类。其代码如下：

<body>
    <div class="wrapper clearfix">
        <div class="content"></div>
    </div>　
　　<div class="footer"></div>
</body>
复制代码

.clearfix{
     display: inline-block;
}
.clearfix:after {
     content: ".";
     display: block;
     height: 0;
     clear: both;
     visibility: hidden;
}    
复制代码

ok,好，完成了，这种方法也比较推荐，但就是加入的代码比较多，也改变了html的文档结构。

粘性布局（sticky）

粘性布局是什么呢？我们先来看看效果演示

没错，其实就是在页面滚动的时候保持元素（这里的是标题）在页面视图上方，也就是我们常常看到的吸附效果。

标题行设置了背景色。如果不设置背景色（背景透明），正常文档流的文字就会和标题行文字重叠在一起显示。

sticky定位的元素会遮住滚动而来的“正常”的文档流；后面的sticky元素会覆盖前面的sticky元素，就好像一层层的便利贴，是不是很酷~~。

代码实现

实现粘性布局主要依靠position的sticky属性。

position: sticky;
复制代码

先来看看兼容性：

从Can I use上查询可以看出，sticky的兼容性并不是太好，所以大家使用的时候要慎重考虑，如果不要求兼容的情况，用这个还是相当的舒服了。

下面给出一个简单的示例。

html:

<main>
    <header>标题一</header>
    <div class="content">
    </div>
    <header>标题二</header>
    <div class="content">
    </div>
    <header>标题三</header>
    <div class="content">
    </div>
    <header>标题四</header>
    <div class="content">
    </div>
</main>
复制代码

js(不想写太多p标签，所以用js生成，偷个懒):

let num=20
let html=''
for (var i=0; i < num; i++) {
    html +=`<p>${i + 1}</p>`
}
Array.prototype.slice.call(document.getElementsByClassName('content')).forEach(item=>{
    item.innerHTML=html
})
复制代码

css:

main {
    width: 400px;
    height: 300px;
    margin: 200px auto;
    overflow: auto;
}
header {
    position: sticky;
    top: 0;
    height: 30px;
    background-color: blanchedalmond;
}
复制代码

作者：monkeysoft
链接：https://juejin.cn/post/6907027007318687751
来源：掘金

网站上使用不同的书写风格和swirly字体是增强其吸引力的一种很棒的方式。Alihashmi在网页设计方面拥有四年多的经验，目前教授人们他的技能，他说"正确的排版方式使得阅读网站的内容毫不费力，而糟糕的排版则让读者失去了兴趣。"简洁的机身字体与花哨优雅的字体相辅相成，使文章易于上手，阅读愉快。

在编写时，您需要使用简单，可辨别且易于阅读的字体类型; 但当排版过于简单时，内容会变得单调乏味。以下是在九种网页设计中使用的最佳排版方法。

1. 把事情简单化

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

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

您网站的排版很大程度上取决于您的需求。例如，在宣传您的品牌时，自定义字体在此时非常有用。此外，请考虑用户将主要访问您网站的设备 - 无论是笔记本电脑，平板电脑还是智能手机。这将帮助您选择在目标设备上清晰易读的字体。

2. 正确匹配和配对字体

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

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

您不希望在您的网站上使用需要许可的书法字体，因为这相当于偷窃。有些网站需要令人讨厌的字体上传，而有些则不需要，因此您必须找到最适合您的字体。

3. 避免冗长的线条

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

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

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

5. 充分利用色彩对比

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

6. 考虑一下您希望接收的消息

最终用户如何接收和解释消息在很大程度上取决于书法。要有效地传达设计中的消息，请确保您选择的字体不会改变消息的意图。例如，如果您的目标是创造和传达愉快和轻松的氛围，正式字体是不够的 - 尖叫或"可怕"字体也不会起作用。因此，遵循字体最佳实践来实现有效的设计。

7. 分情况设计

您制作内容的场合会影响网页设计中的排版。当您决定用于设计的字体时，它应该始终发挥作用。例如，像索菲亚公主这样有趣且富有创意的字体最适合销售儿童用品的网站。而且，如果为婚礼设计，更复杂和浪漫的字体，如Coneria Script是合适的。您要为其创建设计的事件应始终指导您使用项目中使用的最佳字体。

8. 所有大写的文字都是禁忌

将文本或消息中的所有字符大写，使您看起来像是在尖叫并强加给读者。这对眼睛来说是令人不愉快的，大多数读者甚至不会到达消息的末尾，因为它可能会让他们失望。

9. 你的目标受众是什么？

为了使您的网站能够与目标受众保持良好关系，您应该了解最终用户，并在制作印刷设计时考虑他们的需求和期望。你是谁设计的？他们的年龄组是什么？他们喜欢和不喜欢什么？回答有关目标受众的此类问题将帮助您为要传达给他们的信息选择正确的字体。

10. 最后一句话

要实现您的网页设计目标，您需要确保您的网站的排版内容清晰，精致和不受干扰。此外，您需要具有创造性，并使用各种系统和自定义刻字来完成不同的字体集合和练习，以确定哪些匹配最佳。最重要的是，没有单一的公式来实现网页设计排版的完美，但通过足够的练习，你将增加你的技能。

在线咨询

上一篇：4个顶级开源JavaScript图表库
下一篇：提醒！7月1日起，登录方式有变！

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

网页排版设计的10个小技巧

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

2. 使用标准字体

3. 限制行的长度

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

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

6. 避免所有的大写

7. 行间距的重要性

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

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

10. 避免使用闪烁的文字

结论

单列布局

一栏布局

效果图

代码实现

一栏布局（通栏）

效果图

代码实现

2列布局

效果图

代码实现

calc函数

flex属性

3列布局

效果图

代码实现

双飞翼布局

圣杯布局

flex布局

垂直方向的布局（sticky footer）

代码实现

为内容区域添加最小的高度

使用flex布局

在content的外面可以添加一个wrapper

粘性布局（sticky）

代码实现

1. 把事情简单化

2. 正确匹配和配对字体

3. 避免冗长的线条

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

5. 充分利用色彩对比

6. 考虑一下您希望接收的消息

7. 分情况设计

8. 所有大写的文字都是禁忌

9. 你的目标受众是什么？

10. 最后一句话

您的项目需求