ui视觉设计教案.ppt

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