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