第1章 网站UI项目管理规范 1
本章简介 2
1.1互联网网站的分类 2
1.2构成网页的元素 8
1.2.1文字 8
1.2.2图像 9
1.2.3多媒体 11
1.2.4交互元素 12
1.3网页UI设计的基本步骤 13
1.3.1设计页面的前期准备 13
1.3.2使用参考线绘制大致结构 15
1.3.3绘制内容 16
1.3.4输出切片 16
1.4网页设计原则及规范 17
1.4.1布局实用原则 17
1.4.2网页配色实用原则 21
1.4.3设计的四大基本原则 24
1.5网页切片输出 24
1.5.1切片概述 25
1.5.2规则切片 26
1.5.3手动切片 27
1.5.4输出、保存文件设置 30
1.5.5编辑切片 31
1.5.6常用切片技巧 32
本章总结 33
第2章 联想官网——营销型企业网站视觉设计 35
本章简介 36
2.1联想官网——营销型企业网站设计需求概述 36
2.1.1项目名称 37
2.1.2项目定位 37
2.1.3联想集团企业背景 37
2.1.4网站功能要求 37
2.1.5网站风格要求 38
2.2营销型企业网站相关理论讲解 38
2.2.1营销型企业网站概述 38
2.2.2营销型企业网站和普通企业网站的区别 38
2.2.3需要营销型网站的企业 40
2.3联想官网——营销型企业网站设计需求分析 40
2.3.1竞争对手分析 40
2.3.2目标用户分析 43
2.4联想官网——营销型企业网站设计规划 43
2.4.1界面整体风格定位 43
2.4.2首页界面布局分析 44
2.4.3界面色彩定位 44
2.5联想官网——营销型企业网站视觉设计思路 45
2.5.1技术要点 45
2.5.2大体框架、色调 45
2.5.3素材准备 47
2.5.4顶部设计 47
2.5.5设计导航 48
2.5.6设计主要banner 48
2.5.7设计新品推荐等内容区 49
2.5.8设计版权区 49
2.5.9切片输出 50
本章总结 51
第3章 天猫商城——电商网站视觉设计 53
本章简介 54
3.1电商网站概述 54
3.1.1什么是电商网站 54
3.1.2电商网站的功能 56
3.2从电商出发——界面设计前的准备 59
3.2.1销售的是什么 59
3.2.2需要的功能 60
3.2.3目标用户群 60
3.3电商网站主要页面设计技巧 61
3.3.1首页设计 61
3.3.2列表页设计 70
3.3.3商品详情页设计 71
3.3.4其他页面 71
3.4天猫商城——电商网站首页设计 72
3.4.1技术要点 73
3.4.2划分大致布局 73
本章总结 76
第4章 三星天猫旗舰店——电商网站店铺视觉营销设计 77
本章简介 78
4.1三星天猫旗舰店——电商网站店铺装修需求描述 78
4.1.1项目名称 78
4.1.2项目描述 78
4.1.3界面要求 78
4.2电商网站店铺装修相关理论 79
4.2.1店铺首页 79
4.2.2店铺详情页 87
4.3三星天猫旗舰店——电商网站店铺装修需求分析 92
4.3.1竞争对手分析 92
4.3.2用户（消费群体）分析 94
4.4三星天猫旗舰店——电商网站店铺装修思路 95
4.4.1技术要点 96
4.4.2店铺首页设计 96
本章总结 99
第5章 Apple Watch百度推广页——Landing Page设计与优化 101
本章简介 102
5.1 Landing Page概述 102
5.1.1 Landing Page的定义 103
5.1.2互联网营销的目标 103
5.1.3用户到达Landing Page的行为 105
5.2 Landing Page的类型 107
5.2.1交易型Landing Page 107
5.2.2参考型LandingPage 107
5.2.3压缩型Landing Page 108
5.3 Landing Page的内容选择 109
5.3.1明确核心目的 109
5.3.2明确目标人群 110
5.3.3分析目标人群的特征 110
5.3.4确定卖点和主题 111
5.3.5整理、组织内容 111
5.4 Landing Page的设计方法 115
5.4.1 Landing Page页面结构概述 115
5.4.2 Landing Page页面元素布局 119
5.4.3 Landing Page页面颜色配置 128
5.5返利网Landing Page的分析与优化 131
5.5.1案例描述 131
5.5.2案例分析 131
5.6返利模块优化 133
5.7 Apple Watch Landing Page的设计分析 133
5.7.1需求说明 134
5.7.2实现流程 135
5.7.3苹果Landing Page分析 135
本章总结 137
第6章 英雄联盟——游戏类网站改版设计 139
本章简介 140
6.1英雄联盟——游戏类网站改版项目背景 140
6.2网站改版的好处及注意事项 141
6.2.1网站改版的好处 141
6.2.2网站改版的注意事项 142
6.3英雄联盟——游戏类网站改版项目分析 143
6.3.1风格定位 143
6.3.2对老官网进行分析 143
6.3.3对新游戏UI进行分析 145
6.4英雄联盟——游戏类网站改版项目设计规划 146
6.4.1布局规划 146
6.4.2色调规划 147
6.5英雄联盟——游戏类网站改版项目首页视觉设计 148
本章总结 150
第7章 我秀网“开学季”专题页视觉设计 151
本章简介 152
7.1我秀网“开学季”专题页视觉设计项目需求 152
7.1.1项目名称 152
7.1.2项目背景 152
7.1.3项目功能要求 153
7.2专题页视觉设计相关理论 154
7.2.1专题页和传统产品页面的视觉差异 154
7.2.2专题页的结构 155
7.2.3专题页的组成 158
7.3我秀网“开学季”专题页视觉设计项目需求分析 159
7.3.1竞争对手分析 159
7.3.2用户分析 161
7.4我秀网“开学季”专题页视觉设计项目设计规划 161
7.4.1界面整体结构 161
7.4.2页面风格 162
7.5项目实现思路 162
7.5.1整体设计风格定位 162
7.5.2素材搜集 163
7.5.3首屏展示内容 164
7.5.4次屏展示内容 165
7.5.5版权区设计 165
7.5.6切片输出 165
本章总结 167
第8章 北大青鸟信息管理系统——企业OA系统界面设计 169
本章简介 170
8.1北大青鸟信息管理系统——企业OA系统界面设计项目需求概述 170
8.1.1项目名称 171
8.1.2项目背景 171
8.1.3项目要求 171
8.2企业OA系统相关理论知识 172
8.2.1企业OA系统包含的常规内容 172
8.2.2企业OA的优势 173
8.3像产品经理一样进行需求分析 174
8.3.1用户分析 174
8.3.2项目设计规划 174
8.4北大青鸟OA系统——企业OA系统界面设计项目实现思路 176
8.4.1技术要点 177
8.4.2绘制登录页效果图 177
8.4.3绘制主界面效果图 177
本章总结 179