天津网站UI设计课程

学习内容/教学节点图示

目标范例示图

目标成果标准

熟悉HTML概念、语法及常用基础标签，HTML代码基础及CSS层叠样式表概述，掌握HTML、DW网页制作必备技能

认识网站，网页的架构。学习DW界面和其功能

网站布局、链接、表单等制作，JavaScript，html5+css3，掌握网站按钮、图标、广告banner、pop等设计
掌握多平台相关网站案例制作
从网站的框架布局入手，开始制作博客网站、企业展示网站、电商网站页面满足市场常见建站需求

1.表单标签的编写规范、嵌套规范以及相关属性的用法讲解。
2.JavaScript语言，掌握它的语法、数据类型、基本算数和逻辑运算操作
3.常见的html5标签 讲解css3的圆角、阴影、旋转、缩放、以及速率等属性值。
4.搭建网页HTML结构，并掌握网布局相应知识与技巧。
5. 针对CSS中的基础布局以及经典的布局展开详细的讲解。

学习内容/教学节点图示

目标范例示图

目标成果标准

掌握高级商业网站项目的研发-设计-制作流程
任何项目设计之前需要先落实需求。如何把甲方领导的需求整理为设计的语言？如何把用户的体验融入到我们的设计之中？团队中的同事们是如何协作的？我们和大家一起去模拟工作中实际的场景。让我们了解项目需求与团队协作，用产品经理的思维去构建作品

进阶学习网站研发流程，需求分析、用户场景模拟、竞品分析，根据产品的用户定位进行设计。

掌握网媒设计的可用性原则。
学会色彩与注意力集中
AIDA(注意力、兴趣、期望、行动）分析；
掌握主题网站UI设计流程：需求分析、整理需求、产品思维解析、原型设计、产品立项。结合竞品及当前产品的不足，应用xmind等思维导图软件，让我们的规划更具协调性与专业性。
如何使我们的UI规划，让领导满意，让同事佩服。这一步至关重要，要不后面的全部设计都白忙乎了

用户如何思考、使用整洁连贯的视觉设计、交互的体现、建立良好的导航、组织网站的内容、提供站点地图、AIDA(注意力、兴趣、期望、行动）

掌握网站响应式布局的设计能力
理解CSS3的变化、新增概念和理念，及其CSS3新增的选择器
掌握设计元素如何扭曲、移位或旋转，让我们可以更自由地装饰和变形HTML组件
掌握在 CSS3 中，新的用户界面特性包括重设元素尺寸、盒尺寸以及轮廓等
掌握html5部分进阶技巧，可使用html5+css3 完成页面动画效果制作，可独立完成页面特效开发

深入学习使用HTML5+CSS3设计和架构网页
实操搭建网页HTML结构，并深入掌握网站布局相应知识与高级技巧。
对前面知识的综合实战项目训练，熟练掌握网站UI设计的核心技术

结合配色、栅格布局、文本属性、导航设计等设计规范，独立绘制网页UI设计项目，掌握不同用途不同类型的网页UI界面设计的特点和规范。 独立完成拟真商业项目的设计制作

页面宽度标准、网站用色、字体字号、页面布局标准、网页栅格系统讨论、表单设计规范、导航及按钮规范、网站留言标准、图片命名及输出。

学习内容/教学节点图示

目标范例示图

目标成果标准

建立移动UI设计的基础习惯，掌握移动UI的Ps常用工具操作技巧。
PS与AI协作图标拆分组合，图标组合

形状工具的应用
形状工具的运算
ps绘制各种图形Ai新建命令，分辨率，颜色模式
Ai，ps互相协作
Ai形状工具，路径查找器的使用，渐变工具，圆角滤镜的使用
logo拆分组合与创作

掌握移动UI图形绘制
掌握各种风格的UI图标处理手法
图标是许多用户界面的重要组成部分，可视化地表达对象，动作和想法。他们会传达产品或动作的核心理念和意图，并为用户界面带来许多好处。图标是优秀的用户体验的很重要的一部分，所以说，想做好用户体验，优秀的图标设计必不可少

1.功能图标的设计
2.扁平图标的设计
3.长投影图标设计
4.拟人化图标设计
5.写实图标设计
图标展示GUI设计

了解ios设备发展史
了解ios系统各版本特点
掌握ios7.0-10.0的设计规范
掌握ios11-12的设计规范

IOS设备设计史及设计规范

掌握iOS的界面设计技巧

1.ios机型种类，ios的个版本系统设计规范
2.ios系统预览、标注、切图、导出
3.最新机型的设计图适配
4.针对苹果iOS移动端经典APP应用产品的全案实训

紧追设计前沿趋势掌握最新iphone的设计规范

Iphone x系列的产品特性，显示特性。
iPhone XS 、iPhone XS Max、iPhone XR的设计规范

掌握Iphone 各个版本机型向上向下的适配

Iphong5→iphone8适配
Iphone8→iphone 8s 适配
Iphone8→iPhone x适配

掌握安卓系统的广泛性设计规范，操作逻辑，设计技巧。实现自己设计的产品在手机上运行

安卓设备的特点
安卓系列的设计规范
安卓设不同屏幕大小的适配设计
安卓经典应用产品的案例实训

掌握同一张设计图适配安卓设备，ios设计图适配安卓设备。 工作时间是很珍贵的，所以需要设计一张图实现所有设备都可以用，来看看是怎么实现的吧

安卓、ios两系统互相适配

掌握移动UI设计的项目标注和项目输出

1. px，pt单位换算
2.ios，安卓系统标注规范
3.ios，安卓系统切图输出规范
4.输出文件合理的整理方法

学习内容/教学节点图示

目标范例示图

目标成果标准

掌握市场调研问卷剖析的方法
学会分析痛点需求，用户细分、建立虚拟用户
掌握用户研究、场景剧本、角色创建以及需求提炼的UE方法

1.用户调研
2.用户需求分析
3.用户痛点捕捉。

掌握为一个庞大的产品设计出蓝图框架，在蓝图框架的基础上一点点的将我们的产品变的充实
掌握UE产品逻辑规划及产品方案设计的标准、方法和流程

1思维导图设计
2方案需求评审分析
3workshop脑暴方案确定
4资源投入产出取舍

掌握Axure RP软件，不同平台交互特点
UI原型图绘制/流程图设计及文件导出

1.Axure软件的熟练应用
2.建立交互逻辑思维
3.交互demo
4.流程图设计及修改

快速制作低保真效果图，低保真图转换高保真demo效果图，掌握XD的交互动效， 掌握高保真效果图快速设计与交互动效设计的标准、流程和方法

1.XD快速建立高保真效果图
2.Principle软件的熟练应用
3.APP各种风格页面的设计窍门
4.项目demo手机预览操作导出

学习内容/教学节点图示

目标范例示图

目标成果标准

掌握项目分析，项目把控，进度计划等产品管理和执行能力。
通过独立完成拟真市场项目，掌握成为优秀UE产品项目经理、UID及GUI的整套工作标准

1工作中项目分析，项目主次工作分工
2项目工期评估
3项目工作梳理
4项目设计风格确立
5GUI设计，动效设计，展示demo设计
综合之前掌握的多重技能，独立完成普适或典型的商业应用的APP项目，掌握不同用途不同类型的APP界面设计特点。 制作APP展示效果的GUI展示图，阐述产品优点及特色内容。