图标设计课件

图标设计一、图标设计原则一、图标设计原则图标设计的目的

优点：用图标代替文字，比文字要直观，提高软件可用性；用图标代替文字，比文字更漂亮，提升视觉效果；缺点：不如文字表达的准确。一、图标设计原则第一：可识别性原则看到一个图标，就要明白他所代表的含义，这是图标设计的灵魂。一、图标设计原则第一：可识别性原则例：高速公路上的路标设计，我只能说，这是最好的图标设计，可识别性强，简单，直观，即使是不认识字的人，也能立即理解图标的含义。见图（1）一、图标设计原则第一：可识别性原则图（2）是一些常用工具类的图标，你是否一眼就能看出每个图标的区别和含义呢？一、图标设计原则第一：可识别性原则图（3）为我们的设计师Veronica为6301项目进行的图标设计，符合可识别性原则。一、图标设计原则第二：差异性原则

差异性原则，什么意思呢？意思是如果一个界面上有六个图标，我一眼看上去，要能第一时间感觉到他们之间的差异性，否则我怎么辨认呢？一、图标设计原则第二：差异性原则

见图（4），这是我平时最常用的一套软件：用友致远办公管理系统，我只能说从差异性和可识别性来讲，这里的图标设计非常失败。一、图标设计原则第二：差异性原则

图（5）这套图标很漂亮，但是从差异性上来讲，这套图标也是失败的，黄色的文件夹部分的六个图标，一眼望去几乎又是一样的，差异极小，在具体应用过程中会很吃力，用户需要仔细观察才能区分出他们的差别。一、图标设计原则第二：差异性原则

Catia是世界领先的CAD\CAE大型软件系统，但是它V5R16版本图标设计同样存在上述问题，见图（6），一眼望上去几乎一个样子，同时边缘粗糙，配色生硬，缺乏美感一、图标设计原则第二：差异性原则

我们看下图AdobePhotoshop的图标，精致，专业，图标设计的典范。我们看它完全符合差异性的原则，每个图标一眼望上去，都不一样，并且能够代表所需要的操作，可谓望图知意。一、图标设计原则第三：合适的精细度，元素个数首先我们要明确一个点，图标的主要作用是用的，代替文字，第二才是美观。但现在的图标设计者往往陷入了一个误区，片面的追求精细，高光和质感。其实，图标的可用性随着精细度的变化，是一个类似于波峰的曲线。在初始阶段，图标可用性会随着精细度的变化而上升，但是达到一定精细度以后，图标的可用性往往会随着图标的精细度而下降。变化曲线如下图：。一、图标设计原则第三：合适的精细度，元素个数下图是一个表示“设置”的齿轮图标，我们看到，最左边的最简单的和最右边的照片级的，可用性都是非常低的，都不适合做图标。第三：合适的精细度，元素个数差异性原则，什么意思呢？意思是如果一个界面上有六个图标，我一眼看上去，要能第一时间感觉到他们之间的差异性，否则我怎么辨认呢？天气通第四届手机桌面插件设计大赛其实，图标的可用性随着精细度的变化，是一个类似于波峰的曲线。图标设计的原创性并不是必要的，因为目前常用的图标风格种类已经很多，易用性较高的风格也就那么多种，过度追求图标的原创性和艺术效果，会导致图标设计另辟蹊径，这样做往往会降低图标的易用性降低，也就是说所谓的好看不实用。从艺术性上它可以拿到10分，从可用性上，它可能是0分，因为图标是拿来用的，我实在不知道它表达的是什么意思2、图层样式+混合模式天气通第四届手机桌面插件设计大赛的要求设计一套完整的作品（要占用课余时间哦）图（3）为我们的设计师Veronica为6301项目进行的图标设计，符合可识别性原则。比如你的界面是森林和大地，你就可以考虑用石块，木头，或者蘑菇，野花设计一系列的图标。我很推崇ICONFACTORY的图标设计，见图（11），合适的精细度达到精美的视觉效果，同时又很直观，不会包含过多的元素，让你去思考。图标设计的视觉效果，很大程度上取决于设计师的天赋、美感和艺术修养，有些设计师做了很多年的设计，作品一堆，拿出来一看，粗糙，刺眼，土气。是简约的，还是精致的？图标设计的视觉效果，很大程度上取决于设计师的天赋、美感和艺术修养，有些设计师做了很多年的设计，作品一堆，拿出来一看，粗糙，刺眼，土气。因此，图标的设计，要考虑图标所处的环境，这样的图标，是否适合这样的界面？一、图标设计原则第三：合适的精细度，元素个数Vista是微软的比较失败的一个产品，原因很多，但主要的原因之一是被人称之为华而不实。我们看一下Vista的图标设计，见图（10），很漂亮，很精细，但是很显然，图标包含的元素过多了，不够直观，用户需要思考这么多元素，代表的到底什么意思？这正好违反了交互设计第一原则“不要让我思考”一、图标设计原则第三：合适的精细度，元素个数我很推崇ICONFACTORY的图标设计，见图（11），合适的精细度达到精美的视觉效果，同时又很直观，不会包含过多的元素，让你去思考。一、图标设计原则第四：风格统一性原则如果一套图标的视觉设计非常协调统一，我们就说这套图标具有自己的风格，这样的图标看上去也会更美丽，更专业，同时也会增强用户的满意度。是简约的，还是精致的？是平面的，还是立体的？

是古典的，还是现代的？

是写实的，还是卡通的？

是单色的，还是多彩的？

是绚丽的，还是柔和的？

是抽象的，还是具体的？

是有框的，还是无框的？一、图标设计原则第四：风格统一性原则统一你的色彩，准备好你的调色板一、图标设计原则第四：风格统一性原则下图是ICONFACTORY设计的一套图标，色彩唯美，风格统一，散发着神秘感，你不觉得它很美吗？一、图标设计原则第四：风格统一性原则下图同样出自ICONFACTORY，平面的，带边框的的，简单的可爱的卡通的风格。一、图标设计原则第四：风格统一性原则右图这套图标出自俄罗斯设计师之手，看到这套图标，你是否会想起中世纪的欧洲，大航海时代？一、图标设计原则第四：风格统一性原则一款叫DOPWARS的小游戏做的任务角色图标设计，你可以看到它那种可爱的、3D的、卡通的风格，色彩也和谐一致。一、图标设计原则第五：与环境的协调性图标是没有单独存在的，图标最终是要放置在界面上才会起作用的。因此，图标的设计，要考虑图标所处的环境，这样的图标，是否适合这样的界面？比如你的界面是森林和大地，你就可以考虑用石块，木头，或者蘑菇，野花设计一系列的图标。一、图标设计原则第五：与环境的协调性如果你的界面是平面的，简约的，你可以考虑用一些简单的平面的符号或者图形来设计你的图标，这样整个界面会很协调，不要认为这样的图标是简陋的，其实这样的图标的可识别性非常强的，在简洁的界面里，会透露出一种简约之美。下图是我对UI设计四个阶段“用户研究，交互设计，视觉设计，可用性测试”的图标定义

当然还少了一个前提，那就是设计师的天赋。第三：合适的精细度，元素个数当然还少了一个前提，那就是设计师的天赋。统一你的色彩，准备好你的调色板但现在的图标设计者往往陷入了一个误区，片面的追求精细，高光和质感。例：高速公路上的路标设计，我只能说，这是最好的图标设计，可识别性强，简单，直观，即使是不认识字的人，也能立即理解图标的含义。其实，图标的可用性随着精细度的变化，是一个类似于波峰的曲线。当然还少了一个前提，那就是设计师的天赋。在初始阶段，图标可用性会随着精细度的变化而上升，但是达到一定精细度以后，图标的可用性往往会随着图标的精细度而下降。0或者之前的所有版本，不支持透明和半透明。图标是没有单独存在的，图标最终是要放置在界面上才会起作用的。下图是一个表示“设置”的齿轮图标，我们看到，最左边的最简单的和最右边的照片级的，可用性都是非常低的，都不适合做图标。比如你的界面是森林和大地，你就可以考虑用石块，木头，或者蘑菇，野花设计一系列的图标。其实，图标的可用性随着精细度的变化，是一个类似于波峰的曲线。看到一个图标，就要明白他所代表的含义，这是图标设计的灵魂。一、图标设计原则第五：与环境的协调性体育运动类图标的设计一、图标设计原则第五：视觉效果追求视觉效果，一定是要在保证差异性，可识别性，统一性，协调性原则的基础上，要先满足基本的功能需求，才可以考虑更高层次的要求--情感需求。图标设计的视觉效果，很大程度上取决于设计师的天赋、美感和艺术修养，有些设计师做了很多年的设计，作品一堆，拿出来一看，粗糙，刺眼，土气。这一条我不想说的太多，因为这是几乎是每个设计都努力的目标，我提供一套迅速提高技能方法，最原始，但也最管用：那就是多看，多模仿，多创作。当然还少了一个前提，那就是设计师的天赋。勤奋+天赋=成功一、图标设计原则第六:原创性图标设计的原创性并不是必要的，因为目前常用的图标风格种类已经很多，易用性较高的风格也就那么多种，过度追求图标的原创性和艺术效果，会导致图标设计另辟蹊径，这样做往往会降低图标的易用性降低，也就是说所谓的好看不实用。当然，这里也要看你的产品的侧重点，如果考虑更多的是情感化的设计，完美的艺术效果，这样做也无可厚非。一、图标设计原则第六:原创性这套“中国风图标”我们可以说它具有原创性，它很美，但是这样的图标做不到望图知意，实际上失去了易用性，所以说，原创性与易用性，很多时候是一把双刃剑，看你的选择了一、图标设计原则第六:原创性上面的图标设计，相信很多设计师都看过，简直就是完美的艺术品，我惊叹于它的艺术效果和原创性。从艺术性上它可以拿到10分，从可用性上，它可能是0分，因为图标是拿来用的，我实在不知道它表达的是什么意思永远记住这一条，图标的价值在于它比文字更直观，失去了这一条，就是去了它的意义。一、图标设计原则第七：尺寸大小与格式图标的尺寸常有以下几种：16×1624×2432×3248×4864×64128×128256×256图标过大占用界面空间过多，过小又会降低精细度，具体该使用多大尺寸的图标，常常根据界面的需求而定。

一、图标设计原则第七：尺寸大小与格式一、图标设计原则图标的常用格式有以下几种：PNG，GIF，ICO，BMP，

PNG：无损压缩格式，支持透明，兼顾图像质量和文件大小，但是请注意，PNG格式在网页中，IE6.0或者之前的所有版本，不支持透明和半透明。GIF：网页图片常用格式，支持透明，优点是压缩的文件小，支持GIF动画，缺点是不支持半透明，颜色数最多只能显示256种颜色，透明图标的边缘会有锯齿，要解决此问题，必须在存成此格式时候，添加相同背景色的杂边，比较麻烦。JPG：有损压缩，优点是文件小，图像颜色丰富，缺点是不支持透明和半透明ICO：WINDOWS系统的图标文件格式，支持多通道透明，支持32位真彩色你可以用ICONWORKSHOP软件，把PNG,GIF,JPG等格式的图标，转换成ICO格式。ICNS：Macintosh系统里独特支持的格式，仅限于此系统。二、图标的创作二、图标的创作1、图标的分类Vista是微软的比较失败的一个产品，原因很多，但主要的原因之一是被人称之为华而不实。作业：根据2015年新浪.图标设计的视觉效果，很大程度上取决于设计师的天赋、美感和艺术修养，有些设计师做了很多年的设计，作品一堆，拿出来一看，粗糙，刺眼，土气。第三：合适的精细度，元素个数统一你的色彩，准备好你的调色板天气通第四届手机桌面插件设计大赛的要求设计一套完整的作品（要占用课余时间哦）上面的图标设计，相信很多设计师都看过，简直就是完美的艺术品，我惊叹于它的艺术效果和原创性。图标是没有单独存在的，图标最终是要放置在界面上才会起作用的。追求视觉效果，一定是要在保证差异性，可识别性，统一性，协调性原则的基础上，要先满足基本的功能需求，才可以考虑更高层次的要求--情感需求。图标设计的原创性并不是必要的，因为目前常用的图标风格种类已经很多，易用性较高的风格也就那么多种，过度追求图标的原创性和艺术效果，会导致图标设计另辟蹊径，这样做往往会降低图标的易用性降低，也就是说所谓的好看不实用。第三：合适的精细度，元素个数你可以用ICONWORKSHOP软件，把PNG,GIF,JPG等格式的图标，转换成ICO格式。ICO：WINDOWS系统的图标文件格式，支持多通道透明，支持32位真彩色但现在的图标设计者往往陷入了一个误区，片面的追求精细，高光和质感。下图同样出自ICONFACTORY，平面的，带边框的的，简单的可爱的卡通的风格。二、图标的创作2、图标创作方法二、图标的创作3、图标的分类二、图标的创作4、主题图标的造型二、图标的创作5、主题图标创作原则作业：根据2015年新浪.比如你的界面是森林和大地，你就可以考虑用石块，木头，或者蘑菇，野花设计一系列的图标。图标的尺寸常有以下几种：追求视觉效果，一定是要在保证差异性，可识别性，统一性，协调性原则的基础上，要先满足基本的功能需求，才可以考虑更高层次的要求--情感需求。天气通第四届手机桌面插件设计大赛的要求设计一套完整的作品（要占用课余时间哦）我们看下图AdobePhotoshop的图标，精致，专业，图标设计的典范。当然还少了一个前提，那就是设计师的天赋。图标的常用格式有以下几种：PNG，GIF，ICO，BMP，这套“中国风图标”我们可以说它具有原创性，它很美，但是这样的图标做不到望图知意，实际上失去了易用性，所以说，原创性与易用性，很多时候是一把双刃剑，看你的选择了第三：合适的精细度，元素个数下图同样出自ICONFACTORY，平面的，带边框的的，简单的可爱的卡通的风格。图标是没有单独存在的，图标最终是要放置在界面上才会起作用的。因此，图标的设计，要考虑图标所处的环境，这样的图标，是否适合这样的界面？在初始阶段，图标可用性会随着精细度的变化而上升，但是达到一定精细度以后，图标的可用性往往会随着图标的精细度而下降。16×1624×2432×3248×4864×64128×128256×256二、图标的创作6、主题图标创作顺序二、图标的创作6、提高图标创作方法三、图标的制作技巧三、图标的制作技巧1、图标造型方法三、图标的制作技巧2、图层样式+混合模式三、图标的制作技巧四、主题图标佳作赏析2015年新浪.天气通第四届手机桌面插件设计大赛作业：根据2015年新浪.天气通第四届手机桌面插件设计大赛的要求设计一套完整的作品（要占用课余时间哦）第三：合适的精细度，元素个数2、图层样式+混合模式0或者之前的所有版本，不支持透明和半透明。其实，图标的可用性随着精细度的变化，是一个类似于波峰的曲线。我们看下图AdobePhotoshop的图标，精致，专业，图标设计的典范。当然还少了一个前提，那就是设计师的天赋。永远记住这一条，图标的价值在于它比文字更直观，失去了这一条，就是去了它的意义。第三：合适的精细度，元素个数其实，图标的可用性随着精细度的变化，是一个类似于波峰的曲线。图标的常用格式有以下几种：PNG，GIF，ICO，BMP，下图是ICONFACTORY设计的一套图标，色彩唯美，风格统一，散发着神秘感，你不觉得它很美吗？用图标代替文字，比文字更漂亮，提升视觉效果；作业：根据2015年新浪.ICO：WINDOWS系统的图标文件格式，支持多通道透明，支持32位真彩色我们看下图AdobePhotoshop的图标，精致，专业，图标设计的典范。谢谢！一、图标设计原则第二：差异性原则

差异性原则，什么意思呢？意思是如果一个界面上有六个图标，我一眼看上去，要能第一时间感觉到他们之间的差异性，否则我怎么辨认呢？一、图标设计原则第三：合适的精细度，元素个数我很推崇ICONFACTORY的图标设计，见图（11），合适的精细度达到精美的视觉效果，同时又很直观，不会包含过多的元素，让你去思考。一、图标设计原则第五：与环境的协调性图标是没有单独存在的，图标最终是要放置在界面上才会起作用的。因此，图标的设计，要考虑图标所处的环境，这样的图标，是否适合这样的界面？比如你的界面是森林和大地，你就可以考虑用石块，木头，或者蘑菇，野花设计一系列的图标。一、图标设计原则第五：视觉效果追求视觉效果，一定是要在保证差异性，可识别性，统一性，协调性原则的基础上，要先满足基本的功能需求，才可以考虑更高层次的要求--情感需求。图标设计的视觉效果，很大程度上取决于设计师的天赋、美感和艺术修养，有些设计师做了很多年的设计，作品一堆，拿出来一看，粗糙，刺眼，土气。这一条我不想说的太多，因为这是几乎是每个设计都努力的目标，我提供一套迅速提高技能方法，最原始，但也最管用：那就是多看，多模仿，多创作。当然还少了一个前提，那就是设计师的天赋。勤奋+天赋=成功三、图标的制作技巧图标设计的视觉效果，很大程度上取决于设计师的天赋、美感和艺术修养，有些设计师做了很多年的设计，作品一