东方博宜UI交互设计一期课程 | ||
模块 | 课程 | 学习内容 |
美术训练营 | 艺术素养 | . 素描速写训练; |
. 三大构成原理; | ||
. 透视、构图、造型训练; | ||
. 应用美术发展趋势; | ||
. 综合案例:拥有基础艺术素养,为之后的设计学习打下基础; | ||
色彩设计 | . 色彩属性、对比与调和、色彩的混色配置; | |
应用技巧 | . 设计色彩的表述体系; | |
. 色彩的装饰美感及色彩的表现方法; | ||
. 综合案例:掌握色彩心理和色彩搭配; | ||
手绘基础 | . 学习形式美通用法则的量化标准,能够快速获得程式审美能力; | |
构图设计 | . 掌握视觉分割的发生原理,进行经典案例分析,了解黄金比例等在设计中的应用; | |
. 手绘基础:掌握手绘技巧,利用手绘完成UI的基本构图; | ||
. 当下流行风格:拟物化、扁平化、写实等绘制技巧; | ||
. 综合案例:利用手绘+构图,绘制各类UI图标; | ||
字体设计 | . 了解与认识字体,学习字体风格; | |
. 字体设计技法、字体变形、字体效果处理; | ||
. 综合案例:掌握字体的设计和选择; | ||
软件基础 | Photoshop平面设计 | . 学习Photoshop软件界面构成与计算机图像设计的基本知识; |
. 掌握各种图像处理工具的使用和位图图像的处理技巧; | ||
. 综合案例: | ||
平面设计-----了解平面海报、画册、招贴设计中构成及创意方法。 | ||
淘宝网店设计-----网店产品图片处理、网站广告(banner)设计。 | ||
UI界面设计-----简单了解UI图标的设计手法和制作过程。 | ||
Illustrator应用技能 | . 学习AI的基本功能及应用范围; | |
. 掌握AI常规操作、 创建基本图形、 创建并编辑路径、 创建符号和图表、 创建和编辑文本、 图层与剪切蒙版、 效果与滤镜等; | ||
. 矢量图形绘制的技巧和矢量图形的注意事项; | ||
. 综合案例:掌握AI在标志 、字体、各类UI图标设计中的制作手法和应用手段等等; | ||
InDesign应用技能 | . 通过报刊杂志设计,掌握排版中的页码设计、页面模板设计、文本和样式、图形图像、表格工具、自适应目录等; | |
. 掌握印前与输出的相关应用,书籍与长文档的制作; | ||
. 掌握深入挖掘工具背后隐藏的技巧,应用软件教学规范化设计; | ||
. 综合案例:杂志、报纸、书籍; | ||
CorelDRAW应用技能 | . 了解CorelDRAW软件的特性并掌握CorelDRAW的基本操作; | |
. 矢量图形绘制的技巧; | ||
. 掌握CorelDRAW和打印排版中的相关知识点; | ||
. 综合案例:利用CDR完成VI(企业视觉传达系统)、画册排版、海报等的制作; | ||
综合项目实战 | . 通过教员的指导与学员的练习,每位学员在规定的时间内完成一套完整移动设备或穿戴设备上的界面设计,公益、商业海报各一份并制作成品。 | |
. 综合案例:移动设备界面设计、海报设计制作, | ||
UI设计规范 | 产品设计流程及规范 | . 了解产品设计的流程及规范; |
. 理解产品设计流程中各环节分工及终效果之间的关系; | ||
. 掌握多系统产品设计的方法; | ||
用户中心设计 | . 理解何为商业化设计、实现企业与个人的双赢; | |
. 用户需求分析及用户需求挖掘; | ||
. 利用大数据对用户体验进行分析总结; | ||
. 了解现阶段的人工智能设计; | ||
UI设计 | 图标设计 | . 学习图标的分类,图标的设计与制作规范; |
. 理解不同类型图标的设计特征; | ||
. 设计制作多系统图标(剪影、扁平化、2.5D、超写实、3D等); | ||
. 综合案例:设计PC、移动的各类小图标; | ||
移动APP | . 基础知识:APP开发与设计流程,屏幕尺寸与分辨率介绍及常用的单位介绍; | |
. 平台规范:iOS、Android、IPad、Windows Phone7系统特点与标准,文字标准,框架标准; | ||
. 界面设计:移动产口页面分析,页面风格分析,APP页面制作,适配、标注与切图规范; | ||
. 综合案例:安卓、IOS图标制作、界面制作; | ||
WebUI | . Banner设计:banner的种类与风格,banner的设计方法,banner的构成思路; | |
. 网页设计流程及规范:网页的设计流程,网页构成元素与规范,网页的布局模式; | ||
. 页面分析:网站的类型与风格,主流行业网站分析,不同网站的布局与排版方式; | ||
. 专题页设计:专题页头图设计,专题页板块设计,各类型专题页分析与制作,专题页设计思路,专题页实战练习; | ||
. 综合案例:商业网页整站设计; | ||
多媒体界面设计 | . 智能手机界面设计:苹果 iOS 界面设计、谷歌 Android 界面设计、谷歌 Android 界面设计; | |
. 智能电视、机顶盒界面设计:苹果 Apple TV 界面设计、谷歌 Android 智能电视界面设计; | ||
. 智能穿戴设备界面设计:苹果 WatchOS 界面设计、谷歌 Android Wear 界面设计; | ||
. PC 端软件界面设计:应用软件界面设计、游戏软件界面设计; | ||
. 综合案例:了解各种多媒体界面设计规范、设计原理和设计方法; | ||
产品切图与优化(Cutter Man) | . 了解产品效果图与上线页面之间的关系; | |
. 理解产品切图的原则与规范; | ||
. 掌握主流切图软件的使用和优化; | ||
. 综合案例:制作出符合开发人员要求的切图素材; | ||
Dreamweaver PC网页制作 | Web前端网页设计基础标签 | . 网页设计基本流程和工作内容; |
. WEB页和移动页面的设计规范,网页的风格和色彩; | ||
. 网页的基本结构、元素构成(文本、多媒体元素)、标签的组合; | ||
. 案例:各类风格的商业网站赏析、新闻页排版、广告业排版; | ||
表格表单框架 | . 表单的设计及引用; | |
. 表格及其修饰:宽、高、位置、颜色、背景,行列合并、结构修改、线合并等; | ||
. 案例:各类报名表的制作、简历表的制作、房产活动页面制作、游戏页面制作、登陆页面、留言页面制作; | ||
DIV+CSS页面布局 | . 常见的DIV布局案例,DIV的浮动和定位; | |
. CSS的选择器及属性详解:文字、文本、背景、定位、布局、边框、补丁和补白、浮动等详解; | ||
. CSS:导航等各类CSS; | ||
. 案例:学校网页、*网页、商业网页、电商网页的DIV+CSS布局; | ||
移动端响应式页面制作 | HTML5+CSS3 | . HTML5移动端页面设计的基本流程、设计原理、设备支持; |
. HTML5新增元素、文档结构、音频和视频处理、存储、离线Web应用讲解; | ||
. CSS3新增属性详解:文本、背景、边框、动画等详解; | ||
. 案例:利用H5+CSS3的制作页面; | ||
Bootstrap前端框架 | . Bootstrap布局容器和栅格系统; | |
. Bootstrap排版、表格、表单、按钮、图片等 | ||
. 案例:Bootstrap布局设计制作Web页; | ||
架构移动端网站 | . Swiper实现触摸滑动轮播; | |
. 媒体查询实现响应式页面设计 | ||
. 案例:制作移动端响应式星巴克Web前端网站 | ||
Design 东方博宜UI交互设计二期课程 | ||
模块 | 课程 | 学习内容 |
UI三维元素设计 | C4D基础建模 | . 引导学生熟悉C4D软件中各项功能的使用和基本模型的创建; |
. 了解现阶段主流立体UI的展现类型; | ||
. 掌握3D立体图标、APP界面、网站界面中3D元素的设计制作方法; | ||
. 综合案例:完成3D立体图标的制作; | ||
C4D渲染 | . 理解材质、灯光与摄像机在设计中的重要作用; | |
. 各类材质的参数设置(如木纹、布料、塑料、金属、玻璃等等)、材质贴图的编辑、3D产品的灯光构建、不同角度摄影机的架构等等; | ||
. 调整终渲染参数、输出高质量效果图; | ||
. 综合案例:给3D立体图标添加材质、灯光,进行渲染输出; | ||
3D图片合成处理 | . 熟悉软件的基本操作; | |
. 利用图层调整、遮罩蒙板、色彩调节、设计元素合成等进行二次美化; | ||
. 添加艺术字、广告元素; | ||
. 综合案例:通过PS对3D立体图标进行二次美化; | ||
UI交互动画设计 | Gif动图设计(Photoshop) | . 认识现阶段移动端、PC端各类gif动图的用途、规范; |
. 熟悉Photoshop时间轴面板; | ||
. 了解视频时间轴图层的基本面板参数(位置、变换、样式、不透明度、蒙版等); | ||
. 视频时间轴的使用、PS动图的制作流程、注意事项、终动图的输出; | ||
. 综合案例:制作桌面动态图标效果; | ||
After Effects | . After Effects界面与基础; | |
动效展示设计 | . 了解 AE 软件功能特点,理解设计趋势与AE 动效之间的关系; | |
. 制作遮蔽效果、绘制矢量图形、三维合成、 调色的技巧、抠像技巧、 综合等; | ||
. 综合案例:完成餐饮类APP的动效展示; | ||
阶段项目实训 | 移动WEB端项目开发 | . 整体风格确定、手绘初步样式草稿、PS+AI绘制页面视觉传达效果; |
. 利用切图软件制作出符合开发人员要求的切图素材; | ||
. 利用C4D完成项目中所有3D展示效果,包括3D图标、3D图片、3D动图等,使项目更符合现代消费者的审美,提高整体竞争力; | ||
. 利用AE完成项目中所有动态展示效果、提高团队合作效率; | ||
. 利用前期所学的知识点完成整体移动WEB端项目开发; | ||
UI动态交互实现 | Javascript脚本 | . Javascript基本变量定义、常见JS数据类型、JS基本运算与表达式; |
. 基本对话框、分支、循环语句(for、while)讲解,循环应用讲解; | ||
. Javascript的 Object、Function、String 和 正则表达式、常用内置对象、时间控制、常用的函数等; | ||
. 常见的JS鼠标事件、键盘事件,利用JS修改网页中的元素、利用JS修改CSS等效果、JS网页端验证、JS导航、网页,Ajax详述; | ||
. 案例:利用Javascript实现表单验证及常见的页面; | ||
. 案例:、抽奖、打分、计算器、游戏人物跑步等小游戏的制作 | ||
JQuery框架讲解 | . JQuery鼠标事件、键盘事件、各类效果与动画讲解; | |
. JQuery的遍历、JQuery的Ajax; | ||
. JQuery侧边折叠导航栏; | ||
. JQuery实现页面炫酷效果和动画; | ||
. JQuery响应式轮播图切换; | ||
. jquery实现360度全景展示; | ||
. 案例:利用JQuery实现主流PC/移动端各类网页的常见; | ||
Bootstrap框架详解 | . Bootstrap的安装及自适应; | |
. Bootstrap网格系统、排版、表单、表格、按钮、图片等; | ||
. Bootstrap组件和插件详解; | ||
. 案例:利用Bootstrap编辑自适应移动端的页面 | ||
阶段项目实训 | 移动WEB端项目实施 | . 利用H5+CSS3标签和前面设计好的平面素材制作整套手机端项目页面; |
. 通过各类脚本实现包括菜单栏、展示通栏、状态标签栏、表单验证、图片展现等等交互效果; | ||
. 利用前期所学的知识点完成整体移动WEB端项目开发; |