[关闭]
@paddingme 2015-07-27T15:00:06.000000Z 字数 2822 阅读 272

关于乐知行前端有关方面的分析和建议

乐知行 规范 前端 用户体验


公司现状

1. 规范/制度:

规范 创建日期 最新更新日期
green(217) 2012-06-21 2015-04-29
四叶草 UI(本地) 2013-11-09 2014-05-09
网站设计规范(OA) 2013-06-25
网站交互规范(OA) 2013-07-24
网站设计规范2 2013-10-18
版本管理规范 2013-05-17
新人指南 2015-01-20

如上列出公司现有的一些规范,加上在公司一年多的时间,觉得:

  1. green 里的库有些过旧,且有一些库存在bug,不利于维护(例如 green.css);
  2. 除了 green 外规范更新不及时,很少有人去维护更新规范,更鲜有同事对规范 提 bug 和需求。
  3. 很少有人提及规范,从设计规范到新人指南,来公司一年多,很少有人告诉新人看一下规范/指南。
  4. 规范是否是多人多工种制定,还是个人单方面制定?
  5. 遵守这些开发规范......

2. 沟通成本

在公司一年多,发觉公司沟通成本特别大,常常产品/测试/开发/美工 就一个引导页沟通大半天。 我觉得主要是以下原因:

  1. 责任不清——例如说前些天做四叶草积分商城抽奖的页面,测试觉得界面有问题,让产品过来看,产品让我改了,运营过来看觉得不如其之前的设计,那么前端到底该听谁的? 这种事在工作中经常发生。

  2. 没有规范的约束,且规范需要多数人参与,发挥自己的专业优势,这样每个人更好的遵守和改进规范。

  3. 没有文档,公司的项目/代码绝大多数为口口相传,如果重要人员不在,需要很长时间才能重新维护起来。重要的文档(例如数字字典)十分重要,易于工作交接,减少沟通成本,避免扯皮。

  4. 态度/参与感。觉得很多人对自己负责的产品没有归属感,甚至产品同学自己负责的产品,也抱着将就/无所谓的态度。我觉得需要让每个人参与到规范,产品的每一个阶段,让设计能看见自己最终的上线后的样子,让开发参与产品原型讨论阶段等等,毕竟大多数人看见自己努力实现的东西得到客户、领导的认可还是很有成就感的。

一些措施/建议

就目前公司的现状,我觉得可以参考一些团队的措施进行适当更改,进行不端更新、改正,以寻求符合自己团队的规范/制度/流程。

先来看看一般的开发流程和规范

领导或用户提出需求,然后产品分析需求,并且根据需求画出原型图,然后根据原型图出设计稿。出完设计稿团队评审,过后交与前端制作静态页面,然后静态页面,交与设计审核,过后交给开发人员,进行动态数据的添加。
添加完之后,发布测试环境,产品测试领导审核,成功后,直接发布产品环境。或进行版本迭代。这是整个的一个设计,开发,部署的流程。

而在这个过程中一个产品设计文档(包括需求文档、设计师交互文档描述等)是贯穿其中的,另一个文档是前后端的数据接口文档。

对于遵守代码规范,之前有了解过小米公司,是在代码提交前 用 git 插件 扫描更改代码,列出所有未按照规范写的代码,不符合规范不能够提交到主分支。

综合以上分析提出如下建议:

1. 旧规范

对以上的规范一些还在使用的规范及时更新维护,不用的或无法维护的废弃。

2. 规范流程,明确责任

对较大项目产品,设计,前端,后端,设计进行需求审核,技术评估。前端实现完,需要美工进行视觉审查,保证设计稿还原度等等。

让产品的每一个人员都参与其中,对自己向上向下的交付费(原型/设计稿等)负责,增强参与感,一起把产品做好。

2. 设计规范

公司可以按照产品线设计规范(可以先对某条产品线进行,逐渐对各产品线设计规范),结合产品,设计,前端,测试人员,统一为产品设计规范。针对目标用户群,按钮大小、 鼠标悬浮状态什么的 都需要讨论确定,保持设计风格一致,多站在用户角度去考虑。在易用的基础上保持美观。 以及 IE 兼容性(建议放弃IE7/8,兼容成本太大,对于一些好的设计和技术往往因为考虑到兼容不能实现采用),分辨率(最小分辨率1280+?)

而且互联网产品逐渐向移动端转变,也需要建立移动端的设计规范(包括交互规范)。

该规范为产品出原型,美工出设计,前端实现代码效果以及测试人员测试的依据。
在实现过程中,发现错误以及改进,及时更新/修正规范

另对于美工, 需要懂点前端。为方便自己管理psd,方便前端切图,请美工同学一定要分图层做标注!美工作为前端的上游,美工的设计稿的好坏直接影响到产品的还原度。请美工同学一定要分图层,做标注,做一个专业的设计师,参考如下文章:

另很多时候大家对于一个页面好不好看起争议,而这时候美工的审美又不是足够权威令人信服,往往浪费很多沟通成本。虽然审美是极其个人的,但审美是可以提高,更是有一些基本准则,可以看一下《写给大家看的设计书(第3版)》,这里有这本书的脑图

3. 前端规范

前端规范包括 HTML ,CSS, JS,以及现在正在用的 AngularJS, 先建立 HTML+CSS+JS 规范,Coding-Standards——这是我之前尚未整理完毕的前端规范,是在百度前端规范的基础上进行修改更新的,公司也可以根据这个进行更改维护适合我们自己的前端规范。

所有前端开发人员必须严格遵守规范。

公司没有交互设计师,而前端应当充当交互设计的角色,站在用户角度,多思考交互效果,对网页的交互设计负责。

公司大多数网站还停留在 PC 阶段,强烈建议慢慢往移动端方向发展,适配主流手机端、pad 端。

4. 前端分享/培训

目前只有三个前端,实习生基础一般,前期可以由我进行一些基础分享(例如每周四晚),从基础的 html 语义化标签 -> CSS -> JavaScript 慢慢学习巩固。
后期要求每一个人参与分享,把自己学到的分享给大家,营造技术氛围。另可以调动公司其他队前端感兴趣的同学一同加入分享。例如陈莹、许爽、王鸥、杨晓婷等。
而且美工懂点前端,会知道一些布局设计对前端设计不合理从而规避这些问题,有些公司甚至是美工来切静态页面。等这几名美工同学学会切图,慢慢的可以把切图交给她们,这样她们自己更能百分百还原自己的设计了,前端同学也可以做更多有意义的事(前端MVC,响应式,组件化,前端工程化、自动化的一些东西)。

5. 其他

公司各项目组可多开展代码审查,结队编程的活动,尤其是对新人技术提高非常多。另外更建议公司多开展一些技术分享,了解其他专业同学的工作是怎么做的,在自己的工作中怎么做更有益于其他同学的工作,例如前后端/无线,前端和设计等等,相互了解,彼此学习,更好的合作。

下面是我以前收集的一些中文排版以及文案风格可供公司参考:

添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注