傳達設(shè)計課程解決用戶體驗、內(nèi)容管理和搜索引擎優(yōu)化問題，重點是為網(wǎng)絡(luò)分發(fā)和發(fā)布編寫和創(chuàng)建內(nèi)容。您將培養(yǎng)多媒體內(nèi)容創(chuàng)建技能，學(xué)習(xí)如何設(shè)置內(nèi)容管理系統(tǒng)并將其修改為當(dāng)前的用戶體驗和設(shè)計指南。

最好的網(wǎng)頁設(shè)計看似簡單，但它們都基于基本的視覺設(shè)計原則。雖然很少有網(wǎng)頁設(shè)計師天生就有一雙視覺設(shè)計的慧眼，但對于我們大多數(shù)人來說，這是必須自學(xué)的東西。如果你知道如何分辨設(shè)計的好壞，那么學(xué)習(xí)如何設(shè)計網(wǎng)站就會更加容易。了解視覺設(shè)計的工作原理。了解構(gòu)圖規(guī)則，理解形狀、空間、色彩和幾何等元素如何相互配合。本文主要探究網(wǎng)頁設(shè)計的學(xué)習(xí)技巧。

一、了解視覺設(shè)計的關(guān)鍵概念

1.線條

設(shè)計中的所有字母、邊框和分割都是由線條構(gòu)成的，線條構(gòu)成了設(shè)計的大結(jié)構(gòu)。學(xué)習(xí)網(wǎng)頁設(shè)計意味著了解如何使用線條在設(shè)計中創(chuàng)造秩序和平衡。

2.形狀

視覺設(shè)計中的三種基本形狀是正方形、圓形和三角形。正方形和長方形用于內(nèi)容塊，圓形用于按鈕，三角形通常用于重要信息或行動號召的圖標(biāo)。形狀還具有情感含義：正方形與力量有關(guān)，圓形與和諧和舒適有關(guān)，三角形與重要性和行動有關(guān)。

3.紋理

紋理再現(xiàn)了現(xiàn)實世界中的一些事物。通過紋理，我們可以辨別事物是粗糙還是光滑。紋理存在于所有網(wǎng)頁設(shè)計中。從紙質(zhì)背景到高斯模糊的彩色縷線，考慮一下不同類型的紋理，它們可以讓你的設(shè)計更有趣，并賦予其實體感。

4.色彩

如果你想學(xué)習(xí)如何設(shè)計網(wǎng)頁和創(chuàng)建對眼睛友好的網(wǎng)站，就必須接受色彩理論方面的教育。了解色輪、互補色、對比色以及不同顏色所喚起的情感，會讓你成為一名更好的網(wǎng)頁設(shè)計師。了解如何設(shè)計網(wǎng)頁的一個重要部分就是知道哪些顏色組合搭配得當(dāng)。

5.網(wǎng)格

網(wǎng)格起源于早期的平面設(shè)計。它們?yōu)榫W(wǎng)頁項目中的圖像、文本和其他元素提供了秩序。學(xué)習(xí)如何使用網(wǎng)格來組織你的網(wǎng)頁項目。

二、了解 HTML 的基礎(chǔ)知識

HTML(超文本標(biāo)記語言)提供了在用戶瀏覽器中顯示網(wǎng)站內(nèi)容、圖像、導(dǎo)航和其他元素的指令。雖然沒有必要成為 HTML 專家，但熟悉 HTML 的工作原理還是很有用的，即使您使用的是 Webflow 等可視化設(shè)計平臺。

HTML 標(biāo)簽是瀏覽器用來生成網(wǎng)站的指令。標(biāo)題、段落、鏈接和圖像都由這些標(biāo)簽控制。您尤其有興趣了解標(biāo)題標(biāo)簽 H1、H2 和 H3 是如何用來劃分內(nèi)容層次的。除了影響設(shè)計結(jié)構(gòu)外，標(biāo)題標(biāo)簽對于網(wǎng)絡(luò)爬蟲對設(shè)計的分類也很重要，并影響其在有機搜索排名中的顯示。

在 Webflow 大學(xué)的這一課程中，您可以了解更多有關(guān) HTML 和 CSS 的基礎(chǔ)知識。

三、了解 CSS

CSS(或?qū)盈B樣式表)為如何顯示 HTML 元素提供了額外的樣式和說明。通過 CSS，您可以應(yīng)用字體、添加填充、設(shè)置對齊方式、選擇顏色，甚至創(chuàng)建網(wǎng)格。

了解了 CSS 的工作原理，你就可以創(chuàng)建外觀獨特的網(wǎng)站，并定制現(xiàn)有模板。讓我們回顧一下 CSS 的一些關(guān)鍵概念。

a.CSS 類

CSS 類是一個屬性列表，通過將其鏈接在一起，可以創(chuàng)建單個元素的樣式。正文等元素的字體、大小和顏色都屬于一個 CSS 類。

b.組合 CSS 類

組合類以現(xiàn)有基類為基礎(chǔ)。它繼承了所有可能已經(jīng)存在的屬性，如大小、顏色和對齊方式。這些屬性可以修改。組合類可以節(jié)省時間，并能創(chuàng)建可應(yīng)用于網(wǎng)頁項目中任何地方的不同類。

了解 CSS 的工作原理對學(xué)習(xí)網(wǎng)頁設(shè)計至關(guān)重要。正如在 HTML 章節(jié)中提到的，我們建議您訪問 Webflow 大學(xué)，進一步了解 CSS 的工作原理。

四、學(xué)習(xí)用戶體驗設(shè)計的基礎(chǔ)知識

想要學(xué)習(xí)如何設(shè)計網(wǎng)站的人常常會混淆用戶界面(UI)和用戶體驗(UX)。UX(用戶體驗)是讓網(wǎng)站栩栩如生的魔力，它將網(wǎng)站從靜態(tài)的元素排列轉(zhuǎn)變?yōu)槟軌蛘{(diào)動瀏覽者情緒的東西。

配色方案、內(nèi)容、排版、布局和視覺元素都要相互配合，以滿足受眾的需求。用戶體驗設(shè)計講究精準(zhǔn)和喚起情感。它不僅要為用戶提供一個無縫的旅程，還要將用戶與網(wǎng)頁設(shè)計背后的實體或品牌聯(lián)系起來。

以下是你需要了解的一些用戶體驗原則。

a.用戶角色

如果你想學(xué)習(xí)網(wǎng)站設(shè)計，就必須了解網(wǎng)站與訪問者之間的聯(lián)系。

網(wǎng)頁設(shè)計就是要了解最終用戶。你應(yīng)該學(xué)習(xí)如何進行用戶研究和創(chuàng)建用戶角色。更重要的是，你需要知道如何利用這些信息來創(chuàng)建一個符合受眾需求的優(yōu)化設(shè)計。

b.信息架構(gòu)

沒有清晰的組織結(jié)構(gòu)，人們就會感到困惑和迷失。信息架構(gòu)和內(nèi)容映射提供了網(wǎng)站和不同部分如何協(xié)同工作的路線圖，以提供清晰的客戶旅程。

c.用戶流程

用戶流程可以隨著設(shè)計的深入而逐步形成，但如果能在設(shè)計初期就開始考慮并創(chuàng)建用戶流程，將來的效果會更好。用戶流程告訴你人們將如何在設(shè)計中移動。它們將幫助你確定最重要部分的優(yōu)先級，并確保人們可以訪問這些部分。

d.線框

線框圖顯示標(biāo)題、文本、視覺效果、表單和其他元素在網(wǎng)頁中的位置。即使你要創(chuàng)建一個簡單的單頁網(wǎng)頁設(shè)計，繪制線框也能為你提供一個堅實的工作指南。當(dāng)你要創(chuàng)建更復(fù)雜的網(wǎng)站時，線框?qū)τ趧?chuàng)建一致的體驗、構(gòu)建布局和不遺漏任何需要包含的內(nèi)容至關(guān)重要。

e.原型設(shè)計

原型可以有不同程度的保真度，但它們都是功能設(shè)計的代表。圖像、交互、內(nèi)容和其他重要元素都已就位，并再現(xiàn)了真實的設(shè)計。在整個過程中，原型可用于獲取反饋和調(diào)整設(shè)計。

五、了解用戶界面設(shè)計

用戶界面(UI)設(shè)計是學(xué)習(xí)網(wǎng)站設(shè)計時需要分析的另一個重要主題。用戶界面是將一項技術(shù)付諸實施的機制。門把手就是用戶界面。你的另一半一直在玩的汽車收音機上的音量旋鈕就是用戶界面。在自動取款機上輸入密碼的鍵盤也是用戶界面。就像現(xiàn)實世界中的按鈕和其他裝置可以讓人與機器互動一樣，網(wǎng)站上的用戶界面元素也可以讓人在移動中定義操作。

讓我們重申用戶界面設(shè)計的兩個基本原則：直觀設(shè)計和簡潔性。

a.如何創(chuàng)建直觀的界面

與網(wǎng)站的交互和互動必須保持一致，并遵循可重復(fù)的模式。訪問網(wǎng)站的人在瀏覽網(wǎng)站時必須立即了解網(wǎng)站的系統(tǒng)。

b.創(chuàng)建簡單的用戶界面

用戶界面的存在是為了優(yōu)化可用性。這意味著控件要易于使用，其功能要一目了然。無論是盡量減少導(dǎo)航選項的數(shù)量、加快訂購流程，還是整合其他可提高易用性的互動元素，了解用戶界面都有助于簡化用戶與網(wǎng)站交互時的體驗。

六、了解頁面布局創(chuàng)建的基本原則

我們的眼睛會自動固定在某些設(shè)計模板上，從而更容易瀏覽網(wǎng)站。我們憑直覺就知道該看哪里，因為在我們一生的媒體消費中，這些相同的模板被我們看了一遍又一遍。了解設(shè)計模式有助于創(chuàng)建內(nèi)容和圖像流暢的網(wǎng)站。你需要了解的兩種最常見的網(wǎng)頁布局模板是 Z 模板和 F 模板。

a.Z 模板

對于不使用文字和圖片，而使用大量負(fù)空間的布局，Z 模板是瀏覽網(wǎng)站的有效方式。當(dāng)你開始注意你的視線在設(shè)計中的移動方式時，你就會立即意識到 Z 模式的存在。

b.F 模式

包含大量文字的設(shè)計，如在線出版物或博客中的設(shè)計，通常會遵循一種特有的 F 模式。在屏幕左側(cè)，你會看到一個文章或帖子列表，而在頁面正文中，則是一行行相關(guān)信息。這種布局經(jīng)過優(yōu)化，即使網(wǎng)絡(luò)用戶正在快速瀏覽，也能獲得所需的全部信息。

c.了解響應(yīng)式網(wǎng)頁設(shè)計

除了了解布局模式，了解響應(yīng)式網(wǎng)頁設(shè)計的基本原則也很重要。無論在什么設(shè)備上瀏覽，響應(yīng)式網(wǎng)站的運行和外觀都是一樣的。

七、了解印刷

字體可以傳達不同的色調(diào)或情感，并影響可讀性。如果你正在學(xué)習(xí)網(wǎng)頁設(shè)計，那么了解如何使用排版是必不可少的。排版在網(wǎng)頁設(shè)計中具有多種功能。首先，它的功用是使內(nèi)容清晰易讀。但它也能喚起情感和氛圍，有品位地使用風(fēng)格化的排版有助于提升整體美感。

以下是你應(yīng)該了解的三個關(guān)鍵的字體設(shè)計概念。

a.襯線字體

在襯線字體中，每個字母都飾有稱為襯線的細(xì)線。這種排版風(fēng)格可以追溯到印刷時代。

b.無襯線字體

顧名思義，無襯線字體沒有襯線字體所特有的線條。這些字體在數(shù)字領(lǐng)域的網(wǎng)站和應(yīng)用程序中廣泛使用。

c.展示

顯示字體通常用于標(biāo)題，可以大而有力，也可以由鋒利的細(xì)線組成。它們通常具有復(fù)雜的字形，旨在吸引人們的注意力。

海馬課堂專業(yè)課程預(yù)習(xí)

①3500+海外碩博導(dǎo)師,Highmark承諾導(dǎo)師真實教育背景，假一賠三!

③根據(jù)學(xué)生情況進行1V1專屬備課，輔導(dǎo)不滿意隨心退!

②試聽課全面升級!讓留學(xué)生聽得安心!

④課程輔導(dǎo)產(chǎn)品升級贈送考前檢驗。

⑤中英雙語詳細(xì)講解課程中的考點、難點問題，提供多方位的課前預(yù)習(xí)!