Design Draft Requirement

20th August 2020 at 2:19pm
Web UI

对设计稿的要求。

下面的内容主要来自 大厂 H5 开发实战手册 中的「设计稿审查」部分:

拿到设计稿后,我们需要站在开发者的角度,先做一个初步的设计稿审查,其目的及意义主要有两个:

  • 了解设计稿的开发友好性:
    • 帮助视觉设计师发现并指出有哪些地方的设计对开发不友好,例如是否存在展示缺陷(缺乏经验的视觉设计师一个常见的问题是没有考虑按钮或标签文字数量的溢出情况)?是否开发成本高或者根本无法实现?
  • 了解设计稿的排版布局及内容构成
    • 帮助自己全局理解页面的设计细节,特别是排版布局及内容构成。利用模块化的思想将设计稿解构成一个个组件,并明确每一个组件的可复用性,包括可复用的范围。

事实上,设计稿的审查流程一般都比较固定,我们可以将其整理成为团队内通用的审查清单:

  • 确定设计稿的开发友好性(是否有还原成本高或无法还原的地方)
  • 确定一些特殊的元素是否有合理的边界处理(如文案超出外层容器的边界怎么办)
  • 确定页面的框架结构(Layout)
  • 确定跨页面可复用的组件(Site Component)
  • 确定当前页面可复用的组件(Page Component)
  • ...

另外看到的一些内容,要求设计师在编写 PSD 时要注意遵循不同平台的设计规范(比如 iOS 和 Android),并考虑到开发时需要的不同尺寸的图片(比如不同大小的图标),做出方便生成此类切图的 PSD 稿。

Resources