UI的设计－从图标到界面完美解析第五章 图形图标的设计.pptxVIP

从图标到界面完美解析 UI 设计 主讲教师：XXX 第五章 图形、图标设计 CONTENTS 目 录 01 简约扁平化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设计 实例操作：搜索图标设计