人人都能烹飪，這在技術(shù)上是成立的。但真正懂得如何烹制美味佳肴，與隨意將幾種食材扔進(jìn)鍋里碰運(yùn)氣，兩者之間存在差異。網(wǎng)頁開發(fā)亦是如此，你可能了解“食材”——background-color、.heading-1——但并非每個人都知道如何將這些食材轉(zhuǎn)化為美觀易用的網(wǎng)站。

每次使用 HTML 和 CSS 時，你都在進(jìn)行設(shè)計(jì)——賦予內(nèi)容形式和結(jié)構(gòu)，以便他人理解。人們設(shè)計(jì)已有數(shù)百年歷史，并在此過程中發(fā)展出一些原則，這些原則也適用于今天的數(shù)字界面。這些原則體現(xiàn)在三個關(guān)鍵領(lǐng)域：文字的顯示方式（排版）、內(nèi)容的排列方式（間距）以及個性化的添加方式（顏色）。讓我們從開發(fā)人員的角度出發(fā)，利用 CSS 屬性和指南，消除網(wǎng)頁設(shè)計(jì)中的猜測成分，探索如何使用這些網(wǎng)頁設(shè)計(jì)“食材”。

目錄

• 排版
• 間距
• 顏色

排版

易于閱讀的網(wǎng)站并非偶然。事實(shí)上，Taimur Abdaal 曾撰寫過一篇關(guān)于此主題的文章，其中包含大量針對處理排版的開發(fā)人員的建議。我們將重點(diǎn)關(guān)注兩個基本的設(shè)計(jì)原則，它們可以幫助你以更賞心悅目、更易于閱讀的方式顯示文字：重復(fù)和層級。

利用重復(fù)實(shí)現(xiàn)一致性和可維護(hù)性

由于軟件中可重用性的重要性，重復(fù)在網(wǎng)絡(luò)上相當(dāng)自然地出現(xiàn)。例如，CSS 類允許你為文本定義特定樣式，然后在整個網(wǎng)站中重用該樣式。這導(dǎo)致了類似內(nèi)容的文本樣式重復(fù)且一致，從而幫助用戶瀏覽網(wǎng)站。

例如，如果你正在處理新段落的樣式，首先考慮是否存在具有類似樣式的現(xiàn)有內(nèi)容，并嘗試使用相同的 CSS 類。如果沒有，你可以創(chuàng)建一個具有通用名稱的新類，可以在網(wǎng)站的其他地方重復(fù)使用?？紤]使用 .paragraph--emphasize 而不是 .footer\_\_paragraph--emphasize，或使用 .heading-1 而不是 .hero\_\_site-title。前幾個例子可以在你的網(wǎng)站上使用，而后者則限定在特定的組件中。你甚至可以添加一個前綴，例如 text-，以指示該類專門用于文本樣式。這種方法將減少 CSS 文件的大小和復(fù)雜性，同時使將來更新全局樣式變得更容易。

在設(shè)計(jì)中，有無數(shù)種方法可以試驗(yàn)樣式。設(shè)計(jì)師有時會沉迷于字體樣式，創(chuàng)建許多略微不同的相似樣式。但是，在代碼中，將文本樣式限制在最低限度非常有價值。開發(fā)人員應(yīng)敦促設(shè)計(jì)師將類似的樣式組合起來，以減少代碼量，并提高可重用性和一致性。

層次結(jié)構(gòu)為內(nèi)容提供清晰的視覺順序

層次結(jié)構(gòu)是你只有在它不存在時才會真正注意到的東西。在排版中，層次結(jié)構(gòu)指的是各種文本之間的視覺差異。它是標(biāo)題、段落、鏈接和其他文本樣式之間的區(qū)別。這種區(qū)別是通過為每種類型的文本內(nèi)容選擇不同的字體、顏色、大小、大小寫和其他屬性來實(shí)現(xiàn)的。良好的層次結(jié)構(gòu)使復(fù)雜信息更容易理解，并引導(dǎo)用戶瀏覽你的內(nèi)容。

HTML 本身提供了一些層次結(jié)構(gòu)（例如，標(biāo)題的字體大小從 <h1></h1> 到 <h6></h6> 逐漸減小），但 CSS 為更大的創(chuàng)造力打開了大門。通過為 <h></h> 標(biāo)簽賦予更大的字體大小，你可以快速建立標(biāo)題級別之間更大的尺寸差異——從而形成更多層次結(jié)構(gòu)。為了創(chuàng)建更多變化，你還可以更改顏色、text-align 和 text-transform 屬性。

關(guān)于字體選擇的說明

===========================================================================================================================================================================================================================================================================

====================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================

在排版方面，我們需要確保它盡可能易于閱讀。可讀性最大的整體因素是你選擇的字體——這是一個巨大的話題。許多因素決定了字體的“可讀性”。有些字體專門設(shè)計(jì)用于標(biāo)題或短行文本；這些被稱為“顯示”字體，它們通常比設(shè)計(jì)用于文本的字體更具個性。獨(dú)特的裝飾和怪癖使顯示字體在小尺寸和作為大段落的一部分時更難閱讀。根據(jù)經(jīng)驗(yàn)，應(yīng)為文本使用更直觀的字體，僅為標(biāo)題使用顯示字體。

如果你手頭緊缺，需要一種易讀的字體，可以嘗試 Google Fonts。將一段文本添加到預(yù)覽字段，并將其大小調(diào)整到你網(wǎng)站上顯示的大致大小。然后，你可以將結(jié)果縮小到襯線或非襯線字體，并掃描字體列表以查找易于閱讀的字體。Roboto、Noto Sans、Merriweather 和 PT Serif 都是非常易讀的選項(xiàng)。

用于提高可讀性的 CSS 屬性

• 主要段落的字體大小應(yīng)在 16px 和 18px（1em 和 1.25em）之間，具體取決于你選擇的字體。

• 手動設(shè)置行高（兩行文本之間的垂直空間），使你的文本不那么擁擠，更容易閱讀。對于標(biāo)題，從 line-height: 1.25（即字體大小的 1.25 倍）開始，段落至少為 1.5（但不超過 1.9），然后根據(jù)需要調(diào)整。文本行越長，行高就應(yīng)該越大。為了保持文本的靈活性，避免在行高添加單位。沒有單位，你設(shè)置的行高將與你的字體大小成比例。例如，line-height: 1.5 和 font-size: 18px 將使你的行高為 27 像素。如果你在較小的屏幕上將字體大小更改為 font-size: 16px，則計(jì)算出的行高將自動更改為 24 像素。

• 注意文本行中包含多少個字符，目標(biāo)是 45 到 75 個字符長（包括標(biāo)點(diǎn)符號和空格）。這樣做通過限制眼睛和頭部移動來跟蹤文本行，從而減少用戶的閱讀疲勞。由于網(wǎng)絡(luò)的變異性，不可能完全控制行長，但你可以使用 max-width 值和斷點(diǎn)來防止文本行變得太長。一般來說，文本行越短，掃描速度就越快。而且不必過于擔(dān)心計(jì)算每一行的字符數(shù)。完成幾次后，你就會對什么看起來是對的產(chǎn)生感覺。

間距

查看排版后，你可以退后一步檢查內(nèi)容的布局或間距。運(yùn)動和鄰近是與間距相關(guān)的兩個設(shè)計(jì)原則。

運(yùn)動關(guān)乎內(nèi)容流程

運(yùn)動是指你的眼睛如何穿過頁面或頁面的流程。你可以使用運(yùn)動來引導(dǎo)用戶的視線，從而講述故事、指向主要操作項(xiàng)或鼓勵他們滾動。這是通過在各個組件內(nèi)構(gòu)建內(nèi)容，然后排列這些組件來形成頁面布局來實(shí)現(xiàn)的。通過注意你的眼睛如何穿過內(nèi)容，你可以幫助用戶在掃描頁面時知道在哪里尋找。

與書籍（往往具有非常線性的結(jié)構(gòu)）不同，網(wǎng)站在其布局方面可以更具創(chuàng)造性——以無數(shù)種方式。重要的是要確保你對如何布局內(nèi)容有目的，并以盡可能輕松地引導(dǎo)用戶瀏覽你的內(nèi)容的方式進(jìn)行布局。

考慮以上三個示例。哪個最容易理解？左側(cè)的排列由于圖像的位置而將你的視線從屏幕上移到左側(cè)，這使得難以找到按鈕。在中間選項(xiàng)中，由于圖像與標(biāo)題相比太大，很容易忽略標(biāo)題。在右側(cè)，標(biāo)題首先吸引你的注意力，并且圖像的構(gòu)成使其指向主要操作項(xiàng)——按鈕。

空白是創(chuàng)建強(qiáng)大運(yùn)動的有用工具，但很容易使用過多或過少?？紤]一下你如何使用它來引導(dǎo)用戶的視線并劃分你的內(nèi)容。如果使用得當(dāng)，用戶不會注意到空白本身，但能夠更好地關(guān)注你正在呈現(xiàn)的內(nèi)容。例如，你可以使用空白來分隔內(nèi)容（而不是彩色框），這將導(dǎo)致布局不那么雜亂。

鄰近性建立關(guān)系

當(dāng)物體靠得更近時，它們會被感知為相關(guān)的。通過控制元素周圍的間距，你可以暗示它們之間的關(guān)系。創(chuàng)建一個間距系統(tǒng)以幫助通過重復(fù)建立一致性并避免使用隨機(jī)數(shù)字可能會有所幫助。此系統(tǒng)基于默認(rèn)瀏覽器字體大小（1rem 或 16px），并使用涵蓋大多數(shù)場景的不同值：

• 0.25rem (4px)
• 0.5rem (8px)
• 1rem (16px)
• 2rem (32px)
• 4rem (64px)

你可以使用 Sass 或 CSS 變量，以便在整個項(xiàng)目中保持這些值的一致性。系統(tǒng)可能如下所示——但使用你感到舒適的任何內(nèi)容，因?yàn)槊挛锖茈y：

• $space-sm
• $space-med
• $space-lg
• $space-xl
• $space-xxl

顏色傳達(dá)個性并引起注意

顏色極大地影響網(wǎng)站的個性。如果使用得當(dāng)，它會使頁面充滿活力和情感；如果使用不當(dāng)，它會分散對內(nèi)容的注意力，或者更糟糕的是，使其無法訪問。顏色與大多數(shù)設(shè)計(jì)原則密切相關(guān)。它可用于通過引導(dǎo)用戶的視線來創(chuàng)建運(yùn)動，并可用于通過引起對最重要操作項(xiàng)的注意來創(chuàng)建強(qiáng)調(diào)。

關(guān)于顏色選擇的說明

對于顏色，可能很難知道從哪里開始。為了提供幫助，你可以使用一個四步過程來指導(dǎo)你的顏色選擇，并為網(wǎng)站構(gòu)建一個調(diào)色板。

步驟 1：了解你的情緒

在選擇顏色之前，你必須了解你網(wǎng)站和品牌的基調(diào)或態(tài)度。查看你的內(nèi)容，并決定你試圖傳達(dá)什么。它是有趣的、信息豐富的、復(fù)古的、響亮的、陰沉的嗎？通常，你可以將網(wǎng)站的基調(diào)歸納為幾個形容詞。例如，你可以將 The North Face 總結(jié)為冒險(xiǎn)和粗獷的，而 Apple 則為極簡和美麗的。

步驟 2：找到你的主色

記住你的情緒，嘗試想象一種代表它的顏色。從顏色的飽和度（顏色的強(qiáng)度）和亮度（顏色與白色或黑色的接近程度）開始。如果你的情緒是樂觀或華麗的，那么較淺（更飽和）的顏色可能是最好的。如果你的情緒是嚴(yán)肅或含蓄的，那么較暗（不太飽和）的顏色更好。

接下來，選擇一種色相。色相指的是大多數(shù)人認(rèn)為的顏色——它在色輪的旋轉(zhuǎn)中落在哪里？顏色的色相賦予它最大的意義。人們傾向于將色相與某些想法聯(lián)系起來。例如，紅色通常與權(quán)力或危險(xiǎn)相關(guān)，綠色與金錢或自然相關(guān)。查看類似的網(wǎng)站或品牌以了解它們使用的顏色可能會有所幫助——盡管你不需要遵循它們的領(lǐng)導(dǎo)。不要害怕嘗試！

步驟 3：添加輔助色

有時需要兩種或三種主要顏色，但這并非必要。想想不同品牌的顏色。有些使用單一顏色，而另一些則具有主色和一兩種輔助色?？煽诳蓸肥褂闷洫?dú)特的紅色。宜家主要是藍(lán)色，帶有一些黃色。汰漬是橙色，帶有一些藍(lán)色和黃色。根據(jù)你網(wǎng)站的情緒，你可能需要幾種顏色。嘗試使用 Adobe Color 或 Coolors 等工具，這兩個工具都允許你添加主色，然后嘗試不同的顏色關(guān)系，例如互補(bǔ)色或單色，以快速查看是否有任何效果很好。

步驟 4：擴(kuò)展你的調(diào)色板

現(xiàn)在你已經(jīng)縮小了范圍并找到了你的主要顏色，是時候使用一個調(diào)色板來擴(kuò)展你的范圍了，這個調(diào)色板為你的項(xiàng)目提供了多功能性和約束性——這是一個我發(fā)現(xiàn)有用的方法。色調(diào)和陰影是這里的訣竅。色調(diào)是通過將你的主要顏色與白色混合制成的，陰影是通過與黑色混合制成的。你可以使用 Sass 顏色函數(shù)快速創(chuàng)建一個組織良好的系統(tǒng)：

<code>$main-color:          #9AE799;

$main-color-lightest: lighten($main-color, 20%);
$main-color-lighter:  lighten($main-color, 15%);
$main-color-light:    lighten($main-color, 10%);

$main-color-dark:     darken($main-color, 40%);
$main-color-darker:   darken($main-color, 50%);
$main-color-darkest:  darken($main-color, 60%);</code>

為了完善你的調(diào)色板，你還需要幾種顏色，例如白色和黑色。嘗試使用你的主要顏色的深色、幾乎黑色的陰影來創(chuàng)建“濃郁的黑色”，并在光譜的另一端，選擇幾種用你的主要顏色著色的淺灰色。為白色和黑色著色會為你的頁面添加更多個性，并有助于創(chuàng)建連貫的外觀和感覺。

最后但并非最不重要的一點(diǎn)是，如果你正在處理交互式產(chǎn)品，則應(yīng)添加成功、警告和錯誤狀態(tài)的顏色。通常綠色、黃色和紅色適用于這些，但請考慮如何調(diào)整色相以使其更適合你的調(diào)色板。例如，如果你的情緒是友好的，你的基色是綠色，你可能需要降低錯誤狀態(tài)顏色的飽和度，以使紅色感覺不那么負(fù)面。

你可以使用 mix Sass 顏色函數(shù)來實(shí)現(xiàn)這一點(diǎn)，方法是提供你的基色、默認(rèn)錯誤顏色以及你想要與錯誤顏色混合的基色百分比。添加 desaturate 函數(shù)有助于降低顏色的色調(diào)：

<code>$success: mix($base-color, desaturate(green, 50%), 50%);
$warning: mix($base-color, desaturate(yellow, 30%), 5%);
$error:   mix($base-color, desaturate(red, 50%), 20%);</code>

在網(wǎng)絡(luò)方面，有一個顏色原則你必須特別注意：對比度。這就是我們接下來要介紹的內(nèi)容。

對比度

顏色對比度——兩種顏色之間飽和度、亮度和色相的差異——是一個重要的設(shè)計(jì)原則，可確保網(wǎng)絡(luò)對視力低下或色盲者具有可訪問性。通過確保你的文本與其網(wǎng)站上的任何背景之間存在足夠的對比度，將使所有視力正常的用戶都能更好地訪問。在查看可訪問性時，請務(wù)必遵循 W3C 的 Web 內(nèi)容可訪問性指南 (WCAG) 中提供的顏色對比度指南。有很多工具可以幫助你遵循這些指南，包括 Chrome 開發(fā)工具中的檢查面板。

現(xiàn)在，是時候?qū)⑦@些原則付諸實(shí)踐了！你可以使用這些流程和 CSS 提示來幫助消除設(shè)計(jì)中的猜測成分，并創(chuàng)建更好的解決方案。從你熟悉的內(nèi)容開始，最終，此處提到的設(shè)計(jì)原則將成為你的第二天性。

如果你正在尋找更多實(shí)用技巧，Adam Wathan 和 Steve Schoger 撰寫了關(guān)于他們最喜歡的技巧的一些文章。

以上是開發(fā)人員的設(shè)計(jì)原理：流程和CSS提示更好的網(wǎng)頁設(shè)計(jì)的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！