图标创意设计课件

1、“图标（Icon），亦作图示，广义上指所有有指示作用的标志，一般指电脑屏幕或手机的桌面上用来指示用户运行各种操作的图像，作为字符显示的重要辅助。“why?”“人们对各种软件界面的美观程度有了更高的要求一款设计合理优秀的图标可以为网页或软件界面增色不少在UI界面设计中，图标设计占据很大的比例“UI即User Interface(用户界面)的简称。UI设计是指对软件的人机交互、操作逻辑、界面美观的整体设计。好的UI设计不仅是让软件变得有个性有品位，还要让软件的操作变得舒适简单、自由，充分体现软件的定位和特点。了解图标基础知识掌握图标创意原则12图标风格赏析图标设计与软件操作34CONTENTS图标

2、基础知识图标创意设计01图标的设计和意义常见图标的尺寸图标分类246图标入门图标的像素分辨图标设计要素结构135制作图标的软件图标基础知识CONTENTS”“.图标入门图标的概念“”相机图标“”创意图标“”Adobe CS5Adobe CS6“”1.1.1图标是什么？图标是具有明确指代含义的计算机图形。其中桌面图标是软件标识，界面中的图标是功能标识。它源自于生活中的各种图形标识，是计算机应用图形化的重要组成部分。“”1.1.2图标与标志的区别标志（logo，又写作标识，二者读音都是biozh），是表明事物特征的记号。具有高浓缩并快捷传达信息、便于记忆的特征。标志的应用范围很广，软硬件、网页社交

3、场所、公共场合等“”标志“”标志“”图标应用于计算机软件等方面，包括：程序标识、数据标识、命令选择、信号模式或切换开关、状态指示等。一个图标是一个小的图片或对象，代表一个文件、程序、网页或命令。图标有助于用户快速执行命令和打开程序文件，单击或双击图标可执行一个命令。图标也用于在浏览器中快速展现内容。1.1.2图标与标志的区别“”云计算时代的到来，使得企业信息化这一话题又有了新的生命。在云端服务性能不断增强之外，最显著的特征就是在终端的精彩表现。单纯用PC来使用ERP的时代一去不复返。以手机、平板电脑介质为代表的移动终端应用将为企业信息化带来巨大变革。移动应用图标便是其中最有力的代表。其中包括手

4、机PP和移动应用图标。1.1.3常见移动应用图标“”手机界面“”桌面上除了系统图标以外都是应用程序图标。电脑应用图标是另外装的，并带有小箭头。常见的电脑应用图标包括、媒体播放器、游戏、各种应用软件等1.1.常见电脑应用图标“”电脑桌面“”图标“”图标“”命令选择图标”“什么是图标?.图标设计的意义和作用“”1.1什么是图标？图形用户界面这个概念诞生于年施乐完成的第一个演示，使得计算机用户界面从字符发展过渡到图形时代。图标设计不仅能有效地为设计者传播信息和内涵，而且对有着重要的意义。“”图标广义上指所有有指示作用的标志，在中文中一般指电脑桌面上用来指示用户运行各种操作的图像，是字符显示的重要辅助

5、。图标多数是一个正方形的像素矩阵，大小从像素到像素不等，也有一些系统可以使用矢量的图标。“”随着发展，图标总体呈现出时代性与个性化的视觉符号形态。“”1.2图形的内在含义？色彩设计构图和视觉风格设计图标、CSS、结构与表现分离“”1. 色彩设计“”1. 色彩设计由于UI的受众十分广泛且不确定，加上技术构架的特点，我们不应该岁最终用户要求什么。因此，充分保证设计的易取性，即在各种复杂的环境下都要保证“可用”且不出现严重的视觉干扰，这是设计时的首先应该把握好的一个尺度。“”2. 构图和视觉风格设计“”操作系统是桌面用户界面设计色领头军，换言之，UI设计师在进行桌面UI设计时，首先应该考虑的就是操作

6、系统环境。而往往，某个特定软件环境下的桌面应用，UI也是有诸多限制的。这个限制，就是系统固有的交互风格设定。“2. 构图和视觉风格设计“”3. 图标、CSS、结构与表现分离“”图标按其创作风格，大致可分为两种：失灵图标和像素图标。在没有Alpha通道的几年前，图标几乎都是像素风格的，硬而简洁，但是十分耐看。近年来，随着Alpha通道逐渐普及，图标开始越来越绚丽、越来越写实。设计师们为了创造更加绚丽的图标，逐渐改用矢量设计软件来进行创作。3. 图标、CSS、结构与表现分离“”层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或

7、XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS“”CSS目前最新版本为CSS3，是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力，简化或者优化写法，针对各类人群，有较强的易读性。”CSS“”1.3图标设计的作用1. 美观的图标可以给我们的设计工作增加亮点“图标可以为标题添加视觉引导、可以用作按钮、分隔页面、做整体修饰、使网站显

8、得更加专业、增强网站交互性。“”“2. 图标作为UI设计中的决定性因素，在内容区使用可以为页面增加“空隙”。”“3. 图标可以用来分隔内容，让布局不再生硬，并给读者视觉引导。“”“像素？.3图标的像素分辨“”1.3图标的像素分辨平常我们在使用操作系统时，都会使用各种各样的图标，系统在显示一个图标时，会按照一定标准选择图表中最适合当前显示环境和状态的图像。图标设计中，分辨率越高效果越好。“1.3.1Windows XP 操作系统的图标像素分辨Windows XP 操作系统中，图标的图像格式就是：真彩色（32位色深）、32*32像素大小。”“”1.3.2WIN7 操作系统的图标像素分辨超大图标：2

9、56X256大图标：128X128中图标：32X32平铺：32X32列表、详细信息：16X16“”1.3.3WIN8 操作系统“”1.3.4WIN10 操作系统“”1.3.5安卓系统的像素分辨“”Android 1.6用户界面 “SIZE”分级160dpi-180dpi240dpi“”1.3.5安卓系统的像素分辨1. 图片缩放2. 自动定义像素尺寸位置3. 兼容更大尺寸的屏幕“128X128 256X256 128X128图片缩放机遇当前屏幕的精度，平台自动加载任何未经缩放的限定尺寸和精度的图片。“”1.3.6iOS 7 操作系统的图标像素分辨每一个应用程序都需要一个应用程序图标和启动图像。此

10、外，一些应用程序需要自定义的图标来标示特定于应用程序的内容、功能，或在导航栏、工具栏和标签模式栏。“”1.3.6iOS 7 操作系统的图标像素分辨”“SIZE？.4常见图标的标准尺寸“”.4常见图标的标准尺寸系统图标常用规格是：16X16、24X24、48X48、256X256Android屏幕图标尺寸规范，程序启动图标有Idpi(120dpi)小屏、mdpi(160dpi)中屏、hdpi(240dpi)大屏、xhdpi(320dpi)特大屏、16X16px、24X24px、48X48px、72X72 px、96X96 px.”“设计？.5图标的设计要素和结构“”.5图标的设计要素和结构点 线

11、 面”“图标设计中，组成图标色基本要素可演绎为点、线、面来检查它们各自的特性与彼此的效用。而“点、线、面”作为最基本的构成要素，在图标设计的造型中有各自的特点。“”点不仅是数学的基本概念，也有大小、形状、方向的细微变化的各种属性。在图标的设计中，以点的形式制作效果通常起到画龙点睛的作用。”“在图标设计中线具有切割和领导的作用。在图标设计实践中，在合理使用的基础上，线可以更好地使图标达到预期的目标。因为不同的绘图工具使线元素有不同的特点，在图标设计中，正确使用不同地线条，是传达感情的非常有效地方法。”“面通常是点和线的聚集，在具体的设计实践中，面作为基本建模元素，也是每个元素之间的内在联系。例如

12、点既可以形成线的排列，也可以实现点集。“”.5图标型的把握图标中型的把握即对于度的把握与调整，我们常用“对比和调和”这两种方法进行调整，从而达到我们想要的变化和统一。“”通常，我们处理图标时主要有两种状态:大对比、小调和，即总体是对比的格局，局部调和。大调和小对比，总体上调和局部存在对比。“”形象特征的调和色彩的调和方向的调和“1.5.2 透视、光源与阴影图标色透视、光源与阴影直接关系到图标是否具有一定的立体效果。阴影形成的直接原因是光线，而光线来自光源。光源性质不同，光线投射方式不同，阴影特点也就不一样。“”光源分类：1. 平行光源2. 点光源（辐射光）3. 漫射光“”1.5.3元素的组合组

13、合元素的数量不要太多，多个元素组合成的图标，在缩小后容易造成识别困难的问题，缩小后不易于识别。图标造型的主题应重复反映其差异性。“”1. 当概念本身在现实世界有直接对应的物理形态时，可以将此形态作为图标的主要的造型元素。如：日历、地图“”2. 当概念表达一个抽象动作时，可以在造型元素中使用表达其运行机制的指示性的符号。如：同步、上传、后退“”3. 当概念表达一个抽象动作时，可以在造型元素中使用与该动作有关的道具。如：购买用购物车“”4. 在造型使用与图标语义相关的元素。如：Burning DiskHome Page“”5. 当品牌因素至关重要时，在造型元素中使用品牌的语言。“”1.5.4视觉均衡图标的画布空间应符合平台的设计规范和标准，在绝大部分系统平台中（比如Android或iSO），图标画布的标准规格是正方形，而长方形的画布规格非常罕见。“符合一般标准不符合标准整体性好整体性差“”1.5.5图标设计注意点1、构思时利用发散性思维进行创意联想2、创作时注意图标设计的可识别性3、设计时注意图标设计的一致性（比如光源一致性）4、图标设计注意尽量避免文字的出现5、设计过程（首先：草稿绘图，其次：电脑框架，再次：电脑上色）”“格式？.6图标分类“”1