UI设计基础案例教程(高职高专基于工作过程系统化新理念教材)

本书的编写以“案例教学，教师主导，以学生为主体”为总体原则。微课，课程资源的设置打破以知识点为中心的课程模式，本书以实际应用为背景，采用案例教学，紧紧围绕项目工作任务来选择课程内容，充分发挥学生的主动性，突出岗位能力的培养，为企业和社会培养出实践能力强、能够解决实际问题的专业人才。适合作为高等职业院校、职高、应用类本科院校计算机应用专业或数字媒体艺术类专业平面设计及平面动画设计课程的教材，也可作为相关自学人员的参考用书。

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

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

第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 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