将设计交给开发人员的最佳交付方法是什么?

时间:2013-07-15 20:32:29

标签: user-interface process user-experience

我正在开发一个庞大而复杂的Web应用程序,从开发人员的角度来看,我很好奇在这种类型的环境中将设计交付给工程的最佳方法。我很好奇交付方式及其优缺点。

我过去使用的交付方式(以下所有方法都包含详细的线框):

  • 使用Layer Comps分层PSD以实现交互状态。
  • 一个GUI工具包 - 一个设计元素的PSD,开发人员为其设计标记并从中拉出来使设计与线框相匹配。
  • 一个CSS工具包 - 一个HTML页面,其中包含开发人员可以提取的CSS样式和布局以匹配线框。

请随意在此列表中添加您自己的方法,您对这些方法的体验以及您喜欢的方法。我想知道在不同情况下哪些方法有效(从头开始创建新功能,更新现有功能等)。

1 个答案:

答案 0 :(得分:0)

我一直致力于一个类似的项目,涉及为开发团队提供UI小部件。其中一些具有内置的交互性,用javascript编写。

我们将每个小部件都放在一个包含以下子文件夹的单独文件夹中:

  • DIST
    • IMG
    • JS​​
    • CSS
  • 来源
    • IMG
    • JS​​
    • CSS
  • 测试

源文件夹通常包含js和css源的非缩小版本。此外,如果您为css使用SASS或LESS(并且您应该将它用于这么大的项目),/ Source / CSS文件夹是存储未编译的css源的地方。同样在这里,在img文件夹中我们通常包含了我们用来设计组件的PSD文件

Dist (ribution)文件夹中,我们发送了已编译和缩小的css,使用的图像(必要时)以精灵组合,以及缩小的js代码。虽然您可以自己准备所有这些缩小版本,但如果您使用Grunt自动完成整个过程,则会更快。您只需定义一个缩小js和css的任务,并创建适当的文件夹结构。只需按一下按钮(它实际上是一个正在执行的命令)。

测试文件夹通常包含一个html页面,用于呈现组件并提供有关如何测试其不同状态或交互功能的说明。此html页面应始终使用Dist文件夹中的css和js文件。包含一个简短的read.me文件也是一个很好的做法,该文件描述了将组件包含到现有页面中所需的步骤。最后但并非最不重要的是,如果我们谈论响应式布局,那么在这里提供截图以及在各种分辨率的移动浏览器中呈现的小部件/组件(ipad / iphone / android手机)也是一种很好的做法。

相关问题