使用说明

本工具用于解决设计师和前端工程师的沟通效率问题，解决设计资源的存放、管理、审核、格式转换、版本管理问题。

文件格式

矢量设计资源导出为 SVG 格式，它可以被大部分流行的设计工具 (Adobe XD/Adobe Illustrator/Figma/Sketch/Master Go/即时设计) 打开，并支持自由调整大小，转换为其他格式。

不适合矢量导出的位图资源，建议使用 PNG 格式，以保留较多的色彩细节，而且可以进而转换为 JPG 格式。

本工具支持上传 SVG / PNG / JPG 格式。

SVG

SVG 格式支持主流的平台开发，理论上设计师不需要为同一张图片导出多种尺寸。

虽然 svg 渲染的性能有可能会低于位图，但差距基本可以忽略不计。

Web 项目支持 SVG 的直接渲染，无需额外操作。

iOS 13 项目同样支持 SVG，并支持向下兼容旧版本，自动转换为 PNG。

安卓项目支持基于 SVG 的图形方案，详见文档： 添加多密度矢量图形

PNG

较少色彩时文件更小，支持透明底色。

JPG

多色彩时文件较小，不支持透明底色。

命名规则

将每张图片的用途和风格作为文件名，利用文件夹分类整理。

由于英文命名存在诸多问题，建议使用中文对图片进行命名，以节省翻译，文档编写耗费的时间精力。但这要求前端工程师的开发工具时能够处理中文文件名。

名称中带有 深色背景 的图像，预览卡片会自动使用深底色。

上传方式

仓库地址：

https://e.coding.net/biggates/eaphone-health/design.git

使用 Git 上传设计资源到项目文件夹 design 当中，资源会在一段时间之后自动发布。

不熟悉 Git 的员工，建议使用图形化工具，例如 GitHub Desktop

非管理员请勿擅自更改现有资源的名称。如需更改，请先复制一份，保留旧文件一段时间。

格式转换

• 对于不支持 svg 的 APP 端，提供 svg 自动转换 png 的功能。
• 自动生成 svg 雪碧图和图标字体，Vue / React 组件等。

敬请期待

图片压缩

敬请期待

高级功能

重新着色，添加外边框，底板等。

敬请期待