新手科普！前端开发、交互、视觉是怎么分工合作的？

作一端程师，手码起码时，手一般都拿产品文档、交互原型、标注图切好的图片资源。发者只按照这些资源的指示把内逐一整合到自己码里就算完作。但俗话的好，不愿意当产品的设不好发，「全栈程师」被捧的越越高的潮中，一合格的端，应该明白自己发时手中的原料到底意什么。这样写出的码，能符合需求，提高产品的终体验，端自己也能这过程中多的思考，修炼自己的各方面能力。

现在，我们应该跳出自己工位，看看个品所有需求，是经历了怎样过程，来到自己手上。下流程比较典型，可能和大家实情况有着或多或少，是在体思路上是大致相。

产品篇

其实，需求最开始起于用户，而我们品经理捕捉、提炼、合这些零散需求，生了我们开发象——品。前端们要去实现各逻辑和功能，都应了这些需求，可以说，这些功能是个品灵魂。作为个开发，可能会获品经理写原型、文档、思维导图等等，形上虽然多多样，都是为了让开发了解这个品功能和基本架构。

产品类文档可能不像交互文档、视觉标注那贴近开发，甚至不读都不响前端的工作。但是这类文档可以让开发纵观整个产品，让开发掌握每一个功能点的轻重、义，能帮助开发根据产品本身优化代码，减少后期维护成本，间地提高开发效率。

举个例子，一个认负责的开通文档到，一个产品能在将来考虑添加皮肤功能，么他在开程中，能有意识地预留一文字值整的小接口， 方便将来的更新迭代，免去未来重写代码的痛苦。

诸如此例，深入解产的灵魂，可开发写更灵，更效甚至更贴心的好代码。

交互篇

果产品是一把各种功能组成的瑞士军刀，么合理安排军刀各个刀位置，使得每一个刀的功能以挥得当，就是交互设计师的任了。而交互计的工作内容成个部：一个是息架构，一个是交互细节。

一个产品能有几上百种功能，呈现数种信息，果放在手机 5 英寸上下的屏幕上，就成一把满千奇百怪刀的「刀球」，用户根无从下手，甚至连安静地切个水果做不到。因此互设计师需要把各种功能和信息合理地「藏在」产品的各个级之中，每个功能和信息能在恰当的级得到呈现，但也不能隐藏的太深，让用户找不到想要的功能。就是信息架构的安排，合理的信息架构让一个产品的功能出现在最合适的场，让用户找到的就是自己想要的。

而交互细节则更像是刀的手感，怎样得当地优各种功和信息在层级上的布、位置和响应等等，户得到「人刀合一」感觉，功仅恰当的现，还顺手地使，如图的例子。

诸如此例，我们可看到交互会直接影响到产功否被户正确发挥，功是灵魂、那交互就是撑起灵魂的骨架。

将的功能信息行分类布局发一样消耗脑细胞的作，交互设师需界面复杂程度、层级深度一些产品特殊需因素之间出恰当合理的权衡，能出合理的符合需求的交互文档，即界面简单易于理解，层级较浅易于用户查找功能，又合理的障碍导向用户。过复杂的权衡后，得到的就交给发的交互文档。

对于端，交互文档指示发将功能分级、布局，只严格遵守交互文档的内，我们就可以保证终的产品品漂亮合理的信息结构、交互细节。如果试深的钻研，就能够掌握多产品的内涵，去加了解产品本身。

视觉篇

记得以一一起合作过项目的学我：「不用那么详细的标注啦，其实标了我也不怎么看」。好这学的设感觉还不错，出的东并太的偏差。不过这种法的端确实不少数，毕竟的手机动辄几 ppi 的分辨率，一两素色看起什么差距，致置看感觉，切图用的不就好了吗？

依然举个例子，下两个界，功能完，样按照交互文档开发，是边严格按照标注原了设计稿，另边是「凭感觉」。

我们可以看到「感觉流」界，头像右侧信息内容完全没有齐，右边界也没有齐可言，这样用户在从上到下获取信息时，会看到个参不齐信息头部，需要不地在平调视觉焦，为相了几个像素，个信息流在用户眼变杂乱不堪，难以找到头绪，用户阅读带来了很大不便。

其实视觉在产品中，相当于交互骨架之外的皮肤，而皮肤的一大功能是装饰。一个产品的视觉计决定这个产品是否美观，能否给用户带来愉快视觉受。一套好的用户界面，就像帅哥美，让人产生愉悦的受。然而除此之外，视觉计有着更深层的重要的功能，就是引导用户获取息。

就像之前说的产品瑞士军刀，我们有精良的刀，妥当的构造，良的外形设计，但是拿到手上我们却不道藏在其中的功能和信息怎样触、获取。时视的更深功能就要挥用。

果把文字和图形归纳为视区域，个视区域的大小、颜乃至形状，给人不同的影响力和感受，通有效的安排因素，并加以合理的排列局，以有效的引导用户阅读次信息，不同重要程度的功能。互设计师通页面区分级，视觉设计师就要从视觉受一个页面的层。可能起来非常普通的界面，其实是有一层层的视觉安排，让用户行云流水地阅读多重息，才在你眼中变成了「普通」的界面。

而详细的标注，是让所有视安排得以生效的关键，很的视元素构成的平衡，确因为很小的变动而被打破，只有开认根据标注完成界面，才能达到预期的视效果，达到和效果图同样的还原度。

如果更进一步解呢？那对于界面开发来说，肯定会有很多的意义。例如开发可在响应式布、自布等等方面有更多的进步。因为想自布达到最好的效果，开发应该清楚地明白，一个标注图中哪些数值是绝对可变的，哪些是可根据屏幕尺寸变而变。

其实，因设常也不理解发所需的信息，标注图中常顾及不到自动布局、响应式因素，如果这时候发对界面设深的理解能力，就基本可以判断哪些方可以自动布局所用。

总结

后，我认任何人一项目过程中都拥全局性的思考能力，创造一产品的过程中，无论发者还设师，都关注到下游的各环节，这样可以真意义提高一产品的核竞争力。