SAE技术学院传达设计课程预习|网页设计学习技巧

传达设计课程解决用户体验、内容管理和搜索引擎优化问题，重点是为网络分发和发布编写和创建内容。您将培养多媒体内容创建技能，学习如何设置内容管理系统并将其修改为当前的用户体验和设计指南。

最好的网页设计看似简单，但它们都基于基本的视觉设计原则。虽然很少有网页设计师天生就有一双视觉设计的慧眼，但对于我们大多数人来说，这是必须自学的东西。如果你知道如何分辨设计的好坏，那么学习如何设计网站就会更加容易。了解视觉设计的工作原理。了解构图规则，理解形状、空间、色彩和几何等元素如何相互配合。本文主要探究网页设计的学习技巧。

一、了解视觉设计的关键概念

1.线条

设计中的所有字母、边框和分割都是由线条构成的，线条构成了设计的大结构。学习网页设计意味着了解如何使用线条在设计中创造秩序和平衡。

2.形状

视觉设计中的三种基本形状是正方形、圆形和三角形。正方形和长方形用于内容块，圆形用于按钮，三角形通常用于重要信息或行动号召的图标。形状还具有情感含义：正方形与力量有关，圆形与和谐和舒适有关，三角形与重要性和行动有关。

3.纹理

纹理再现了现实世界中的一些事物。通过纹理，我们可以辨别事物是粗糙还是光滑。纹理存在于所有网页设计中。从纸质背景到高斯模糊的彩色缕线，考虑一下不同类型的纹理，它们可以让你的设计更有趣，并赋予其实体感。

4.色彩

如果你想学习如何设计网页和创建对眼睛友好的网站，就必须接受色彩理论方面的教育。了解色轮、互补色、对比色以及不同颜色所唤起的情感，会让你成为一名更好的网页设计师。了解如何设计网页的一个重要部分就是知道哪些颜色组合搭配得当。

5.网格

网格起源于早期的平面设计。它们为网页项目中的图像、文本和其他元素提供了秩序。学习如何使用网格来组织你的网页项目。

二、了解 HTML 的基础知识

HTML(超文本标记语言)提供了在用户浏览器中显示网站内容、图像、导航和其他元素的指令。虽然没有必要成为 HTML 专家，但熟悉 HTML 的工作原理还是很有用的，即使您使用的是 Webflow 等可视化设计平台。

HTML 标签是浏览器用来生成网站的指令。标题、段落、链接和图像都由这些标签控制。您尤其有兴趣了解标题标签 H1、H2 和 H3 是如何用来划分内容层次的。除了影响设计结构外，标题标签对于网络爬虫对设计的分类也很重要，并影响其在有机搜索排名中的显示。

在 Webflow 大学的这一课程中，您可以了解更多有关 HTML 和 CSS 的基础知识。

三、了解 CSS

CSS(或层叠样式表)为如何显示 HTML 元素提供了额外的样式和说明。通过 CSS，您可以应用字体、添加填充、设置对齐方式、选择颜色，甚至创建网格。

了解了 CSS 的工作原理，你就可以创建外观独特的网站，并定制现有模板。让我们回顾一下 CSS 的一些关键概念。

a.CSS 类

CSS 类是一个属性列表，通过将其链接在一起，可以创建单个元素的样式。正文等元素的字体、大小和颜色都属于一个 CSS 类。

b.组合 CSS 类

组合类以现有基类为基础。它继承了所有可能已经存在的属性，如大小、颜色和对齐方式。这些属性可以修改。组合类可以节省时间，并能创建可应用于网页项目中任何地方的不同类。

了解 CSS 的工作原理对学习网页设计至关重要。正如在 HTML 章节中提到的，我们建议您访问 Webflow 大学，进一步了解 CSS 的工作原理。

四、学习用户体验设计的基础知识

想要学习如何设计网站的人常常会混淆用户界面(UI)和用户体验(UX)。UX(用户体验)是让网站栩栩如生的魔力，它将网站从静态的元素排列转变为能够调动浏览者情绪的东西。

配色方案、内容、排版、布局和视觉元素都要相互配合，以满足受众的需求。用户体验设计讲究精准和唤起情感。它不仅要为用户提供一个无缝的旅程，还要将用户与网页设计背后的实体或品牌联系起来。

以下是你需要了解的一些用户体验原则。

a.用户角色

如果你想学习网站设计，就必须了解网站与访问者之间的联系。

网页设计就是要了解最终用户。你应该学习如何进行用户研究和创建用户角色。更重要的是，你需要知道如何利用这些信息来创建一个符合受众需求的优化设计。

b.信息架构

没有清晰的组织结构，人们就会感到困惑和迷失。信息架构和内容映射提供了网站和不同部分如何协同工作的路线图，以提供清晰的客户旅程。

c.用户流程

用户流程可以随着设计的深入而逐步形成，但如果能在设计初期就开始考虑并创建用户流程，将来的效果会更好。用户流程告诉你人们将如何在设计中移动。它们将帮助你确定最重要部分的优先级，并确保人们可以访问这些部分。

d.线框

线框图显示标题、文本、视觉效果、表单和其他元素在网页中的位置。即使你要创建一个简单的单页网页设计，绘制线框也能为你提供一个坚实的工作指南。当你要创建更复杂的网站时，线框对于创建一致的体验、构建布局和不遗漏任何需要包含的内容至关重要。

e.原型设计

原型可以有不同程度的保真度，但它们都是功能设计的代表。图像、交互、内容和其他重要元素都已就位，并再现了真实的设计。在整个过程中，原型可用于获取反馈和调整设计。

五、了解用户界面设计

用户界面(UI)设计是学习网站设计时需要分析的另一个重要主题。用户界面是将一项技术付诸实施的机制。门把手就是用户界面。你的另一半一直在玩的汽车收音机上的音量旋钮就是用户界面。在自动取款机上输入密码的键盘也是用户界面。就像现实世界中的按钮和其他装置可以让人与机器互动一样，网站上的用户界面元素也可以让人在移动中定义操作。

让我们重申用户界面设计的两个基本原则：直观设计和简洁性。

a.如何创建直观的界面

与网站的交互和互动必须保持一致，并遵循可重复的模式。访问网站的人在浏览网站时必须立即了解网站的系统。

b.创建简单的用户界面

用户界面的存在是为了优化可用性。这意味着控件要易于使用，其功能要一目了然。无论是尽量减少导航选项的数量、加快订购流程，还是整合其他可提高易用性的互动元素，了解用户界面都有助于简化用户与网站交互时的体验。

六、了解页面布局创建的基本原则

我们的眼睛会自动固定在某些设计模板上，从而更容易浏览网站。我们凭直觉就知道该看哪里，因为在我们一生的媒体消费中，这些相同的模板被我们看了一遍又一遍。了解设计模式有助于创建内容和图像流畅的网站。你需要了解的两种最常见的网页布局模板是 Z 模板和 F 模板。

a.Z 模板

对于不使用文字和图片，而使用大量负空间的布局，Z 模板是浏览网站的有效方式。当你开始注意你的视线在设计中的移动方式时，你就会立即意识到 Z 模式的存在。

b.F 模式

包含大量文字的设计，如在线出版物或博客中的设计，通常会遵循一种特有的 F 模式。在屏幕左侧，你会看到一个文章或帖子列表，而在页面正文中，则是一行行相关信息。这种布局经过优化，即使网络用户正在快速浏览，也能获得所需的全部信息。

c.了解响应式网页设计

除了了解布局模式，了解响应式网页设计的基本原则也很重要。无论在什么设备上浏览，响应式网站的运行和外观都是一样的。

七、了解印刷

字体可以传达不同的色调或情感，并影响可读性。如果你正在学习网页设计，那么了解如何使用排版是必不可少的。排版在网页设计中具有多种功能。首先，它的功用是使内容清晰易读。但它也能唤起情感和氛围，有品位地使用风格化的排版有助于提升整体美感。

以下是你应该了解的三个关键的字体设计概念。

a.衬线字体

在衬线字体中，每个字母都饰有称为衬线的细线。这种排版风格可以追溯到印刷时代。

b.无衬线字体

顾名思义，无衬线字体没有衬线字体所特有的线条。这些字体在数字领域的网站和应用程序中广泛使用。

c.展示

显示字体通常用于标题，可以大而有力，也可以由锋利的细线组成。它们通常具有复杂的字形，旨在吸引人们的注意力。

海马课堂专业课程预习

①3500+海外硕博导师,Highmark承诺导师真实教育背景，假一赔三!

③根据学生情况进行1V1专属备课，辅导不满意随心退!

②试听课全面升级!让留学生听得安心!

④课程辅导产品升级赠送考前检验。

⑤中英双语详细讲解课程中的考点、难点问题，提供多方位的课前预习!