人人都是设计师零基础学网页UI设计

第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