作为前端工程师，当您开始编码时，通常会有产品文档，交互式原型，注释和剪切图像资源。开发人员只需按照这些资源的说明将内容集成到自己的代码中即可完成工作。但是，俗话说，产品的设计不利于开发。在越来越高潮的“全栈工程师”中，一个合格的前端应该明白，开发手中的原材料意味着什么。以这种方式编写的代码可以更好地满足需求并改善产品的最终体验。前端本身也可以在这个过程中有更多的想法，并培养自己的能力的各个方面。

现在，我们应该跳出自己的工作站，看看产品的所有需求，经历了什么样的过程，并掌握在自己手中。以下过程是典型的，但它可能或多或少与每个人的实际情况不同，但总体思路大致相同。

产品文章

实际上，需求的开始源于用户，我们的产品经理捕获，优化和集成了这些分散的需求，从而产生了我们的开发对象——产品。前端将要实现的各种逻辑和功能点逐一对应于这些要求。可以说这些功能是产品的灵魂。作为开发，您可以获得产品经理编写的原型，文档，思维导图等。虽然它们形式各异，但它们都旨在让开发人员了解该产品的功能点和基本架构。

产品类文档可能不像交互式文档，视觉注释甚至读取那样接近开发而不影响前端。但是，这些文档允许开发查看整个产品，使开发能够掌握每个功能点的重要性和重要性，这有助于基于产品本身开发代码，降低维护后成本，并间接提高开发效率。

例如，通过文档认真负责的开发了解到产品可能会考虑在未来添加皮肤功能，然后他可能会在开发过程中有意识地保留一些小的界面进行文本颜色调整，这对将来来说很方便。更新的迭代消除了将来重写代码的痛苦。

例如，对产品灵魂的深刻理解使开发人员能够编写更灵活，更高效，更贴心的更好的代码。

互动文章

如果产品是由各种功能组成的瑞士军刀，则合理地布置军刀的每个刀片的位置，从而可以正确地执行每个刀片的功能，这是交互设计者的任务。交互设计者的工作内容分为两部分：一部分是信息架构，另一部分是交互细节。

一个产品可能有几十种功能，而且有几十种信息，如果放在手机屏幕上5英寸上下，就会变成一个装满奇怪刀片的“刀球”，用户无法启动，甚至安静的水果是无法做到的。因此，交互设计者需要合理地“隐藏”产品各个层面的各种功能和信息。每个功能和信息都可以在适当的级别显示，但不能隐藏得太深，以至于用户无法找到它。转到所需的功能。这是信息架构的安排。合理的信息架构允许产品的功能出现在最合适的场景中，以便用户可以找到他想要的东西。

交互细节更像是刀的感觉。如何优化各级功能和信息的布局，位置和响应，使用户能够感受到“一人一人”的感觉，使功能不仅显得恰到好处。 ，也可以很容易地使用，例如下面的例子。

例如，我们可以看到交互直接影响用户是否可以正确播放产品功能。功能是灵魂，互动是推动灵魂的骨架。

大量功能和信息的分类与脑细胞的发育相同。交互设计人员需要在界面复杂性，级别深度和某些产品特殊需求之间进行适当和合理的权衡。符合要求的合理的交互式文档，即界面简单易懂，层次结构浅，易于用户查找功能，并有指导用户的合理障碍。经过复杂的权衡，你得到的是一个交给开发的交互式文档。

对于前端，交互式文档指示开发将对功能进行分类和布局。只要严格遵守交互式文档的内容，我们就可以确保最终产品具有美观合理的信息结构和交互细节。如果您尝试更深入地学习，您可以掌握更多产品的内涵，并了解有关产品本身的更多信息。

视觉文章

我记得曾与该项目合作的前高年级学生对我说：“没有必要进行这样详细的注释。事实上，我不这么认为。”幸运的是，大四的设计并不差，并且所做的事情没有太大的偏差。但是，确实有一些前端有这样的想法。毕竟，目前的手机具有几百ppi的分辨率。一个或两个像素和颜色值似乎没有任何区别。看看大概的位置。使用你的照片不好吗？ ？

例如，以下两个界面功能齐全，也是根据交互式文档开发的。只有一方严格恢复设计草案，而另一方只是“感觉”。

我们可以看到“感觉流”的界面。化身右侧的信息内容完全不对齐，右边框未对齐。因此，当用户从上到下获取信息时，他将看到锯齿状的信息标题。部门需要不断调整水平方向的视觉焦点。由于几个像素的差异，整个信息流在用户眼中变得杂乱，并且难以找到线索，这给用户的阅读带来了极大的不便。

事实上，在产品中，视觉相当于交互骨架外的皮肤，而皮肤的主要功能是装饰。产品的视觉设计决定了产品是否美观，并为用户提供了愉悦的视觉体验。一个好看的用户界面，像一个帅哥，让人感到快乐。然而，除此之外，视觉设计还具有更深层次，更重要的功能，即引导用户获取信息。

就像产品瑞士军刀一样，我们拥有良好的刀片，合适的结构和良好的外形设计，但我们不知道如何触发和获取隐藏在其中的功能和信息。在这个时候，视觉的更深层次的功能将发挥作用。

如果将文本和图形概括为可视区域，则视觉区域的大小，颜色和甚至形状将产生不同的影响和感受。通过有效地布置这些因素并合理地布置布局，可以有效地引导用户。阅读多个级别的信息，以了解不同的重要级别。交互设计师通过页面区分级别，视觉设计师需要区分页面级别和视觉体验。实际上，看似非常普通的界面有一层视觉排列，允许用户在流中读取多个信息，然后成为你眼中的“普通”界面。

详细的注释是使所有这些视觉安排有效的关键。由于变化很小，许多视觉元素的平衡真的被打破了。只有通过根据注释仔细开发界面才能实现预期的视觉效果。实现与效果图相同的减少程度。

如果你进一步理解它，它对于界面开发肯定有很多意义。例如，开发可以在响应式布局，自动布局等方面取得更多进展。因为您希望自动布局以获得最佳结果，所以开发应该清楚地了解注释图中的哪些值是绝对不可变的，哪些值可以根据屏幕大小而变化。

实际上，由于设计通常不了解开发所需的信息，因此通常会考虑注释图中的自动布局和响应性等因素。如果您此时对界面设计有了更深入的了解，您基本上可以确定可以用于自动布局的位置。

总结

最后，我相信项目过程中的任何人都必须具备全球思维能力。在创建产品的过程中，开发人员和设计人员必须注意上下游的各个方面，这样才能真正提高产品的核心竞争力。