開發人員的設計原理：流程和CSS提示更好的網頁設計

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

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

目錄

• 排版
• 間距
• 顏色

排版

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

利用重複實現一致性和可維護性

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

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

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

層次結構為內容提供清晰的視覺順序

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

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

關於字體選擇的說明

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

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

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

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

用於提高可讀性的CSS 屬性

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

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

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

間距

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

運動關乎內容流程

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

與書籍（往往具有非常線性的結構）不同，網站在其佈局方面可以更具創造性——以無數種方式。重要的是要確保你對如何佈局內容有目的，並以盡可能輕鬆地引導用戶瀏覽你的內容的方式進行佈局。

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

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

鄰近性建立關係

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

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

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

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

顏色傳達個性並引起注意

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

關於顏色選擇的說明

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

步驟1：了解你的情緒

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

步驟2：找到你的主色

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

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

步驟3：添加輔助色

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

步驟4：擴展你的調色板

現在你已經縮小了範圍並找到了你的主要顏色，是時候使用一個調色板來擴展你的範圍了，這個調色板為你的項目提供了多功能性和約束性——這是一個我發現有用的方法。色調和陰影是這裡的訣竅。色調是通過將你的主要顏色與白色混合製成的，陰影是通過與黑色混合製成的。你可以使用Sass 顏色函數快速創建一個組織良好的系統：

 <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>

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

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

你可以使用mix Sass 顏色函數來實現這一點，方法是提供你的基色、默認錯誤顏色以及你想要與錯誤顏色混合的基色百分比。添加desaturate函數有助於降低顏色的色調：

 <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>

在網絡方面，有一個顏色原則你必須特別注意：對比度。這就是我們接下來要介紹的內容。

對比度

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

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

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

以上是開發人員的設計原理：流程和CSS提示更好的網頁設計的詳細內容。更多資訊請關注PHP中文網其他相關文章！