网站UI商业项目实战——令人惊叫的网页是这样炼成的！

注重实用技能培养——打造“互联网+”UI 设计师 突出创意设计训练——授人以渔而不只是作品临摹

真实商业项目驱动——行业知识与专业设计相呼应 学习体验时尚前卫——传统教材与二维码革命性携手

随着移动互联技术的飞速发展，“互联网+”时代已经悄然到来，这自然催生了各行业、企业对UI设计人才的大量需求。与传统美工、设计人员相比，新“互联网+”时代对UI设计师提出了更高的要求，传统美工、设计人员已无法胜任。在这样的大环境下，这套“互联网UI设计师”系列教材应运而生，它旨在帮助读者朋友快速成长为符合“互联网+”时代企业需求的优秀UI设计师。

这套教材是由课工场（kgc.cn）的UI/UE教研团队研发的。课工场是北大青鸟集团下属企业北京课工场教育科技有限公司推出的互联网教育平台，专注于互联网企业各岗位人才的培养。平台汇聚了数百位来自知名培训机构、高校的顶级名师和互联网企业的行业专家，面向大学生以及需要“充电”的在职人员，针对与互联网相关的产品、设计、开发、运维、推广和运营等岗位，提供在线的直播和录播课程，并通过遍及全国的几十家线下服务中心提供现场面授以及多种形式的教学服务，且同步研发出版最新的课程教材。

课工场为培养互联网UI设计人才设立了UI/UE设计学院及线下服务中心，提供各种学习资源和支持，包括：

　现场面授课程

　在线直播课程

　录播视频课程

　案例素材下载

　学习交流社区

　作业提交批改系统

　QQ讨论组（技术、就业、生活）

以上所有资源请访问课工场UI/UE学院：kgc.cn/uiue。

■ 本套教材特点

（1）课程高端、实用——拒绝培养传统美工。

　培养符合“互联网+”时代需求的高端UI设计人才，包括移动UI设计师、网页UI设计师、平面UI设计师。

　除UI设计师所必须具备的技能外，本课程还涵盖网络营销推广内容，包括：网络营销基本常识、符合SEO标准的网站设计、Landing Page设计优化、营销型企业网站设计等。

　注重培养产品意识和用户体验意识，包括电商网站设计、店铺设计、用户体验、交互设计等。

　学习W3C相关标准和设计规范，包括HTML5/CSS3、移动端Android/iOS相关设计规范等内容。

（2）真实商业项目驱动——行业知识、专业设计一个也不能少。

　与知名4A公司合作，设计开发项目课程。

　几十个实训项目，涵盖电商、金融、教育、旅游、游戏等行业。

　不仅注重商业项目实训的流程和规范，还传递行业知识和业务需求。

（3）更时尚的二维码学习体验——传统纸质教材学习方式的革命。

　每章提供二维码扫描，可以直接观看相关视频讲解和案例操作。

　课工场UI/UE学院（kgc.cn）开辟教材配套版块，提供素材下载、学习社区等丰富的在线学习资源。

■ 读者对象

（1）初学者：本套教材将帮助你快速进入互联网UI设计行业，从零开始，逐步成长为专业UI设计师。

（2）设计师：本套教材将带你进行全面、系统的互联网UI设计学习，传递最全面、科学的设计理论，提供实用的设计技巧和项目经验，帮助你向互联网方向迅速转型，拓宽设计业务范围。

课工场出品（kgc.cn）

第1章
    网站UI项目管理规范
本章简介 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章
    联想官网——营销型企业网站视觉设计
本章简介 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章
    天猫商城——电商网站视觉设计
本章简介 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章
   　三星天猫旗舰店——电商网站店铺视觉
营销设计
本章简介 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设计与优化
本章简介 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　参考型Landing Page 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章
   　英雄联盟——游戏类网站改版设计
本章简介 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章
   　我秀网“开学季”专题页视觉设计
本章简介 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系统
界面设计
本章简介 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

1. 网站前端技术案例教程（HTML+CSS+JavaScript）（第二版） [黄华升]
2. Web前端开发项目化教程（微课版） [主编　郭立文　王洪波]
3. Unity应用开发与实战（微课版） [主 编 程永恒]
4. 深入浅出OpenHarmony——架构、内核、驱动及应用开发全栈 [李传钊 著]
5. Python开发实践教程（第二版） [于京 陈平生 编著]
6. Java Web开发技术任务驱动式教程 [金静梅]
7. HTML5+CSS3前端开发项目式教程（微课版） [主编 谭卫 徐文义]
8. iOS项目开发实战 [主编 赵善龙 刘俊驰]
9. UI设计与开发 [主编　李昀芸　宋蓓蓓　王悦娟]
10. ASP.NET（C#）网站开发（第二版） [主编 张志明 王辉]
11. ARM Cortex-M体系架构与接口开发实战 [林庆峰 等 编著]
12. 基于Android平台的移动开发技术 [主编 徐硕博 黄卫东 贾雁]
13. Android 应用开发项目实战 [主编 梁 琨 朱冰鸿]
14. Java Web开发技术与项目实战 [主编 罗如为]
15. Android开发基础教程 [黄日胜 谢志伟 杨凌 杨琳芳]
16. Android项目开发实战 [赵善龙 李旭东]
17. Hadoop大数据开发 [主 编 刘春阳 张学龙 刘丽军]
18. Web前端开发从学到用完美实践HTML5+CSS3+JavaScript+jQuery+AJAX+AngularJS（第2版） [阮晓龙]
19. 嵌入式Linux开发技术基础 [主编 伍德雁]
20. 嵌入式应用Qt_C++传感数据采集开发实训教程 [主编 刘和文 文燕 谢忠敏]
21. 基于ARM Cortex-M4内核的物联网/嵌入式系统开发教程 [主编 刘雯]
22. Android应用开发基础教程 [主编 巫湘林]
23. SEO网站权重深度解析 [主编 肖睿]
24. HTML5游戏开发技术—Egret Engine [辛子俊 林雪莹]
25. 网站前端技术案例教程（HTML+CSS+JavaScript） [黄华升]
26. Hadoop & Spark大数据开发实战 [主编　肖睿　雷刚跃]
27. Java Web开发实战 [主编 肖睿　高海波　徐申]
28. MySQL数据库开发实战 [肖睿　訾永所　侯小毛]
29. PHP安全开发案例教程 [唐乾林 李治国]
30. 大型网站架构与自动化运维 [主编　肖睿　罗保山　刘丽军]