图标（设计基础知识）

注意

此设计指南是为 Windows 7 创建的，尚未针对较新版本的 Windows 进行更新。 大部分指南原则上仍然适用，但演示和示例并不反映我们 当前的设计指南。

图标是对象的图形表示形式，不仅出于美学原因（作为程序视觉标识的一部分），还出于功利原因，作为传达用户几乎瞬间感知的含义的简写。 Windows Vista 引入了一种新的图标样式，为 Windows 带来更高级别的细节和复杂性。

注意： 与 标准图标 相关的指南在单独的文章中介绍。

设计概念

Aero 是 Windows Vista 用户体验的名称，它既代表美学设计中体现的价值，也代表用户界面 (UI) 背后的视觉。 Aero 代表：真实、充满活力、反光和开放。 Aero 旨在建立一个既专业又美观的设计。 Aero 美学创造了高质量和优雅的体验，促进用户的工作效率，甚至推动情感反应。

Windows Vista 图标与 Windows XP 样式的图标在以下方面有所不同：

• 该样式比说明性更逼真，但不太逼真。 图标是象征性图像，它们看起来应该比逼真！
• 图标的最大大小为 256x256 像素，因此适用于高 dpi (每英寸点) 显示器。 这些高分辨率图标允许在具有大图标的列表视图中实现较高的视觉质量。
• 在实际情况下，固定的文档图标将替换为内容的缩略图，使文档更易于识别和查找。
• 工具栏图标具有较少的细节和透视，以针对较小的大小和视觉独特性进行优化。

设计良好的图标：

• 改进程序的视觉通信。
• 强烈影响用户对程序视觉设计的总体印象，以及对其拟合和完成的欣赏。
• 通过使程序、对象和操作更易于识别、学习和查找来提高可用性。

下图描绘了 Windows Vista 中的 Aero 图标样式与 Windows XP 中使用的不同。

左侧) (锁和键的 Windows Vista 图标真实、清晰且详细。 它们是渲染的，而不是绘制的，但不是完全逼真。

Windows Vista 图标 (左侧的两个) 专业且美观，注重提高图标生产质量的细节。

这些 Windows Vista 图标在透视和细节上显示光学平衡和感知到的准确性。 这使得它们看起来大或小，近或远。 此外，这种风格的图标适用于高分辨率屏幕。

这些示例演示不同类型的图标，包括透视中的三维对象、正面 (平面) 图标和工具栏图标。

准则

透视

• Windows Vista 中的图标可以是三维图标，以透视方式显示为实心对象，也可以是直接显示的二维对象。 对文件和实际是平面的对象（如文档或纸片）使用平面图标。

  

  典型的 3D 和平面图标。

• 三维对象以透视方式表示为实心对象，从具有两个消失点的低鸟瞰图中看。

  

  此示例显示了 3D 图标的典型透视和消失点。

• 在较小的尺寸中，同一图标可能会从透视更改为直角。 大小为 16x16 像素且更小， (正面) 呈现图标。 对于较大的图标，请使用透视。

  • 例外： 工具栏图标始终是正面的，即使在更大的尺寸中也是如此。

  

  此示例演示如何根据大小以不同方式处理同一图标。

光源

• 透视网格中对象的光源位于上方、稍微位于对象前面和左侧。
• 光源将稍微投射到对象基础的后部和右侧的阴影。
• 所有光线都是平行的，像太阳) 一样，沿相同角度 (撞击物体。 目标是在所有图标和聚光效果中具有统一的照明外观。 平行光线产生具有相同长度和密度的阴影，从而在多个图标之间提供进一步的统一。

阴影

常规

• 使用阴影从背景中直观地抬起对象，并使 3D 对象显示为接地，而不是笨拙地漂浮在空间中。

• 对阴影使用 30-50% 的不透明度范围。 有时应使用不同的阴影级别，具体取决于图标的形状或颜色。

• 如有必要，请对阴影进行羽化或缩短，防止其被图标框大小裁剪。

• 请勿在 24x24 或更小大小的图标中使用阴影。

  

  典型的图标阴影。

平面图标

• 平面图标通常用于文件图标和平面真实对象， 如文档或一张纸。
• 平面图标照明来自左上角 130 度。
• 较小的图标 (例如，16x16 和 32x32) 经过简化，可读性。 但是，如果它们包含图标内的反射 (通常简化) ，则可能具有紧密的投影。 投影的不透明度范围为 30-50%。
• 图层效果可用于平面图标，但应与其他平面图标进行比较。 对象的阴影会根据外观最佳且在大小集内与 Windows Vista 中的其他图标最一致的不同而有所不同。 在某些情况下，甚至可能需要修改阴影。 当对象放置在其他对象之上时，尤其如此。
• 可以使用细微的颜色范围来实现所需的结果。 阴影可帮助对象位于空间中。 颜色会影响阴影的感知重量，如果图像太重，可能会扭曲图像。

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

基本平面图标阴影范围

特征	范围
Color	黑色
混合模式	乘
不透明度	22-50%，具体取决于项目的颜色
角度	120-130 (使用全局光)
距离	3 表示 256x256，范围缩小到 1（对于 32x32）
Spread	0
大小	7 表示 256x256，范围缩小到 2（对于 32x32）

三维图标

• 根据具体情况为 3D 图标创建阴影，并努力适应投射距离和羽化到完全透明的范围。 创建大小略小于整体图标大小要求的图像，以便为需要一) 的投影 (这些大小留出空间。 确保阴影不会在图标的边缘突然结束。

这些示例有助于演示基于对象本身的形状和位置创建的变体。 有时需要对阴影进行羽化或缩短，防止其被图标框大小裁剪。

颜色和饱和度

• 颜色的饱和度通常低于 Windows XP。

• 使用渐变创建更逼真的图像。

• 尽管标准图标没有特定的调色板，但请记住，它们需要在许多上下文和主题中很好地协同工作。 首选标准颜色集;不要重新着色标准图标（如警告图标），因为这会干扰用户解释含义的能力。 有关更多指南，请参阅 颜色。

• 图标文件还需要 8 位和 4 位调色板版本， 以支持远程桌面中的默认设置。 这些文件可以通过批处理创建，但应进行评审，因为有些文件需要修饰以提高可读性。

  

  没有严格的调色板限制。 仅避免完全饱和 (右上角) 。

• 位级别：适用于 32 位 (alpha 的 ICO 设计包括) + 8 位 + 4 位 (自动向下抖开像素戳，仅最关键的) 。 应仅包含 256x256 像素图像的 32 位副本，并且仅压缩 256x256 像素图像以减小文件大小。 多个图标工具为 Windows Vista 提供压缩。

• 位级别：工具栏 24 位 + alpha (1 位掩码) 、8 位和 4 位。

• 工具栏或 AVI 文件：使用洋红色 (R255 G0 B255) 作为背景透明度颜色。

大小要求

常规

• 请特别注意高可见性图标，例如main应用程序图标、可在 Windows 资源管理器中显示的文件图标，以及显示在“开始”菜单或桌面上的图标。
  • 应用程序图标和控制面板项：完整集包括 16x16、32x32、48x48 和 256x256， (代码缩放范围为 32 到 256) 。 .ico 文件格式是必需的。 对于经典模式，完整设置为 16x16、24x24、32x32、48x48 和 64x64。
  • 列表项图标选项： 使用文件类型的实时缩略图或文件图标 (例如，.doc) ;完整设置。
  • 工具栏图标： 16x16、24x24、32x32。 请注意，即使大小为 32x32，工具栏图标也始终是平面的，而不是 3D。
  • 对话框和向导图标： 32x32 和 48x48。
  • 覆盖： 例如，Core shell 代码 (快捷方式) 10x10 (16x16) ，16x16 (用于 32x32) ，24x24 (用于 48x48) ，128x128 (256x256) 。 请注意，其中一些略小，但接近此大小，具体取决于形状和光学平衡。
  • “快速启动”区域： 图标将从 Alt+Tab 动态覆盖中的 48x48 缩减，但对于更清晰的版本，请将 40x40 添加到 .ico 文件。
  • 气球图标： 32x32 和 40x40。
  • 其他大小： 对于将其他文件 (批注、工具栏条带、覆盖层、高 dpi 和特殊情况) ：128x128、96x96、64x64、40x40、24x24、22x22、14x14、10x10 和 8x8，它们非常有用。 可以使用 .ico、.png、.bmp 或其他文件格式，具体取决于该区域中的代码。

对于高 dpi

• Windows Vista 面向 96 dpi 和 120 dpi。

下表显示了应用于两个常见图标大小的缩放比率的示例。 请注意，并非所有这些大小都必须包含在 .ico 文件中。 代码将纵向缩减更大的代码。

dpi	图标大小	比例因子
96	16x16	1.0 (100%)
120	20x20	1.25 (125%)
144	24x24	1.5 (150%)
192	32x32	2.0 (200%)

dpi	图标大小	比例因子
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 程序进行插图的经验。
• 计划执行一系列迭代， 从初始概念草图到上下文中模型，到最终生产评审和工作产品中图标的拟合和完成。
• 预先考虑创建图标的成本可能很高。 收集所有现有详细信息和要求，例如：所需的完整图标集;每个main函数和含义;想要清楚的集中的系列或群集;品牌要求;确切的文件名;代码中使用的图像格式;和大小要求。 确保可以充分利用设计器的时间。
• 请记住，设计人员可能不熟悉你的产品，因此请根据需要提供功能信息、屏幕截图和规格部分。
• 根据需要规划地缘政治和法律审查。
• 制定时间范围并定期沟通。

从概念草图到最终产品

• 创建概念草图。
• 尝试不同大小的概念。
• 如有必要，以 3D 呈现。
• 测试不同背景色的大小。
• 评估真实 UI 上下文中的图标。
• 生成最终的 .ico 文件或其他图形资源格式。

工具

• 铅笔和纸张： 初始概念想法，列出和草图。
• 3D Studio Max： 以透视方式呈现 3D 对象。
• Adobe Photoshop： 草图和迭代、在上下文中模拟和最终确定详细信息。
• Adobe Illustrator/Macromedia Freehand： 草图和迭代，最终确定详细信息。
• Gamani Gif 电影装备： 如果需要) ，请生成具有压缩的 .ico 文件 (。
• 为“轴心”图标研讨会： 如果需要) ，请生成具有压缩的 .ico 文件 (。
• Microsoft Visual Studio 不支持 Windows Vista 图标， (不支持 alpha 通道或超过 256 种颜色) 。

生产

提示

按照以下步骤创建包含多个图像大小和颜色深度的单个 .ico 文件。

步骤 1：概念化

• 尽可能使用已建立的概念，以确保图标含义的一致性及其与其他用途的相关性。
• 考虑图标在 UI 上下文中的显示方式，以及它如何作为一组图标的一部分工作。
• 如果修改现有图标，请考虑是否可以降低复杂性。
• 请考虑图形的文化影响。 避免在图标中使用字母、单词、手或人脸。 根据需要尽可能一般地描述人员或用户的表示形式。
• 如果将多个对象合并到图标中的单个图像中，请考虑图像如何缩放到更小的大小。 在图标中使用不超过三个对象 (两个是首选) 。 对于 16x16 大小，请考虑删除对象或简化图像以提高识别能力。
• 请勿在图标中使用 Windows 标志。

步骤 2：说明

• 若要演示 Windows Aero 样式图标，请使用矢量工具，例如 Macromedia Freehand 或 Adobe Illustrator。 使用本文前面所述的调色板和样式特征。
• 使用 Freehand 或 Illustrator 阐释图像。 将矢量图像复制并粘贴到 Adobe Photoshop 中。
• 在 Photoshop 中创建和使用模板层，以确保在受管制大小的平方区域内完成工作。
• 创建图像的大小比整体图标大小要求小一点，以便为需要一) 的投影 (留出空间。
• 将图像放在正方形的底部，以便目录中的所有图标都一致地定位。 避免切断阴影。
• 如果要向图像或序列添加另一个对象，请将main对象保持在固定位置，并将较小的平整图像置于固定位置，例如，根据大小写情况的左下角或右上角。

步骤 3：创建 24 位映像

• 在 Photoshop 中粘贴大小后，检查图像的可读性，尤其是 16x16 和更小尺寸的图像。 可能需要使用颜色百分比的像素点。 可能还需要降低透明度。 为了专注于关键点，通常以较小的大小夸大方面，并消除方面。
• 8 位图标将以低于 32 位的任何颜色模式显示，并且没有 8 位 alpha 通道，因此它们可能需要清理边缘或更多，因为没有抗锯齿 (边缘可能会交错，图像可能难以) 读取。
• 在 Photoshop 中，复制 24 位图像层，并将该层重命名为 4 位图像。 将 4 位图像索引到 Windows 16 调色板。
• 仅使用 16 个调色板中的颜色清理图像。 由较深或较浅版本的对象颜色制成的轮廓通常优于灰色或黑色。
• 如果处理位图，请确保在图像本身中不使用背景色，因为该颜色将是透明颜色。 洋红色 (R255 G0 B255) 通常用作背景透明度颜色。

步骤 4：创建 8 位和 4 位映像

• 现在，24 位映像已准备好制作为 32 位图标，因此需要创建 8 位版本。
• 这是测试上下文屏幕截图的好时机。 通过查看其他图标或上下文中的一系列图标，可以发现这一点令人吃惊。 此步骤可以节省时间和金钱。 最好在文件通过生产并移交之前捕获问题。
• 以需要投影的大小向图像添加投影。
• 将投影和 24 位图像合并在一起。
• 为每个大小创建新的 Photoshop 文件。 复制并粘贴相应的图像。 将每个文件另存为.psd文件。
• 不要将图像层与背景层合并。 在工作时，在文件名中包含大小和颜色深度会很有帮助，但最终可能需要重命名该文件。

步骤 5：创建 .ico 文件

• 选择最符合艺术家需求和技能的应用程序。 请记住，要在发货产品中使用的图标必须在已购买或获得许可的工具中创建。 这意味着无法使用试用版。
• 下面列出的两个产品都已由为 Windows Vista 生成图标的设计人员使用，并且每个产品都提供导出到 Adobe Photoshop CS 的功能。
  • Gamani Gif 电影齿轮： 生成 .ico 文件
  • 吉尼尼斯图标研讨会：生成 .ico 文件
• Visual Studio 不支持 Windows Vista 图标， (不支持 alpha 通道或超过 256 种颜色) ，因此不建议使用它。
• 图标 (.ico 格式) 文件必须包含 4 位和 8 位版本以及 24 位 + alpha。
• 将文件另存为“Windows 图标 (.ico) ”，无论你选择使用哪个图标创建程序。
• 某些图标资产实际上可能是位图条带，这还需要 alpha 通道 (例如，对于工具栏) ，或.png使用透明度保存的文件。 并非所有都一定都是 .ico 格式;检查代码中支持的格式。

步骤 6：评估

• 查看所有大小。
• 一起查看家庭，以评估家庭相似性、光学平衡和区别。
• 查看上下文以评估相对权重和可见性 (确保不会主导) 。
• 考虑当前可能未使用但可能在不久的将来使用的情况。 此图标是否可以进行批注或覆盖？
• 查看代码。

列表视图、工具栏和树视图上下文中的图标

列表视图

• 对于 Windows Vista，请使用缩略图来保存小范围视觉上不同的内容，以便用户可以直接识别他们要查找的文件。 (为此使用 Windows 缩略图应用程序编程接口。)

  

• 应用程序图标覆盖 (此处未显示，) 缩略图上除了显示文件的预览外，还有助于与应用程序的文件类型关联。

注意： 对于没有视觉上不同的内容的文件，请勿使用缩略图。 请改用显示对象表示形式和关联的应用程序或类型的传统符号文件图标。

工具栏

• 工具栏中显示的图标必须在大小、颜色和复杂性方面具有光学平衡。
• 在上下文屏幕截图中测试潜在的图标，以避免任何不需要的主导地位或不平衡。
• 在屏幕截图中轻松进行测试有助于避免代码中代价高昂的迭代。
• 还查看代码中的图标。 运动和其他因素可能会影响图标的成功;在某些情况下，可能需要进一步的迭代。

在上面的示例中，尚未实现光学平衡。

尝试在上下文中迭代。

树视图

• 需要光学平衡来保留树视图控件中的层次结构。
• 因此，通常在此上下文中使用的图标应在那里进行评估。 有时，特定 16x16 图标应变小，因为它的形状具有比其他图标具有光学优势。
• 补偿光学不平衡是生成高质量图标的重要组成部分。