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

Question

我正在开发一个大型而复杂的web应用程序，从开发人员的角度来看，我很好奇在这种环境下将设计交给工程的最佳方法是什么。我对送货方式及其利弊很好奇。

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

• 具有层Comp的分层PSD用于交互状态。
• 一个GUI工具包-一个PSD的设计元素，开发人员为其创建标记并从中提取，使设计匹配线框。
• 一个CSS工具包-一个HTML页面，它包含CSS样式和布局，开发人员可以从中提取以匹配线框。

请随意将您自己的方法添加到此列表中，您在这些方法方面的经验以及您喜欢的方法。我想知道哪些方法在不同的情况下也能工作(从头开始创建一个新特性，更新现有的特性等等)。

Answer 1

我一直在从事一个类似的项目，该项目涉及为开发团队交付UI小部件。其中有些是内置的交互功能，用javascript编写。

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

• Dist
  • img
  • js
  • css

​

• 源
  • img
  • js
  • css

​

• 测试

源代码文件夹通常包含js和css源代码的非缩小版本。另外，如果您在css中使用SASS或更少的css (您应该将它用于如此庞大的项目)，那么/Source/CSS文件夹就是存储未编译的css源代码的地方。另外，在img文件夹中，我们通常包含用于设计组件的PSD文件

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

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