出自UXGuide.net

图标

Icons

目录 1 设计理念 2 设计规范 2.1 透视 2.2 光源 2.3 阴影 2.3.1 常规 2.3.2 平面图标 2.3.3 三维图标 2.4 颜色和饱和度 2.5 尺寸要求 2.5.1 常规 2.5.2 用于高分辨率 2.5.3 .ico 文件尺寸（标准） 2.5.4 .ico 文件尺寸（特殊情况） 2.5.5 附注与叠加 2.6 细节层次 2.7 图标开发 2.7.1 设计和制作图标 2.7.2 从概念草图到最终产品 2.7.3 工具 2.7.4 制作 2.8 在列表视图、工具栏及树形视图环境中的图标 2.8.1 列表视图 2.8.2 工具栏 2.8.3 树形视图

“图标”是对象的图形化呈现方式，其重要性不仅仅在于作为一个程序视觉形象的美学原因，更是有着让用户能够几乎立即理解所要传达的含义的实用原因。Windows Vista® 引入了一种新的图标设计风格，以给 Windows 带来更高层次的细节与复杂度。

注：与标准图标相关的设计规范请参考各自相应的章节。

设计理念

Aero 是 Windows Vista 用户体验的名称，同时代表了设计美学中的价值及用户界面背后的远见。Aero 意味着：真实、充满活力、深思熟虑和开放性。Aero 的目标在于建立一个兼顾专业和美观的设计。Aero 视觉风格创造了一个高品质的优雅体验，能够提高用户的工作效率，甚至影响情绪反应。

Windows Vista 图标与 Windows® XP 风格图标有以下方面的区别：

• 与原来的抽象绘图相比，新风格更加写实化，但并不过份真实。图标是符号化的图像——看起来应该比真实的更好！
• 图标的最大尺寸为 256x256，以适合高分辨率显示。这种高分辨率图标可以为使用大图标的列表视图提供更好的视觉质量。
• 在可行之处，固定的文档图标会被替换为文档内容的缩略图，以便于区分和查找文档。
• 工具栏图标是为较小尺寸优化的，细节程度较低，透视使用也较少。

好的图标设计：

• 有助于你程序的视觉沟通。
• 强烈影响用户对你程序视觉设计的总体印象，以及对细节质量的肯定。
• 通过增强用户的总体体验及精细的绘图显示，为你的程序提供高质量的外观。

下列图像展示了 Windows Vista 中 Aero 风格的图标设计与 Windows XP 中的不同之处。

Windows Vista 图标（左侧的锁和钥匙）更加真实、锐利、细节丰富。它们是渲染得到的，而不是绘制的，但又不是完全如照片般真实的。

Windows Vista 图标（左侧的两个）更加专业、美观，对细节的关注提升了图标的品质。

这些 Windows Vista 图标显示出了光学平衡以及能够察觉到的在透视和细节方面的准确性。这使得它们无论是大是小，是凑近还是远离，看起来都非常好。此外，这种图标设计风格是用于高分辨率的屏幕的。

这些示例显示了不同的图标类型，包括带透视的三维物体、前视（平面）的图标以及工具栏图标。

设计规范

透视

• Windows Vista 中的图标要么是三维的像真实物体那样以透视方式显示的，要么是平直显示的二维对象。对于文件及那些确实是扁平的物体，像文档或纸张来说，应使用平面图标。

典型的 3D 和平面图标

• 三维对象是像真实物体那样以透视方式呈现的，以较低角度俯视，并存在两个消失点。</b>

典型的显示透视及消失点的 3D 图标示例

• 在较小的尺寸下，同样的图标可能需要从透视转为平直角度。在 16x16 像素或更小的尺寸下，图标应以平直方式呈现（正视）。对于较大的图标，则使用透视。
  • 例外：工具栏图标即使尺寸再大，也应当总是正视的。

该示例显示同样的图标是如何按照其尺寸来区别对待的。

光源

• 在透视网格中，物体的光源应来自顶部，稍偏向物体的左前方。
• 光源产生的投影应位于物体底部稍偏右后的位置。
• 所有光线都是平行的，以相同的角度（就像太阳一样）照射到物体上。目的在于在所有图标和照明效果中保持统一的照明外观。平行光线会产生相同长度和密度的阴影，在多个图标之间实现进一步的统一。

阴影

常规

• 用阴影将物体从背景中进行视觉分离，并使 3D 物体看上去更像是在地面上，而不是怪异地漂浮在空中。
• 阴影应具有 30%-50% 的不透明度（opacity）。有时可能需要使用不同层次的阴影，取决于图标的形状或颜色。
• 如果需要的话，应羽化或缩短阴影，以将其保持在图标的剪裁框内。
• 不要为 24x24 像素或更小尺寸的图标使用阴影。

典型的图标阴影。

平面图标

• 平面图示通常用于文件图标及在真实世界中即是扁平的物体，比如文档或纸张。
• 平面图标的光照来自于左上方 130 度的位置。
• 较小的图标（例如，16x16 和 32x32）应当为可读性而简化。不过，如果在图标（通常是已经经过简化的）内包含反射的话，也应当具有轻微的阴影。该阴影应具有 30%-50% 的不透明度。
• 图层效果可用于平面图标，但应当与其他平面图标对照使用。物体的阴影多少会有些变化，取决于怎么样看起来最好，以及在尺寸上以及与 Windows Vista 的其他图标更为统一。有些偶然的情况下，甚至可能需要修改阴影。当物体置于其他物体之上时尤为如此。
• 细微范围内的颜色可能能够用于达到理想的效果。阴影能够使物体具有空间感。颜色会影响对阴影轻重的感觉，太重的话可能会对图像产生影响。

图层样式对话框中的投影选项，以及用于平面图标的典型阴影。

基本的平面图标阴影范围

特征	范围
颜色	黑
叠加模式	正片叠底
不透明度	22%-50%，取决于图标的颜色
角度	130 到 120，使用全局光线
距离	256x256 为 3，逐渐降至 32x32 为 1
扩展	0
大小	256x256 为 7，逐渐降至 32x32 为 2

三维图标

• 为 3D 图标创建阴影时，应在具体情况的基础上，仔细调整投影距离并羽化至完全透明以贴合尺寸。创建比图标总体尺寸稍小一些的图片，为投影预留空间（指那些需要投影的尺寸）。确保阴影不会在图标边缘突然中止。

该示例展示了基于物体自身形状和位置创建的一些不同示例。有时阴影需要进行羽化或缩短以使其能够容纳在图标的尺寸范围之内。

颜色和饱和度

• 颜色整体上比在 Windows XP 中的饱和度要低。
• 使用渐变来创建真实感更强的图像。
• 尽管没有专门用于标准图标的配色方案，但要记住，这些颜色应当能够适合于各种环境和主题。最好使用标准的颜色搭配，不要给标准图标换色，比如警告图标，因为这会影响用户对其含义的理解。更多设计规范，参见颜色。
• 图标文件也需要 8 位和 4 位的颜色版本，以支持远程桌面的默认设置。这些文件虽然可以通过批量处理来创建，但仍然需要进行审查，有些需要重新处理以提高可读性。

没有严格的配色限制。仅需要避免那些饱和度太高（右上角）的颜色。

• 颜色位数：为 32 位（包括 Alpha 透明通道）+ 8 位 + 4 位（自动杂色扩展）。对于 256x256 像素图像来说，只应当包含 32 位的版本，而且只有 256x256 像素的图像是应当进行压缩以减小文件尺寸的。很多图标工具都提供 Windows Vista 上的压缩。
• 颜色位数：工具栏 24 位 + Alpha（1 位遮罩）、8 位 和 4 位。
• 工具栏或 AVI 文件：使用品红色（R255 G0 B255）作为背景透明色。

尺寸要求

常规

• 特别注意那些容易被看到的图标，比如主应用程序图标、会出现在 Windows Explorer 中的文件图标、以及出现在开始菜单或桌面上的图标。
  • 应用程序图标及控制面板项：完整一套包括 16x16、32x32、48x48 和 256x256（32 至 256 之间通过程序进行缩放）。必须使用 .ico 文件格式。在经典模式下，完整一套包括 16x16、24x24、32x32、48x48 和 64x64。
  • 列表项图标：使用实时缩略图或表示该文件类型（比如 .doc）的文件图标。完整一套。
  • 工具栏图标：16x16、24x24、32x32。注意工具栏图标始终是平面的，而不是 3D，即使是在 32x32 尺寸下也是如此。
  • 对话框和向导图标：32x32 和 48x48。
  • 叠加图标：核心 shell 代码（比如快捷方式）10x10（用于 16x16）、16x16（用于 32x32）、24x24（用于 48x48）、128x128（用于 256x256）。注意有些可能会比这些尺寸稍小一些，取决于其形状以及视觉平衡的需要。
  • 快速启动区域：从 Alt+Tab 的 48x48 动态叠加图标缩小得来，不过如果想要更为清晰的版本，可向 .ico 文件中添加 40x40 的尺寸。
  • 气球状提示图标：32x32 和 40x40。
  • 其他尺寸：如果有这些尺寸资源的话，对于制作其他文件将很有帮助（比如，附注、工具条，叠加图标、高分辨率以及其他特殊情况）：128x128、96x96、64x64、40x40、24x24、22x22、14x14、10x10 和 8x8。你可以使用 .ico、.png、.bmp 或其他文件格式，取决于届时的编程需要。

用于高分辨率

• Windows Vista 的目标分辨率为 96 dpi 和 120 dpi。

下表显示了用于两种常用图标尺寸的缩放比例示例。注意并非所有这些尺寸都应当包含在 .ico 文件中。程序代码应当用较大的尺寸进行缩小。

分辨率	图标尺寸	缩放比例
96	16x16	1.0 (100%)
120	22x22	1.375 (137.5%)
144	24x24	1.5 (150%)
192	32x32	2.0 (200%)

分辨率	图标尺寸	缩放比例
96	32x32	1.0 (100%)
120	40x40	1.25 (125%)
144	48x48	1.5 (150%)
192	64x64	2.0 (200%)

.ico 文件尺寸（标准）

.ico 文件尺寸（特殊情况）

附注与叠加

• 附注位于图标的右下角，占图标区域的 25%。
  • 例外：16x16 图标使用 10x10 的附注。
• 不要在一个图标上使用多个附注。
• 叠加位于图标的左下角，占图标区域的 25%。
  • 例外：16x16 图标使用 10x10 的叠加。

细节层次

• 许多图标的 16x16 尺寸仍然在被广泛使用，因此非常重要。
• 图标在该尺寸下的细节应当清晰显示图标的关键内容。
• 当图标缩小时，需要牺牲原先在较大尺寸中的透明及其他细节以进行简化并抓住重点。
• 属性和颜色应当进行夸张并用于强调关键内容。

在 16x16 下，用于便携音乐播放设备的图标可能会被误认为是手机——因此耳机则是需要显示的关键视觉细节。

• 简简单单从 256x256 的尺寸进行缩小是不行的。
• 所有尺寸都需要相应层次的细节，越是小的图标，越是要对特性细节进行夸张。

图标开发

设计和制作图标

• 聘请有经验的图形设计师。让专家来设计优秀的图形、图像及图标。在矢量绘图或 3D 程序方面有经验者优先。
• 计划进行多轮设计，从最初始的概念草图，到实际环境中的模型，以及最终的成品审阅及对正在制作的产品进行最终的细节处理。
• 可以预见——图标制作是很昂贵的。收集所有已知的细节和需求，比如：所需图标的完整集合、每个图标的主要功能和含义、其中的分组与系列、品牌需求、准确的文件名、程序代码中要用的图像格式、尺寸需求等。确保你预先的大部分时间是花在设计师身上的。
• 要记住设计题可能对你的产品并不熟悉，因此如果可能的话，应当提供功能描述、屏幕截图及设计说明。
• 可能的话，计划进行地域政治和法律审查。
• 制订期限并保持日常沟通。

从概念草图到最终产品

• 创建概念草图。
• 在不同的尺寸下尝试该概念。
• 如果需要的话，进行三维渲染。
• 在不同的背景色下测试各种尺寸。
• 在真实的用户界面环境中对图标进行评估。
• 制作最终 .ico 文件或其他图形资源格式。

工具

• 纸和笔：列出并用草图画出最初的概念想法。
• 3D Studio Max：以透视方式渲染 3D 物体。
• Adobe Photoshop：反复绘制、真实环境中的样图、以及完成最终细节。
• Adobe Illustrator/ Macromedia Freehand：反复绘制，完成最终细节。
• Gamani Gif Movie Gear：制作 .ico 文件（可根据需要压缩）。
• Axialis Icon Workshop：制作 .ico 文件（可根据需要压缩）。
• Microsoft Visual Studio® 不支持 Windows Vista 图标（不支持 Alpha 透明通道以及多于 256 种颜色）。

制作

第 1 步：概念化

• 尽可能使用已经建立的概念，确保图标及其相关其他用途的含义一致。
• 考虑图标将会如何出现在用户界面环境中，以及它作为一组图标中的一个将如何使用。
• 如果是修改已有的图标，考虑其复杂性是否可以降低。
• 考虑文化对图形的影响。避免在图标中使用字母、单词、手及脸。如果需要的话，对人或用户的描绘应当尽可能抽象。
• 如果是将多个物体组合到单个图标图像中，应考虑如何将图像缩小。不要在一个图标中使用超过三个物体（最好示超过两个）。对于 16x16 的尺寸，考虑去掉一些物体或简化图像以提高可识别性。
• 不要在图标中使用 Windows 旗帜。

第 2 步：绘制

• 绘制 Windows Aero 风格图标可使用像 Macromedia Freehand 或 Adobe Illustrator 这样的矢量工具。使用本文之前提到过的配色和风格特征。
• 使用 Freehand 或 Illustrator 绘制图像。然后将矢量图像复制粘贴至 Adobe Photoshop。
• 在 Photoshop 中做一个模板层，用于确保图像是在规定的正方形尺寸区域之内的。
• 创建比图标总体尺寸稍小一些的图片，为投影预留空间（指那些需要投影的尺寸）。
• 将图像靠在方框的下端，这样所有图标的位置都能够保持一致。避免剪切投影。
• 如果你是将另外的物体加到一个图像或图像系列中去的话，应保持主物体的位置固定不变，并将平面的较小尺寸的图像放在固定的位置上，比如根据情况放在左下或右上角。

第 3 步：创建 24 位图像

• 你将这些尺寸的图像粘贴到 Photoshop 之后，应当检查图像的可读性，尤其是 16x16 及更小的尺寸。可能会需要一定比例的像素点扩散。透明部分也可能需要减少。往往需要对较小尺寸中的某些部分进行夸张，以及除去一些部分，以专注于关键点。
• 8 位图标会显示在任何低于 32 位色彩模式下，且不具有 8 位 Alpha 通道，因此可能需要更加仔细地处理其边缘，因为将没有抗锯齿处理（边缘可能会有锯齿，图像可能会难以阅读）。
• 在 Photoshop 中，复制该 24 位图像层，并将图层重命名为 4 位图像。使用 Windows 16 色调色板对 4 位图像进行颜色索引。
• 仅用 16 色调色板中的颜色来进行图像清理。那些由物体颜色产生的较暗或较亮的轮廓色通常改为灰色或黑色更好。
• 如果是对位图进行处理的话，确保背景色不会被用于图像本身，因为这个颜色会被当作透明交通。品红（R255 G0 B255）通常被用作背景透明色。

第 4 步：创建 8 位和 4 位图像

• 现在 24 位图像已经可以被做成 32 位图标，8 位的版本则需要进行创建。
• 此刻是在屏幕截图环境中进行测试的绝佳时机。可以通过在真实环境中与其他图标或一系列图标一起查看是多么令人激动的事情。这个步骤能够节约时间和金钱。这比到文件已经交付制作时再发现问题要好得多。
• 为需要投影的尺寸添加投影。
• 拼合投影与 24 位图像。
• 为每个尺寸创建新的 Photoshop 文件。复制贴粘相应的图像。将每个文件保存为 .psd 文件。
• 不要将图像图层与背景图层合并。如果在工作过程中把尺寸和颜色位数加到文件名中是很有用的，不过文件最终还是要重命名的。

第 5 步：创建 .ico 文件

• 选择最符合需要及设计师技能的应用程序。要记住，用于正式发行产品中的图标必须创建自已经购买或获得许可的工具。这意味着试用版是不能使用的。
• 下面列出的两个产品都被设计师用于为 Windows Vista 制作图标，且都能够导出至 Adobe Photoshop CS。
  • Gamani Gif Movie Gear：制作 .ico 文件
  • Axialis Icon Workshop：制作 .ico 文件
• Microsoft Visual Studio 不支持 Windows Vista 图标（不支持 Alpha 透明通道以及多于 256 种颜色），因此不推荐使用。
• 图标文件（.ico 格式）必须包含 4 位及 8 位版本，以及 24 位 + Alpha 透明通道。
• 无论你用哪种图标制作程序，应将文件保存为“Windows 图标 (.ico)”。
• 有些图标图形素材事实上可能是长条位图，因此还需要一个 Alpha 通知（例如用于工具栏的图标素材），或者是带透明保存的 .png 文件。并非所有图标都必须使用 .ico 格式，检查程序代码中支持哪些格式。

第 6 步：评估

• 查看所有的尺寸。
• 整个系列一起查看，以评估整体相似性、视觉平衡及区分性。
• 在真实环境中查看，以评估相对偏重和可视性（确保不会突兀）。
• 考虑现在可能不会使用的，但有可能在不久的将来出现的情况。这些图是不是有可能带有附注或叠加？
• 检查程序代码。

在列表视图、工具栏及树形视图环境中的图标

列表视图

• 在 Windows Vista 中，应为那些在缩小状态下能够从视觉上分辨内容的文件启用缩略图，比如那些用户可以直接辨别出要找的文件。（使用 Windows 缩略图应用程序编程接口。）

• 叠加与缩略图上的应用程序图标（此处未出现）可在显示文件预览的同时，显示与该文件类型关联的应用程序。

注：对于没有能够在视觉上进行区分内容的文件，不要使用缩略图。相反，应当使用传统的符号化文件图标来显示对象以及关联的应用程序或类型。

工具栏

• 用于工具栏的图标必须在尺寸、颜色和复杂度等方面做到视觉平衡。
• 应在真实屏幕环境截图中测试图标，以避免一些不希望出现的突兀或不平衡。
• 在屏幕截图中测试可以很容易地避免昂贵的代码更迭。
• 也要在代码中审查图标。运动及其它因素会对图标产生影响，有时可能需要进一步更改。

在上面的示例中，视觉上没有能够很好地平衡。

在真实环境中尝试更改。

树形视图

• 需要达到视觉平衡以保持树形视图控件的层次结构。
• 因此，通常会用于此处的图标应当在该环境中进行评估。有时某个 16x16 图标可能需要做得小一些，因为其形状在视觉上显得突兀。
• 视觉失衡调整是制作顶级图标的重要步骤。