UI设计 图标设计 图标设计.ppt

白模质感图标设计 皮质感图标设计 石头感图标设计 扁平化风格 Facebook情感图标设计 像素风格 水果主题图标设计 主题性图标设计 怪兽主题图标设计 西游主题图标设计 铁木真主题图标设计 十二生肖主题图标设计 宠物之家主题图标设计 课堂笔记主题图标设计 民俗主题图标设计 霓虹灯主题图标设计 爱情主题图标设计 图标设计的基础理论 7、像素图标的绘制 （1）像素图标设计规范 像素图其实是由很多个点组成，又名点阵式图像。像素图标属于位图，而位图的最小单位是1个像素（1pixel）。像素图标更强调清晰的轮廓、明快的色彩，几乎不用混叠方法来绘制光滑的线条，所以常采用.gif格式，信息容量小，经常被用在早期计算机界面。 （2）像素图标的透视 像素图标的透视可以用正视、一点透视两点透视来绘制。其中蓝色点为消失点，很多像素游戏和像素立体图标都喜欢用斜上方45°角俯视的上帝视角。 角度统一后，元素之间方面拼接，并统一透视。 图标的透视 （3）像素图标的取色 像素图标的颜色比较少，一般使用一个渐变色，从等距中取出3、5或8等份颜色。少量的颜色对今后减少数据存储容量，这在GIF和PNG图像里特别明显。 图标的取色 （4）像素线条的规范 像素线条要求简洁清晰、粗细一致，不能有多余的点，画完以后要清理线条。 一般来说，规整的布点出来的线段更加美观。 （5）像素的渐变布点 颜色相同的点，布点的疏密，可以造成图像灰度上的差别，形成渐变。 图标设计的基础理论 8、剪影2D图标 剪影图标，因其简洁易识别的造型，被大批量运用在系统功能菜单中。 剪影2D图标一般是成套出现在系统功能类中，所以外观统一和识别性非常重要。新手UI设计师容易犯的错误是东挖西抠，导致风格不统一。 风格不统一的参考图标 图标设计的基础理论 剪影图标风格一致注意： 倒角和圆角一致 线的宽度一致 体积感一致 外轮廓造型一致 倾斜角度上一致 透视角度一致 剪影图标设计技巧包括以下： （1）确定图标对应功能，确定整套需要画的数量； （2）抽象对象造型，准确表达图形寓意； （3）添加阴影和外发光，使图标在不同颜色背景上都能突显； （4）反复调整，使整套图标精致、美观。 剪影图标的基本设计流程： 概念稿——矢量勾线——调整平衡体积感——上色画阴影或其他效果——放入界面观察效果 照相机图标的各不同表现方法 图标设计的基础理论 9、写实图标 制作流程如下： 尽量找具有参考价值的照片和图片 归纳出造型重点、提炼颜色、纹理细节 有重点性的夸张造型和构图表现 概念草稿3-20张，各个角度，各种组合 勾轮廓线——填充固有色——暗部阴影——高光——叠纹理——扣细节——环境色添加 包装发布（加上漂亮的背景色） 立体写实图标绘制的8个要素： Perspective（透视） Light Source（光源） Shadows（阴影） Color Saturation（颜色和饱和度） Size Requirements（尺寸要求） Detail（细节-纹理质感） Icon Development（图标流程） UI Context Examples（用户界面） 一般绘制系统图标，先画一个512px最大尺寸的，然后其他尺寸直接缩小。从大尺寸到小尺寸，图标要一样清楚。大尺寸图标意味着很多细节，绘制小图标时省略不需要的细节，在16px或12px等可以使用正视，只要能看出隐喻即可。 图标设计的基础理论 10、扁平化图标 （1）扁平化产生的契机 设计界的流行趋势，屏幕分辨率越来越高 大量写实拟物图标，造成视觉上的疲劳 大量的纹理和高光阴影细节对基本功能进行干扰 写实的图标很难表现出一个抽象的概念 分享（share）图标的不同表现效果 （2）扁平化设计技巧 设计元素简单化 就是在一个没有景深的平面上加入简单的图形符号。扁平化设计最核心的地方就是放弃一切装饰效果，如阴影、高光、透视和渐变等能够体现视觉立体感的元素一概不用。 纯色 简单图形符号 尤其在手机上，由于受到屏幕的限制，使扁平化风格在用户体验上更有优势，更少的按钮和选项使得界面干净整齐，使用起来格外流畅。 强调字体的使用 字体是设计排版中很重要的一部分，它需要和设计中的其他元素相辅相成。在扁平化设计中使用了不合适的字体，就会在整个设计中显得很突兀。 在扁平化的网站设计中使用无衬字体 色彩应用的重要性 扁平化设计通常会使用明亮和饱