我作为前端开发人员已经工作了大约两年，并参与了各种各样的项目的创建。 我学到的教训之一是，拥有相同目标但任务和职责不同的不同开发团队之间的协作并不容易。
与其他团队成员、设计师和开发人员协商后，我创建了一个专为小型团队（5-15 人）设计的网站创建周期。 它包括 Confluence、Jira、Airtable 和 Abstract 等工具。 在这篇文章中，我将分享组织工作流程的功能。
技能箱推荐： 两年实践课程 .
我们提醒： 对于“Habr”的所有读者 - 使用“Habr”促销代码注册任何 Skillbox 课程可享受 10 卢布的折扣。
为什么需要这一切？
从头开始创建网站所需的最低团队是设计师、程序员和项目经理。 就我而言，团队已经成立。 但在几个网站发布后，我感觉有些不对劲。 有时我们根本没有完全理解我们的责任，与客户的沟通还有很多不足之处。 这一切都减慢了进程并扰乱了每个人。
我开始致力于解决这个问题。
谷歌搜索对我们的问题给出了很好的结果。
为了使工作完成更加直观，我创建了一个工作流程图，可以让您了解这里的工作是如何完成的。
单击图像以全分辨率打开。
目标和目标
我决定测试的第一个技术是“级联模型”（瀑布）。 我用它来突出问题并了解如何解决它们。
问题：大多数情况下，客户不会像开发人员那样模块化地评估网站创建过程。 他将其视为一个常规站点，也就是说，他以单个页面的形式进行思考。 在他看来，设计师和程序员一个接一个地创建单独的页面。 结果，客户根本不明白在实际过程中接下来发生了什么。
任务：否则说服客户是没有意义的；最好的选择是开发一个模块化流程，用于基于逐页模型在公司内创建网站。
通用设计令牌和组件由开发人员和设计人员管理。
问题：这是许多策略都要解决的常见情况。 有许多有趣的解决方案，在大多数情况下，建议创建一个由样式指南/库生成器控制的设计系统。 但在我们的情况下，在开发过程中添加另一个组件来允许我们管理设计人员的访问级别是根本不可能的。
任务：建立一个通用的系统，让设计者、开发者和管理者能够同步工作，互不干扰。
精准的发展追踪
问题：虽然有许多有用的工具可用于跟踪问题和衡量总体进度，但大多数工具并不灵活或最佳。 该工具非常有用，可以节省团队通常花在提问和澄清特定任务上的时间。 它还可以让管理人员更准确地了解整个项目，从而让他们的工作变得更轻松。
任务：创建仪表板来跟踪不同团队成员执行的任务的进度。
一套工具
在尝试了不同的工具后，我选择了以下一组：Confluence、Jira、Airtable 和 Abstract。 下面我就来揭秘一下各自的好处。
合流
工具作用：信息和资源中心。
Confluence 的工作区相对容易设置，具有很多功能，与不同应用程序集成，并且具有单独的可自定义模板。 它不是一个一刀切的解决方案，但它是作为信息和资源中心的理想选择。 这意味着与项目相关的任何参考或技术细节都必须输入数据库。
该工具允许您正确记录每个组件以及有关项目的任何其他详细信息。
Confluence的主要优点是文档模板的定制。 此外，它还可用于实现规范和各种项目文档的单一存储库，从而分离参与者的访问级别。 现在，您不必担心手头有旧版本的规范，就像通过电子邮件发送文档时发生的情况一样。
有关该工具的更多信息 .
JIRA
工具的作用：问题监控和任务管理。
Jira 是一个非常强大的项目规划和管理工具。 该功能的主要部分是创建可定制的工作流程。 为了有效地管理问题（这正是我们所需要的），值得特别注意请求类型和问题类型（issue type）的正确使用。
因此，为了确保开发人员基于正确的设计构建组件，每次设计发生变化时都需要通知他们。 组件更新后，设计人员需要打开一个问题，指派一名负责的开发人员，并为他分配正确的问题类型。
借助 Jira，您可以确保流程中的所有参与者（让我提醒您，在我们的例子中有 5-15 个）都会收到正确的任务，不会迷失并找到他们的执行者。
了解有关吉拉的更多信息 .
Airtable
工具的作用：组件管理和进度板。
Airtable 是电子表格和数据库的混合体。 所有这些使得自定义上述所有工具的操作成为可能。
示例 1：组件管理
至于样式指南生成器，使用起来并不总是方便 - 问题是设计师无法编辑它。 此外，使用 Sketch 组件库也不是一个好的决定，因为它有很多限制。 最有可能的是，您根本无法在程序之外使用该库。
Airtable 也不完美，但它比许多其他类似的解决方案更好。 这是组件管理表模板的演示：
当开发人员接受设计组件时，他通过将组件记录在表中来评估最终的 ABEM。 总共有9列：
- 名称 - 根据 ABEM 原则的组件名称。
- 预览 - 这是放置从其他来源下载的组件的屏幕截图或图像的位置。
- 链接页面是指向组件页面的链接。
- 子组件 - 到子组件的链接。
- 修饰符 - 检查样式选项是否存在并定义它们（例如，活动、红色等）。
- 组件类别是一般类别（文本、宣传图片、侧边栏）。
- 开发状态——实际开发进度及其定义（已完成、进行中等）。
- 负责人 - 负责该组件的开发人员。
- 原子级别是这个组件的原子类别（根据原子设计的概念）。
- 数据可以在相同或不同的表中引用。 将这些点连接起来可以防止缩放时出现混乱。 此外，数据可以毫无问题地进行过滤、排序和更改。
示例2：页面开发进度
要评估页面开发的进度，您需要专门为此目的创建的模板。 该桌子可以满足团队本身和客户的需求。
有关该页面的任何信息都可以在此处注明。 这是一个截止日期、一个到 InVision 原型的链接、一个目的地、一个子组件。 立刻就会发现，无论是记录和更新设计，还是前端和后端开发的状态，操作都非常方便。 而且，这些操作是同时进行的。
抽象
该工具的作用：设计资产的单一版本控制源。
Abstract 可以称为 Sketch 中资源的 GitHub，它使设计人员免于复制和粘贴文件。 该工具的主要优点是它提供了一个设计存储库，充当“单一事实来源”。 设计人员必须将主分支更新到已批准布局的最新版本。 之后，他们必须通知开发商。 反过来，这些应该只适用于来自主分支的设计师资产。
作为结论
在我们实施了新的开发流程和上述所有工具后，我们的工作速度至少提高了一倍。 这不是一个完美的解决方案，但它是一个非常好的解决方案。 确实，为了让它工作，你需要付出很多努力——它需要“手动工作”来更新和维护一切正常工作。
技能箱推荐：
- 实践课程 .
- 在线课程 .
- 实践年课程 .
来源： habr.com