ui视觉设计教案

1、教学对象：ui视觉设计班学员授课内容：详细讲解icon、pc端移动端界面设计、原型图绘制计划学时：100课时UI视觉设计班教案本章导读第一章（3天）本章主要授课内容本章主要学习如何绘制扁平风格图标（icon）icon是什么，设计icon的目的以及规范要求简单介绍现今主流的三大风格icon绘制一套（812个）完整的扁平风格图标，技巧手法注意事项评讲学生作业并辅导学生完成修改本章导读第一章（23天）本章主要授课内容本章主要学习如何绘制扁平风格图标（icon）icon是什么，设计icon的目的以及规范要求简单介绍现今主流的三大风格icon绘制一套（812个）完整的扁平风格图标，技巧手法注意事项评讲学

2、生作业并辅导学生完成修改教学生如何绘制一组扁平化图标在PS里，灵活针对 - 等图形进行布尔运算（相交、相减、相加等）以实现上面的图标效果；临摹时，需要临摹一套风格的图标，且不少于8个绘制时，所有元素的边界都必须干净利落，没有任何羽化、模糊、纹理等能做出3d效果的元素确保图标可读性，认知度要强，相应的图标配对相应的功能第一章（23天）第一章（23天）手把手教你绘制酷炫有型的火箭图标绘制机体（布尔运算）绘制机翼（注意切换点）长投影绘制，以及细节修饰布尔运算临摹以下的一套风格的图标本章导读第二章（12天）本章主要授课内容本章主要学习如何绘制单色矢量图标（icon）单色适量图标制作的规范要求教学生绘制

3、一套（不少于15个）单色矢量图标，方法技巧及注意事项评讲学生作业并辅导学生完成修改第二章（12天）教学生如何绘制一组单色适量图标（线形）+（单色扁平）在PS里，灵活针对 - 等图形进行布尔运算（相交、相减、相加等）以实现上面的图标效果；钢笔工具绘制路径、路径选择工具调整路径大小使用 直接矛点选择工具调整矛点位置、转角工具调整路径圆角和角度使用记住三点：一是形状工具及填充，二是描边效果，三是用钢笔锚点工具删除无用路径轻松画线形图标之wifi图标第二章（12天）画七个圆 平均分布居中对齐形状拼合并做布尔运算将一个正方形翻转45后对齐圆形中心 并做布尔运算完成布尔运算根据上一页讲的方法 绘制以下图标

4、第三章（45天）本章导读本章主要授课内容本章主要学习如何绘制拟物风格图标（icon）拟物图标制作的规范要求教学生绘制一套（不少于6个）拟物图标，方法技巧及注意事项重点在于细节、明暗对比、透视关系上评讲学生作业并辅导学生完成修改第三章（45天）教学生如何绘制一组拟物风格图标通过绘制拟物风格图标，了解图层样式的各种表现方式临摹一款拟物风格图标，学会进行图层拆解，然后分步绘制，提高绘图效率拟物风格的图标最能够锻炼设计师的艺术造型能力，对质感的表现要求较高可用ps或是ai进行绘制第三章（45天）绘制写实的质感收音机图层分解外框扬声器频道音量/指示灯第三章（45天）绘制写实的质感收音机制作木头纹理：创建

5、新新图层，填充木头色。工具栏选择 “滤镜渲染纤维”，调整合适的差异及强度；并绘制边框完善边框分步绘制-外边框分步绘制-扬声器绘制扬声器，设置图层样式并下载扬声器网格的图案（Metal Mesh Patterns-Pack ）进行图案叠加第三章（45天）绘制写实的质感收音机五个不同大小且不同图层样式的圆一层一层叠加起来，实现频道的效果，此处注意渐变、阴影、斜面和浮雕、描边等效果的配合使用分步绘制-频道分步绘制-音量、指示灯、标志音量和标志的绘制手法跟频道类似指示灯用到外发光效果最后收尾进行细节完善第三章（45天）绘制药片图层分解药板底壳药丸第三章（45天）分步制作 - 药板绘制药片图层样式：渐变

6、、内投影不同大小及不同图层样式的圆角矩形叠加了解如何使用“羽化”功能用到渐变叠加、投影、外发光等图层样式分步制作 - 底壳第三章（45天）绘制药片完成最上一层的药丸绘制，重点表现光的质感，高光跟阴影需要对应，要让药丸显得更加真实细腻有质感分步制作 - 药丸第四章（45天）本章导读本章主要授课内容本章主要学习如何进行PC端界面设计网页设计的类别，以及不同风格网页设计的规范优秀网页设计的配色方案版式设计：讲解网页设计构图原则浅谈响应式网页设计学生临摹网页设计，并指导其完成网页配色方案：依次提取的三个颜色组成版面再次进行练习。首先是红砖和天空。天空蓝因为蓝色自身冷色的隐退性被作为了底色。砖红色以暖色

7、鲜亮的特征被用在蓝色的上层。最后，碳黑色的标题在底色的强烈对比下使信息更为明显。F模式用户极少逐字阅读文字。每个段落的开始两个字最为重要，这将决定内容是否能留住用户。初始段落，副标题和要点都要保持醒目。Z模式Z模式几乎可以适用到任何的网页交互，Z模式的优点就是简单。如果你的网站内容很多并且很复杂的话，那么用这个模式，效果就会稍差。当然，这些都不是绝对的。当Z模式简化布局，就可以增加转化率两种主要的网页浏览模式对称平衡如果你想在你的网页看上去美观和优雅，那么你应该做一个网站对称。四个超实用的网页设计构图原则不对称平衡不对称平衡带来一种自由随意的感觉。尽管有时候看上去不是那么自然，但是它还是经常在

8、网页设计中得到实用。水平平衡如果你想在你的网页看上去美观和优雅，那么你应该做一个网站对称。垂直平衡垂直结构用于头部和底部的元素非常相似的情形。这样的布局往往运用于小元素的展示。如何创建一个销售苹果app的网站 创建背景图（图案叠加），绘制左右两侧的图形（图层样式渐变叠加内投影外发光等应用），左侧完成 复制到右侧并水平对称绘制展示栏，注意透视关系 光影效果，渐变需过渡自然；字体添加（图层样式应用），将绘制好的图标放入到展示区域绘制底板，渐变需过渡自然，边框需合理运用图层样式；添加文字以及单色适量图标，最终进行整体调整。第五章（45天）本章导读本章主要授课内容本章主要学习如何进行移动端界面设计移动

9、端界面设计技巧（结合字体设计的黄金7法则）移动端界面设计中色彩运用版式在移动界面中的应用移动界面的动效类型移动端界面的尺寸讲解学生临摹移动界面设计，并指导其完成移动端界面中的版式设计原理对任何信息进行排布的时候，首先必须要掌握的是对齐/重复/亲密/对比，贯穿设计的四大原则。对齐重复和对比亲密性页面中图片所占的比率叫做图版率，通常情况下降低图版率会给人一种宁静典雅、高级的感觉。提升图版率会有充满活力，使画面有富有感染力的效果。图版率高、感染力图版率低、宁静典雅使用色块提高图版率拟物绘图提高图版率在移动端界面中通常需要选取主色，标准色，点晴色。移动端与网页端稍微不同，主色虽然是决定了画面风格的色彩

10、但是往往不会被大面积的使用。邻近色、同色系、渐变、对比色、明暗色、多色搭配等颜色搭配一、能使页面的空间感更强，视线更开阔，通过留白来减轻页面的压迫感，使用户进入一种轻松的氛围。二、通过留白区分元素的存在，弱化元素与元素之间的阻隔三、通过留白有目的的突出表达的重点四、赋予页面构成产生不同的变化在观看事物时，往往会产生一些不同的视觉心理，著作权归作者所有。在版式设计中同样大量运用这些科学视觉方法对用户进行视觉上的引导，也能让设计师快速找到一些排版布局的方法。通栏、间距通常采用黄金比例圆角、圆形比直角更容易让人接受照片、相片通常使用方形展示避免单调，增加页面节奏感通过蒙版的方式控制页面色调每一条线/

11、每一行文字/每一个按钮的存在都是都有它存在的理由。它不加无意义的修饰、不须陪村和烘托，让用户更关注内容的主体，弱化对视觉的认知。甚至于用户在滑动时看到一个按钮或一行文字也感觉这是理所当然的存在。让用户感知不到刻意的设计，一切的发生都是那么自然移动端界面中的构图这种版式主要运用在分类为主的一级页面，起到功能分类的作用。我们将主要的功能设置在版式的中位置，就能引导用户的视线聚集在想要突出的功能点上，就算视线本来不在中间的位置，也能引导用户再次回到中心的聚集处。移动端界面中的构图主要运用在文字与图标的版式中，让界面保持平衡稳定。从上至下式的三角形构图，能把信息层级罗列得更为规整和明确。在界面中三角形构图大部分都是图