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

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

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

1.線條

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

2.形狀

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

3.紋理

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

4.色彩

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

5.網(wǎng)格

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

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

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

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

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

三、了解 CSS

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

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

a.CSS 類(lèi)

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

b.組合 CSS 類(lèi)

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

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

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

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

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

以下是你需要了解的一些用戶體驗(yàn)原則。

a.用戶角色

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

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

b.信息架構(gòu)

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

c.用戶流程

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

d.線框

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

e.原型設(shè)計(jì)

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

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

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

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

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

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

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

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

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

我們的眼睛會(huì)自動(dòng)固定在某些設(shè)計(jì)模板上，從而更容易瀏覽網(wǎng)站。我們憑直覺(jué)就知道該看哪里，因?yàn)樵谖覀円簧拿襟w消費(fèi)中，這些相同的模板被我們看了一遍又一遍。了解設(shè)計(jì)模式有助于創(chuàng)建內(nèi)容和圖像流暢的網(wǎng)站。你需要了解的兩種最常見(jiàn)的網(wǎng)頁(yè)布局模板是 Z 模板和 F 模板。

a.Z 模板

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

b.F 模式

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

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

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

七、了解印刷

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

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

a.襯線字體

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

b.無(wú)襯線字體

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

c.展示

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

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

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

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

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

④課程輔導(dǎo)產(chǎn)品升級(jí)贈(zèng)送考前檢驗(yàn)。

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