ui视觉设计教案

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