前端制作与UI设计沟通时提供的对接建议

由客户或第三方设计提供设计稿时,需向设计师提供设计规范,避免基本错误。前端开发与设计师沟通时提供以下建议(视项目实际情况调整):

根据对屏幕分辨率调研和本项目的实际要求,建议提供页宽为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以上屏),四种尺寸下的设计稿。




hackIE