第4章 图标设计ppt课件.ppt

《第4章 图标设计ppt课件.ppt》由会员分享，可在线阅读，更多相关《第4章 图标设计ppt课件.ppt（57页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、在此输入您的封面副标题第4章 图标设计第4章 图标设计 图标设计原则 图标设计技巧 UI 图标设计流程 图标设计风格 学习目标掌握图标设计的基本设计原则，能够独立完成图标的设计和制作。1了解移动设备中图标的参数规范，能够独立制作符合规范的图标。3掌握掌握了解2掌握扁平化、拟物化设计风格的特点，能够设计不同风格的图标。 目录【实例1】扁平化相机图标设计4.34.3【实例2】微扁平钟表图标设计4.44.44.14.1认识图标点击查看本小结知识架构【实例3】拟物化天气图标设计4.54.5【实例4】手机主题系统图标设计4.64.6图标设计风格4.24.2点击查看本小结知识架构 4.1 认识图标什么是图

2、标图标类型 知识架构图标设计原则图标设计技巧图标设计流程 4.2 图标设计风格扁平化风格拟物化风格 知识架构 本 章 将 通 过 “ 扁 平 化 相 机 图 标 设计”、“微扁平钟表图标设计”、 “拟物化天气图标设计”和“”手机“主题系统图标设计”四个对比案例，详细讲解图标的设计技巧。章节概要在UI设计中，图标作为核心设计内容之一，是界面中重要的信息传播载体。精美的图标往往起到画龙点睛的作用，从而提高点击率和推广效果。 4.1 认识图标在进行图标设计之前，需要了解一下图标设计的基础知识，以便准确、高效的完成设计任务。 4.1 认识图标本节将从图标的概述、设计流程、设计原则、设计技巧以及设计规范

3、等五方面，对图标的基础知识进行详讲解。 4.1.1 什么是图标 4.1 认识图标图标（ICON）是具有明确指代性含义的计算机图形，通过抽象化的视觉符号向用户传递某种信息。它具有高度浓缩并快速传达信息和便于记忆的特点，一般源自于生活中的各种图形标识，是计算机应用图形化的重要组成部分，知识点概述图标 4.1 认识图标 图标类型应用型图标指的是在手机主屏幕上看到的图标，点击它可以进入到应用中。应用型图标表现形式有多种多样的视觉图形，设计风格也可以有多种形式。应用型图标类似于品牌logo，具有唯一性。应用型图标应用型图标 4.1 认识图标 图标类型功能型图标是存在于应用界面内的图标，是简单明了的图形，

4、起表意功能和辅助文字的作用。而功能型图标类似于公共指示标志，具有通用性。它从外观形状上划分，通常分为线形图标、面形图标和扁平线形图标。功能型图标功能型图标的不同外观形状 4.1.3 图标设计原则 4.1 认识图标1可识别性原则图标能准确的表达出所代表的隐喻。能让用户第一眼识别出它所代表的含义。2差异性原则设计图标时要表现出差异性，避免同质化，力求给用户留下深刻的印象。3使用栅格线在设计图标时，使用栅格线让图标与系统保持和谐统一，更好的彼此匹配。应用型图标设计原则 4.1.3 图标设计原则 4.1 认识图标1表意准确原则表意准确原则，指的是要让用户看到一个图标第一时间理解它所代表的含义。2轮廓清

5、晰原则轮廓清晰原则是指形状边缘棱角分明，没有发虚的像素。3使用图标网格使用图标网格能帮助设计师掌握构图布局。让绘制图标更科学、准确、快速功能型图标设计原则4一致性原则一致性指的是细节特征等的统一，让图标的外观整体一致。 4.1.4 图标设计技巧 4.1 认识图标正负形组合可以根据应用抽象出两到三个重要的功能点，或者产品特质，然后提炼相应的图形，通过图形相互组合、叠加，或者抠除，组成新的图形。正负组合型图标 4.1.4 图标设计技巧 4.1 认识图标折叠图形当一个完整的平面图形设计完成后，可以分析图形的轮廓走向，在图形的结尾或者转角处做局部折叠处理折叠型图标 4.1.4 图标设计技巧 4.1 认

6、识图标线形图标线形图标是一种独特的绘制图形手法，可通过提炼图形的轮廓设计，各式线性图形，应用的形象简练、完整，更具吸引力。线形图标 4.1.4 图标设计技巧 4.1 认识图标透明渐变通过对图形放大或缩小叠加不同透明度的图形，形成一个层次丰富，形态饱满的图形组合透明渐变型图标 4.1.4 图标设计技巧 4.1 认识图标色块拼接色块拼接是指把图形分割成有规律的块状，并填充颜色。色块拼接型图标 4.1.4 图标设计技巧 4.1 认识图标图形复用对已经设计好的主图形，进行复制，通过透明度、颜色或者大小的变化，创造出一种图形阵列之美。图形复用型图标 4.1.4 图标设计技巧 4.1 认识图标背景组合运用

7、不同的底板背景更能使图标汇聚聚焦点、富有活力。背景可以选择纯色、渐变色、放射或规律的集合线条以及和主题相关的元素。图标形状+背景文字+背景图文组合+背景吉祥物（或卡通形象）+背景 4.1.5 图标设计流程 4.1 认识图标 4.2 图标设计风格在进行图标设计之前，需要了解一下图标设计风格有哪些。 4.2 图标设计风格本节将从扁平化风格和拟物化风格两方面，对图标的设计风格进行讲解。 4.2.1 扁平化风格 4.2 图标设计风格扁平化风格是指摒弃高光和阴影等能造成透视感、空间感的效果，采用抽象、简化等设计方法和符号等设计元素来表现图标。知识点概述扁平化风格 扁平化的类别 4.2 图标设计风格扁平化

8、1.0扁平化1.0通常采用明亮的纯色块，简洁的元素进行设计。元素的边界力求干净利落，没有添加任何效果。在设计过程中尽量简化，去除所有的装饰效果，让整体看起来干脆利落扁平化1.0 扁平化的类别 4.2 图标设计风格扁平化2.0扁平化2.0是为了避免纯粹的扁平化设计，在扁平化1.0的基础上，在符合扁平化的简洁美学的前提下，增加的一些细微光影效果。扁平化2.0 4.2 图标设计风格 扁平化优缺点 4.2.2 拟物化风格 4.2 图标设计风格拟物化风格就是模拟现实物品的造型和质感，通过叠加高光、纹理、材质、阴影等效果对实物进行再现，也可进行适当的变形和夸张。通过模仿用户熟知的日常物体的视觉线索，从而能

9、降低用户的认知负荷。知识点概述拟物化风格 拟物化的类别 4.2 图标设计风格纯拟物图标模拟现实物品的造型和质感，具有直接、真实、不夸张的视觉表现纯拟物 拟物化的类别 4.2 图标设计风格局部拟物通过物体的某一突出特征传达图标含义，具有引起用户联想的视觉表现。局部拟物 拟物化的类别 4.2 图标设计风格夸张表现保留现实物品的质感，但为了设计改变了物体的造型，具有夸张、丰富想象力的视觉表现。夸张表现 4.2 图标设计风格 扁平化优缺点 4.3【实例1】：扁平化相机图标设计扁平化以其大胆的用色，简洁明快的设计风格让大家耳目一新。尤其是在移动端应用中表现的更为明显。 相机图标是手机界面中最常见的图标，

10、也是UI设计师入门级的基础图标。本次任务是设计一枚扁平化风格的相机图标，要求图标具备醒目、简洁、易辨识等图标基本特点。最终效果任务描述通过本任务的学习，读者可以掌握扁平化图标的基本设计技巧。 4.3【实例1】：扁平化相机图标设计 1.图标设计尺寸：本实例按照图标尺寸512512像素的设计规范进行。具体如下表所示。任务分析 4.3【实例1】：扁平化相机图标设计图标尺寸（像素）图标尺寸（像素）圆角（像圆角（像素）素）分辨率（像素）分辨率（像素）5125129072 2.设计风格：实例采用扁平化的设计风格。任务分析1）熟悉扁平化风格：扁平化设计是将现实物品拍平，核心就是丢掉一切多余的装饰，呈现给用户

11、最简洁的效果。2）选取参照物：观察现实参照物有哪些部分构成，然后将其最核心的部分罗列出来。以相机为例，相机主要是由镜头、机身和闪光灯构成。那么，高光、质感这些就可以扔掉了。 4.3【实例1】：扁平化相机图标设计 任务分析4.3【实例1】：扁平化相机图标设计相机结构图 2.设计风格：任务分析3）抽象化处理：用圆角矩形代替闪光灯，多个正圆的大小变化代替镜头，圆角矩形代替机身。将原本具象的相机简单化并使外观清爽简洁。3.颜色运用：以浅黄色（RGB：242、242、220）和深黄色（RGB：87、80、43）作为主色调，这个颜色纯度比较低，从而使图标的整体色彩看起来更加舒适，运用彩虹色作为点缀色来表现

12、图标的俏皮感。4.3【实例1】：扁平化相机图标设计 4.3【实例1】：扁平化相机图标设计 扁平化设计虽然简洁明快，但因其交互不够明显，按钮难以找到等一直被用户诟病。为了避免纯粹的扁平化设计，一些细微的效果逐渐被运用其中，例如，内阴影、投影等。扁平化设计正在向微扁平设计演变。4.4【实例2】：微扁平钟表图标设计 微扁平会运用一些符合扁平化简洁美学的设计效果，对扁平化设计进行细致的处理。本次任务是设计一枚微扁平相机图标，要求突出相机闪光灯和镜头光影关系的变化。钟表图标的最终设计效果如下图所示。最终效果任务描述通过本任务的学习，读者可以掌握扁平化风格图标设计技巧，理解扁平化风格2.0。4.4【实例2

13、】：微扁平钟表图标设计 1.图标设计尺寸：微扁平的图标尺寸并不会变化，因此可以参照扁平化图标的设计尺寸进行制作。任务分析图标尺寸（像素）图标尺寸（像素）圆角（像圆角（像素）素）分辨率（像素）分辨率（像素）51251290724.4【实例2】：微扁平钟表图标设计 2.设计风格：实例采用微扁平的设计风格。任务分析1）熟悉扁平化的类别：微扁平就是在扁平化的基础上，多了些轻渐变和轻投影。具有干净柔和、有一定的精致感和简单的层次等特点。2）选取参照物：以钟表为例，钟表主要是由表盘、刻度和指针构成。那么，在保持简练的结构的情况下，模仿现实参照物给其适当的添加效果，让图标更具生命力。4.4【实例2】：微扁平

14、钟表图标设计 2.设计风格：任务分析3）抽象化处理：通过绘制基本形状图形来构成图标，并添加图层样式等效果，表现出物体的一些微质感即可。3.颜色运用：以浅灰色（RGB：87、87、87）和深灰色（RGB：36、36、36）作为渐变主色调，这个颜色渐变比较柔缓，从而使图标整体看起来更精致。4.4【实例2】：微扁平钟表图标设计 4.4【实例2】：微扁平钟表图标设计 虽然扁平化和微扁平的设计风格趋势盛行，但效果逼真的写实图标仍然是一个设计师功底的体现。写实图标设计以其逼真的效果、较高的辨识度为广大用户带来愉悦的视觉享受。4.5【实例3】：拟物化天气图标设计 写实图标最能考验设计者的综合实力，本次任务是

15、设计拟物化天气图标，要求通过叠加渐变、颜色、光晕等效果对太阳进行再现。拟物化天气图标的最终设计效果如下图所示。任务描述通过本任务的学习，读者可以掌握拟物化图标的设计技巧、了解简单的光影关系原理。最终效果4.5【实例3】：拟物化天气图标设计 1.图标设计尺寸：可以参照扁平化图标的设计尺寸进行制作。任务分析图标尺寸（像素）图标尺寸（像素）圆角（像圆角（像素）素）分辨率（像素）分辨率（像素）51251290724.5【实例3】：拟物化天气图标设计 2.设计风格：实例采用拟物化的设计风格。任务分析1）熟悉拟物化风格：拟物化是模拟实际物体的造型和质感，具有新奇、夸张、丰富想象力的视觉表现。2）选取参照物

16、：以太阳为例，太阳是由本体和光芒构成。根据现实参照物给其添加效果进行描绘再现，表现出物体的三大面五大调子，让图标更具视觉冲击力。3）具象化处理：通过绘制基本形状图形来构成图标，并叠加高光、阴影等图层样式效果，表现出物体的真实化。4.5【实例3】：拟物化天气图标设计 3.颜色运用：以黄色（RGB：87、87、87）和橙色（RGB：36、36、36）作为渐变主色调，这个渐变颜色符合人们对太阳颜色的认知，并且可添加细节来使图标整体看起来更写实。任务分析4.5【实例3】：拟物化天气图标设计 4.5【实例3】：拟物化天气图标设计 虽然扁平化和微扁平的设计风格趋势盛行，但效果逼真的写实图标仍然是一个设计师

17、功底的体现。写实图标设计以其逼真的效果、较高的辨识度为广大用户带来愉悦的视觉享受。4.6【实例4】：手机主题系统图标设计 本次任务是设计手机主题系统图标，手机主题系统图标的最终设计效果如图所示。任务描述通过本任务的学习，读者可以掌握主题系统图标设计的风格和设计原则，熟悉Android主题系统图标设计的尺寸。最终效果4.6【实例4】：手机主题系统图标设计 1.图标设计尺寸：本实例按照Android图标尺寸256256像素的设计规范进行。2、设计风格：实例采用扁平化2.0的设计风格，表现出图标的微质感即可。3、图形结构：底座选择“多边形工具”中的四边形并平滑拐角，这样出来的圆角柔缓柔和，给人以亲和力。小图标拖拽的是扁平的素材，也要突出质感，表现出光影关系。4、颜色运用：在颜色选择上，色彩的饱和度也不要过高，要低于90%。不然图标进入手机做展示时，会曝光过度。任务分析4.6【实例4】：手机主题系统图标设计 4.6【实例4】：手机主题系统图标设计