1

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

我过去使用的交付方法（以下所有方法都包含详细的线框图）：

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

请随时将您自己的方法、您对这些方法的经验以及您喜欢的方法添加到此列表中。我想知道哪些方法也适用于不同的情况（从头开始创建新功能、更新现有功能等）。

4

1 回答 1

0

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

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

  • 区
    • 图像
    • js
    • css
  • 资源
    • 图像
    • js
    • css
  • 测试

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

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

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

于 2013-07-15T20:38:59.940 回答