有人说产品开发过程中web前端没有结论,只有随需求不停的修改,但是项目必须要有阶段性的结论,作为一个前端开发,如何避免为了某一个需求而陷入反复更改的困境呢?不要把责任全部推到产品不断的需求更改或者设计不停的视觉调整上,你其实可以做得更好。在不断的追求新技术,打磨技术精益求精之时,拓宽自己的知识面,寻找正确了工作姿势也很重要。

首先,心态很重要。

如果你期望你的工作状态是这样:产品经理把一个功能需求的每一个环节都考虑周到,每一个细节点的覆盖全面,每一个想法都表达完美(当然,这是一个好的产品经理应该追求并达到的),交互和视觉能够以用户体验和美学的角度完美的诠释产品的需求点,然后将所有需求的前期沟通准备都ready,给到开发开始投入生产,然后你作为一个前端开发,与后台一起合作,逐个的还原产品需求文档所描述的功能与细节,偶然在作为一个开发的同时,也作为一个用户向产品提出一些逻辑不合理的点,沟通敲定,最后开发完毕,产品视觉体验觉得OK,可以上线。

那在工作的前几年,你过的一定很烦恼,因为你可能总是在纠结这些问题:

1、按照产品的需求单实现功能点后,产品经理体验发现整体的流程逻辑跑起来太繁琐,改!

2、视觉走查发现页面按照视觉稿给定的尺寸在不同的屏幕尺寸上并不协调,改!

3、交互发现按照产品的逻辑更改后,整个交互变得并不友好,需要重新调整交互方案,不爽,改!

所以你发现,作为一个前端开发,在这一个需求上,完成你的开发量后,你又得大改!并且你还得告诉自己,一切以产品的完美为依托,在发现有问题的时候,就是得尽力配合改动。

但你内心还一定有点小抱怨,产品经理需求还没想好就开始投入设计和开发,交互设计不完善的问题设计人员竟然在设计过程中没有发现,是他们的不专业影响了开发进度。

如果一直以这种角度思考问题,作为一个完全可以被代替的代码搬运工,还期待着身边的搭档完美解决所有的问题,你只能在抱怨中毫无作为,不要忘记自己是在一个团队中,如何更有效率的帮助团队完成目标,如何自主的把控节奏很重要。

产品经理在对着一个生动的页面时的想法远比在对着脑中或者文档上描述的功能点时更丰富,而前端开发对一个产品细节的包括是最全面的。所以,作为一个前端开发,你可以做的更多。

在产品宣讲的前期,根据以往开发的经验,你可以更多的提出产品所遗落的细节,而这些细节的补充可以让交互视觉在设计时更全面。而在开发过程中,你会跟你所开发的产品进行一次全面深入的对话,每一个按钮,每一块信息的表达,每种用户操作所对应的反馈,你的程序都必须覆盖到,所以及时的更产品视觉一起沟通这些反馈的表现形式,是否需要调整,以避免在开发完成后的二次变更。在开发的组件设计阶段,如何合理封装组件逻辑、适度的预留弹性入口,也极为重要,我的看法是组件化不仅仅是为了开发人员的代码复用,也为了页面模块的快速调整修改。

这些注意点作为一个稍微有经验的前端开发,可能都有自己的一套实行方式,但如何在团队合作时落实的更好,效率更高呢。有人说开发人员改行做产品经理有优势,因为有比较严谨的产品逻辑思维,但是我觉得产品经理,设计,开发人员三者应该是互通的,产品经理当然是更注重产品的思维和了解市场,但也需要有良好的逻辑思维,了解基本的视觉规范。而设计人员,尤其是交互设计,需要更了解用户体验规则,有好的审美,但是也需要了解产品的基本要素,了解开发的复杂度。所以开发人员,在不断最求精益求精的技术时,也应该不断增强自己的产品思维,只有了解真正的产品需求,才能在开发前或者开发中发现潜在问题,只有懂得设计的基本原则,才能在合理与不合理中抛出可能的风险,提前调整方案。

产品思维

当产品经理为了一个用户点击行为而列出不下五六种相应的响应模式时,跟你谈到用户行为引导和用户转化,请理解其合理性,甚至给出更多的细节确认会让后期的开发更有效率,网上有很多产品思维类的书籍和研究,广泛涉猎更有助于培养自己的见解。

前端3000人提升学习群:296212562 分享技术,技术交流,学习工具,最新技术视频,疑难解答。

设计的基本原则

不要再纠结1px的问题,抱怨设计的眼睛为何如此毒辣,为何你看起来毫无差别完全按照设计稿实现的东西,能被挑出那么多的问题。同时,从移动端iphone4的尺寸到google nexus6,从12寸到29寸的显示屏,一份静态的设计稿大多数情况下都不能覆盖到所有的显示屏尺寸,作为最接近产品产出的开发人员,你需要和设计沟通给出最合理的兼容方案。

收集的网上评价比较适合入门级别理解的设计书籍:

《The Design of Everyday Things 》

《破茧成蝶-用户体验设计师》

《众妙之门——网站UI设计之道》

《写给大家看的设计书》

组件化思维

前面说的两点都需要日常生活中慢慢积累理解,现在要谈的我们前端开发熟悉的点了,组件化思维。这里不是要谈前端的组件化方案,而是组件设计的出发点。

1、养成代码组件化的习惯,它会使你页面模块的添加、删除、更改变得更优雅,而管理和阅读也会更舒心。

2、收拢参数入口,保持可扩展性,在设计组件时,不可能把所有的可能性变动都设计并实现,但组件如果要复用,日后变更或者添加新功能是必然的,所以保持良好的可扩展性非常重要,如果每次的修改都要花大量的经历在向前兼容确认上,就失去的组件化的意义。

3、代码文档化,组件维护不是一件容易事,代码形成文档化的风格后,本身就是一种自规范,不同的人修改或者使用代码时,不需要额外的规范文档就能合理遵循组件规范。

4、合理控制组件粒度,根据业务需求衡量组件复杂度与修改复用程度的性价比。

web前端进阶之路;web前端不能只做普通程序员;web前端应该向前端架构师前进相关推荐

  1. 前端进阶之路: 前端架构设计(2)-流程核心

    可能很多人和我一样, 首次听到"前端架构"这个词, 第一反应是: "前端还有架构这一说呢?" 在后端开发领域, 系统规划和可扩展性非常关键, 因此架构师备受重视 ...

  2. 2021年高级前端进阶之路

    YYDS 2021年高级前端进阶之路1.两边固定,中间自适应布局(1.用flex;2.用display:left;3.用相对定位和绝对定位结合)2.js判断字符串中出现次数最多的字符(1.用for循环 ...

  3. 【2019 前端进阶之路】深入 Vue 响应式原理,活捉一个 MVVM

    作者:江三疯,专注前端开发.欢迎关注公众号前端发动机,第一时间获得作者文章推送,还有各类前端优质文章,致力于成为推动前端成长的引擎. 前言 作为 Vue 面试中的必考题之一,Vue 的响应式原理,想必 ...

  4. 前端进阶之路——域名(domain)

    以前不曾特意去了解域名,今天查看了相关博客,带大家了解一下域名,若想用户能够通过搜索引擎访问你的网站,就必须具备两个条件:拥有一个域名,拥有一台主机/空间. 域名是网站的基础,也是到达网站的具体指路牌 ...

  5. Web开发中的路由是什么意思?(关键词:Web开发/路由)

    路由就是URL到函数的映射. 在web开发中,"route"是指根据url, 分配到对应的处理程序. 路由: 就是一个路径的解析,根据客户端提交的路径,将请求解析到相应的控制器上: ...

  6. 【WEB前端进阶之路】 HTML 全路线学习知识点梳理(上)

    前言 HTML 是一切Web开发的基础,本文专门为小白整理,针对前端零基础的朋友们,手把手教你学习HTML,让你轻松迈入WEB开发的行列. 首先,感谢 @橙子_ 在HTML学习以及本文编写过程中对我的 ...

  7. CSS系列——前端进阶之路:初涉Less

    阅读目录 一.Less介绍 1.官方介绍 2.自己理解 3.Less.Sass.Stylus 二.Less使用入门 1.开发模式下使用Less 2.运行模式下使用Less 三.常见用法示例 1.从第一 ...

  8. 前端进阶之路:初涉Less

    阅读目录 一.Less介绍 1.官方介绍 2.自己理解 3.Less.Sass.Stylus 二.Less使用入门 1.开发模式下使用Less 2.运行模式下使用Less 三.常见用法示例 1.从第一 ...

  9. 【转】前端进阶之路:如何高质量完成产品需求开发

    有时候好的文章不是光收藏一下就可以的,要研究为什么人家那么思考,你为什么不行?要多想. 前言 看到这篇的时候,想起前几周的周末参加的一个工作坊,讲师有提到一个问题,作为程序员你们写了解你们写代码的目的 ...

最新文章

  1. 中国电子学会图形化四级编程题:解密
  2. docker国内镜像链接
  3. MongoDB安装问题
  4. java 不退出_(Java)如果我在其外面点击,JPopupMenu将不会关闭
  5. shell命令xargs
  6. Redis普通分布式锁
  7. 战神引擎1.8斗破斩天泯灭完整开区端+高清地图+动态内观+珍宝+20转+四大陆
  8. K-means对地震数据进行处理
  9. CefSharp学习笔记
  10. 思岚激光雷达rplidar从ROS 1到ROS 2的移植
  11. 成为会带团队的技术人 业务理解:深入业务是做好架构的前提
  12. 浏览器刷新和关闭时显示提示信息
  13. 调用百度翻译api实现中英文翻译
  14. 【信号与系统】拉普拉斯变换
  15. win10计算机管理如何分区,如何给win10磁盘分区?教你一招快速给win10磁盘分区的方法...
  16. php 足迹,php实现网站浏览足迹功能
  17. 阿里QuickBi快速上手
  18. python登录教务系统_记python登陆学校教务系统踩过的坑
  19. ntopng安装和基本使用教程
  20. 查看已结束的中国大学MOOC课程

热门文章

  1. 适合开发的Android手机推荐
  2. linux u 盘格式化命令,如何用linux命令格式化u
  3. java B2B2C 多租户电子商城系统-spring-cloud-config
  4. java面试常见题:深拷贝与浅拷贝
  5. SUV 中国造,救不了吉利的英国超跑LOTUS路特斯莲花
  6. java技术--数据库where条件
  7. 【Docker】windows环境下的docker如何开放远程2375端口
  8. Java实验-----统计英语单词
  9. 21 张速查表,高清图
  10. R学习笔记————编译器的安装