1 / 23

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

EAS 图标设计规范 --- 前言. 前言： 由于距阵式管理的执行，今年工作任务的分配让每个设计师都担任了部分系统的图标设计工作，为了保证 EAS 图标在设计风格上 美观统一 ，并提高我们的 工作效率 ，我收集和整理出了一套制作图标的设计规范，希望能给大家的设计工作带来很大帮助。 目前相对完整的一套工具栏图标是 K3.net 的设计，由于今年的工作任务较重，此次的工具栏图标设计将在 K3.net 基础上按 金蝶 EAS 图标风格 进一步美化和完善，主要 工作重点 放在工具栏图标 “ 表意 ” 的设计上。. EAS 图标设计规范 --- 培训提纲.

gaurav
Download Presentation

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

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. EAS图标设计规范---前言 • 前言： 由于距阵式管理的执行，今年工作任务的分配让每个设计师都担任了部分系统的图标设计工作，为了保证EAS图标在设计风格上美观统一，并提高我们的工作效率，我收集和整理出了一套制作图标的设计规范，希望能给大家的设计工作带来很大帮助。 目前相对完整的一套工具栏图标是K3.net的设计，由于今年的工作任务较重，此次的工具栏图标设计将在K3.net基础上按金蝶EAS图标风格进一步美化和完善，主要工作重点放在工具栏图标“表意”的设计上。

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

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

  4. EAS图标设计规范---金蝶EAS图标 • 金蝶EAS图标种类 （1）工具栏图标（2）工作流图标（3）常用功能图标 （4）向导图标（5）treeview图标（6）个性化设置图标 （7）流程图图标（8）特殊图标 • 设计风格定位： • 1、色彩---色彩柔和，偶尔有鲜艳的颜色做整体风格的点缀；单元元素边线框和单元元素基本都是由渐变色构成； • 2、表现形态---以平面造型为主，立体造型根据“表意”需求制作（少量）； • 3、结构特征---单元元素少而精，简洁明了（一般不超过3个单元元素的使用）。 • 4、类别---色彩丰富的图标；符号化的单色图标。 • 5、光源---原则上是左上角向右下角45度照射，根据特殊情况可自行调节。

  5. EAS图标设计规范---EAS图标设计方法 • 前期准备 • 首先我们会从需求人员那里得到图标按钮的需求列表，列表包括了每个icon所对应的功能概述，使用位置和环境，大小尺寸，色彩模式。这样可以保证我们的设计结果更加符合实际需求。 • 查看.ent已设计的图标资源，比较自己最新理解的“表意”是否与.net已设计图标“表意”相符合？如果符合，即可在.net图标基础修改和完善，借用以前的设计元素，但在设计风格上EAS为标准。 • 如果“表意”有差异，就要思考出更好更贴切的设计元素来制作图标，构思出来的图标首先要考虑是否符合一般识别规律，如果不能确认，可以参考同类软件或权威软件相同或相似的功能按钮。画简单的草图，跟相关人士确认，然后用软件正式制作。

  6. EAS图标设计规范---EAS图标设计方法 • 正式制作注意事项： • 一、形象的一致性 • 直接关系整套icon的风格，事先把整套风格都完善是不可能的，从一个做起，由 第一个完成的icon的特点向其他icon延伸（单元元素的一致性和统一性）。 • 二、形象的可识别性 • 表意一定要清晰，简单明白，遵循业界通用性（考虑图形的文化背景。避免在图标中使用字母、单词、手或脸。必须用图标表示人或用户时，请尽可能使其大众化）。 • 三、形象的简洁性 • 一定注意，我们不需要高深画工，icon的需求决定了我们的设计不可能包含过多的细节，繁琐的细节只会影响表意的直观性。 • EAS小图标的设计方法

  7. EAS图标设计规范---EAS图标设计方法 • EAS小图标设计方法 • 小图标制作步骤： • （1）、解析图标“表意” ，明确需求。（查找.net是否有同一功能图标，审核“表意”，符合预想的构思便在 .net图标基础上美化；不符合便另行设计）。 • （2）、草图确认（需求、分析、设计） • （3）、制作（设计审核） • （4）、输出（gif文件格式） • （5）、存储（输出文件到各个相应目录）

  8. EAS图标设计规范---EAS图标设计方法 • 小图标制作步骤： • 第一步、明确需求，解析图标“表意”。 • 1、业界默认通用的图标样式，如：打印、删除、保存、新增、刷新、退出、查询、返回……（参考下图微软通用图标）

  9. EAS图标设计规范---EAS图标设计方法 • 小图标制作步骤： • 第一步、明确需求，解析图标“表意”。 • 2、具有我们产品特性的图标元素（内部约定的使用规范） • 箭头---一般情况下统一用黑色，红色，绿色，蓝色？ • 人头-----管理，人力资源？ • 笔----修改，设置？ • 权限---钥匙 • 尺子----审核，检查？ • 报表？表单？ • 核销，对比？ • （留作问题讨论）

  10. EAS图标设计规范---EAS图标设计方法 • 小图标制作步骤： • 第二步、草图确认。 • 设计的图标如果表意比较复杂，自己又没有把握的，可提交给相关人员确认。

  11. EAS图标设计规范---EAS图标设计方法 • 小图标制作步骤： • 第二步、制作 • 1、在photoshop里预设图标色系 • 2、打开文件“工具栏图标环境图”、“工具栏图标”、“eas图标色系” • 3、绘图： • （1）、在“工具栏图标环境图”里设计图标； • （2）、确定光源，45度对角光源（左上角指向右下角）； • （3）、使用渐变色绘制图标的线和面（单元素图标主要用单色系，多元素图标主要用对比色系，如：蓝色和橙色，橙色和紫色，根据具体情况而定）； • （4）、细节修改： • （a）、两个元素叠加的，把前元素勾画清楚，后元素稍作弱化； • （b）、边线框直角处用像素点弱化（直角变圆）； • （c）、图标在不同环境的检查（工具条、下拉面板、操作区按钮） • （d）、在多个图标的环境效果下比较单元图标大小，作放大或缩小的均衡视觉 效果调整。 • （e）、图标要有视觉重心，检查在输出的文件大小（17x18）中，是否居中显示。 • （f）、原则上图标距离上下左右各一个像素空格；如果图标不能绝对居中，则向右下角靠拢。

  12. EAS图标设计规范---EAS图标设计方法 • 小图标制作方法图例详解：

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

  14. EAS图标设计规范---EAS图标设计方法 小图标制作步骤： （2）、细节修改----边线框直角处用像素点弱化（直角变圆） ：

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

  16. EAS图标设计规范---EAS图标设计方法 小图标制作步骤： （4）、细节修改----在多个图标的环境效果下比较单元图标大小，作放大或缩小的均衡视觉 效果调整。

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

  18. EAS图标设计规范---EAS图标设计方法 小图标制作步骤： （6）、细节修改----原则上图标距离上下左右各一个像素空格（留出可缩放的余地，方便调整多单元元素的和少单元元素的图标在视觉上的均衡协调；同时也是为了满足同一图标在操作区按钮上使用）；如果图标不能绝对居中，则向右下角靠拢。

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

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

  21. EAS图标设计规范---EAS图标设计方法 • 小图标制作步骤： • 第四步、储存文件到各相应目录里 1、\\uiserver\wwwroot\Guide\EAS\picture\toolbar icon 2、vss工作库 3、\\Uiserver\人机工程V2.3\EAS\图标\psd文件

  22. EAS图标设计规范---EAS图标设计方法 • 问题讨论： 谢谢！

More Related