智唯高端建站是一家专注中小型企业网站建设、营销型网站建设、响应式网站建设公司

建站优化电话:138 2557 5516(免费SEO检测 保证收录 保证排名)
广州建站微信号
返回旧版
网站设计News
公司网站建设

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

关键词:广州建站 作者:智唯建站 | VISITORS: | 来源:智唯网络科技
26Mar
2018
作为一个前端工程师,在着手码起代码时,手上一般都拿着产品文档、交互原型、标注图和切好的图片资源

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

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

  产品篇

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

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

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

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

  

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

 

  交互篇

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

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

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

  

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

 

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

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

  

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

 

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

  视觉篇

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

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

  

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

 

关于网站制作,看看客户怎么说
***(匿名) 评价文章 广州建设网站制作公司哪里好?

广州建设网站制作公司 建站的资讯在哪里 消费者对于广州建设网站制作公司进行建设的咨询还是比较关注的,希望能够通过一些比较正规的方式来进一步的了解一下最近所做的...

***(匿名) 评价文章 网站制作流程详解 一步一步轻松做网站

怎样制作一个网站呢?对于一个具有专业知识的人来说是很简单的一份工作,可是对于外行来说就不是那么容易了。...

***(匿名) 评价文章 恒邦贵金属交易网站制作案例

正元恒邦贵金属交易中心是由青岛市商务局于2013年11月15日批复青商贸审字[2013]50号文件成立的交易中心。 交易中心成立以来,积极跟进国务院、商务部及青岛市商务局等各级主...

公司网站建设
Hi,Are you ready?
准备好开始了吗?
那就与我们取得联系吧

广州建站 感恩回馈

咨询送礼现在提交,将获得智唯网络策划专家免费为您制作
价值5880元《全网营销方案+优化视频教程》一份!
下单送礼感恩七周年,新老用户下单即送创业型空间+域名等大礼
24小时免费咨询热线0757-8108-9123
合作意向表
您需要的服务
您最关注的地方
预算
  • 验证码

直接咨询