图标规范

数 位设 计引 入了 一种 新的 图标 设计 样式 。以 下是 设计 和创 建样 式图 标的 具体 规范 。
图标样式应该有趣、色彩丰富且充满活力，因为现在的系统支持图标是 32 位图标，并且边
缘非常平滑。在矢量程序中绘制完每个图标后，再用 Adobe Photoshop 进行处理可使图像
更加完美。本规范是专为设计者编写的。在创建图像时，建议您与高水平的图形设计者一起
工 作 ， 尤 其 是 具 有 丰 富 的 矢 量 和 3D 软 件 经 验 的 图 形 设 计 者 。

图 标 设 计 概 述 的 目 的 是 让 您 熟 悉 WindowsXP 的 新 样 式 ， 为 创 建 图 标 做 好 准 备 。
图 标 样 式 特 性
(1) 色 彩 丰 富 ， 是 对 WindowsXP 外 观 的 补 充 。
(2) 不 同 的 角 度 和 透 视 特 性 为 图 像 增 添 了 动 态 活 力 。
(3) 元 素 的 边 角 十 分 柔 和 ， 并 略 微 有 些 圆 滑 。
(4) 光 源 位 于 图 标 的 左 上 角 ， 同 时 有 环 绕 光 照 亮 图 标 的 其 它 部 分 。
(5) 渐 变 效 果 使 图 标 具 有 立 体 感 ， 进 而 使 图 标 的 外 观 更 加 丰 满 。
(6) 投 影 使 图 标 更 具 对 比 度 和 立 体 感 。
(7) 添 加 轮 廓 可 使 图 像 更 清 晰 。
(8) 日 常 对 象 ( 如 计 算 机 和 设 备 ) 具 有 更 现 代 化 的 个 人 外 观 。

图 标 尺 寸
Windows XP 图 标 有 四 种 尺 寸 ， 建 议 使 用 以 下 四 种 尺 寸 ：
(1) 48×48 像 素
(2) 32×32 像 素
(3) 24×24 像 素
(4) 16×16 像 素

图 标 色 彩 深 度 支 持
WindowsXP 支持 32 位图标。32 位图标为 24 位图像加上 8 位 alpha 通道。使图标边缘非常
平 滑 ， 且 与 背 景 相 融 合 。
每个 WindowsXP 图 标 应 包 含 以 下 三 种 色 彩 深 度 ， 以 支 持 不 同 的 显 示 器 显 示 设 置 ：
24 位 图 像 加 上 8 位 alpha 通 道 (32 位 )
8 位 图 像 (256 色 ) ， 加 上 1 位 透 明 色
4 位 图 像 (16 色 ) ， 加 上 1 位 透 明 色

调 色 板
图 标 中 使 用 的 主 要 颜 色 。

对 象 的 角 度 和 分 组
WindowsXP 样式图标使用的透视网格：并非所有对象使用 16×16 的复杂图像都能获得较
好效果。某些对象通常以直观图像显示：文档图标、符号图标(如警告或信息图标)、单一对象
图 标 ( 如 放 大 镜 )

除非创建重叠辅助对象可以更清楚地表达图标的含义，否则就可读性和完整性而言，还是
应使用直观图像。还应考虑如何按组查看图标，以便确定如何将对象分组。

投 影
使用投影后，WindowsXP 图标将更清晰且更具立体感。可在 Photoshop 中实现这种效果，
本指南的后面部分将对此进行描述。若要为图像添加投影，请在 Photoshop 中双击图像的
图层，并选择 Drop Shadow。然后将 Angle 更改为 135，Distance 更改为 2，Size 更改为
2 。 此 时 投 影 为 75% 不 透 明 黑 色 。

轮 廓
绘制 XP 样式图标时，为图像添加轮廓可使之更清晰，并可保证图像在不同背景色上都具
有 较 好 效 果 。

概 念
设 计 图 标 时 ， 请 考 虑 以 下 因 素 ：
使用已有概念以确保真实表达了用户的想法。考虑图标在用户界面环境中以何种形式出现，
以及如何作为图标集的一部分使用。考虑图形的文化背景。避免在图标中使用字母、单词、手
或脸。必须用图标表示人或用户时，请尽可能使其大众化。如果图标中的图像由多个对象组
成，应考虑如何使图像尺寸更小。建议在图标中使用的对象不超过三个。对于 16×16 的尺寸
大 小 ， 还 可 考 虑 删 除 某 些 对 象 或 简 化 图 像 使 之 更 容 易 辨 认 。

透 明 工 具
将 Gif Movie Gear(GMG)打开一个对话框，其中显示您的图标。使用吸管工具单击图标的背
景色。此颜色将更改为暗黄绿色(或在 GMG 中选作透明背景色的颜色)。重复所有 4 位和 8
位 帧 。 若 要 保 存 图 标 ， 请 选 择 File->Save Icon As... 。

创 建 工 具 栏
Windows 工具栏图标除不使用投影之外，使用的样式与其它图标相同。由于工具栏图标非
常小，建议您使用简单的图像。如果以直观方式显示图像即可清晰地表达图标的含义，则不
必 使 用 其 它 复 杂 方 式 。

创 建 AVI
WindowsXP 使用 8 位 AVI。创建.avi 文件的过程与创建图标的过程相同-在 Photoshop 中准
备图像，然后将其拖动到 GMG 中。请按以下指导创建 8 位图标。若要使用 GMG 保存 AVI，
请 转 至 File->Export As->AVI file 。
创 建 .avi 文 件 时 ， 请 考 虑 以 下 因 素 ： 使 用 品 红 (R255 G0 B255) 作 为 背 景 透 明 色 。 在
Photoshop 中，重要的一点是不要出现杂散像素。请将填充能力设置为 0，并确认未选中取
消锯齿.
 [理论 ] 图标设 计规 范

[ 作者：不详 | 转贴自：互联网 | 点击数：102 | 更新时间：2006-06-26 | 文章录入：JGDream ]

 最好的程序界面就是用户无需去阅读*作手册就知道该如何使用的界面。

原则

1.一致性
如果你可以在一个列表的项目上双击后能够弹出对话框，那么应该在任何列表中双击都能弹出对话框。要
有统一的字体写号、统一的色调、统一的提示用词、窗口在统一的位置、按钮也在窗口的相同的位置。

2.设置标准并遵循它
可以参数一些工业标准，如 IBM 的界面设计规范或 MS 的设计规则，它提供了 90％你所需要的规范。

3.设置向导
如果用户使用了一个功能后，不知道如何做下一个，他们就会放弃。如果*作流程和手工工作流程一致，用
户就会努力去完成它。最好的方式来引导用户就是在桌面上设置一个流程向导。

4.提示信息必须恰当且规范
提示信息必须容易理解并且口径统一，比如“您输入了错误的数据”、“用户编码不能超过 8 位”。一致的
措词，提示信息还应该出现在一致的位置，如弹出提示窗口、窗口的上方或窗口的下方。对用户的称呼应该
统一，比如有时提示“用户输入了错误的数据”，有时提示“您输入了错误的数据”，有时又提示“纳税
人输入了错误的数据”，这样会使用户无所适从。

5.借鉴好的程序
多了解同类软件的界面，并加以分析与了解，直到能够区别好的用户界面与差的用户界面。但不能够机械
的模仿别人的界面。

6.功能的统一
有一些很常用的功能，如添加、修改、删除、查看，同一个软件中，这些功能应该有相同的*作方法。举个例
子，几乎我们所有的程序中都有*作员管理这一块功能，但没有一个功能最完善统一的模块可供调用，结
果虽然程序员间相互复制这个模块，但经过修改后，每个程序的*作管理都不相同。

7.变灰的功能
有时有些功能不可用，最好不要删除这些按钮若项目，而是使他们变灰为不可用状态，这样有助于用户理
解整个程序的功能。

8.默认按钮
使用不具有破坏功能的默认按钮，在每个窗口中，为了方便用户，一般都定义了一个默认按钮，当用户敲
回车键时可以快速执行某功能，但有时用户会不小心按错回车键，这时候执行了默认功能后，不能产生不
可还原的*作，比如删除或保存。

用户界面规范

最好的程序界面就是用户无需去阅读*作手册就知道该如何使用的界面。

原则

1.一致性
如果你可以在一个列表的项目上双击后能够弹出对话框，那么应该在任何列表中双击都能弹出对话框。要
有统一的字体写号、统一的色调、统一的提示用词、窗口在统一的位置、按钮也在窗口的相同的位置。

2.设置标准并遵循它
可以参数一些工业标准，如 IBM 的界面设计规范或 MS 的设计规则，它提供了 90％你所需要的规范。

3.设置向导