UI设计基础案例教程

UI设计基础案例教程
本书围绕UI行业的发展动态，结合设计案例详细阐述从“为什么这样设计”到“怎么设计”的教学过程。为免去教师在备课的过程中花大量时间去寻找合适案例之苦,编著者根据自己多年的UI设计授课经验，精心选择适合职业院校学生学习和制作，且在实际工作中非常有用的案例来组织编写。在设计案例实践中强调创意思维的力量，让读者获得举一反三的学习能力。
本课程要求学生紧跟时代需求的界面设计理念与方法，了解UI设计行业及UI设计师的工作内容，理解UI设计的基础理论知识，掌握图标设计、网页界面设计、App界面设计等设计方法和技巧，在UI设计中融入用户的需求，完成符合市场需求的产品设计方案。
本书的主要特点如下。
(1) 理论和实践相结合,以先进教学理念为指导。本书以项目为基线，每个项目都精选了一些在工作过程中比较常用的、能引起学生浓厚兴趣的案例赏析和设计，通过任务驱动的方式,让学生在任务实施过程中理解和掌握理论知识，并能应用到具体作品设计的实现过程中。
(2) 案例的选择以培养学生的应用能力为目的。本书注重对学生专业技能、动手能力的培养，循序渐进地讲解核心知识点，合理安排具有代表性的示例，着重介绍一些设计构思过程及制作技巧,从而具有很强的易读性、实用性和可操作性。
(3) 融“教、学、做”于一体。本书中的主要案例和实训项目既有设计分析,又有详细的操作步骤，并配以知识点讲解。本书从案例的构思到实现循序渐进地进行详细讲解，让读者可以按照书本的制作步骤完成作品的制作,也能在轻松愉快的设计过程中掌握知识点并得以应用,在实践中培养应用能力和动手能力。
(4) 微课教学。本书精选部分知识点和案例录制了微课，对知识点和案例做了详细的讲解，可供学生反复观看、查漏补缺、强化巩固，能更好地满足学生的个性化自主学习的需求，是对课堂学习的有效拓展。
本书由方旭华、王彩琴、陈超颖、陈苏闵编著。由于编著者水平有限，不足之处在所难免，恳请广大读者指正，以便修订时更加完善。

编著者
2021年1月

本书采用“采用案例教学，以教师为主导、学生为主体”的编写指导思想，以实用为目的，根据高等职业教育“理论够用，重在实践”的教学特点，注重对学生专业技能、动手能力的培养。对知识点进行了细致的取舍和编排，融通俗性、实用性和技巧性于一身。全书共由UI设计基础、UI配色基础、图标设计、导航设计、网页广告设计、网站界面设计、App界面设计案例等章节组成。每个章节由若干个学习案例组成，每个案例录制微课供学生自学。

方旭华，女，浙江交通职业技术学院副教授，1999年工作以来一直工作于教学线，有着丰富的教学阅历和经验，近五年来曾任教多媒体、平面设计、动画设计、用户界面设计等课程的教学工作。主持了浙江省交通厅课题《基于物联网关键技术平台的智慧校园系统开发》和《高速铁路运输对公路运输的影响分析》。

UI设计基础案例教程

第1章UI设计基础1
1.1初识UI设计1
1.1.1什么是UI设计1
1.1.2UI设计常用名词2
1.1.3UI设计的分类2
1.2初识设计行业5
1.2.1UI行业现状5
1.2.2未来UI设计的发展趋势6
1.2.3UI设计师的发展方向8
1.3UI设计工作流程10
1.3.1自主研发产品的开发流程10
1.3.2外包公司开发流程11
1.3.3网站推出流程11
第2章图标设计13
2.1图标的概念13
2.2图标、标志和标识的区别13
2.3图标的分类15
2.4图标的风格16
2.5图标设计的原则17
2.6图标制作17
2.6.1像素图标制作17
2.6.2剪影图标制作22
2.6.3拟物化图标制作30
2.6.4扁平化图标制作52
第3章导航设计57
3.1网页导航的概念57

UI设计基础案例教程

目录

3.2导航的分类57
3.2.1按表现形式划分57
3.2.2按作用划分58
3.2.3按设计模式划分59
3.2.4 App导航分析65
3.3网站导航设计71
3.3.1注意事项和设计原则72
3.3.2导航创意73
3.4网站导航赏析77
3.4.1真功夫77
3.4.2汇源果汁77
3.4.3可口可乐77
3.4.4李宁78
3.4.5乐途78
3.4.6相宜本草79
3.4.7露得清79
3.5导航制作案例80
3.5.1门牌导航的制作80
3.5.2苹果下载按钮的制作90
3.6课堂实训97
3.6.1新浪微博导航的制作97
3.6.2苹果导航栏的制作102
3.7拓展练习103
3.8知识拓展104
3.8.1二分环的制作104
3.8.2钢笔工具的运用108
第4章网络广告设计112
4.1网络广告概述112
4.2网络广告设计的目标和创意114
4.2.1网络广告设计的目标114
4.2.2网络广告的创意115
4.3网络广告案例赏析116
4.4Banner的设计119
4.4.1Banner设计的目标119
4.4.2Banner的主要构成元素120
4.4.3Banner的设计方法121
4.4.4Banner的设计原则和设计要求123
4.5Banner制作案例125
4.5.1浙江音乐学院研究生处官网通栏效果125
4.5.2设计分析125
4.5.3制作要点分析126
4.5.4操作过程127
4.6网店海报制作案例130
4.6.1概述130
4.6.2Coccinelle广告设计过程分析132
4.6.3经验分享133
4.7课堂实训134
4.7.1数码广告的制作134
4.7.2丝巾广告的制作138
4.8课后练习145
4.9知识拓展——图层蒙版在UI设计中的使用技巧150
4.9.1图层蒙版的概念150
4.9.2操作演示151
第5章网页界面设计154
5.1网页界面设计概述154
5.2界面文字设计156
5.2.1网页字体与字体安排156
5.2.2文字形式157
5.2.3网页文字编排方式161
5.2.4网页文字设计方法162
5.2.5网页文字编排技巧168
5.3图形图像168
5.3.1网页图形图像设计的构成要素168
5.3.2网页图形图像的创意设计173
5.3.3网页图形图像的处理方法174
5.4色彩177
5.4.1色彩的基本知识177
5.4.2网页中的色彩搭配179
5.4.3大公司的网站中颜色运用的例子183
5.5网页布局184
5.5.1版式设计原则184
5.5.2版式设计的视觉因素186
5.5.3版式构成类型187
5.5.4网页版面布局与制作190
5.6网页界面设计实例191
第6章配色194
6.1三原色194
6.1.1色光三原色194
6.1.2颜料三原色194
6.2色彩的种类195
6.2.1无彩色系195
6.2.2有彩色系195
6.3色彩的三要素195
6.3.1色相195
6.3.2纯度196
6.3.3明度196
6.4色彩的感觉196
6.5配色198
6.5.1色环配色198
6.5.2明度配色200
6.5.3纯度配色201
6.6ColorImpact软件201
6.7配色板生成技巧207
第7章App界面设计210
7.1App界面设计基础210
7.1.1什么是App210
7.1.2App UI设计和平面UI设计的区别210
7.1.3App UI设计的要点213
7.2App界面前期设计流程及方法214
7.2.1分析App的市场定位214
7.2.2草图的绘制215
7.2.3视觉设计216
7.2.4终定制方案216
7.3移动设备中的常用尺寸217
7.3.1屏幕尺寸217
7.3.2屏幕分辨率218
7.3.3App中图标的尺寸219
7.3.4图标格式219
7.4App的界面构成221
7.4.1导航栏221
7.4.2主屏幕222
7.4.3下方按钮栏223
7.5App界面设计流程及要点分析224
7.5.1电商类224
7.5.2音乐播放器类226
7.6App界面风格设计——绘画艺术232
7.6.1创意构思232
7.6.2手绘卡通界面制作233
参考文献246

本书采用“采用案例教学，以教师为主导、学生为主体”的编写指导思想，以实用为目的，根据高等职业教育“理论够用，重在实践”的教学特点，注重对学生专业技能、动手能力的培养。对知识点进行了细致的取舍和编排，融通俗性、实用性和技巧性于一身。全书共由UI设计基础、UI配色基础、图标设计、导航设计、网页广告设计、网站界面设计、App界面设计案例等章节组成。每个章节由若干个学习案例组成，每个案例录制微课供学生自学。

方旭华，女，浙江交通职业技术学院副教授，1999年工作以来一直工作于教学线，有着丰富的教学阅历和经验，近五年来曾任教多媒体、平面设计、动画设计、用户界面设计等课程的教学工作。主持了浙江省交通厅课题《基于物联网关键技术平台的智慧校园系统开发》和《高速铁路运输对公路运输的影响分析》。