【现货速发】零基础学网页UI设计

随着信息量不断增加，人们的生活越来越离不开软件，提到软件就不得不说图形用户界面。图形用户界面是用户与各种机器和设备进行交互的平台，一款好的用户界面设计应该同时具备美观与易操作两个特点。

零基础学网页UI设计主要采用理论知识与操作案例相结合的方法，介绍使用Photoshop CC 2019进行网页UI设计所需的基础知识和操作技巧。

内容安排

零基础学网页UI设计共分为5章，采用少量基础知识与大量应用案例相结合的方法，循序渐进地介绍使用Photoshop CC 2019进行网页UI设计的操作方法与技巧。各章的具体内容如下。

第1章　网页UI设计初体验：主要介绍UI设计相关的理论知识，包括了解网页UI、网页UI设计分类、网页UI的构成元素、网页UI制作流程、网页UI的设计风格以及设计网页常用软件等内容。这些知识可以帮助读者初步了解UI设计及相关软件，为更深入的学习建立良好的开端。

第2章　网页UI中的元素设计初体验：主要介绍网页UI中元素设计的知识和相应的制作技巧，包括网页中的文字设计、网页中的图片设计、网页中的图标设计、网页中的Logo设计和网页中的导航设计等内容。希望通过本章的学习，读者能掌握网页UI的元素设计，这对以后的学习至关重要。

第3章　网页布局与版式设计：主要介绍如何设计网页中的布局与版式，包括了解网页布局、常见的网页布局方式、网页布局形式的艺术表现、网页留白设计的8个关键点、移动端网页元素设计和移动端网页的布局设计等内容。经过本章的学习，读者应该熟悉网页常用布局方式的设计要点。

第4章　配色设计在网页中的作用：主要介绍一些网页配色设计相关的基础知识和操作技巧，包括理解色彩、网页配色的基本要素、网页的基础配色方法、网页中的文字配色设计、网页元素的色彩搭配和网页配色技巧等内容。

第5章　网页中的广告设计：主要介绍网页界面中的广告设计样式和设计思路，包括网页广告概述、移动端网页常见的广告样式、移动端网页广告的设计思路、PC端网页广告的常用样式和PC端网页广告的特点等内容。本章的重点内容是网页广告的设计思路和特点。

零基础学网页UI设计特点

零基础学网页UI设计采用理论知识与操作案例相结合的方式，全面介绍网页UI设计的设计规范和设计原则。

• 通俗易懂的语言

零基础学网页UI设计采用通俗易懂的语言全面地介绍网页UI设计所需的基础知识和操作技巧，确保读者能够理解并掌握相应的功能与操作。

• 基础知识与实战案例结合

零基础学网页UI设计摈弃了传统教科书式的纯理论教学，采用少量基础知识和大量实战案例相结合的讲解模式。书中所使用的案例都具有很强的商业性和专业性，不仅能够帮助读者强化知识点，而且对开拓思路和激发创造性有很大的帮助。

• 技巧和知识点的归纳总结

零基础学网页UI设计在基础知识和实战案例的讲解过程中给出了大量的提示和技巧，这些信息都是根据作者长期的UI设计经验与教学经验归纳出来的，可以帮助读者更准确地理解和掌握相关的知识点和操作技巧。

• 二维码微视频和PPT课件等辅助学习

为了拓宽读者的学习渠道，增强读者的学习兴趣，零基础学网页UI设计“练一练”栏目配有对应二维码微视频。读者扫描下方二维码可下载和使用零基础学网页UI设计实例相关素材、教学微视频和PPT课件，使读者能将学到的知识快速应用于实际工作中。同时，零基础学网页UI设计提供的教学PPT课件可方便老师轻松教学。

微视频 素材 PPT课件

读者对象

零基础学网页UI设计适合UI设计爱好者和想进入UI设计领域的读者朋友，以及设计专业的大中专学生阅读，同时对专业设计人员也有很高的参考价值。希望读者通过对零基础学网页UI设计的学习，能够早日成为优秀的UI设计师。

零基础学网页UI设计在写作过程中力求严谨，但由于时间有限，疏漏之处在所难免，望广大读者批评指正。

编者

现如今，各种通信与网络连接设备和大众生活的联系日益密切。UI是用户与机器设备进行交互的平台，人们对各种类型UI的要求越来越高，从而推动了UI设计的飞速发展。为适应广大UI设计者的需求，《零基础学网页UI设计》介绍如何设计既美观又符合要求的UI。 《零基础学网页UI设计》主要依据初学者学习UI设计的普遍规律安排内容，由浅入深地讲解初学者需要掌握和感兴趣的基础知识与操作技巧，全面解析各个知识点。全书结合实例进行讲解，详细介绍了制作的步骤和软件的应用技巧，使读者能轻松地学习并掌握。 《零基础学网页UI设计》从学习者的角度考虑，让不同程度的读者更有针对性地学习内容，有效帮助UI设计爱好者提高操作效率。 《零基础学网页UI设计》的知识点结构清晰、内容针对性强、实例精美实用，适合大部分UI设计爱好者与设计专业的大中专学生阅读。另外，随书附赠教学PPT课件、所有案例的教学微视频和素材，用于补充书中遗漏的细节内容，方便读者学习和参考。学者需要掌握和感兴趣的基础知识与操作技巧，全面解析各个知识点。全书结合实例进行讲解，详细介绍了制作的步骤和软件的应用技巧，使读者能轻松地学习并掌握。 零基础学网页UI设计从学习者的角度考虑，让不同程度的读者更有针对性地学习内容，有效帮助UI设计爱好者提高操作效率。 零基础学网页UI设计的知识点结构清晰、内容针对性强、实例精美实用，适合大部分UI设计爱好者与设计专业的大中专学生阅读。另外，随书附赠教学PPT课件、所有案例的教学微视频和素材，用于补充书中遗漏的细节内容，方便读者学习和参考。

第1章　网页UI设计初体验 001

1.1?了解网页UI 002

1.1.1?什么是网站 002

1.1.2?什么是网页UI设计 002

1.2?网页UI设计分类 003

1.2.1?按浏览终端不同进行划分 003

1.2.2?按内容功能不同进行划分 004

1.3?网页UI的构成元素 008

1.3.1?网页中的配色设计 008

1.3.2?网页中的文字 009

1.3.3?网页中的图像 009

1.3.4?网页中的富媒体 010

1.4?网页UI制作流程 011

1.4.1?前期策划 011

1.4.2?交互设计 012

1.4.3?视觉设计 013

1.4.4?开发测试 014

1.4.5?运营维护 015

1.5?网页UI的设计风格 015

1.5.1?拟物化风格 015

1.5.2?扁平化风格 016

1.5.3?极简化风格 017

1.5.4?3D风格 017

1.5.5?插画风格 018

1.5.6?无边框风格 019

1.5.7?纵向分割风格 019

1.5.8?超级版头风格 020

1.6?设计网页常用软件 020

1.6.1?Photoshop CC 021

1.6.2?Axure RP 9 022

1.6.3?Adobe XD 023

1.6.4?Px Cook 024

1.7?举一反三—分析运动服饰类网页 025

1.8?本章小结 025

第2章　网页UI中的元素设计初体验 026

2.1?网页中的文字设计 027

2.1.1?文字在网页中的应用 027

2.1.2?网页中文字的设计规范 030

2.2?网页中的图片设计 034

2.2.1?常用图片格式 034

2.2.2?图片模式 035

2.3?网页中的图标设计 036

2.3.1?认识网页图标 036

2.3.2?移动端图标设计 038

2.3.3?网页中的按钮 043

2.4?网页中的Logo设计 044

2.4.1?网页Logo的表现形式 044

2.4.2?网页Logo的设计规范 045

2.4.3?网页Logo的设计特点 049

2.5?网页中的导航设计 050

2.5.1?网页导航概述 050

2.5.2?导航菜单在网页中的位置布局 051

2.6?举一反三—设计制作一款简约Logo 059

2.7?本章小结 059

第3章　网页布局与版式设计 060

3.1? 了解网页布局 061

3.1.1?网页布局的目的 061

3.1.2?网页布局的操作顺序 063

3.2?常见的网页布局结构 063

3.2.1?“国”字型 063

3.2.2?拐角型 064

3.2.3?标题正文型 065

3.2.4?左右分割型 065

3.2.5?上下分割型 065

3.2.6?综合型 067

3.2.7?封面型 068

3.3?网页布局形式的艺术表现 069

3.3.1?分割构成 069

3.3.2?对称构成 071

3.3.3?平衡构成 072

3.4?网页留白设计的8个关键点 076

3.5?移动端网页元素设计 078

3.5.1?界面尺寸 078

3.5.2?组件尺寸规范 079

3.5.3?移动端网页的边距设计 080

3.6?移动端网页的布局设计 083

3.6.1?列表式布局 083

3.6.2?陈列馆式布局 086

3.6.3?宫格式布局 090

3.6.4?卡片式布局 091

3.7?举一反三—设计一款三栏式布局网页 091

3.8?本章小结 092

第4章　配色设计在网页中的作用 093

4.1?理解色彩 094

4.1.1?色彩属性 094

4.1.2?颜色模式 095

4.1.3?Web安全颜色 098

4.1.4?十六进制颜色码 098

4.2?网页配色的基本要素 100

4.2.1?网页主题色 100

4.2.2?网页背景色 100

4.2.3?网页辅助色 101

4.2.4?网页强调色 101

4.3?网页的基础配色方法 104

4.3.1?单色 104

4.3.2?类似色 104

4.3.3?补色 104

4.3.4?邻近补色 105

4.3.5?无彩色 105

4.4?网页中的文字配色设计 106

4.4.1?背景与文字配色 106

4.4.2?链接文字 109

4.5?网页元素的色彩搭配 110

4.5.1?网页Logo和广告配色 110

4.5.2?网页导航配色 112

4.6?网页配色技巧 113

4.6.1?突出主题的配色技巧 113

4.6.2?整体融和的配色技巧 117

4.6.3?整理出色的配色方案 119

4.7?举一反三—一款居家生活网页的配色设计 122

4.8?本章小结 122

第5章　网页中的广告设计 123

5.1?网页广告概述 124

5.1.1?网页广告概念 124

5.1.2?网页广告的特征 124

5.1.3?设计出色的网页广告样式 125

5.2?移动端网页常见的广告样式 126

5.2.1?Banner广告 126

5.2.2?开屏广告 130

5.2.3?信息流广告 130

5.2.4?插屏广告 131

5.2.5?视频贴片广告 135

5.3?移动端网页广告的设计思路 135

5.3.1?Banner广告的设计思路 136

5.3.2?开屏广告的设计思路 136

5.3.3?信息流广告的设计思路 137

5.3.4?插屏广告的设计思路 138

5.3.5?视频贴片广告的设计思路 139

5.4?PC端网页广告的常用样式 139

5.4.1?文字广告 139

5.4.2?Banner广告 140

5.4.3?对联式浮动广告 143

5.4.4?网页漂浮广告 143

5.4.5?弹出广告 143

5.5?PC端网页广告的特点 144

5.5.1?传播范围广泛 145

5.5.2?富有创意、感官性强 145

5.5.3?直达产品核心消费群 145

5.5.4?节省成本 146

5.5.5?具有强烈的互动性 146

5.5.6?准确统计广告效果 147

5.6?举一反三—设计制作APP开屏广告 150

5.7?本章小结 150

现如今，各种通信与网络连接设备和大众生活的联系日益密切。UI是用户与机器设备进行交互的平台，人们对各种类型UI的要求越来越高，从而推动了UI设计的飞速发展。为适应广大UI设计者的需求，《零基础学网页UI设计》介绍如何设计既美观又符合要求的UI。 《零基础学网页UI设计》主要依据初学者学习UI设计的普遍规律安排内容，由浅入深地讲解初学者需要掌握和感兴趣的基础知识与操作技巧，全面解析各个知识点。全书结合实例进行讲解，详细介绍了制作的步骤和软件的应用技巧，使读者能轻松地学习并掌握。 《零基础学网页UI设计》从学习者的角度考虑，让不同程度的读者更有针对性地学习内容，有效帮助UI设计爱好者提高操作效率。 《零基础学网页UI设计》的知识点结构清晰、内容针对性强、实例精美实用，适合大部分UI设计爱好者与设计专业的大中专学生阅读。另外，随书附赠教学PPT课件、所有案例的教学微视频和素材，用于补充书中遗漏的细节内容，方便读者学习和参考。学者需要掌握和感兴趣的基础知识与操作技巧，全面解析各个知识点。全书结合实例进行讲解，详细介绍了制作的步骤和软件的应用技巧，使读者能轻松地学习并掌握。 零基础学网页UI设计从学习者的角度考虑，让不同程度的读者更有针对性地学习内容，有效帮助UI设计爱好者提高操作效率。 零基础学网页UI设计的知识点结构清晰、内容针对性强、实例精美实用，适合大部分UI设计爱好者与设计专业的大中专学生阅读。另外，随书附赠教学PPT课件、所有案例的教学微视频和素材，用于补充书中遗漏的细节内容，方便读者学习和参考。

读者对象

零基础学网页UI设计适合UI设计爱好者和想进入UI设计领域的读者朋友，以及设计专业的大中专学生阅读，同时对专业设计人员也有很高的参考价值。

★★采用案例带动法引导读者学习。

★★针对UI设计中的各种难点逐一解析。

★★案例素材 微视频 PPT课件。