如何为前端工程师创建交付件？

Question

这是一个关于前端工程师的开发工作流程的问题。我正在为一个相当大的网站启动一个项目，这个网站有很多页面，每个页面都有多个步骤，在一个电子表格中布局所有内容是非常困难的。

每个页面的内容将在一个电子表格单元格中传递，并且一些页面具有多个可变部分，这些部分由用户的偏好决定。

有人问我对如何构建可交付成果有何看法。我想知道是否有构建这种可交付内容的最佳实践？因为当你有一个结构不佳的可交付成果时，它几乎就像用钢笔和铅笔写代码一样让人麻木。

您是否有任何工具、格式、实践来创建易于使用的可交付成果？

Answer 1

听起来你只是在做UI设计，然后把它交给前端工程师。

如果这是正确的，我建议你看看你是否可以做粗略的html/css工作，让页面看起来像你想要的那样，然后他们就可以进入并赋予它功能，但这样你就有了一个可能的想法。

例如，你可以做很多工作，然后留下关于尝试将一些东西放在更好的中心的评论。

我不是一个大的粉丝，只是在纸上或作为一个图像的设计，这将是更容易得到的html/css。

现在有很多工具可以让css和html变得容易做，即使你在html中有css，它们也可以将两者分开，但是，这对设计者来说是一个巨大的帮助。

只需做一个页面，然后给他们，然后在一两天后回来，并获得关于他们的想法的反馈，以及你如何改进你给他们的东西。

当你经历这个过程时，过了一段时间，两组人都会知道会发生什么，而你可以很快完成剩下的工作。

这更像是一种以前端工程师为客户的敏捷方法。

Answer 2

我的建议是对页面使用mockups或wireframes。样机是处于各种状态的页面的示例，而线框是页面结构的详细文档。

Answer 3

HTML和CSS对于模型使用来说太复杂了。我通常首先为UI/功能创建一个需求积压(只是Excel中的优先请求列表)。

特别是对于大型站点开发，您还应该完成流程和数据流定义(UML或其他描述方式)，以帮助您定义所提到的需求。

基于这些，你将知道整个网站的功能性需要什么样的步骤(即页面)，以及页面的层次和结构将是什么样的。这样就更容易掌握整个过程了。

之后，我们将创建快速线框图，并使用Photoshop或类似工具将最终结果可视化。在我的经验中，这些绝对是至关重要的，因为它有助于客户(和其他利益相关者)真正了解正在做什么。对于这一点，html和css太慢了，无法运行多次迭代。