设计对接前端注意事项

@abeet 2017-12-05 02:16:01发表于 abeet/Blog

根据对屏幕分辨率调研和本项目的实际要求,建议提供页宽为1200像素的设计稿psd文件供前端切图。 具体注意以下几点

设计需要向前端制作人员提供图层未合并的psd源文件供前端制作切图。提供png格式的尺寸、颜色标注文件。
psd文件使用“像素”作为尺寸单位,psd画布为1600px宽,页面主体内容为1200px宽(两边留白),以便网页在 1366、1440、1920这几个常见分辨率的显示器下没有横向滚动条
有多个通栏图片或通栏背景图,需要单独提供宽为1920px的通栏图片。psd文件画布设为1920亦可。
竖向分栏宽度以页宽的n/12 为佳,以便使用12分栏栅格系统进行响应式布局。
设计稿中文字以“像素”为尺寸单位,文字大小需大于12px,小于12px的汉字太小看不清。
除logo及首页中的大标题外,其他文字都要使用“微软雅黑”字体,因大部分用户的机器上只有很少的几种汉字字体——微软雅黑、黑体、宋体。
默认隐藏的页面元素,如下拉菜单、弹出框,也要设计出展开后的效果,以便前端切图
链接、按钮等在鼠标移入时要有外观上(文字颜色或背景色等效果)变化的元素,需要在设计稿空白处,设计鼠标移入后的效果,以便前端制作完成hover状态样式定义。
请向项目负责人了解本网站项目是否要适应手机、平板等设备。分别提供页宽360px(手机)、页宽750px(平板)、页宽960px(平板横放或窄屏PC)、页宽1200px(宽1280以上屏),四种尺寸下的设计稿。