如何为前端工程师创建可交付成果？
这是一个关于前端工程师开发流程的问题。我正在为一个相当大的网站启动一个项目，该网站有很多页面，每个页面都有多个步骤，并且很难在电子表格中布置所有内容。
每个页面的内容将在电子表格单元格中传递，并且某些页面具有多个可变部分，这些可变部分由用户的偏好决定。
有人问我对如何构建可交付成果的看法。我想知道是否有构建此类可交付成果的最佳实践？因为当您的交付成果结构不良时，它几乎与使用钢笔编写代码一样令人头脑麻木。
您是否有任何工具、格式和实践来创建易于使用的可交付成果？
This is a question about the development workflow of front end engineers. I am starting a project for a rather large site with lots of pages, each page has multiple steps, and it's very difficult to lay out all the content in a spreadsheet.
The content of each page will be delivered in a spreadsheet cell, and some pages have multiple variable section that are determined by user's preferences.
I was asked my opinion about how to structure the deliverable. I am wondering if there is a best practice out there for structuring this kind of deliverable? Because when you have a poorly structured deliverable it can be almost as mindnumbing as using pen-and-pencil to write code.
Do you have any tools, formats, practices for creating deliverables that are easy to work with?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
听起来你只是做UI设计，然后交给前端工程师。
如果这是正确的，我建议你看看是否可以做粗略的 html/css 工作以使页面看起来像你想要的那样，然后他们可以进去并赋予它功能，但这样你就有了一个想法什么是可能的。
例如，您可以完成大部分工作，然后留下有关尝试将某些内容更好地集中的评论。
我不太热衷于将设计写在纸上或作为图像，只获取 html/css 会更容易。
现在有很多工具可以让css和html变得很容易，即使你将css放在html中，它们也可以将两者分开，但是，这对设计师来说是一个巨大的帮助。
只需做一页，然后交给他们，然后一两天后回来并获得有关他们的想法的反馈，以及如何改进你给他们的内容。
当你经历这个过程时，一段时间后，两个小组都会知道会发生什么，你可以很快完成剩下的事情。
这更像是一种以前端工程师为客户的敏捷方法。
It sounds like you are just doing the UI design and then giving it to the front-end engineers.
If that is correct, I would suggest that you see if you can do the rough html/css work to get the page to look as you want, and then they can go in and give it the functionality, but that way you have an idea what is possible.
You can do much of the work, then leave comments about trying to center something a bit better, for example.
I am not a big fan of just getting the design on paper or as an image, it would be easier to just get the html/css.
There are plenty of tools now that make css and html easy to do, even if you have the css inside the html, they can separate the two, but, it would be a huge help to the designers.
Just do one page, and give it to them, and then come back in a day or two and get feedback as to what their thoughts are, and how you can improve what you give them.
As you go through this process, after a while both groups will know what to expect and you can get the rest done quickly.
This is more of an agile methodology with the front-end engineers as your customers.
我的建议是 模型 或 页面线框。模型是各种状态的页面示例，而线框是页面结构的详细文档。
My suggestion would be mockups or wireframes for the pages. Mockups would be examples of the pages in various states while the wireframe is a detailed document of the structure of the page.
HTML 和 CSS 对于模型使用来说太复杂了。我通常首先还为 UI/功能创建需求积压（只是 Excel 中优先需求的列表）。
特别是对于大型站点开发，您还应该完成流程和数据流定义（UML 或其他描述方式）以帮助您定义所提到的需求。
基于这些，您将知道整个站点功能（即页面）需要什么样的步骤以及页面层次和结构是什么样的。这样就更容易掌握整个事情。
之后，我们将创建快速线框，并通过使用 Photoshop 或类似工具将快速模型制作为图像来可视化最终结果。根据我的经验，这些绝对至关重要，因为它可以帮助客户（和其他利益相关者）真正了解所做的事情。为此，html 和 css 太慢，无法运行多次迭代。
HTML and CSS is way too complicated for mockup use. I usually first create a requirement backlog for UI/functionalities as well (just a list of priorized reqs in Excel).
Especially for a large site development you should also have the process and data flow definitions done (UML or other way of description) to help you define the mentioned requirements.
Based on these you will know what kind of steps does the whole site funcionality need (i.e. pages) and what the page hierarchy and structure will be like. This way it's much easier to get a grasp of the whole thing.
After that we'll create fast wireframes and visualize the end result with fast mockups done as images with Photoshop or similar. These are absolutely vital in my experience as it helps the customer (and other stakeholders) to actually understand what is beind done. For this the html and css are simply too slow to run multiple iterations with.