网页UI设计初学者指南

最新推荐文章于 2025-03-06 00:00:00 发布

王元祺

最新推荐文章于 2025-03-06 00:00:00 发布

阅读量1.9k

点赞数 9

本文链接：https://blog.csdn.net/weixin_35757191/article/details/142208093

版权

本文还有配套的精品资源，点击获取

简介：网页制作UI是构建用户友好交互的关键部分，包含视觉设计和用户交互设计两大要素。本课程将引导初学者掌握网页UI设计的基本原则和技巧，包括布局设计、色彩搭配、字体选择、图标图像使用、交互设计、响应式设计、用户测试、设计工具运用、视觉层次创建及可访问性设计。通过这些关键知识点的学习与实践，初学者可以逐步成长为一名合格的网页UI设计师。网页制作UI

1. 网页制作UI设计概念和重要性

网页制作中的用户界面(UI)设计是建立有效、美观的用户体验的关键组成部分。它是关于网页的外观、感觉和用户如何与之交互的科学。在本章中，我们将探讨UI设计的基础知识，其重要性，并阐述为何设计师需要密切关注它。

用户界面(UI)设计简介

UI设计是一个涉及多个学科的综合领域，包括但不限于心理学、设计原则和技术实现。设计师致力于创造一个直观、一致和吸引人的界面，确保用户可以轻松找到所需的信息并完成任务。UI设计不仅仅是让一个网站看起来更漂亮，而是要确保用户在使用过程中能够获得愉快的经历。

UI设计的重要性

在竞争激烈的数字市场中，一个优秀的UI设计可以显著提高用户的参与度，提升品牌形象，并最终影响转化率。一个直观的界面降低了用户的认知负荷，提高了满意度和忠诚度。因此，UI设计对于任何希望在当今市场中脱颖而出的网站或应用程序来说，都是不可或缺的。

UI设计和用户体验(UX)

虽然UI设计是UX（用户体验）的重要组成部分，但它并不等同于用户体验设计。UX设计师负责网站或应用的整体体验，包括用户如何与产品交互以及该过程中的情感体验。UI设计更多关注于交互的视觉和触觉元素，它是实现良好用户体验的一个方面。

通过本章的介绍，我们已经打下了对UI设计理解的基础，并且揭示了其在现代网页制作中的重要性。接下来的章节将继续深入探讨布局设计、色彩搭配、图标和图像的使用以及响应式设计等关键要素，进一步引导我们了解如何创建出既美观又实用的网页。

2. 布局设计技巧与类型

布局设计是网页设计中的核心要素之一，它直接关系到用户体验和内容的传达效率。合理而美观的布局可以让用户在浏览网页时感到舒适，易于寻找信息，提升使用网站的愉悦度和效率。

2.1 布局设计的基本理念

2.1.1 布局的定义和设计目标

布局（Layout）是指页面上元素的排列方式和结构。它决定了用户浏览内容的路径，以及信息的逻辑组织。一个有效的布局设计应该能够引导用户视线，突出重点，同时保持整体的美观和功能的实用性。

布局设计的目标主要有三个：

信息架构 ：清晰地展示页面上的信息，让用户能够迅速找到他们需要的内容。
视觉引导 ：通过设计元素的安排和视觉流动路径的规划，引导用户关注核心内容。
交互流畅性 ：确保布局不会阻碍用户的操作，例如点击按钮和填写表单。

2.1.2 布局设计的原则和方法

布局设计的几个基本原则包括：

对齐：确保元素之间有明显的对齐关系，创造出整洁和专业的外观。
对比：通过大小、颜色、字体等的变化来突出关键元素。
重复：设计中重复使用某些元素或风格，可以增加页面的统一性和识别度。
接近性 ：将相互有关联的元素在空间上靠近，使得用户更容易理解它们之间的关系。

在具体的设计方法上，设计师通常会：

创建线框图 ：在初步设计之前制作线框图，确定页面的基本结构和元素的放置。
选择布局类型 ：根据内容和需求选择合适的布局类型，如网格、弹性或流式。
使用栅格系统 ：栅格系统有助于更快速、更一致地构建布局。
实验和迭代 ：设计过程中需要不断地实验布局变化，以及根据用户反馈进行迭代优化。

2.2 常见的布局类型

2.2.1 网格布局

网格布局（Grid Layout）是一种通过行和列将页面划分成格子的设计方式。它适用于多种屏幕尺寸，可以灵活地安排内容，适合于复杂的布局设计。

特点：

模块化 ：内容以模块化的形式呈现，易于管理。
适应性强 ：能够适应不同大小的屏幕，具有很好的灵活性。
可预测性 ：用户可以预测内容的位置，因为它们通常遵循一致的模式。

设计方法 ：

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <!-- 更多的 grid-item -->
</div>

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto; /* 定义三列 */
}
.grid-item {
  /* 可以定义每个模块的样式，如边距、背景色等 */
}

2.2.2 弹性布局

弹性布局（Flexible Layout）或称为Flex布局，是一种利用弹性容器中的子元素自动填充可用空间的设计方式。这种布局方式非常灵活，能够适应多种屏幕尺寸，而且相对于网格布局来说，它在处理不规则形状的布局时更为高效。

特点：

灵活性 ：子元素可以扩展或缩小来适应可用空间。
简洁：代码结构比网格布局简单，易于实现。
方向：可以水平或垂直排列子元素。

设计方法 ：

<div class="flex-container">
  <div class="flex-item">A</div>
  <div class="flex-item">B</div>
  <div class="flex-item">C</div>
  <!-- 更多的 flex-item -->
</div>

.flex-container {
  display: flex; /* 设置为弹性布局 */
}
.flex-item {
  flex: 1; /* 所有子元素平分可用空间 */
}

2.2.3 流式布局

流式布局（Fluid Layout）是一种基于百分比宽度的布局方式，这种布局会随着浏览器窗口的变化而伸缩。它适用于需要在多种屏幕尺寸上保持内容呈现一致性的场景。

特点：

自适应 ：布局宽度会根据父元素的宽度自动调整。
简单：通常基于简单的百分比计算，容易实现。
连续：布局和内容看起来是连续流动的，而不是跳跃性的。

设计方法 ：

.container {
  width: 100%; /* 容器宽度为视口宽度的100% */
}
.item {
  width: 50%; /* 子元素宽度为父元素的50% */
}

在不同的布局类型选择上，设计师需要根据网站的具体需求和内容特点来决定。例如，对于内容密集型的新闻网站，可能会优先选择流式布局，以便内容在各种设备上都能灵活展现；而对于电商网站来说，可能会更倾向于使用网格布局，以展示更多的产品信息和促销元素。

3. 色彩搭配原则和字体选择

在设计中，色彩和字体是建立视觉吸引力和传达信息的关键元素。它们不仅能够增强用户对网站内容的理解，还能够提升整体的用户体验。了解色彩搭配原则和选择合适的字体对于任何希望创建高质量用户界面的设计师而言都是至关重要的。

3.1 色彩搭配原则

3.1.1 色彩理论基础

色彩理论是色彩搭配和设计的基石，它帮助设计师理解色彩之间的关系，并应用这些知识创造出和谐或具有对比的视觉效果。色彩理论主要包括色彩模式、色彩轮、和谐与对比以及色彩心理。

色彩模式 ：最常见的色彩模式有RGB和CMYK。RGB模式适用于屏幕显示，因为它是加色模式，通过红色、绿色和蓝色三种光的叠加产生其他颜色。而CMYK模式是减色模式，主要用于印刷业，通过青色、品红、黄色和黑色的颜料混合来创建颜色。
色彩轮 ：色彩轮是一个帮助设计师理解色彩之间关系的工具，它基于一个圆形的布局来展示色彩的相互关系。色彩轮上最基础的三种颜色是红、黄、蓝，它们被称为原色。通过这些原色可以混合出次级色和三级色。
和谐与对比 ：色彩搭配的和谐是基于色轮上的邻近色、类似色和三角色配色方案，而对比则体现在补色和分裂补色等对比配色方案上。
色彩心理 ：不同的色彩可以激发观众不同的情感和反应，设计师需要了解各种色彩对人心理的影响，从而选择符合设计目的的色彩。

3.1.2 色彩搭配技巧和实例

配色方案的选择 ：根据设计目的选择合适的配色方案。如使用邻近色搭配创建宁静感，使用对比色搭配创造活力和重点突出的视觉效果。
色彩的平衡 ：色彩使用不宜过多，一般情况下3-5种色彩为宜。使用中性色（如黑、白、灰）可以有效平衡整个设计的色彩使用。
色彩的适用性 ：要考虑到品牌色彩和目标受众，比如儿童产品常常使用明亮、鲜艳的色彩，而企业网站可能更倾向于使用中性和保守的色调。
案例解析 ：分析成功的网页设计案例，如何在设计中恰当使用色彩搭配原则。例如，Airbnb的色彩使用既丰富多彩，又十分和谐，体现了其网站的精神和品牌定位。

3.2 字体选择与可读性

3.2.1 字体的选择和应用

选择合适的字体是传达信息并提升网站可读性的重要方面。设计师在选择字体时需考虑以下因素：

字体风格 ：不同的字体风格传递不同的信息。例如，衬线体看起来更传统和正式，而无衬线体则显得现代和简洁。
字体可读性 ：易读性是字体选择的首要标准。设计师应选择清晰、易读的字体，尤其是在小字号或长文本中。
品牌一致性 ：品牌通常有特定的字体选择，代表其个性和价值观。设计师需要确保所选字体能够反映并加强品牌形象。
技术兼容性 ：在网页设计中，需要确保所选字体在不同设备和浏览器上能够正确显示。

3.2.2 提高可读性的字体设计技巧

为了提高设计中的可读性，设计师可以采取以下一些技巧：

对比度 ：确保字体颜色与背景色之间有足够的对比度，以确保文字易于阅读。
大小和间距 ：合理调整字号大小和字符间距，避免因过小的字体或过紧的间距导致阅读困难。
行距：适当的行距可以增加文本的清晰度，促进舒适的阅读体验。
字体家族 ：使用字体家族中不同的字重（如粗体、细体）来区分标题和正文，增强信息层次。
文本层次 ：通过改变字体大小和样式来建立清晰的视觉层次，引导读者按照设计师的意图阅读内容。

为了更好地展示字体选择和应用，这里提供一个简单的代码示例，展示如何在HTML和CSS中设置不同风格的字体：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Font Selection Example</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
        }
        h1 {
            font-family: 'Times New Roman', serif;
        }
        .important-text {
            font-weight: bold;
            font-style: italic;
        }
    </style>
</head>
<body>
    <h1>This is a heading in Times New Roman</h1>
    <p>This is a paragraph in Arial font.</p>
    <p class="important-text">This is important text that uses both bold and italic styles.</p>
</body>
</html>

通过以上章节的讲解，我们深入理解了色彩搭配和字体选择在UI设计中的重要性及应用方法。色彩不仅能够为设计增加美感，还能有效地影响用户的情绪和行为。而合适的字体选择则直接关系到信息传递的有效性和用户的阅读体验。在网页设计实践中，合理应用这些原则和技巧，设计师能够创造出既美观又实用的用户界面。

4. 图标和图像的作用及交互设计

图标和图像不仅仅美化网页，它们在用户界面中扮演着传递信息和辅助导航的角色。图标以图形的方式提供了一种直观且简洁的表达方式，而图像则能丰富内容、吸引用户注意力。同时，良好的交互设计能够提升用户体验，使用户在与网站或应用的互动过程中感到舒适和愉悦。

4.1 图标和图像的作用

4.1.1 图标的作用和设计方法

图标是用户界面的基本组成部分，通常用于指示功能、代表对象或者提供导航线索。在设计图标时，以下几点是至关重要的：

简洁明了 ：图标应该简单到用户可以一眼看出它的意义，避免过度复杂的设计。
风格统一 ：保持整个应用或网站中图标的风格一致，可以增强用户的认知度。
文化适应性 ：考虑不同文化背景用户的理解，某些图标在不同文化中可能具有不同的含义。

图标可以采用以下设计方法：

扁平化设计 ：现代流行的设计风格，去除了不必要的装饰，以简洁的形状和色彩传达信息。
线性设计 ：使用线条来勾勒图标形状，通常适用于需要强调细节的场景。
材料设计 ：模仿现实世界中的材质和阴影效果，使得图标看起来更加立体。

4.1.2 图像的选择和优化技巧

图像不仅能够提高用户的视觉体验，还能辅助内容的表达，但在选择和优化图像时有一些技巧值得注意：

选择合适图像 ：确保所选图像与内容主题相符，并符合版权要求。
压缩图像 ：对图片进行压缩可以在不显著降低质量的情况下减小文件大小，加快网页加载速度。
响应式设计 ：确保图像适应不同设备的屏幕尺寸，提供良好的用户体验。

. . . 图像优化的代码示例

<!-- 假设使用一个简单的HTML图像标签 -->
<img src="image.jpg" alt="描述性文本" width="600" height="400">

在上述代码中， src 属性用于指定图像的位置， alt 属性提供了图像内容的文字描述，这在图像无法显示时尤其重要。 width 和 height 属性可以用来调整图像的显示尺寸，以适应不同的布局需求。

. . . 图像压缩工具的应用

为了减少图像文件的大小，可以使用各种在线或离线工具进行压缩。例如，使用TinyPNG这样的在线工具可以有效地降低PNG图像的文件大小。

4.2 交互设计的基本原则

4.2.1 交互设计的概念和重要性

交互设计关注的是用户如何与产品或服务进行互动，它包括了用户界面的设计、用户在使用产品过程中的体验以及如何通过设计来满足用户的需求。良好的交互设计可以提升用户满意度，促进用户与产品的正面互动。

4.2.2 交互设计的原则和方法

交互设计原则通常包括以下几点：

用户中心 ：始终将用户的需求和体验放在首位。
一致性和标准 ：保持界面的一致性，使用户可以快速学会如何使用产品。
反馈：提供及时的反馈，让用户知道他们的操作是否成功。

实现交互设计的方法有很多，比如使用原型图、用户故事地图和用户测试等。此外，将设计原则与实际场景结合起来，可以帮助设计师创造更加自然和直觉的交互体验。

. . . 设计原型的构建和测试

设计原型是交互设计过程中的重要工具，它允许设计师和用户测试和体验界面布局、交互流程等。原型的构建通常从低保真度开始，逐步过渡到高保真度，便于迭代和优化。

graph TD;
    A[需求分析] --> B[低保真原型];
    B --> C[用户反馈];
    C --> D[高保真原型];
    D --> E[用户体验测试];
    E --> F[产品迭代];

在上述流程图中，可以清晰地看到从需求分析到产品迭代的整个设计过程。这保证了设计师和用户能够共同参与设计，并且提供反馈以优化最终产品。

通过本章节的介绍，可以看出图标和图像在网页设计中的关键作用以及交互设计对于用户体验的重要性。图标和图像的合理运用可以丰富视觉元素，而精细的交互设计则能提升用户的互动体验。下一章将继续深入讨论响应式设计和用户测试的相关知识，为创建全面而细致的用户体验提供更多信息。

5. 响应式设计和用户测试

响应式设计（Responsive Web Design）和用户测试（User Testing）是当今Web设计中不可或缺的两个方面。响应式设计保证了网站在不同设备和屏幕尺寸上能够提供良好的用户体验，而用户测试则确保设计真正满足用户需求。本章节将详细介绍响应式设计的必要性、技术实现方法以及用户测试的概念、方法和流程。

5.1 响应式设计的必要性

在如今这个移动设备广泛应用的时代，用户可能会通过各种尺寸的设备访问网站。因此，响应式设计显得尤为重要。

5.1.1 响应式设计的概念和重要性

响应式设计是通过使用流式布局、媒体查询（Media Queries）和弹性图片等技术手段，使网站能够自动适应不同分辨率的显示设备。这种设计理念关注的是创建一个基于设备屏幕大小和分辨率的布局，而不仅仅是简单地适配不同设备的尺寸。响应式设计的核心在于灵活性和可扩展性，它允许网页在不同设备上都能够提供一致且优化的用户体验。

5.1.2 响应式设计的技术和实现方法

使用媒体查询

媒体查询是CSS3中的一个特性，它允许页面根据不同的显示设备进行样式适应。通过定义一个或多个媒体查询，开发者可以为不同屏幕尺寸和分辨率指定特定的CSS规则。下面是一个简单的媒体查询代码示例：

/* 基础样式 */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

/* 当屏幕宽度小于或等于600px时 */
@media (max-width: 600px) {
  .container {
    padding: 15px;
  }
}

/* 当屏幕宽度大于600px且小于或等于1024px时 */
@media (min-width: 601px) and (max-width: 1024px) {
  .container {
    padding: 20px;
  }
}

在上述CSS代码中， .container 类定义了一个基本的布局，但当屏幕宽度小于600px时，会增加内边距至15px；当屏幕宽度在601px到1024px之间时，内边距被设置为20px。这样确保了在不同尺寸的设备上布局都能够合理地展示。

流式布局

流式布局是一种基于百分比而非固定宽度的布局方式。元素的大小被指定为相对于其父容器的百分比，使得元素能够灵活地调整尺寸。下面是一个简单的流式布局示例：

<div class="header">
  <h1>网站标题</h1>
</div>

<div class="content">
  <p>这里是内容区域，无论屏幕大小如何，内容区域都会相应地调整。</p>
</div>

<div class="footer">
  <p>版权信息</p>
</div>

.header, .content, .footer {
  width: 100%;
}

/* 内容区域根据屏幕宽度变化 */
.content {
  min-height: 300px;
}

在这个例子中， header 、 content 和 footer 元素都设置了宽度为100%，这使得它们能够根据屏幕大小进行伸缩。内容区域有一定的最小高度，以保证内容展示的连贯性。

弹性图片

弹性图片是响应式设计中的另一个重要元素，它意味着图片能够根据父容器的尺寸调整大小，而不会失真或超出容器边界。以下是实现弹性图片的一个基本示例：

img {
  max-width: 100%;
  height: auto;
}

这段CSS代码中， max-width: 100% 确保了图片宽度不会超过其父容器的宽度，而 height: auto 保持图片的宽高比不变，使图片能够根据屏幕大小适当缩放。

5.2 用户测试流程与作用

用户测试是一种收集用户在使用产品过程中反馈的方法，它帮助设计者和开发者理解用户的需求和行为，从而优化产品设计。

5.2.1 用户测试的概念和重要性

用户测试通常涉及观察和收集用户在使用产品的实际体验数据。测试可以是定性的（如用户访谈、焦点小组）也可以是定量的（如问卷调查、A/B测试）。通过用户测试，团队能够发现设计中的问题点，验证设计假设，并对产品进行迭代改进。

5.2.2 用户测试的方法和流程

用户测试的过程通常包含以下几个步骤：

设定测试目标

在开始测试之前，确定明确的测试目标是至关重要的。这可能包括对特定功能的测试、网站整体体验的测试或者用户与产品的交互流程的测试。

选择测试用户

选择合适的用户样本进行测试是获得有效反馈的关键。用户应该代表目标用户群体，最好能够覆盖不同的年龄、性别和使用经验。

制定测试计划

测试计划应该包括测试的场景、任务、问题列表以及所需的工具和资源。这有助于确保测试的系统性和一致性。

执行测试

测试的执行过程中，观察用户如何完成特定任务，并记录他们的行为、情绪和任何遇到的问题。这可以通过远程测试或现场观察的形式进行。

分析和解读测试结果

收集到的数据需要被仔细分析以提取有意义的见解。团队成员应该坐下来讨论观察到的问题和反馈，并确定改进的方向。

实施改进

基于测试结果，团队将制定改进计划并实施。这可能涉及到对产品的设计、功能或内容的修改。然后，重复测试和评估过程以确保改进是有效的。

5.2.3 用户测试示例

下面是一个用户测试的简单示例流程图，展示了测试的基本步骤和逻辑：

graph TD
A[设定测试目标] --> B[选择测试用户]
B --> C[制定测试计划]
C --> D[执行测试]
D --> E[分析和解读测试结果]
E --> F[实施改进]

通过上述流程图，我们可以清晰地看到用户测试的每个步骤，并理解它们之间的逻辑关系。这有助于团队跟踪整个测试过程，并确保每个环节都得以妥善执行。

总结来说，响应式设计和用户测试是现代网页设计中至关重要的两个方面。它们确保网站能够在不同设备上提供优质的用户体验，并通过用户反馈进行持续的改进。掌握这两者的技术和方法，对于任何希望提供卓越用户体验的设计师和开发者来说，都是不可或缺的。

6. 设计工具的选择与使用和视觉层次

随着技术的不断进步，网页设计和UI制作已经变得更加复杂和多样化。在众多工具和方法中，正确地选择和使用设计工具，以及构建视觉层次是设计师必须掌握的技能。在本章中，我们将深入探讨设计工具的选择与使用，以及如何通过视觉层次引导用户的注意力和提升设计的可访问性。

6.1 设计工具的选择与使用

设计师使用的工具从简单的铅笔和纸张发展到了复杂的数字软件。根据不同的项目需求和设计师的个人偏好，选择合适的工具至关重要。

6.1.1 常见的网页设计工具

Adobe Photoshop ：以其强大的图像编辑和图层管理功能而闻名，适合制作图像密集型的网页。
Sketch ：专为UI设计而开发，以其简洁的界面和矢量工具受到许多设计师的喜爱。
Adobe XD ：提供快速的原型设计和交互动画，非常适合响应式网页设计。
Figma ：作为一款基于云端的设计工具，它支持实时协作和版本控制。
Zeplin ：一个设计与开发之间的桥梁，可以帮助团队轻松共享设计规格和资源。

6.1.2 设计工具的选择和使用技巧

选择合适的工具需要考虑以下因素：

项目需求 ：理解项目需求是选择工具的前提。例如，如果你需要创建大量交互原型，那么Adobe XD或Figma可能更适合。
团队协作 ：团队成员的技术栈和协作方式也决定了工具的选择。Zeplin等协作工具能够促进设计与开发的沟通。
学习曲线 ：一些工具虽然功能强大，但可能需要较长的学习时间。对于初学者来说，选择易于上手的工具会更加高效。
预算和成本 ：商业软件通常需要购买许可，而像Figma这样的在线工具则采用订阅模式，费用可能更适合预算有限的小团队。

6.2 视觉层次与注意力引导

视觉层次是设计中的一种艺术，其目的在于通过视觉元素来组织和排列信息，使用户能够以最自然的方式理解和使用界面。

6.2.1 视觉层次的定义和重要性

视觉层次是指在设计中通过大小、颜色、对比度、位置等视觉元素的组织和应用，来强调信息的优先级和重要性。一个良好的视觉层次可以帮助用户快速抓住重点，理解内容结构，减少认知负担。

6.2.2 实现视觉层次的方法和技巧

大小：通过不同大小的元素，我们可以引导用户的视线。通常，较大的元素会首先被注意到。
颜色：颜色的对比和强调可以用来突出关键信息。例如，使用高对比度的文本颜色可以立即吸引用户的注意力。
位置：在版面上合理安排元素的位置，可以控制视觉流程。重要信息通常放在视野的中心或顶部位置。
间隔与对齐 ：适当的间隔可以帮助分组和区分信息，而对齐则可以提供清晰的视觉导向。

6.3 可访问性设计的考虑

可访问性设计关注的是确保所有用户，包括有障碍人士，都能有效地使用和访问设计作品。

6.3.1 可访问性设计的概念和重要性

概念：可访问性设计涉及到使产品或服务对尽可能多的用户可用，包括那些有视力、听力或运动障碍的用户。
重要性 ：考虑到全球用户群体的多样性，可访问性设计不仅是一种道德责任，也是扩大产品市场覆盖和遵守相关法律法规的要求。

6.3.2 实现可访问性设计的方法和技巧

文本可读性 ：确保文本大小、颜色对比度和字体选择都有助于阅读。
替代文本 ：为所有非文本内容提供替代文本，以便屏幕阅读器可以朗读。
键盘导航 ：确保所有交互都可以通过键盘完成，以帮助那些不能使用鼠标的用户。
明确的指示 ：使用清晰的标签和说明，帮助用户理解如何操作。

通过以上章节的讨论，我们可以看到设计工具的选择与使用、视觉层次的构建和可访问性设计的考虑对于网页设计和UI制作的重要性。每一部分都不可或缺，需要设计师综合运用不同的技巧和工具，创造出既美观又实用的设计作品。在下一章中，我们将继续探讨网页设计和开发的另一个重要方面：前后端开发流程及其协同工作。

本文还有配套的精品资源，点击获取