在需求开发过程中，设计稿的质量直接影响到开发效率和最终产品的效果。如果前端开发人员在拿到设计稿时未及时发现问题，可能会导致开发中途的返工和延误。
本文将从前端角度阐述如何全面、高效地检查设计稿，减少需求开发过程中因设计问题造成的反复沟通和调整。
设计稿宽度问题
- PC端：1920px
- 移动端：750px
- 对于需要全屏的版块，如首页顶部的banner，设计稿需按照固定的宽高设计。如PC端：1920 * 1080。因为背景图片会拉伸以适应全屏，设计时需考虑图片元素的位置。
切图问题
- 点击设计稿上需要切图的元素，确保元素可以选中、切图
包括但不限于以下情况需要切图：
- 艺术字
- 多个边框合成的一个边框
- 复杂SVG图标：图标或装饰性元素过于复杂，SVG 文件体积过大，影响性能
- 响应式图片：需要在不同屏幕尺寸上加载不同大小的图片，以优化性能。这要求同样宽高比的图片，PC端和移动端需要各自切图
- 渐变背景：CSS 无法实现的复杂渐变（如多层次颜色变化或不规则渐变）
- 纹理背景：设计中使用了细腻的纹理或复杂图案，CSS 难以实现
- 透明背景：需要背景图片具有部分透明效果，且不易用 CSS 或 SVG 模拟
元素选中问题
- 确保每个层级的元素都可选中
- 确保选中的元素的标注信息正确，包括尺寸、间距、颜色值、字体属性等。
字体问题
- 检查是否使用了免费可商用字体范围之外的字体
- 如果字体库不存在设计稿中用到的字体，需要提供对应的字体文件
颜色/色系问题
- 颜色规范：确认设计稿中的颜色是否来源于设计系统或品牌规范，避免临时添加的颜色
交互问题
如设计稿中没标明，默认无交互
- 确保所有交互式组件（如按钮、输入框、复选框）在设计稿中展示了不同状态（默认、悬停、激活、禁用）
多语言导致的排版问题
- 需要考虑切换语言后不同长度的文本对于排版、布局的影响
模块复用
- 尽量使用此前已在设计稿中用过的模块（如按钮、输入框、复选框）
写在最后
- 设计师应导出一份设计稿中的切图，以初步检查设计稿的切图问题
- 需求方应根据其需求检查设计稿中的交互样式