图标设计第一讲 PS设计制作课程一 SY

图标设计第一讲2024/7/6图标设计前言：图标设计是界面设计中很重要的一部分。界面设计又叫UI设计，广义的UI设计是一种结合计算机科学、美学、心理学、行为学，及各商业领域需求分析的人机系统工程，强调人—机—环境三者作为一个系统进行总体的设计。

2024/7/6图标设计前言：对于设计师来讲更多涉及的是GUI图形用户界面设计，又称图形用户接口是指采用图形方式显示的计算机操作用户界面。指的是人机交互图形化用户界面设计。

2024/7/6图标设计一、关于图标：定义：图标出现在软件界面中还是一件不久的事情，它通常被认为是诸如文档、存储介质、文件夹、应用程序以及垃圾桶等对象的图形替代物。从某种角度来说，图标有点类似标志、徽标等物体的特性，因为无论是图标还是徽标，一旦出现，总是希望能够被观者识别并且记住！图标与徽标的区别在于，图标更多采用直观的比喻，讲究一目了然；而徽标更喜欢象征，追求图形的象征意味。2024/7/6图标设计图标是一个极度限制中的设计。为了在桌面上排列的整齐，图标通常都是正方形构图，同一位置的图标都有同样长宽的尺寸；尤为突出的是图标的尺寸都特别小，Windows最大的图标不过1.69厘米见方，Macintosh虽然支持128×128（Pixel）的图标，那也不过4.52厘米见方。2024/7/6图标设计2、类型：图标有几种不同类型程序图标指的是那些在桌面能够单击选择，任意移动，双击则执行命令的图标；工具栏图标指的是那些位于工具栏，通过单击选择该工具，然后在画面可以进一步执行命令的图标；按钮图标指的是那些位于面板上，形似现实生活中按钮，单击就可执行命令的图标。当然还可以有其他不同的划分方式。如果从操作系统的不同，可以大致划分为Windows图标和Macintosh图标；就某一操作系统而言，又可分为系统图标和应用程序图标，等等。2024/7/6图标设计一、关于图标：程序图标工具栏图标按钮图标2024/7/6图标设计3、图标属性：前面已经描述过，因为具体应用条件的限制，图标有其自身特殊的属性。1）首先是图标尺寸：对于WindowsXP用户，常见的图标有四种尺寸，分别是48×48、32×32、24×24、16×16，单位都是像素。需要设计和制作的是除24×24外的那三种尺寸的图标，24×24像素的图标用在“开始”菜单的右侧，它由系统自动生成，不需要单独提供。在系统默认状态下，WindowsXP显示最大的图标是32×32，当我们在桌面按鼠标右键点选“属性”面板，就可以在“外观”菜单中“效果”的弹出面板找到“使用大图标”复选框，默认状况下是没有选，如果选定，则桌面图标都会换为48×48；用户还可以在同一面板找到“高级”的弹出面板，然后设定图标大小，最大可以设定72×72，遗憾的是Windows没有Mac那样强大的图标管理功能，所以如果设定72×72，桌面空间就太拥挤了。2024/7/62024/7/6图标设计对于MacOSX的用户，图标尺寸最大可以是128×128。OSX在桌面和在硬盘管理的“显示为图标”命令下都使用48×48的图标，下级图标才是32×32。但这并不意味着MacOSX就不使用更小的图标，当我们把“显示”设为“为分栏”和“为列表”两种情形时，系统就使用16×16的小图标。当然最为MacFan所津津乐道的还是Dock的神奇放大缩小功能。神奇放大缩小功能2024/7/6图标设计2）图标的常用格式有以下几种：PNG，GIF，ICO，BMP，

PNG：无损压缩格式，支持透明，兼顾图像质量和文件大小，但是请注意，PNG格式在网页中，IE6.0或者之前的所有版本，不支持透明和半透明。GIF：网页图片常用格式，支持透明，优点是压缩的文件小，支持GIF动画，缺点是不支持半透明，颜色数最多只能显示256种颜色，透明图标的边缘会有锯齿，要解决此问题，必须在存成此格式时候，添加相同背景色的杂边，比较麻烦。

JPG：有损压缩，优点是文件小，图像颜色丰富，缺点是不支持透明和半透明ICO：WINDOWS系统的图标文件格式，支持多通道透明，支持32位真彩色你可以用ICONWORKSHOP软件，把PNG,GIF,JPG等格式的图标，转换成ICO格式。

ICNS：Macintosh系统里独特支持的格式，仅限于此系统。2024/7/6图标设计3）图标色彩：图标色彩和色深度关系比较密切，它关系到系统图标的外观，如今的MacOSX以及WindowsXP都支持真彩色图标，但这并不意味着两个系统的图标可以随意使用颜色。对于MacOS而言，标准的256色调色板如图所示，但在设计图标的时候并不是什么颜色都可以用的。2024/7/6图标设计一、关于图标：3）图标色彩：Macintosh图标调色板2024/7/6图标设计这样做的原因有两个方面：第一、选择这样一些柔和的色彩，避免桌面由于图标颜色过于鲜艳而导致的纷乱嘈杂的结果。第二、把颜色固定在几十种，有利于图标外观效果的一致性，形成统一整体的外观。实际上，Windows系统图标的用色也是非常有限的。下图所示的颜色是WindowsXP图标中使用的主要颜色：2024/7/6图标设计一、关于图标：3）图标色彩：WindowsXP图标调色板2024/7/6图标设计4）、图标家族：所谓图标家族，是指任何一个图标都不是单独存在的，图标既然作为功能的一个代表，应该在各种计算机环境下都能够使用，为了在不同平台下用户都可以把这些图标认同为同一功能的代表，就要求它们在形式上比较近似。所以在实际的设计过程中，决不仅仅是在Photoshop这样的软件里改变图标尺寸和色深度。通常总是设计大图标，再以大图标为基础，设计小图标。32pixel的图标改为16Pixel时，不是简单的缩小四分之一，缩小之后由于面积的变化，已经无法绝对保持原貌，因此必须重新设计，使得看起来效果相近。2024/7/6图标设计5）、图标设计师：图标设计师，是从事图标设计这类人的总称，不管是专业或者仅仅是爱好，他们统称作为一个图标设计师，他对自己所从事的设计要有深刻的认识：设计不再是为了好看，设计也不仅是独创，图标设计绝不是我们以前图形创意里面接触的“新、奇、怪”的思路，图标设计和界面设计一样，是为了设计对象能够被用户正确、简单、快捷地认识！2024/7/6图标设计二、设计思路：图标设计是界面设计中非常生动的部分，不少相关书籍和文章把太多的注意力投射到设计过程、设计手段而对其科学性的部分关注不够。纵观当今的图标设计，有以下一些不足：1.最常见的是以美为导向，太多地关注在图标的外观效果，很少关注为何选择这个内容以及怎样选择内容；,2.其次就是以设计师为导向，图标内容的选择以设计师自己的喜好为标准，较少关注用户的感受；3.再就是各自为政，属于单干行为，同一系统的图标之间没有任何关联性和相似性，等等。2024/7/6图标设计图标设计的一些原则：1、识别性：图标不同于一般的图形，它要求强烈的视觉识别，图标的出现和存在的价值都源于为了让人们识别，所以图标设计中，形式美并不是关键的，能不能准确被识别一定是设计师的第一目标。所以好的图标要么是功能一目了然的，要么用户能够通过学习明白图标的意思，并且今后所有类似的工具都使用一样的绘图语言。2024/7/62024/7/62024/7/62024/7/6图标设计二、设计思路：图标设计的一些原则：1、识别性：2024/7/6图标设计二、设计思路：图标设计的一些原则：1、识别性：图标一旦变成范例，它就不可动摇：有些软件开发者可能会试图改变设计，但几乎要冒着令部分用户无法理解的危险。过分简洁的符号会导致无法理解。即使曾经知道意思，时间一长，就留不下多少印象，如果图标中没有留下唤起记忆的要素，要想通过表面视觉形象去猜测图标意思就比较困难。有时干脆就是打消用户的使用欲望。所以，我们在选择隐喻对象的时候一定要慎重，好识别的图标对用户使用某个功能大有裨益，容易引起歧义的图标，即便有个好看的外象，甚至哪怕有一定的可比性，那也是差之毫厘，谬以千里！2024/7/6图标设计2、视觉风格统一性原则：有关一致性的问题是界面设计中老生常谈的一个问题。就图标设计而言一致性表现在三个方面：2024/7/6图标设计二、设计思路：图标设计的一些原则：2、一致性：1）、首先是同一图标家族，根据前面的介绍，同一图标要根据具体应用环境，设计出不同尺寸以及色深度的图标家族成员，然而尺寸以及色深度的变化，使得保持图标外观的一致。大图标和小图标看起来要相似，彩色图标和黑白图标也要感觉差不多，这样用户在不同显示环境下，都可以正常使用软件。具体来说，应该从色深度高的大图标开始设计，再根据具体要求，弱化一些不重要的内容，删减一些无法保留的内容，强化图形中的一些结构方面的因素，使得各种版本看起来差不多。

2024/7/6图标设计2）其次是同一系统的不同图标之间，也要在风格上有一致性。MacOSX就是一个在设计上功夫精到的系统，它的图标之间非常相似，玻璃风格的图标都采用同样的造型手段，色彩上也都比较关联（图5－18），而后推出的都采用皮毛的外观，视觉语言呼应的非常好。

2024/7/6图标设计MacOSX玻璃风格图标2024/7/6图标设计豹皮风格图标2024/7/6图标设计3）、再次是应用程序和操作系统的图标之间也要尽可能一致。每一次操作系统的更新也是应用软件更新的时候，软件开发商不仅在功能上进行升级，就是在图形界面的风格上也是不遗余力地追求和操作系统的一致性圣哲样做的目的也是力求用户能够在完美和谐的环境下工作。下面的例子就是一些著名软件在MacOSX环境下力求与操作系统一致性的一些例证。2024/7/6如果一套图标的视觉设计非常协调统一，我们就说这套图标具有自己的风格，这样的图标看上去也会更美丽，更专业，同时也会增强用户的满意度。

我们经常会看到很多界面上，往往会堆砌着各种不同风格的图标，显然，这些图标都是从互联网上收集起来，由于没有完全配套的图标，只能东拼西凑，导致界面粗制滥造，业余。统一风格为什么这么重要，理解这一点，你会明白互联网上有数百万的图标资源，为什么你的老板还要花钱雇一个图标设计师。图标设计2024/7/6一套好的图标，要有统一的风格，这条原则，很多设计师都明白，但是真正实现起来，也许并不那么容易。怎么做呢？

第一步：我建议你在设计之前，先做如下的定义：是简约的，还是精致的？是平面的，还是立体的？

是古典的，还是现代的？

是写实的，还是卡通的？

是单色的，还是多彩的？

是绚丽的，还是柔和的？

是抽象的，还是具体的？

是有框的，还是无框的？也许我的定义并不能囊括所有的风格，但是至少可以给你提供一种思路图标设计2024/7/6第二步：如果可能的话，我建议你用铅笔，在白纸上勾勒出你的草图，用什么符号图形代表什么操作，在画的时候，尽可能的想象第一步的风格定义。第三步：统一你的色彩，准备好你的调色板。2024/7/6我会从调色板面板里调出一种风格的色彩，略加调整，这将是我这套图标的色彩定义，在画图标的时候，尽可能选择你定义好的颜色，这样，你就能尽可能的保证你的图标色彩的统一。2024/7/62024/7/6在这里，工具是不重要的，无论你是使用PHOTOSHOP，ILLUSTRATOR，FIREWORKS，FLASH，FREEHAND，还是其他。定义好了风格，草图，调色板，就开始充分发挥你的想象吧。2024/7/62024/7/62024/7/62024/7/62024/7/6与环境的协调性图标是没有单独存在的，图标最终是要放置在界面上才会起作用的。因此，图标的设计，要考虑图标所处的环境，这样的图标，是否适合这样的界面？比如你的界面是森林和大地，你就可以考虑用石块，木头，或者蘑菇，野花设计一系列的图标。2024/7/6如果你的界面是平面的，简约的，你可以考虑用一些简单的平面的符号或者图形来设计你的图标，这样整个界面会很协调，不要认为这样的图标是简陋的，其实这样的图标的可识别性非常强的，在简洁的界面里，会透露出一种简约之美。2024/7/6下图是我对UI设计四个阶段“用户研究，交互设计，视觉设计，可用性测试”的图标定义2024/7/6体育运动类图标的设计2024/7/6视觉效果追求视觉效果，一定是要在保证差异性，可识别性，统一性，协调性原则的基础上，要先满足基本的功能需求，才可以考虑更高层次的要求--情感需求。图标设计的视觉效果，很大程度上取决于设计师的天赋、美感和艺术修养，有些设计师做了很多年的设计，作品一堆，拿出来一看，粗糙，刺眼，土气。2024/7/6我提供一套迅速提高技能方法，最原始，但也最管用：那就是多看，多模仿，多创作。当然还少了一个前提，那就是设计师的天赋。勤奋+天赋=成功2024/7/6原创性

这一条对图标设计师提出了更高的要求，这是一个挑战，但我认为，图标设计的原创性并不是必要的，因为目前常用的图标风格种类已经很多，易用性较高的风格也就那么多种，过度追求图标的原创性和艺术效果，会导致图标设计另辟蹊径，这样做往往会降低图标的易用性降低，也就是说所谓的好看不实用。当然，这里也要看你的产品的侧重点，如果考虑更多的是情感化的设计，完美的艺术效果，这样做也无可厚非。2024/7/6“中国风图标”我们可以说它具有原创性，它很美，但是这样的图标做不到望图知意，实际上失去了易用性，所以说，原创性与易用性，很多时候是一把双刃剑，看你的选择了2024/7/6上面的图标设计，相信很多设计师都看过，简直就是完美的艺术品，我惊叹于它的艺术效果和原创性。从艺术性上它可以拿到10分，从可用性上，它可能是0分，因为图标是拿来用的，我实在不知道它表达的是什么意思。永远记住这一条，图标的价值在于它比文字更直观，失去了这一条，就是去了它的意义。2024/7/6差异性原则什么意思呢？意思是如果一个界面上有六个图标，我一眼看上去，要能第一时间感觉到他们之间的差异性，否则我怎么辨认呢？这是图标设计中很重要的一条原则，但也是在设计中最容易被忽略的一条，图标和文字相比,它的优越性在于它更直观一些，但是如果图标设计失去了这一点，我认为图标设计就失去了意义。我们看一些现实中的例子:2024/7/6这是我平时用的一套软件：用友致远办公管理系统，我只能说从差异性和可识别性来讲，这里的图标设计非常失败。“新建事项”“待发事项”“已发事项”“待办/已办”“超期督办”“流程管理”这六个图标一眼望上去，几乎是一样的，其中五个图标采用了相同的元素“淡蓝色文档”，这里图标的设计，已经失去了存在的价值，因为图标设计的目标是提高效率，用户一眼望上去他们都一样，如果不看文字，用户真的很难区分它们，这实际上是降低了工作效率。2024/7/6这套图标很漂亮，但是从差异性上来讲，这套图标也是失败的，黄色的文件夹部分的六个图标，一眼望去几乎又是一样的，差异极小，在具体应用过程中会很吃力，用户需要仔细观察才能区分出他们的差别。2024/7/6如果各个图标需要使用相同的元素，那么我们要尽量放大他们之间的差异性，减弱他们之间的相似性。如果一套软件的六个图标有同一元素，为了强调他们之间的差异性，我甚至建议考虑放弃使用同一元素。比如图（4）的“新建事项”“待发事项”“已发事项”，在这里我们需要强调的是“新建”“待办””已发”而不是”事项。因此，代表事项的相同元素”文档”可以抛弃。2024/7/6我们看下图AdobePhotoshop的图标，精致，专业，图标设计的典范。我们看它完全符合差异性的原则，每个图标一眼望上去，都不一样，并且能够代表所需要的操作，可谓望图知意。2024/7/6合适的精细度，元素个数首先我们要明确一个点，图标的主要作用是用的，代替文字，第二才是美观。但现在的图标设计者往往陷入了一个误区，片面的追求精细。其实，图标的可用性随着精细度的变化，是一个类似于波峰的曲线。在初始阶段，图标可用性会随着精细度的变化而上升，但是达到一定精细度以后，图标的可用性往往会随着图标的精细度而下降。变化曲线如下图：2024/7/62024/7/6下图是一个表示“设置”的齿轮图标，我们看到，最左边的最简单的和最右边的照片级的，可用性都是非常低的，都不适合做图标。2024/7/6Vista是微软的比较失败的一个产品，原因很多，但主要的原因之一是被人称之为华而不实。我们看一下Vista的图标设计，见图（10），很漂亮，很精细，但是很