UI交互设计师大师班

 

UI设计的三大具体分类——图形设计、交互设计和用户测试/研究的工作职能——分别对应的是美术设计的专业知识，软件设计工程师背景和相应的编程能力，以及社会学心理学等人文学科储备。

 

当然，实际工作中，这几种职能也不是截然分开的。而今，这一涵盖诸多领域的职位，也越来越要求从业人员同时具备跨学科、综合性的理论素养和实际操作能力。

 

在工作能力和实践经验上：

一是要求从业人员精通Photoshop、Illustrator、Axure等图形软件，Html等前端脚本语言Dreamweaver等网页制作工具，能够独立完成静态网页设计工作；熟练操作常用办公软件，且具备其他软件应用能力；熟悉Html，CSS，Javascript，Ajax。

二是要求对通用类软件或互联网应用产品的人机交互有自己的理解和认识。

三是具备良好的审美能力、深厚的美术功底，有较强的平面设计和网页设计能力。

四是具有敏锐的用户体验观察力，富有创新精神。

第一部分　平面设计

（一）PhotoshopCS5图像处理：PhotoshopCS5操作基础、图象优化处理、网页页面设计、经典实例分析与制作。

（二）CorelDrawX4、Illustrator图形设计：包装盒的设计、宣传单、海报及名片的制作、产品及商业广告设计。

 

学习目标：

１.PS与AI、coreldrawX4的完美结合；

２.提高视觉设计的能力，加强商业广告设计的学习；

３.掌握平面设计规范及印刷原理；

４.户内外广告设计规范与技巧；

 

第二部分 手绘

（一）绘画中的透视：透视概念；手绘基础；一点透视原理；两点透视画法；两点透视特点；两点透视注意事项。

（二）绘画形态及明暗关系的掌握：手绘排调子；绘制正方体；三大面表现；绘制球体；五大调子及注意事项。

（三）彩铅上色与创意表现：头脑风暴模式；头脑风暴应用；头脑风暴与创意；表现抽象事物；表现复杂的文字；彩铅上色。

（四）UI扁平、拟物ICON绘制：扁平化概念；图标的表现形式（用针管笔描边）；拟物图标注意问题。

（五）APP用户端草图绘制：做APP界面与手绘的关系；原型图设计；项目流程分析；绘制原型图经验法则；原型图关系梳理。

 

学习目标：

１.加强透视及光影关系的学习；

２.学习体会UI图标的光影细节；

３.学会APP产品草图的绘制方法与规范；

 

第三部分 电商设计

（一）电商工作环境及字体设计排版：字体认知与字体应用情景；字体排版方法及技巧；字体效果表现形式。

（二）配色与设计构思：配色基础；色彩意向；色彩三属性搭配（强中弱对比原则）的应用；颜色轻重远近应用；版式平衡与版式分割的实际应用。

（三）场景合成及立体表现：版面布局方式；版面分割；Banner形式讲解。

（四）详情设计分析与制作：详情页结构分析；运营需求梳理；详情页标题排版形式汇总；运营专业术语讲解及查看方式。

（五）详情页设计与主图设计：详情页后期制作；主图设计规范；主图设计方法；详情页和主图的应用。

（六）gif动画及专题设计：详情及导航常见动效；时间轴基础；帧动画及时间轴动画；视频转GIF格式；切图及详情上传；专题介绍及基本制作。

（七）活动专题设计：专题设计应用方向；专题需求分析；店招及导航设计；专题banner设计及字体变形设计方法；立体空间深入及应用。

（八）服装首页设计、详情及主图设计：首页设计店招及店招常用设计元素及方式；首页导航；专区版块设计。

（九）无线端店铺装修：无线端版块讲解；无线端首页结构；无线端各部分模块及尺寸要求；整理运营需求进行设计；无线端详情页设计；无线端店招设计。

第四部分 UI设计

（一）UI图标创意：图标的作用与分类；图标常见风格；图标创意方法。

（二）图标抽象及绘制技法：像素图标应用场景与技法；金属质感技法；玻璃质感技法；塑料质感技法；木质质感技法。

（三）交互设计：什么是交互；交互设计师工作流程和产出；xmind（思维导图软件）软件绘制脑图；axure（Axure RP专业的快速原型设计工具）软件绘制流程图。

（四）保真原型及交互说明：axure绘制低保真原型图；axure实现基础交互效果；交互细节说明。

（五）ios移动端界面设计：app行业分类及现状；iOS平台规范；启动图标设计；启动页设计；引导页设计；主页面设计；导航样式；常见版式特征。

（六）iOS改版安卓及适配切图：安卓改版；项目文件整理；输出标注图；输出切图。

（七）app高保真原型制作：高保真原型制作流程与规范。

（八）用户体验及项目迭代：何为用户体验；优秀体验的设计原则；不良体验优化；项目2.0迭代。

 

学习目标：

１.掌握精美UI图标的创意方法和技巧；

２.掌握UI设计规范与应用；

３.学会如何去把控一个整体设计项目及角色扮演；

４.更进一步学习界面设计，掌握多媒体终端界面设计；

５.视觉效果打造提升，可进行复杂的视觉效果表现；

６.培养学员抽象思维及逻辑思维，拥有设计项目实战能力；

７.掌握超写实UI图标设计技巧；

８.掌握Axure、xmind等软件绘制图；

第一部分 网页实战

（一）网站基础：网站特征、功能分析与风格表现分析；网站从0到1的实现过程，包括产品定位、人群分析、竞品分析、架构-交互-设计等；设计需求思路整理；视觉、配色、设计规范。

（二）网站前台页面设计：如何根据原型功能合理制作界面；从设计角度分析版块之间的联系与区别；合理布局与配色；风格确定及元素的设计（扁平、质感、立体）。

（三）后台模块设计：用户后台设计；后台与前台功能的联系分析；后台布局技巧；如何合理的布局增强用户体验。

（四）网站HTML5设计制作：HTML5设计与实现过程；HTML5设计与前端的沟通；HTML5布局方法及形式；交互方

法；界面设计；HTML5动态效果的常见形式总结；创意的来源；交互效果的可用性用户体验。

 

学习目标：

１.了解网站公司组成（部门），人员配备，工作职责；

２.熟练掌握网页页面配色及排版设计；

３.掌握网页设计配色技巧及常用搭配；

４.学习黄金分割点，掌握优秀的排版比例；

 

第二部分 html+css

 

（一）html基础：体验html；标签；标题；标签属性；网页基本结构；bui标签；body属性；插入图；下级查找路径；上级查找路径。

（二）列表及表单：无序列表；有序列表；项目列表；热点新闻；超链接；表格基础；测试表格边框线；input标  签；下拉菜单；表单页面。

（三）css基础 ：体验h5；H5自动补全标签；html骨架与结构标签；数据列表标签；模拟input选中效果的提示文本；

验证表单数据；表单类型；audio标签；video视频标签；CSS语法；实体化三属性；显示模式及转换；类选择器及应用。

（四）选择器及CSS引入方式：id选择器；页面布局；行内式；外链式；导入式；权重对比；复合选择器；CSS层叠性和继承性；CSS文字控制常用属性；行高属性；超链接伪类基础。

（五）盒子模型：盒子模型组成；盒子模型在火狐显示样式；border和padding的不同方向设置；padding多属性写法；margin多属性写法；内边距撑大盒子问题；CSS初始化；外边距合并。

（六）浮动及常见布局：标准流；浮动属性；overflow属性；清除浮动；外边距合并；行内元素垂直内外边距。

（七）定位 ：相对定位；绝对定位；定位的使用；z-index；固定定位。

（八）CSS透明：opacity属性；background：rgba（）写法；应用CSS透明属性。

（九）CSS精灵：CSS精灵详解；background属性拆解；CSS精灵应用；滑动门；文字阴影；凹凸文字效果；盒子阴影；圆角属性；线性渐变；径向渐变。

（十）实战知识点：seo搜索引擎优化；兼容性语法；服务器；域名；ftp详解。

 

学习目标

１.掌握html标签及语法；

２.掌握css的语法；

３.掌握seo搜索引擎优化技术；

４.掌握兼容性调试；

５.学习服务器、域名相关知识；

第三部分 HTML5+CSS3响应式

（一）标签及选择器：Change事件；Html5方法；对象转换；本地存储方法；CSS3属性选择器；结构伪类选择器；CSS3的常用伪类；伪类配合图标字体。

（二）CSS3属性:背景属性；精灵图尺寸与坐标；新增颜色模式；CSS3内减模式；CSS3过度属性；CSS3位移属性；CSS3变形属性。

（三）效果展示及动画：写实图标展示；XY轴旋转；中心点；透视；入场动画；动画延时；位移；图文交互；自定义动画；

CSS3多组动画；逐帧动画；单行、多行溢出省略号。

（四）视口、轮播图、插件与判断终端：视口标签设置和默认大小；lib-flexible.js ；利用rem适配所有设备；用插件实现移动端轮播图；less常用语法； iscroll插件；Hbuilder打包 ；判断终端。

（五）Fullpage：基本api；回调函数；CSS3综合案例

（六）bootstrap框架：Media 语法；关键字；外链； bootstrap框架介绍；bootstrap 全局CSS样式bootstrap组

件；bootstrap JS插件；图表插件。

（七）app制作：混合app介绍；hbulider + mui + html5plus；搭建基本结构；app综合页面

 

学习目标

１.掌握时下最流行的h5+CSS3技术；

２.掌握响应式设计原理；

３.掌握移动端的适配原则；

４.掌握流行框架的使用。

 

第四部分 js+jq

（一）js基础：alert；prompt；函数（方法）；参数；变量；js控制html；事件；下拉菜单；js的书写位置。

（二）函数及循环语句：入口函数；this；数据类型的检测；自定义函数；条件判断语句；逻辑运算符；循环；数组；体

验函数返回值。

（三） jq基础：jq书写规范；入口函数的不同点；jq控制css；jq控制html；jq简单动画；选择器。

（四） 排他思想与索引值：.parents() .parent() ；. children()；动画排队 ；jquery中的排他思想；jq的索引值；tab

栏切换；滑动动画；判断html内容；类名控制。

（五）节点操作及各种效果展示：添加节点；节点的移除；会员标签效果；淡入淡出；突出展示；自定义动画；回调函数；模态窗口；animate。

（六）精灵图及事件：事件坐标 ；鼠标跟随；滚动跟随；导航跟随。

（七）定时器及动画：变量作用域；定时器基础与动画。

 

可掌握的核心能力：

１.掌握了js基础语法；

２.掌握了jq的常见语法，并实现网页中的常见动效；

３.掌握了插件的使用方法；

４.掌握了程序中的逻辑思维