最新2019-UI设计-从图标到界面完美解析第五章-图形、图标设计-PPT课件

从图标到界面完美解析UI设计主讲教师：XXX01简约扁平化ICON设计02三维效果ICON设计01简约扁平化ICON设计第五章图形图标设计简约扁平化ICON设计图标设计的不同阶段设计师设计一个好的图标必须经历以上几个阶段！第五章图形图标设计简约扁平化ICON设计一、图标创意其实这个阶段之前还有个重要的步骤,就是创意准备。根据我们所要做的项目需求,确定ICON图标的风格样式,这一步在界面设计过程中,我们用图标风格评测的方法来确定所绘制的图标是走什么样的风格路线.这也是项目前期对用户研究的内容,有潜力的公司会制定用户角色,用来指导界面视觉风格方向、界面内容建构和交互设计等！第五章图形图标设计简约扁平化ICON设计二、草图绘制这个阶段就是把我们的创意绘制出来，检验下视觉关系，也就是在视觉方面多在草图上推敲，这样效率高些，避免在渲染完后来后悔。首先要确定我们图标透视，这是关系到一套方案中的每个图标的透视方向，这是在图标设计一致性方面的基本要求，透视统一。然后一步步的添加细节。第五章图形图标设计简约扁平化ICON设计三、图标视觉分析一个图标要表达一定的含义就必须组合不同的形态，借助单个形态所传达的内在信息，拼合在一起去传达另外一种信息。例如在设计“导航”功能图标时候：我们第一反应是与卫星有关，但就以单个卫星的外形来传达导航的含义恐怕不狗，于是再联想与导航有关的信息图示：“坐标”“旗帜”“陆地”等。再经过设计师以视觉平衡原理合理的布置他们之间的主次、空间关系。要注意的是：不可随便使用其与要表达功能相关的图形或物体，要经过精心的挑选，最好是大家熟悉、易记的物或形，毕竟我们的目的是要帮助用户更形象的理解计算机程序的内在功能含义，以易记、易懂为前提。也不能借助过多的图形来表达图标含义，过于复杂反而影响用户的理解。第五章图形图标设计简约扁平化ICON设计四、草图渲染阶段自己觉得草图已经很清楚的表达了自己的想法，并且也能与功能信息密切的吻合，那就开始伟大的渲染工程吧！渲染工具:PHotoshop、Illustrator、Sketch、Firework等软件来绘制第五章图形图标设计简约扁平化ICON设计简约扁平化ICON设计第五章图形图标设计简约扁平化ICON设计一、简约扁平化设计特点1、常规扁平式特点：纯色、剪影图形。优点：简洁清新、识别性良好、色彩明朗、设计感强烈。第五章图形图标设计简约扁平化ICON设计一、简约扁平化设计特点2、渐变折痕式特点：纯色、折痕、轻渐变。优点：比常规扁平化丰富，有轻微空间感、色彩明朗，视觉统一性好。第五章图形图标设计简约扁平化ICON设计一、简约扁平化设计特点3、轻质感式特点：简单层次、轻投影、轻渐变。优点：干净简洁、明朗，有一定的精致感，有简单的层次，内容丰富。第五章图形图标设计简约扁平化ICON设计一、简约扁平化设计特点4、长投影式特点：层次、投影。优点：色彩对比度大，有明显而单纯的投影，有鲜明的层次感和空间感，视觉冲击力强。第五章图形图标设计简约扁平化ICON设计一、简约扁平化设计特点5、轻厚度式特点：厚度、细节、轻投影。优点：有明显的厚度，既有明显的立体感，有厚重感和细节感，但相对于复杂统一性没有上面的几种好。第五章图形图标设计联系人图标设计实例操作：联系人图标设计第五章图形图标设计简约扁平化ICON设计实例操作：联系人图标设计1、新建文件打开Photoshop，执行“文件打开”命令新建（快捷键Ctrl+N）一个新的图像，命名为联系人图标，并把宽度设置为800px，高度为600px，分辨率为72dpi，然后点击确定，效果如图5.8所示，顺手保存文件（快捷键Ctrl+S）。。第五章图形图标设计简约扁平化ICON设计实例操作：联系人图标设计4、绘制头像厚度复制“头像”图层（快捷键ctrl+j），图层副本命名为“厚度”，将厚度图层顺序放到“头像”图层下方，用方向键向下移动5px。选中图层面板上的“厚度”图层，单击鼠标右键，清除图层样式并重新填充颜色，颜色色值为#c6cddf。投影：颜色黑色#000000，不透明度25%，角度90°，不使用全局光，距离10，扩展0，大小10。02联系人图标设计第五章图形图标设计简约扁平化ICON设计实例操作：联系人图标设计完成效果和图层分布第五章图形图标设计简约扁平化ICON设计实例操作：搜索图标设计第五章图形图标设计简约扁平化ICON设计实例操作：搜索图标设计1、新建文件打开Photoshop，执行“文件打开”命令新建（快捷键Ctrl+N）一个新的图像，命名为搜索图标，并把宽度设置为800px，高度为600px，分辨率为72dpi，然后点击确定。2、绘制圆形选择“椭圆工具”在画布中点击鼠标左键弹出“创建椭圆”弹出层，设置宽度为400px，高度为400px，并勾选“从中心”，然后点击确定，在图层面板将椭圆图层名称改为“外框”。修改颜色，颜色色值为#ff9900。第五章图形图标设计简约扁平化ICON设计实例操作：搜索图标设计3、绘制放大镜镜框和镜片选择“椭圆工具”在画布中点击鼠标左键弹出“创建椭圆”弹出层，设置宽度为156px，高度为156px，并勾选“从中心”，然后点击确定，在图层面板将椭圆图层名称改为“镜框”，移动到相应位置，修改颜色为白色#ffffff。复制图层（快捷键ctrl+j）“镜框”得到镜框副本，修改图层名字“镜片”。选择菜单栏编辑变换路径（快捷键ctrl+t），在工具属性栏将宽度和高度各缩放到80%。修改“镜片”图层的颜色#cc6600。第五章图形图标设计简约扁平化ICON设计实例操作：搜索图标设计4、绘制镜片高光选择“钢笔工具”在工具属性栏里选择形状绘制高光，颜色为白色#ffffff。5、绘制放大镜手柄选择“圆角矩形工具”在画布中点击鼠标左键弹出“创建圆角矩形”弹出层，设置宽度为160px，高度为35px，并勾选“从中心”，然后点击确定。在图层面板将椭圆图层名称改为“手柄”，修改颜色色值为#ffcc66。注：选择菜单栏编辑变换路径（快捷键ctrl+t），在工具属性栏修改旋转角度为-45°，如图5.23所示，移动到相应位置并修改图层顺序。第五章图形图标设计简约扁平化ICON设计实例操作：搜索图标设计6、绘制长投影选择“矩形工具”绘制矩形，图层命名为“长投影”，并修改旋转角度45°，移动位置，修改图层顺序到“外框”图层上面，在图层面板上修改填充透明度80%。在图层面板选中长投影图层，点击鼠标右键对图层“外框”和“长投影”建立剪贴蒙版。把长投影多余的地方隐藏。第五章图形图标设计简约扁平化ICON设计实例操作：搜索图标设计完成效果和图层分布第五章图形图标设计简约扁平化ICON设计实例操作：照相机图标设计第五章图形图标设计简约扁平化ICON设计实例操作：照相机图标设计1、新建文件打开Photoshop，执行“文件打开”命令新建（快捷键Ctrl+N）一个新的图像，命名为联系人图标，并把宽度设置为800px，高度为600px，分辨率为72dpi，然后点击确定，顺手保存文件（快捷键Ctrl+S）2、填充背景颜色设置前景色为#0d0d27，填充前景色到背景。第五章图形图标设计简约扁平化ICON设计实例操作：照相机图标设计3、绘制圆角矩形选择“圆角矩形工具”在画布中点击鼠标左键弹出“创建圆角矩形”弹出层，设置宽度为400px，高度为300px，半径30px，并勾选“从中心”，然后点击确定，在图层面板将圆角矩形图层名称改为“外框”。4、绘制圆角矩形厚度复制图层（快捷键ctrl+j）“外框”，命名为“厚度”，将颜色改为#b9b9b9，变换图层顺序并用方向键向下移动8px。设置“外框”图层的混合选项，添加“渐变叠加”，设置渐变方式“线性渐变”，色值从上到下为#f1f1f1—#ffffff，角度为90°。第五章图形图标设计简约扁平化ICON设计实例操作：照相机图标设计5、绘制镜头部分选择“椭圆工具”在画布中点击鼠标左键弹出“创建椭圆”弹出层，设置宽度为230px，高度为230px，并勾选“从中心”，然后点击确定，图层重命名为“镜头1”。描边：大小8px、位置外部、填充类型渐变，色值从上向下#d5d5d5-#e6e6e6,角度90°。渐变叠加：色值从上向下#292929-#232323，角度90°。投影：颜色为#323232，角度90°，距离10，扩展0，大小13px。第五章图形图标设计简约扁平化ICON设计实例操作：照相机图标设计复制图层“镜头1”重命名为“镜头2”，点击菜单栏“编辑”“自由变换路径”（快捷键Ctrl+T），缩小60%，右键清除图层样式。描边：大小1px，位置内部，颜色#111111。渐变叠加：线性渐变，色值从上到下为#082441—#08101b，角度为90°。投影：颜色为#4f4f4f，角度90°，距离1，扩展0，大小0px。再用椭圆工具画个55px*55px的正圆，放到中间，命名为镜头3，填充颜色#0c0c0c。最后画镜头的高光，用【椭圆工具】画个正圆，大小自定，命名为高光，填充颜色#FFFFFF，不透明度为10%。第五章图形图标设计简约扁平化ICON设计实例操作：照相机图标设计6、绘制顶部和按键部分选择“圆角矩形工具”绘制圆角矩形命名为“顶部”，通过变形工具里面打透视修改图层，填充颜色为#ebe7e7。最后绘制相机的小红点，用椭圆工具和圆角矩形工具画个正圆和一个圆角矩形，大小自定，放在相机的左上角和右上角位置。描边：大小1px，位置外部，颜色#ff4d42。内阴影：颜色#ff483d，角度90°，距离5px，阻塞0，大小8px。渐变叠加：线性渐变，色值从上到下为#fe574c—#ff463b，角度为90°。第五章图形图标设计简约扁平化ICON设计实例操作：搜索图标设计完成效果和图层分布02三维效果ICON设计第五章图形图标设计三维效果ICON设计三维效果ICON设计概述所谓立体图标，就是在图标的设计中运用了空间透视、投影效果、浮雕效果、色彩渐变效果等使图标本身看上去具有视觉上的立体效果的图标设计。立体三维图标并不是实际意义上在三维空间设计的图标，而是通过二维平面所表现出来的视觉上的三维立体化效果，是通过透视原理和阴影、投影的表达效果，根据所涉及图标的明暗、色彩、深浅、和冷暖等多种要素的变化达到远近和层次的错觉，从而使图标在二维平面的范围内得到立体感和进深感的立体空间效果。第五章图形图标设计三维效果ICON设计三维效果ICON设计优势011.三维立体，视觉震撼。022.形象生动、易于识别033.个性多样、美感十足044.新颖别致、独具一格第五章图形图标设计三维效果ICON设计实例操作：音乐图标设计第五章图形图标设计三维效果ICON设计实例操作：音乐图标设计1、新建文件打开Photoshop，执行“文件打开”命令新建（快捷键Ctrl+N）一个新的图像，命名为联系人图标，并把宽度设置为800px，高度为600px，分辨率为72dpi，然后点击确定，填充背景图层颜色为#1d202b，保存文件（快捷键Ctrl+S）。第五章图形图标设计三维效果ICON设计实例操作：音乐图标设计2、绘制圆角矩形选择“圆角矩形工具”在画布中点击鼠标左键弹出“创建圆角矩形”弹出层，设置宽度为400px，高度为400px，半径50px，并勾选“从中心”，然后点击确定，在图层面板将圆角矩形图层名称改为“厚度”。第五章图形图标设计三维效果ICON设计实例操作：音乐图标设计3、设置图层的混合选项：在图层面板选中“厚度”图层，给“厚度”添加“渐变叠加”，设置渐变方式“对称渐变”。色值从左到右分别为#b2b2b2(色标位置0)—#474747（色标位置15）—#7c7c7c（色标位置28）—#b9b9b9（色标位置58）—#dfdfdf（色标位置100），角度为180°。在图层面板选中“外框”图层，给“外框”添加“渐变叠加”，设置渐变方式“线性渐变”。色值从左到右分别为#b9b9b9(色标位置0)—#e9e9e9（色标位置100），角度为90°。给“外框”添加描边样式，大小1px，位