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

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

目錄

• 排版
• 間距
• 顏色

排版

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

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

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

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

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

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

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

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

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

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

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

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

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

用於提高可讀性的CSS 屬性

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

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

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

間距

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

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

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

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

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

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

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

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

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

你可以使用Sass 或CSS 變量，以便在整個項目中保持這些值的一致性。系統(tǒng)可能如下所示——但使用你感到舒適的任何內(nèi)容，因為命名事物很難：

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

顏色傳達個性並引起注意

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

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

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

步驟1：了解你的情緒

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

步驟2：找到你的主色

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

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

步驟3：添加輔助色

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

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

現(xiàn)在你已經(jīng)縮小了範圍並找到了你的主要顏色，是時候使用一個調(diào)色板來擴展你的範圍了，這個調(diào)色板為你的項目提供了多功能性和約束性——這是一個我發(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)建連貫的外觀和感覺。

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

你可以使用mix Sass 顏色函數(shù)來實現(xià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)絡方面，有一個顏色原則你必須特別注意：對比度。這就是我們接下來要介紹的內(nèi)容。

對比度

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

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

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

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