ui视觉设计教案

教学对象：ui视觉设计班学员授课内容：详细讲解icon、pc端移动端界面设计、原型图绘制计划学时：100课时UI视觉设计班教案本章导读第一章（3天）本章主要授课内容·本章主要学习如何绘制扁平风格图标（icon）·icon是什么，设计icon的目的以及规范要求·简单介绍现今主流的三大风格icon·绘制一套（8~12个）完整的扁平风格图标，技巧手法注意事项·评讲学生作业并辅导学生完成修改本章导读第一章（2~3天）本章主要授课内容·本章主要学习如何绘制扁平风格图标（icon）·icon是什么，设计icon的目的以及规范要求·简单介绍现今主流的三大风格icon·绘制一套（8~12个）完整的扁平风格图标，技巧手法注意事项·评讲学生作业并辅导学生完成修改·教学生如何绘制一组扁平化图标·在PS里，灵活针对○□-△等图形进行布尔运算（相交、相减、相加等）以实现上面的图标效果；·临摹时，需要临摹一套风格的图标，且不少于8个·绘制时，所有元素的边界都必须干净利落，没有任何羽化、模糊、纹理等能做出3d效果的元素·确保图标可读性，认知度要强，相应的图标配对相应的功能第一章（2~3天）第一章（2~3天）手把手教你绘制酷炫有型的火箭图标·绘制机体（布尔运算）·绘制机翼（注意切换点）·长投影绘制，以及细节修饰布尔运算临摹以下的一套风格的图标本章导读第二章（1~2天）本章主要授课内容·本章主要学习如何绘制单色矢量图标（icon）·单色适量图标制作的规范要求·教学生绘制一套（不少于15个）单色矢量图标，方法技巧及注意事项·评讲学生作业并辅导学生完成修改第二章（1~2天）·教学生如何绘制一组单色适量图标（线形）+（单色扁平）·在PS里，灵活针对○□-△等图形进行布尔运算（相交、相减、相加等）以实现上面的图标效果；·钢笔工具——绘制路径、路径选择工具——调整路径大小使用直接矛点选择工具——调整矛点位置、转角工具——调整路径圆角和角度使用·记住三点：一是形状工具及填充，二是描边效果，三是用钢笔锚点工具删除无用路径轻松画线形图标之——wifi图标第二章（1~2天）画七个圆平均分布居中对齐形状拼合并做布尔运算将一个正方形翻转45°后对齐圆形中心并做布尔运算完成布尔运算根据上一页讲的方法绘制以下图标第三章（4~5天）本章导读本章主要授课内容·本章主要学习如何绘制拟物风格图标（icon）·拟物图标制作的规范要求·教学生绘制一套（不少于6个）拟物图标，方法技巧及注意事项·重点在于细节、明暗对比、透视关系上·评讲学生作业并辅导学生完成修改第三章（4~5天）·教学生如何绘制一组拟物风格图标·通过绘制拟物风格图标，了解图层样式的各种表现方式·临摹一款拟物风格图标，学会进行图层拆解，然后分步绘制，提高绘图效率·拟物风格的图标最能够锻炼设计师的艺术造型能力，对质感的表现要求较高·可用ps或是ai进行绘制第三章（4~5天）绘制写实的质感收音机①图层分解外框扬声器频道音量/指示灯第三章（4~5天）绘制写实的质感收音机①制作木头纹理：创建新新图层，填充木头色。工具栏选择“滤镜渲染纤维”，调整合适的差异及强度；并绘制边框→②完善边框②分步绘制-外边框③分步绘制-扬声器②绘制扬声器，设置图层样式并下载扬声器网格的图案（MetalMeshPatterns-Pack）进行图案叠加→第三章（4~5天）绘制写实的质感收音机五个不同大小且不同图层样式的圆一层一层叠加起来，实现频道的效果，此处注意渐变、阴影、斜面和浮雕、描边等效果的配合使用④分步绘制-频道⑤分步绘制-音量、指示灯、标志音量和标志的绘制手法跟频道类似指示灯用到外发光效果最后收尾进行细节完善第三章（4~5天）绘制药片①图层分解药板底壳药丸第三章（4~5天）②分步制作-药板绘制药片图层样式：渐变、内投影不同大小及不同图层样式的圆角矩形叠加了解如何使用“羽化”功能用到渐变叠加、投影、外发光等图层样式③分步制作-底壳第三章（4~5天）绘制药片完成最上一层的药丸绘制，重点表现光的质感，高光跟阴影需要对应，要让药丸显得更加真实细腻有质感④分步制作-药丸第四章（4~5天）本章导读本章主要授课内容·本章主要学习如何进行PC端界面设计·网页设计的类别，以及不同风格网页设计的规范·优秀网页设计的配色方案·版式设计：讲解网页设计构图原则·浅谈响应式网页设计·学生临摹网页设计，并指导其完成网页配色方案：依次提取的三个颜色组成版面再次进行练习。首先是红砖和天空。天空蓝因为蓝色自身冷色的隐退性被作为了底色。砖红色以暖色鲜亮的特征被用在蓝色的上层。最后，碳黑色的标题在底色的强烈对比下使信息更为明显。F模式·用户极少逐字阅读文字。·每个段落的开始两个字最为重要，这将决定内容是否能留住用户。·初始段落，副标题和要点都要保持醒目。Z模式Z模式几乎可以适用到任何的网页交互，Z模式的优点就是简单。如果你的网站内容很多并且很复杂的话，那么用这个模式，效果就会稍差。当然，这些都不是绝对的。当Z模式简化布局，就可以增加转化率两种主要的网页浏览模式对称平衡如果你想在你的网页看上去美观和优雅，那么你应该做一个网站对称。四个超实用的网页设计构图原则不对称平衡不对称平衡带来一种自由随意的感觉。尽管有时候看上去不是那么自然，但是它还是经常在网页设计中得到实用。水平平衡如果你想在你的网页看上去美观和优雅，那么你应该做一个网站对称。垂直平衡垂直结构用于头部和底部的元素非常相似的情形。这样的布局往往运用于小元素的展示。如何创建一个销售苹果app的网站创建背景图（图案叠加），绘制左右两侧的图形（图层样式渐变叠加／内投影／外发光等应用），左侧完成复制到右侧并水平对称绘制展示栏，注意透视关系光影效果，渐变需过渡自然；字体添加（图层样式应用），将绘制好的图标放入到展示区域绘制底板，渐变需过渡自然，边框需合理运用图层样式；添加文字以及单色适量图标，最终进行整体调整。第五章（4~5天）本章导读本章主要授课内容·本章主要学习如何进行移动端界面设计·移动端界面设计技巧（结合字体设计的黄金7法则）·移动端界面设计中色彩运用·版式在移动界面中的应用·移动界面的动效类型·移动端界面的尺寸讲解·学生临摹移动界面设计，并指导其完成移动端界面中的版式设计原理信息的排布对任何信息进行排布的时候，首先必须要掌握的是对齐/重复/亲密/对比，贯穿设计的四大原则。对齐重复和对比亲密性图片的使用页面中图片所占的比率叫做图版率，通常情况下降低图版率会给人一种宁静典雅、高级的感觉。提升图版率会有充满活力，使画面有富有感染力的效果。图版率高、感染力图版率低、宁静典雅使用色块提高图版率拟物绘图提高图版率在移动端界面中通常需要选取主色，标准色，点晴色。移动端与网页端稍微不同，主色虽然是决定了画面风格的色彩但是往往不会被大面积的使用。邻近色、同色系、渐变、对比色、明暗色、多色搭配等颜色搭配颜色的使用留白的艺术一、能使页面的空间感更强，视线更开阔，通过留白来减轻页面的压迫感，使用户进入一种轻松的氛围。二、通过留白区分元素的存在，弱化元素与元素之间的阻隔三、通过留白有目的的突出表达的重点四、赋予页面构成产生不同的变化①②③④在观看事物时，往往会产生一些不同的视觉心理，著作权归作者所有。在版式设计中同样大量运用这些科学视觉方法对用户进行视觉上的引导，也能让设计师快速找到一些排版布局的方法。视觉心理的灵活运用通栏、间距通常采用黄金比例圆角、圆形比直角更容易让人接受照片、相片通常使用方形展示避免单调，增加页面节奏感通过蒙版的方式控制页面色调没有设计的设计每一条线/每一行文字/每一个按钮的存在都是都有它存在的理由。它不加无意义的修饰、不须陪村和烘托，让用户更关注内容的主体，弱化对视觉的认知。甚至于用户在滑动时看到一个按钮或一行文字也感觉这是理所当然的存在。让用户感知不到刻意的设计，一切的发生都是那么自然移动端界面中的构图九宫格网格构图这种版式主要运用在分类为主的一级页面，起到功能分类的作用。圆心点放射形构图我们将主要的功能设置在版式的中位置，就能引导用户的视线聚集在想要突出的功能点上，就算视线本来不在中间的位置，也能引导用户再次回到中心的聚集处。移动端界面中的构图三角形构图主要运用在文字与图标的版式中，让界面保持平衡稳定。从上至下式的三角形构图，能把信息层级罗列得更为规整和明确。在界面中三角形构图大部分都是图在上，字在下，阅读更为舒服，有重点有描述。SF字形构图在进行界面设计的时候，对用户的视觉移动方向的预设是非常重要的。在界面中加入更为顺畅的构图设计引导用户视线移动的元素，就能使用户更多的观察到产品的核心和产品的卖点。创建一款简单的天气APP界面设置尺寸并创建底图添加数字与云朵添加底部的栏目添加文字并设置图层样式在底部添加矢量图标，并完善整体界面谢谢观赏！