EAS 图标设计规范 --- 前言

EAS 图标设计规范 --- 前言

• 前言：由于距阵式管理的执行，今年工作任务的分配让每个设计师都担任了

部分系统的图标设计工作，为了保证 EAS 图标在设计风格上美观统一，并提高我们的工作效率，我收集和整理出了一套制作图标的设计规范，希望能给大家的设计工作带来很大帮助。

目前相对完整的一套工具栏图标是 K3.net 的设计，由于今年的工作任务较重，此次的工具栏图标设计将在 K3.net 基础上按金蝶 EAS 图标风格进一步美化和完善，主要工作重点放在工具栏图标“表意”的设计上。

• K3.net 图标的介绍• 金蝶 EAS 图标的风格介绍• 金蝶 EAS 图标的设计方法和制作规范• 设计注意事项• 讨论

EAS 图标设计规范 --- 培训提纲

K3.net 图标种类（ 1 ）工具栏图标（ 2 ）工作流图标（ 3 ）常用功能图标（ 4 ）向导图标（ 5 ） treeview 图标（ 6 ）个性化设置图标（ 7 ）流程图图标（ 8 ）特殊图标

EAS 图标设计规范 ---K3.net 图标

金蝶 EAS 图标种类（ 1 ）工具栏图标（ 2 ）工作流图标（ 3 ）常用功能图标（ 4 ）向导图标（ 5 ） treeview 图标（ 6 ）个性化设置图标（ 7 ）流程图图标（ 8 ）特殊图标

EAS 图标设计规范 --- 金蝶 EAS 图标

设计风格定位：1 、色彩 --- 色彩柔和，偶尔有鲜艳的颜色做整体风格的点缀；单元元素边线框和单

元元素基本都是由渐变色构成；2 、表现形态 --- 以平面造型为主，立体造型根据“表意”需求制作（少量）；3 、结构特征 --- 单元元素少而精，简洁明了（一般不超过 3 个单元元素的使用）。4 、类别 --- 色彩丰富的图标；符号化的单色图标。5 、光源 --- 原则上是左上角向右下角 45 度照射，根据特殊情况可自行调节。

EAS 图标设计规范 ---EAS 图标设计方法前期准备

• 首先我们会从需求人员那里得到图标按钮的需求列表，列表包括了每个icon 所对应的功能概述，使用位置和环境，大小尺寸，色彩模式。这样可以保证我们的设计结果更加符合实际需求。

• 查看 .ent 已设计的图标资源，比较自己最新理解的“表意”是否与 .net已设计图标“表意”相符合？如果符合，即可在 .net 图标基础修改和完善，借用以前的设计元素，但在设计风格上 EAS 为标准。

• 如果“表意”有差异，就要思考出更好更贴切的设计元素来制作图标，构思出来的图标首先要考虑是否符合一般识别规律，如果不能确认，可以参考同类软件或权威软件相同或相似的功能按钮。画简单的草图，跟相关人士确认，然后用软件正式制作。

• EAS 小图标的设计方法

EAS 图标设计规范 ---EAS 图标设计方法

正式制作注意事项：一、形象的一致性直接关系整套 icon 的风格，事先把整套风格都完善是不可能的，从一个做起，

由第一个完成的 icon 的特点向其他 icon 延伸（单元元素的一致性和统一性）。

二、形象的可识别性表意一定要清晰，简单明白，遵循业界通用性（考虑图形的文化背景。避免在

图标中使用字母、单词、手或脸。必须用图标表示人或用户时，请尽可能使其大众化）。

三、形象的简洁性一定注意，我们不需要高深画工， icon 的需求决定了我们的设计不可能包含

过多的细节，繁琐的细节只会影响表意的直观性。

• EAS 小图标设计方法


小图标制作步骤：

（ 1 ）、解析图标“表意” ，明确需求。（查找 .net 是否有同一功能图标，审核“表意”，符合预想的构思便在 .net 图标基础上美化；不符合便另行设计）。

（ 2 ）、草图确认（需求、分析、设计）（ 3 ）、制作（设计审核）（ 4 ）、输出（ gif 文件格式）（ 5 ）、存储（输出文件到各个相应目录）

EAS 图标设计规范 ---EAS 图标设计方法小图标制作步骤：

第一步、明确需求，解析图标“表意”。 1 、业界默认通用的图标样式，如：打印、删除、保存、新增、刷新、退

出、查询、返回……（参考下图微软通用图标）


第一步、明确需求，解析图标“表意”。 2 、具有我们产品特性的图标元素（内部约定的使用规范）

箭头 --- 一般情况下统一用黑色，红色，绿色，蓝色？人头 -----管理，人力资源？笔 ---- 修改，设置？权限 ---钥匙尺子 ----审核，检查？报表？表单？核销，对比？（留作问题讨论）


第二步、草图确认。设计的图标如果表意比较复杂，自己又没有把握的，可提交给相关人员确认。


小图标制作步骤：第二步、制作 1 、在 photoshop 里预设图标色系 2 、打开文件“工具栏图标环境图”、“工具栏图标”、“ eas 图标色系” 3 、绘图：（ 1 ）、在“工具栏图标环境图”里设计图标；（ 2 ）、确定光源， 45 度对角光源（左上角指向右下角）；（ 3 ）、使用渐变色绘制图标的线和面（单元素图标主要用单色系，多元素图标主要用对比

色系，如：蓝色和橙色，橙色和紫色，根据具体情况而定）；（ 4 ）、细节修改：（ a ）、两个元素叠加的，把前元素勾画清楚，后元素稍作弱化；（ b ）、边线框直角处用像素点弱化（直角变圆）；（ c ）、图标在不同环境的检查（工具条、下拉面板、操作区按钮）（ d ）、在多个图标的环境效果下比较单元图标大小，作放大或缩小的均衡视觉效果调整。（ e ）、图标要有视觉重心，检查在输出的文件大小（ 17x18 ）中，是否居中显示。（ f）、原则上图标距离上下左右各一个像素空格；如果图标不能绝对居中，则向右下角靠拢。

小图标制作方法图例详解：



小图标制作步骤：（ 1 ）、细节修改 ----两个元素叠加的，把前元素勾画清楚，后元素稍作弱化；


小图标制作步骤：（ 2 ）、细节修改 ----边线框直角处用像素点弱化（直角变圆）：


小图标制作步骤：（ 3 ）、细节修改 ---- 图标在不同环境的检查（工具条、下拉面板、操作区按钮）：


小图标制作步骤：（ 4 ）、细节修改 ---- 在多个图标的环境效果下比较单元图标大小，作放大或缩小的均衡视觉

效果调整。


小图标制作步骤：（ 5 ）、细节修改 ---- 图标要有视觉重心，检查在输出的文件大小（ 17x18 ）中，是否居中显示。


小图标制作步骤：（ 6 ）、细节修改 ----原则上图标距离上下左右各一个像素空格（留出可缩放的余地，方便调

整多单元元素的和少单元元素的图标在视觉上的均衡协调；同时也是为了满足同一图标在操作区按钮上使用）；如果图标不能绝对居中，则向右下角靠拢。

EAS 图标设计规范 ---EAS 图标设计方法小图标制作步骤：第三步、图标输出为 gif 文件格式


第四步、储存文件到各相应目录里

1 、 \\uiserver\wwwroot\Guide\EAS\picture\toolbar icon

2 、 vss 工作库

3 、 \\Uiserver\ 人机工程 V2.3\EAS\ 图标 \psd 文件


问题讨论：

谢谢！

EAS 图标设计规范 --- 前言

Documents

Transcript of EAS 图标设计规范 --- 前言