網頁排版設計的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. 最后一句話

您的項目需求