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

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

目錄

• 排版
• 間距
• 顏色

排版

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

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

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

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

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

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

層次結(jié)構(gòu)是你只有在它不存在時(shí)才會(huì)真正注意到的東西。在排版中，層次結(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)題級(jí)別之間更大的尺寸差異——從而形成更多層次結(jié)構(gòu)。為了創(chuàng)建更多變化，你還可以更改顏色、 text-align和text-transform屬性。

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

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

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

在排版方面，我們需要確保它盡可能易於閱讀?？勺x性最大的整體因素是你選擇的字體——這是一個(gè)巨大的話題。許多因素決定了字體的“可讀性”。有些字體專門設(shè)計(jì)用於標(biāo)題或短行文本；這些被稱為“顯示”字體，它們通常比設(shè)計(jì)用於文本的字體更具個(gè)性。獨(dú)特的裝飾和怪癖使顯示字體在小尺寸和作為大段落的一部分時(shí)更難閱讀。根據(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）之間，具體取決於你選擇的字體。

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

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

間距

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

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

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

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

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

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

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

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

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

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

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

顏色傳達(dá)個(gè)性並引起注意

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

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

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

步驟1：了解你的情緒

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

步驟2：找到你的主色

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

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

步驟3：添加輔助色

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

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

現(xiàn)在你已經(jīng)縮小了範(fàn)圍並找到了你的主要顏色，是時(shí)候使用一個(gè)調(diào)色板來擴(kuò)展你的範(fàn)圍了，這個(gè)調(diào)色板為你的項(xiàng)目提供了多功能性和約束性——這是一個(gè)我發(fā)現(xiàn)有用的方法。色調(diào)和陰影是這裡的訣竅。色調(diào)是通過將你的主要顏色與白色混合製成的，陰影是通過與黑色混合製成的。你可以使用Sass 顏色函數(shù)快速創(chuàng)建一個(gè)組織良好的系統(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)建“濃郁的黑色”，並在光譜的另一端，選擇幾種用你的主要顏色著色的淺灰色。為白色和黑色著色會(huì)為你的頁(yè)面添加更多個(gè)性，並有助於創(chuàng)建連貫的外觀和感覺。

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

你可以使用mix Sass 顏色函數(shù)來實(shí)現(xiàn)這一點(diǎn)，方法是提供你的基色、默認(rèn)錯(cuò)誤顏色以及你想要與錯(cuò)誤顏色混合的基色百分比。添加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ò)方面，有一個(gè)顏色原則你必須特別注意：對(duì)比度。這就是我們接下來要介紹的內(nèi)容。

對(duì)比度

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

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

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

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