【普益标准】设计与切图

工作文档

设计稿尺寸

pc 端

设计考虑以下屏幕宽度下的不同的布局方式：

1920，1600，1440，1366，1280

设计稿给出两个宽度：

1920 和 1280

移动端

移动端两种设计：

• 水平方向等比例缩放视觉稿，垂直方向正常往下流动
• 内容等像素，布局等比例

第一种，实现快速，质量可控，表现统一。
第二种，内容更为精致，对宽大屏幕的利用率高，表现自适应，响应式。

常规选择第一种，个别有特殊展示的选择第二种。

设计稿尺寸以 IPhone7Plus 的像素为准，由前端根据具体情况，自行选择对图片尺寸的压缩：

宽：414 * 3 = 1242
最小高：736 * 3 = 2208

切图

最小化图片大小的原则：

• 白色、纯色背景可以导为 60 品质的 jpg
• 透明、半透明背景、内容采用 png24
• 前端将多个小图片合为一张（雪碧图）
• 带有旋转或复杂动效的图表，使用 gif
• 纯色色块，会不采用图片

各环境下的设计风格

移动端项目

两种情况：

第一种，自定义的实现，可实现所有设计的样式和效果。开发慢，常用于展示型项目。前端主要精力会放在样式和交互上。

第二种，借用 ui 框架实现，最好在框架本身所提供的方式的基础上进行拓展。开发较快，常用于逻辑复杂的项目，前端的主要精力会放在业务逻辑的实现上。

内部项目

内部项目，可以使用所有样式和效果。如果要快速开发，可以不用 ui 设计。如果要作为练手，建议上齐所有高大上的样式，动效。

pc端大部分对外项目（ie8+ 环境）

大部分对外项目，需要兼容 ie8 环境。

ie8 和 ie7 环境对一下内容支持难度较高：

• 阴影
• 圆角
• 背景、边框、内容半透明效果
• blur 等滤镜效果
• 输入框、单选、多选、下拉框、下拉列表框元素样式
• 动画效果性能开销过大
• 不支持特殊的字体

建议通过两种策略来设计：

一种策略，阴影、圆角、半透明、滤镜 需要使用图片来实现；表单元素，建议使用自带样式（按钮除外）。

另一种，采用优雅降级的思路：chrome 上实现所有效果和样式；ie9 上基本实现效果，和所有样式；ie8上保持布局正常，去掉特殊样式和动画效果。

采用安全的字体。

pc端少部分项目（ie6+ 环境）

少部分项目，需要兼容 ie6 环境。

ie6 下环境有如下特点：

• 图片只支持 png8 的布尔透明，或者使用浏览器自带的透明（性能和实现成本较高）
• 图片拉伸时不能自动渲染
• 所有 ie8 和 ie7 不支持的样式和效果
• 加载较慢，加载时动画阻塞

这种环境的项目，建议更多从布局，配色，图标等方面去突出设计，细节上避免设计过多新潮设计。避免动画。