首页
业务
关于
客户
服务
联系
13520390899
资 深 的 互 联 网 开 发 服 务 商
专注于 网站开发 / 小程序开发 / APP开发 / 软件开发
网十科技 > 动态

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

作为一个前端工程师,在着手码起代码时,手上一般都拿着产品文档、交互原型、标注图和切好的图片资源。开发者只要按照这些资源的指示把内容逐一整合到自己代码里就算完成工作。但是俗话说的好,不愿意当产品的设计不是好开发,在「全栈工程师」被捧的越来越高的大潮中,一个合格的前端,应该明白自己在开发时手中的原材料到底意味着什么。这样写出的代码,更能符合需求,提高产品的最终体验,前端自己也能在这个过程中有更多的思考,修炼自己的各方面能力。

现在,我们应该跳出自己的工位,看看一个产品的所有需求,是经历了怎样的过程,来到自己的手上的。下面的流程比较典型,但可能和大家的实际情况有着或多或少的差别,但是在整体思路上是大致相同的。

产品篇

其实,需求最开始起源于用户,而我们的产品经理捕捉、提炼、整合这些零散的需求,就产生了我们的开发对象——产品。前端们要去实现的各种逻辑和功能点,都一一对应了这些需求,可以说,这些功能是一个产品的灵魂。作为一个开发,可能会获得产品经理写的原型、文档、思维导图等等,形式上虽然多种多样,但都是为了让开发了解这个产品的功能点和基本架构。

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

举个例子,一个认真负责的好开发通过文档了解到,一个产品可能会在将来考虑添加皮肤功能,那么他在开发过程中,可能会有意识地预留一些文字色值调整的小接口,方便将来的更新迭代,免去了未来重写代码的痛苦。

诸如此例,深入理解产品的灵魂,可以让开发写出更灵活,更高效甚至更贴心的好代码。

交互篇

如果产品是一把各种功能组成的瑞士军刀,那么合理安排军刀各个刀片位置,使得每一个刀片的功能可以发挥得当,就是交互设计师的任务了。而交互设计师的工作内容又分成两个部分:一个是信息架构,一个是交互细节。

一个产品可能有几十上百种功能,呈现数十种信息,如果都放在手机那5英寸上下的屏幕上,就成了一把布满千奇百怪刀片的「刀球」,用户根本无从下手,甚至连安静地切个水果都做不到。因此交互设计师需要把各种功能和信息合理地「藏在」产品的各个层级之中,每个功能和信息都能在恰当的层级得到呈现,但也不能隐藏的太深,让用户找不到想要的功能。这就是信息架构的安排,合理的信息架构让一个产品的功能出现在最合适的场景,让用户找到的就是自己想要的。

而交互细节则更像是刀的手感,怎样得当地优化各种功能和信息在层级上的排布、位置和响应等等,让用户得到「人刀合一」感觉,让功能不仅恰当的出现,还能顺手地使用,比如下图的例子。

诸如此例,我们可以看到交互会直接影响到产品功能能否被用户正确发挥,功能是灵魂、那交互就是撑起灵魂的骨架。

将大量的功能和信息进行分类布局是和开发一样消耗脑细胞的工作,交互设计师需要在界面复杂程度、层级深度和一些产品特殊需要等等因素之间做出恰当合理的权衡,才能做出合理的符合需求的交互文档,即界面简单易于理解,层级较浅易于用户查找功能,又有合理的障碍来导向用户。经过复杂的权衡后,得到的就是交给开发的交互文档。

对于前端来说,交互文档指示开发将功能分级、布局,只要严格遵守交互文档的内容,我们就可以保证最终的产品成品有着漂亮而合理的信息结构、交互细节。如果试着更深的钻研,就能够掌握更多产品的内涵,去更加了解产品本身。

视觉篇

记得以前一个一起合作过项目的学长和我说:「不用有那么详细的标注啦,其实标了我也不怎么看」。好在这位学长的设计感觉还不错,做出来的东西并没有太大的偏差。不过有这种想法的前端确实不在少数,毕竟现在的手机动辄几百ppi的分辨率,一两个像素和色值看起来没什么差距,大致位置看感觉,切图用你的不就好了吗?

依然举个例子,下面两个界面,功能完整,同样按照交互文档开发,只是一边的严格按照标注还原了设计稿,另一边只是「凭感觉」。

7x24
售后服务支持
10
故障时长赔付
16
16年行业服务经验
20
售后服务人员
70
设计、开发团队
10
国内顶尖技术专家
1000
大型及上市企业
版权所有 © 北京网十互动科技有限公司 网站 APP 小程序 软件 备案号:京ICP备16050073号-2

电话咨询