UI设计全栈课程体系 ( V3.2 )
最后更新时间: 2020年2月课程一定是为你精心设计的, 成就自己的只需一套精品!
课程设计原则:
- - 以零基础小白为目标人群设计;
- - 以现在企业中高级程序员岗位所需要的技术应用为目标设计;
- - 为程序开发这门学科特点,以实战和项目贯穿为高效学习目标设计;
- - 根据线上学习特点去规划每天学习内容;
- - 以全栈技能为目标设计知识点结构;
- - 每年至少迭代更新两次,技术版本不一定是最新的,但一定是用的最多的版本;
课程介绍:
本课程会帮助刚入行的新学员认识UI设计在行业中的位置及其价值,建立该职业的全局观。不仅会介绍实际公司内部的工作流程和设计案例, 让学员可以先预览未来工作的情况,对将来能有更妥善的计划。还会以网易面试的流程为例子,逆向分析职业UI设计所需要的能力,并对每项能力进一步讲解和发展指导,来帮助学员找到最快捷的学习路径。 本课程由五大部分组成,分别为“设计基础”,“运营设计”,“产品设计”“网页设计“和C4D立体设计,课程由浅入深,内容覆盖全面。 另外,每个知识点都是以目前最新版本的技术设计,每半年一更新,并经过多家软件公司的技术专家参与修订,以达到真正实用的目的,能够与大型软件开发公司所需要的开发技术相吻合。
课程特点:
- - 入门简单,易上手
- - 以就业为目标,内容贴合实际工作
- - 以学员成就感为学习驱动力,提高学员的学习兴趣
- - 课程衔接完整,学员更容易接受
学习目标:
- - 软件技能
- - 审美能力
- - 设计理论
- - 设计实践
适合人群:
- - 0基础学员
- - 平面设计想要转UI设计的学员
阶段一 设计基础
说明:
我们常说的学UI设计或做UI设计,一般都指GUI界面设计师。GUI设计师的日常工作就是界面设计、图标设计、切图和标注。所用工具为PS、AI、AE、C4D(非必需)等, 还有切图和标注的一些插件或软件。GUI设计师的就业方向分为主题UI设计师和APP UI设计师。 最近几年,智能手机越来越多元化,各种品牌如小米、华为、三星、VIVO等等手机类型不一、型号众多。这自然造就了大量的主题需求,各大手机主题市场都有上万套主题,而这些都是我们UI设计去完成的。
模块 | 目标 | 知识点 |
---|---|---|
设计基础 |
应知应会:1.掌握设计基础软件ps,ai,cdr的基本操作2.学习美术知识,应用于商业案例中
业务实战:商业合成,人像精修,产品精修,插画动画制作 |
PS 软件操作基础 |
了解UI发展 | ||
认识最基础的图片格式 | ||
ps安装后的调试 | ||
认识图层操作 | ||
图层锁定,对齐 | ||
选区介绍 工具 | ||
案例进阶:制作选区海报 | ||
钢笔的使用 | ||
文本工具 | ||
案例进阶:制作文本渐变海报 | ||
画笔工具 | ||
形状工具 | ||
布尔运算 | ||
案例进阶:图标,文本设计 | ||
重复肤质变换 | ||
颜色模式 | ||
图像调整,对图像进行修图 | ||
蒙版操作 | ||
案例进阶:合成案例 | ||
调整边缘抠图 | ||
通道抠图 | ||
案例进阶:合成案例 ps总结 | ||
美术基础 | ||
手绘造型 | ||
透视原理 | ||
光影知识 | ||
合成,精修案例 | ||
光影合成 | ||
透视原理合成 | ||
人物精修 | ||
电器精修 | ||
饰品精修 | ||
ai软件操作 | ||
软件新建及保存 | ||
位图转化矢量图 | ||
软件工具操作 | ||
软件效果 | ||
制作插画 | ||
ai与ps的文件互相转换 | ||
打包 | ||
gif图片制作 | ||
案例进阶:制作2.5d图标以及其他插画 | ||
cdr软件操作 | ||
软件基础工具操作 | ||
形状的编辑 | ||
交互式工具 | ||
制作特效 | ||
文件保存,打印输出 | ||
案例进阶:插画制作 |
收获:
学完此阶段能够掌握设计的基础理论,精通Photoshop软件操作,精通Illustrator软件操作,精通CDR软件操作
阶段二 运营设计
说明:
从运营策划那拿到交互稿后,从上到下完整的先过一遍交互稿,一方面是看交互稿的内容完不完整,是不是还有些内容点忘记做了,另一方面也会咨询一下交互设计师, 有哪些地方是需要设计师特别注意的啊,有没有什么内容是要优先做的啊等等。关键的点在于准确了解运营活动的意图/定位。通过运营活动传达一种什么目的/态度,营造一种什么气氛,好玩的,有趣的,暖心的,促销的,还是高端大气的。 虽然现在风格可以我们自己来定,但决定权还是没有那么大,在需求沟通阶段还是最好询问一下,以免走偏。
模块 | 目标 | 知识点 |
---|---|---|
设计开篇 平面构成 色彩构成 图形创意 编排设计 画册设计 |
应知应会:1.设计理论基础2.图形创意技法 3.编排设计 4.画册设计
业务实战:色彩构成、页面排版、企业画册 |
色彩测试 |
什么测试讨论 | ||
设计鉴赏 | ||
Gestalt心理学 | ||
案例进阶:格式塔视觉效果演示 | ||
形式美法则 | ||
点构成 | ||
线构成 | ||
面构成 | ||
构成的应用 | ||
案例进阶:常见设计的构成分析 | ||
色彩的形成 | ||
色彩的三要素 | ||
色彩的特点 | ||
色彩搭配 | ||
案例进阶:自己绘制色相环 | ||
图形起源 | ||
联想方式 | ||
图形同构 | ||
案例进阶:头脑风暴案例合成 | ||
编排设计介绍及鉴赏 | ||
编排设计技法 | ||
案例进阶:文案排版、页面编排 | ||
画册介绍 | ||
风格分类 | ||
案例进阶:企业画册项目带练 | ||
字体设计 插画设计 海报与展架 |
应知应会:1.字体设计方法2.插画设计 3.海报与展架的设计方法
业务实战:字体设计、海报招贴 |
文字介绍 |
字设方法 | ||
字体设计包装 | ||
字体设计案例 | ||
字体设计案例 | ||
案例进阶:字体设计案例 | ||
插画风格介绍 | ||
案例进阶:肌理插画带练 | ||
案例进阶:扁平插画带练 | ||
案例进阶:插画思路 | ||
案例进阶:2.5D插画 | ||
案例进阶:手绘插画 | ||
案例进阶:动效制作 | ||
案例进阶:作品包装 | ||
海报分类 | ||
海报版式 | ||
案例进阶:多风格海报案例带练 | ||
案例进阶:展架设计带练 | ||
图标设计 Banner设计 活动专题页设计 H5设计 |
应知应会:1.图标设计2.banner设计 3.活动专题 4.H5设计
业务实战:各风格图标设计、互联网运营设计可以做一些互联网运营方面的设计了 |
图标设计原则 |
案例进阶:剪影图标 | ||
案例进阶:扁平化图标 | ||
案例进阶:拟物化图标 | ||
案例进阶:写实图标 | ||
Banner概述 | ||
Banner设计方法 | ||
Banner版式方式 | ||
案例进阶:banner设计案例带练 | ||
案例进阶:banner适配一图多稿 | ||
活动专题介绍 | ||
专题页设计分类 | ||
专题页设计方法 | ||
专题页设计版式 | ||
案例进阶:专题页带练 | ||
H5专题页介绍 | ||
常用尺寸介绍 | ||
常见页面样式 | ||
案例进阶:页面制作带练 | ||
Logo设计 VIS设计 |
应知应会:1.VIS设计2.LOGO设计
业务实战:VIS设计、LOGO设计 |
LOGO设计概述 |
LOGO设计流程及提交 | ||
LOGO设计方法 | ||
案例进阶:不同风格案例带练 | ||
案例进阶:不同风格案例带练 | ||
案例进阶:不同风格案例带练 | ||
VIS手册介绍 | ||
VIS手册内容详解 | ||
案例进阶:VIS手册基础部分案例带练 | ||
案例进阶:VIS手册应用部分案例带练 | ||
品牌项目带练 |
应知应会:1.设计工作流程2.设计提交方式 3.工作压力 |
品牌定位 |
品牌LOGO设计 | ||
VIS手册制作 | ||
画册制作 | ||
海报制作 | ||
Banner设计 | ||
活动专题页设计 | ||
作品包装 | ||
案例进阶:项目讲解 |
收获:
学完此阶段能够掌握掌握招贴设计,掌握互联网运营设计,掌握品牌设计。
阶段三 网页开发制作
说明:
现在的所有的软件都需要有操作界面,Web开发前端界面是最常见的工作。开发Web界面HTML是把内容放到网页上, CSS而用来布局和美化页面的工作, 这两个模块的内容一定要熟练掌握,当然HTML和CSS语法还是非常容易掌握的, 而HTMl的标签及属性还是非常多的, 没有必要全部掌握, 只要掌握一些常用的就足以开发所有想要的界面。 同样CSS的属性是如此,这部分学习没有什么太好的方法, 就是多查多用多记即可。
模块 | 目标 | 知识点 |
---|---|---|
HTML模块 |
应知应会:1.WEB基本工作原理2.HTML 常见链接,图片标签 3.HTML表格,表单标签
业务实战:1.第一个自己的html网页2.简单页面链接相册 3.个人简历表格制作 4.登录表单 5.用户注册表单 6.页面播放器 |
常见的软件开发类型 |
Web2.0系统软件开发 | ||
HTTP协议介绍 | ||
B/S 和 C/S 介绍 | ||
互联网的发展趋势 | ||
Web开发所需要的构件 | ||
LAMP平台开发的优势 | ||
Web 开源产品的应用 | ||
html标签的概念 | ||
HTML 主体结构, head,title标签 | ||
案例进阶:自己第一个html网页 |
||
一般加粗,斜体,下划线,列表等标签 | ||
图片标签, 超链接标签 | ||
案例进阶:简单页面相册 |
||
表格标签, tr行标签,td单元格标签 | ||
表格标签对齐属性 | ||
案例进阶:个人简历表格 |
||
表单标签和action属性, method属性 | ||
单行文本框,密码框,提交按钮 | ||
案例进阶:登录表单 |
||
单选多选框,下拉列表,隐藏域,文本域,文件上传框 | ||
案例进阶:用户注册表单 |
||
HTML5语义化标签的应用 | ||
HTML5 标签的兼容处理 | ||
HTML5 标签 SEO 的作用 | ||
HTML5表单新特性: a)HTML5 表单验证(表单类型) b)Datalist标签的使用 c)required 属性的使用 d)pattern属性的使用 e)Placeholder 属性的使用 f)Autocomplete 属性的使用 g)autofocus 属性的使用 |
||
Video标签的应用 | ||
Audio标签的应用 | ||
可选参数: controls, autoplay,loop | ||
案例进阶:打造自己的页面播放器 |
||
CSS样式模块 |
应知应会:1.css基本选择器2.css关系选择器 3.字体属性,盒子模型 4.背景属性 5.定位属性 6.页面多列布局
业务实战:1.竖向列表菜单2.元素水平居中 3.鼠标悬停图标变色效果 4.右下角广告 5.面页垂直水平居中提示 6.项目网页界面实例 |
常见的软件开发类型 |
CSS代码基本语法和书写位置 | ||
CSS中选择器的概念以及3种基本选择器 | ||
关系选择器 | ||
CSS3 与 CSS2 的区别 | ||
多种选择器的权重问题 | ||
常用字体文本属性 | ||
案例进阶:坚向列表菜单 |
||
盒子模型中的内填充,边框,外边距 | ||
圆角属性: border-radius 的使用 | ||
阴影属性: box-shadow 的用法 | ||
行级元素和块级元素特点 | ||
案例进阶:元素水平居中 |
||
元素背景颜色,背景图片,背景定位等属性设置 | ||
背景属性扩展: 多背景应用 | ||
新的颜色表示方式: HSLA 色轮模式 | ||
案例进阶:常见鼠标悬停变色效果 |
||
页面元素相对定位 | ||
页面元素绝对定位 | ||
页面元素固定定位 | ||
案例进阶:右下角广告效果 |
||
案例进阶:浏览器内部垂直水平居中 |
||
布局基础:块元素并排显示--浮动 | ||
浮动注意事项,清除浮动防止覆盖 | ||
DIV+CSS传统网页布局 | ||
HTML5 语义化标签网页布局 | ||
<header>定义页面或区段的头部 | ||
<hfooter>定义页面或区段的尾部 | ||
<hnav>定义页面或区段的导航区域 | ||
<hsection>页面的逻辑区或内容组合 | ||
<harticle>定义正文或一篇完整的内容 | ||
<haside>定义补充或相关内容 | ||
响应式网页布局 | ||
常见一列布局,二列布局,三列布局 | ||
稍微复杂些的布局练习 | ||
案例进阶: 京东商城网页界面实例 |
收获:
学完此阶段必须掌握Web开发原理,常用的一些开发协议。以及HTML和CSS的基本语法, HTML的常用标签及常用属性,CSS的一些常用属性,学会美化页面。 重要的是掌握常用的页面布局方法, 可以布局出各种类型网站的页面。
阶段四 产品设计
说明:
专业设计师需要掌握产品设计的整个流程。 产品设计专业是一门集人文艺术和计算机技术于一体的综合性内容,掌握必备的产品造型设计专业基础理论知识及较强的实践应用能力的高素质技能型人才。 产品设计是一个将某种目的或需要转换为一个具体的物理形式或工具的过程,是把一种计划、规划设想、问题解决的方法, 通过具体的载体表达出来的一种创造性活动过程。在这个过程中,通过多种元素如线条、符号、数字、色彩等方式的组合把产品的形状以平面或立体的形式展现出来。
模块 | 目标 | 知识点 |
---|---|---|
网页分类 网页设计流程规范 不同类型网页的设计制作 响应式页面 |
应知应会:1.网页分类2.网页设计流程规范 3.不同类型网页设计方法 4.响应式页面设计方法
业务实战:不同类型的网页设计 |
常见的网页分类 |
常见的网页布局和设计原则 | ||
网页常见的分辨率和字体规范 | ||
网页的模块化实例 | ||
案例进阶:各大网站分类展示介绍 | ||
网页的设计流程规范 | ||
网页的构成要素 | ||
网页的模块分类 | ||
案例进阶:根据竞品实现网页原型图 代练 | ||
电商页面 | ||
官网页面 | ||
娱乐网页 | ||
游戏网页 | ||
案例进阶:不同类型的网站页面讲解练习 代练 | ||
专题页讲解 | ||
响应式页面原理 | ||
响应式页面设计规则 | ||
响应式页面制作方式 | ||
响应式页面应该出现的交互效果 | ||
案例进阶:响应式布局页面讲解练习 | ||
交互设计 移动端设计基础及ios设计规范 原型图、ipad界面规范及 Android界面规范及制作 Material design讲解及风格设计 界面适配 小程序规范讲解 页面设计分类 移动端配色方法及切图 |
应知应会:1.交互设计2.ios设计规范 3.原型图及ipad界面规范 4.Android界面规范 5.Material design设计分风格讲解 6.界面适配、小程序规范讲解 7.页面设计分类 8.移动端设计及切图
业务实战:ios界面规范制作、Android界面规范制作、界面适配 |
什么是交互设计 |
交互设计要素 | ||
交互设计流程 | ||
移动端概念及尺寸 | ||
传感器及应用 | ||
移动界面常见控件 | ||
ios界面整体规范 | ||
ios界面文字规范 | ||
案例进阶:不同设备界面规范 | ||
ipad规范 | ||
ipad导航模式 | ||
ios界面制作横版ipad | ||
案例进阶:提供原型图进行制作代练 | ||
单位换算 | ||
Android规范制作 | ||
Material design讲解 | ||
Material design风格设计 | ||
案例进阶:界面分析讲解 | ||
适配原理及方法 | ||
适配制作注意事项 | ||
小程序规范 | ||
ios新机型 | ||
案例进阶:界面适配 代练 | ||
主页面导航分类 | ||
二级页面内容展现 | ||
详情页面设计 | ||
缺省页面 | ||
登录注册流程页面 | ||
引导页面设计 | ||
启动页面设计 | ||
案例进阶:页面讲解制作 代练 | ||
移动端配色方法 | ||
配色赏析及练习 | ||
移动端切图 | ||
sketch软件使用 | ||
ps切图方法及sketch切图方法 | ||
案例进阶:界面切图方式和使用 代练 | ||
交互设计原理 产品引导 产品定位 需求分析 用户研究 竞品分析 产品架构 交互流程 交互原型 视觉规范 高保真原型图 切图标注 产品迭代 |
应知应会:1.交互设计原理、产品引导2.产品定位 3.需求分析 4.用户研究 5.竞品分析 6.产品架构 7.交互流程 8.交互原型 9.视觉规范 10.高保真原型图 11.切图标注 12.产品迭代
业务实战:熟悉产品开发的整个流程分组项目 |
交互设计要素 |
产品项目引导 | ||
案例进阶:案例讲解交互设计 | ||
什么是产品定位 | ||
互联网产品思考方式 | ||
产品定位书写 | ||
案例进阶:实例讲解不同产品的定位和互联网产品的思考方式 | ||
马斯洛需求分析 | ||
需求分析方法 | ||
需求分类 | ||
需求整理及筛选 | ||
案例进阶:实例讲解马斯洛需求的使用和作用 | ||
用户建模作用 | ||
用户建模方法 | ||
用户需求分析 | ||
案例进阶:以案例方式讲解用户建模的使用和作用 | ||
竞品分析方法 | ||
竞品分析纬度 | ||
竞品分析报告 | ||
案例进阶:以一个产品为例进行竞品分析 代练 | ||
梳理架构 | ||
架构定制 | ||
用户使用流程 | ||
搜索流程 | ||
登录注册流程 | ||
支付流程 | ||
案例进阶:以案例页面来讲解交互流程 | ||
Axure讲解 | ||
交互软件介绍 | ||
案例:axure页面常用实例的讲解 | ||
项目:项目期原型制作 | ||
视觉规范的作用 | ||
视觉规范的制作 | ||
案例进阶:根据原型实现视觉页面 代练 | ||
高保真原型图输出 | ||
移动端15张 | ||
网页端4张 | ||
项目:高保真原型图的制作 | ||
命名规范 | ||
文件输出 | ||
产品整理 | ||
案例进阶:规范命名文件输出和产品整理指导 | ||
改版方法 | ||
改版案例 | ||
案例进阶:改版案例讲解说明 代练 |
收获:
学完此阶段能够掌握网页设计,掌握app界面设计,掌握产品开发流程,掌握产品交互。
阶段五 C4D三维立体设计
说明:
应用C4D打造三维立体场景,做出炫酷的头图与3D文字 C4D 是一款易学、易用、高效且拥有电影级视觉表达能力的 3D 软件。C4D 由于其出色的视觉表达能力已成为视觉设计师首选的三维软件, 你可以看到很多电商海报现在都是流行用C4D做图。 从以往的二维平面海报转变成全 3D 立体效果瞬间品牌就出来了。 这就是行业趋势C4D 和 AR 技术搭建起来的,3D 立体效果将会取代二维平面。
模块 | 目标 | 知识点 |
---|---|---|
C4D三维立体设计 |
应知应会:1.快速入门2.光影材质 3.模型世界 4.美与技术 5.产品展示 6.卡通角色
业务实战:综合应用 |
Cinema 4D概论 |
C4D概述及优势介绍 | ||
软件安装和界面介绍 | ||
初识 | ||
视图的操作和移动、缩放、旋转 | ||
基础图形的建立及参数设置 | ||
基础图形的建立及参数设置 | ||
低面风景建模案例(1) | ||
低面风景建模案例(2) | ||
多边形建模概述 | ||
案例进阶:沙漏建模案例 | ||
关键帧动画基础 | ||
案例进阶:小球弹跳案例 | ||
动力学标签 | ||
插件和预设 | ||
动画的渲染和输出 | ||
Cinema 4D的各种变形器 | ||
修改器概述 | ||
案例进阶: 卷轴动画案例(上) | ||
案例进阶:卷轴动画案例(下) | ||
膨胀和锥化 | ||
螺旋修改器 | ||
球化、收缩包裹和包裹 | ||
案例进阶: 卡通地球案例(上) | ||
案例进阶: 卡通地球案例(下) | ||
样条约束修改器 | ||
案例进阶:概念圆环Logo演绎案例 | ||
置换和减面 | ||
案例进阶:可爱的低面卡通场景案例(1) | ||
案例进阶:可爱的低面卡通场景案例(2) | ||
造型工具 | ||
晶格 | ||
案例进阶:跟随音乐节奏的点线概念动画案例 | ||
样条布尔 | ||
案例进阶:夹心文字案例 | ||
布尔 | ||
科幻风格LOGO演绎(1) | ||
科幻风格LOGO演绎(2) | ||
案例进阶:对称、阵列和实例 | ||
Cinema 4D运动图形 | ||
运动图形概述 | ||
克隆对象的线性模式 | ||
克隆对象的放射模式 | ||
MG动画(1) | ||
MG动画(2) | ||
步梯生长动画(1) | ||
步梯生长动画(2) | ||
克隆对象的网格和对象模式 | ||
案例进阶:简易效果器(1) | ||
案例进阶:简易效果器(2) | ||
案例进阶:随机效果器 | ||
N个小球同时下落 | ||
步幅效果器 | ||
魔幻彩带(1) | ||
魔幻彩带(2) | ||
有趣的Loading动画(1) | ||
有趣的Loading动画(2) | ||
有趣的Loading动画(3) | ||
体积效果器-像素化模型制作 | ||
着色效果器 | ||
矩形化的动态图形 | ||
文本工具 | ||
活泼的排版文件 | ||
运动图形的其他工具 | ||
Cinema 4D材质 | ||
材质编辑器概述 | ||
颜色通道和发光通道 | ||
反射通道及金属材质的调节(1) | ||
反射通道及金属材质的调节(2) | ||
透明通道及玻璃材质的调节 | ||
置换和凹凸通道 | ||
其他通道的使用 | ||
半透明材质的调节 | ||
星球大战纪念杯(1) | ||
星球大战纪念杯(2) | ||
星球大战纪念杯(3) | ||
反光板的使用(1) | ||
反光板的使用(2) | ||
电子产品按键(1) | ||
电子产品按键(2) | ||
给倒角文字加材质的技巧 | ||
Cinema 4D灯光 | ||
灯光的常规操作 | ||
灯光的投影和衰减 | ||
灯光的可见和排除 | ||
灯光的类型(1) | ||
灯光的类型(2) | ||
室内场景制作(1) | ||
室内场景制作(2) | ||
三点布光 | ||
案例进阶:利用全局光照进行照明 | ||
摄像机的应用 | ||
摄像机的常规操作 | ||
摄像机的景深效果 | ||
摄像机动画(1) | ||
摄像机动画(2) | ||
摄像机动画(3) | ||
预制摄像机 | ||
案例进阶:舞台工具 | ||
Cinema 4D动画的渲染输出 | ||
无缝曲面渲染场景 | ||
无缝地面渲染场景 | ||
暗调、地面带反射渲染场景 | ||
卡通风格渲染 | ||
案例进阶:三维物体与真实照片合成 | ||
粒子基础 | ||
粒子发射器(1) | ||
粒子发射器(2) | ||
力场和烘培粒子 | ||
案例进阶:被弹出的可爱小文字(1) | ||
案例进阶:被弹出的可爱小文字(2) | ||
合成 | ||
AE合成(1) | ||
AE合成(2) |
收获:
学完此阶段能够掌握一般的零件设计,工业设计。也可以用做室内建筑效果图,渲染速度比较快。

购买后
拉进交流群