欢迎访问智唯网络!专业H5响应式营销型网站建设、百度seo优化、网络推广服务!
营销之道 干货分享
了解企业新动态,分享前沿的营销推广干货,成长路上,我们携手同行
网站设计News

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

发布时间:2018:03:26 13:15:24 | 已阅: | 作者:智唯小编 | 来源:智唯网络 | 共 0 条评论

扫一扫
手机访问

本文共有1631个文字,预计阅读时间5分钟
导语
作为一个前端工程师,在着手码起代码时,手上一般都拿着产品文档、交互原型、标注图和切好的图片资源

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

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

  产品篇

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

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

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

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

  

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

 

  交互篇

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

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

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

  

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

 

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

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

  

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

 

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

  视觉篇

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

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

  

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

 

如何建站:
建网站需要准备哪些资料 如何购买域名空间 协助备案 成功案例 真实见证 建站类型有哪些 收费标准 建站流程 制作周期 改版美化 提升有户体验 [建站必看]源码内容交付 联系客服 专业建站

看了这篇文章的人还看了

专业建站 免费排名(有什么疑问的请留言或咨询在线客服)
  • 全部评论(0
    还没有评论,快来抢沙发吧!

上一篇:2018年UI设计的9大新趋势

下一篇:为什么你始终做不好视觉设计?

  • 18885 文章总数
  • 2251733访问次数
  • 建站天数
  • 专业建站优化Jimmy Zhu
    男,从事互联网服务行业10年,专业建站优化,快速建站上排名。欢迎中小型企业朋友一起来交流!!
    相关专题
    • 网站建设咨询
    • 同行价格

      统一报价,无隐形消费

    • 金牌服务

      一对一专属顾问,7*24小时金牌服务

    • 售后无忧

      完善售后,客服经理全程跟进

    建站优化二维码
    建站优化二维码

    截屏,微信识别二维码

    微信号:13825575516

    (点击微信号复制,添加好友)

    优化二维码打开微信