Web 創(chuàng)建者和設(shè)計師需要一種更簡化的方式來學習 Web 設(shè)計的基礎(chǔ)知識，但讓我們說實話——簡化流程不僅僅是為初學者準備的。處理多個客戶的高級設(shè)計師也需要熟悉基礎(chǔ)知識，這樣他們才能利用肌肉記憶構(gòu)建網(wǎng)站，并交付項目。
五個網(wǎng)頁設(shè)計基礎(chǔ)
1. 了解網(wǎng)站結(jié)構(gòu)和樣式
2. 使用響應(yīng)式設(shè)計為不同的屏幕尺寸創(chuàng)建
3. 填充和控制內(nèi)容
4. 使用不同的布局工具
5. 添加交互和效果
01. 了解網(wǎng)站結(jié)構(gòu)和樣式
什么是好的網(wǎng)站設(shè)計？坦率地說，很多事情，但堅實的結(jié)構(gòu)和品牌是基線。首先，結(jié)構(gòu)。如果沒有視覺層次結(jié)構(gòu)，網(wǎng)站元素之間就缺乏關(guān)系，用戶可能會發(fā)現(xiàn)很難理解頁面上哪些信息最重要。當我們說 “層次結(jié)構(gòu)” 時，我們指的是 頁面上元素的 HTML 結(jié)構(gòu)。
了解這些關(guān)系使設(shè)計人員能夠掌握控制網(wǎng)站的各個方面并創(chuàng)建他們希望用戶體驗的行為所需的知識。
為網(wǎng)站建立有凝聚力的品牌標識同樣重要。在添加樣式時，了解網(wǎng)站配色方案和排版是關(guān)鍵。您可能知道，這些因素對于傳達網(wǎng)站品牌以及確保網(wǎng)站內(nèi)容的可訪問性和可讀性至關(guān)重要。學習如何有效地應(yīng)用它們（通常在設(shè)計系統(tǒng)的幫助下）使設(shè)計師能夠大規(guī)模創(chuàng)建品牌的在線形象。
02. 使用響應(yīng)式設(shè)計創(chuàng)建不同的屏幕尺寸
設(shè)計師需要創(chuàng)建流暢的網(wǎng)站，這些網(wǎng)站的外觀和功能會根據(jù)他們正在查看的設(shè)備進行調(diào)整。您可以通過響應(yīng)式設(shè)計來實現(xiàn)這一點。
但是響應(yīng)式網(wǎng)頁設(shè)計的基本原理是什么？斷點是第一個需要熟悉的概念。斷點表示一系列屏幕大小。
使用流體測量單位、?？亢投ㄎ唬梢允咕W(wǎng)站元素移動和調(diào)整大小，甚至在斷點之間也是如此。
您可以在我們的完整指南中 了解有關(guān)響應(yīng)式設(shè)計與自適應(yīng)設(shè)計的更多信息。
03. 填充和控制內(nèi)容
在創(chuàng)作者應(yīng)該了解的所有網(wǎng)頁設(shè)計原則和元素中，可以說最重要的是那些賦予網(wǎng)站個性的原則和元素。這意味著您需要了解如何填充和控制內(nèi)容。內(nèi)容使線框栩栩如生，可能性是無窮無盡的。但是，有一些概念你可以適應(yīng)，以掌握內(nèi)容。
我們已經(jīng)討論了排版的相關(guān)性，但適當?shù)奈谋敬笮『捅壤梢宰屇x擇的字體在不同的屏幕尺寸上發(fā)揮作用。除了決定網(wǎng)站文本的可讀性外，您根據(jù)屏幕大小讓文本增大和縮小的能力也是響應(yīng)式體驗的關(guān)鍵組成部分。
從 PNG 到 SVG 的媒體和裝飾元素也至關(guān)重要。他們創(chuàng)造了每個站點的視覺故事。除了設(shè)計、調(diào)試或采購媒體的第一步之外，了解如何將它們添加到網(wǎng)站以及如何控制它們的外觀和行為是不可或缺的。無論是調(diào)整它們的顏色、不透明度、大小，還是為它們制作動畫，精通為網(wǎng)站增加興趣的不同方式都是一項關(guān)鍵技能。
不過，網(wǎng)站內(nèi)容不僅僅是為了美觀。菜單和按鈕是您應(yīng)該了解的導航內(nèi)容類型。這些使網(wǎng)站訪問者能夠采取行動并與網(wǎng)站互動，使它們成為設(shè)計師的基礎(chǔ)。
04. 使用不同的布局工具
網(wǎng)站可以在不可用的情況下運行。大多數(shù)糟糕的 UI 背后是不適當?shù)木W(wǎng)站布局：。如果一個網(wǎng)站缺乏一種清晰的方法來瀏覽其組件和內(nèi)容，用戶將不可避免地感到困惑，或者更糟糕的是，感到沮喪。為了解決這個問題，了解您可以使用的網(wǎng)站布局工具是最好的武器。
05. 添加交互和效果
這個行業(yè)已經(jīng)走了很長一段路，您可以在 Web 上找到正在使用的交互，并且無代碼版本越來越受歡迎。
除了為網(wǎng)站增加吸引力外，交互還為網(wǎng)站訪問者的參與提供了途徑。單擊和懸停交互是 2 個強大的選項。通過應(yīng)用它們，甚至將它們組合起來，互動元素的世界就是你的牡蠣。