矢量图设计方案 Vector Graphic

服务介绍

  矢量图是根据几何特性来绘制图形，矢量可以是一个点或一条线，矢量图只能靠软件生成，文件占用内在空间较小，因为这种类型的图像文件包含独立的分离图像，可以自由无限制的重新组合。它的特点是放大后图像不会失真，和分辨率无关。相比于位图，矢量图的文件通常较小。这是因为矢量图通过记录图形对象的形状、位置、颜色和大小等属性来描述图像，而不是记录每个像素的颜色信息。在不同分辨率的设备上都能够保持良好的显示效果，适合在多种设备上使用，并且适用于名片，画册等各类印刷场合。

• 5120×2880

  3840×2160

  1920×1080及以下

服务流程

1 2 3 4 5

• 15%
• 65%
• 30%
• 总进度 %

前期规划与设计 前端样式，动画效果实现 不再提供设计修改 1. 需求/业务深度调研-撰写需求文档（包含技术评估，设计思路，实现方案）

2. 主界面效果图设计与撰写交互文档 (设计风格确认与再次梳理需求）

3. 需求明确后完成所有页面效果图 （结合客户建议优化完善）

4. 效果图确认,实现静态页面 (包含所有页面动画特效设计)

5. 兼容性调整完善,测试 (图表方案报告)

常见问题

[矢量绘制仅适合扁平化风格]
矢量图形是由路径，锚点，填充色而构成。仅适合扁平化，绘制的过于逼真，复杂，路径节点及填充也会随之增多，只能以图片格式呈现，以代码呈现在浏览器内会对处理器运算造成压力，并且代码量也会大于图片大小。

[低配置设备动画播放会轻微卡顿]
动画运行时会将所有矢量元素转换为位图填充，低配置设备可能会由于显卡性能不够可能会出现动画运行不流畅现象。

[关于浏览器的兼容性]
矢量绘制为htm5的SVG技术。谷歌，火狐，苹果，IE9以上完美兼容；对于IE9以下浏览器则无法兼容。

效果演示

本站除作品部分意外皆为 html5-svg矢量绘制,以下 Demo均为测试，建议使用谷歌浏览器访问

效果演示1

效果演示2

效果演示3