网易严选后台系统前端规范化解决方案

本文来自网易云社区

作者:吴子房


背景

网易严选经过一年多的快速发展,项目膨胀很快,业务规划上,也到了拆分工作台的时候了。当前一个业务人员在完成一个新品开发的流程的时候,需要在多个业务系统之间切换。然而因为历史原因,各后台项目有着不同的交互视觉形式,体验比较差,统一交互视觉规范与前端交互已经迫在眉睫。


目标

设计与开发这套规范的目标,是让用户体验更佳,操作习惯一致,各系统间能够无缝对接。

2018092716472966ecaacc-1def-4a94-9ff0-cf56cb7aad83.jpg 


规范上的准备

从用户体验上规范:统一认证、交互、视觉规范。 从开发流程上规范:前端开发规范、基础框架、样式库、组件库。 从开发效率上规范:构建工具、npm私有库、辅助开发工具。

具体实施步骤

1. 统一认证,统一管理外网访问权限

统一认证的实现,让各个系统直接的切换变的更流畅,避免了流畅跳转时业务系统需要重新登录。

实现方案:

  1. 统一各业务系统的域名,分配应用名给各业务系统。

  2. 接入统一的登录服务来实现。

  3. 统一外网访问管理:应用登录时,登录服务根据用户权限生成可访问列表的token,nginx通过secure_link模块来进行鉴权与控制转发。

2. 统一交互视觉规范

2018092716474239b9d668-93ad-42dc-8cf1-026c5b0e27d5.jpg



  1. 一致的交互视觉规范,这也是后面各个步骤实施的基础,在前端同学的深度参与下,交互视觉同学提取目前各业务系统的交互视觉需求,完成了交互视觉规范的制定。

  2. 交互同学提供了符合规范的一套axure元件库,在产品交互阶段进行规范。

3. 统一基础前端框架

统一基础框架是组件库开发与代码复用的基础,我们选择了anguarjs(1.x)的继承者angular(当前4.x)

angular中文官网

4. 基础样式库与样式规范

20180927164809284e45f6-1103-4840-81eb-d1a9c5e53a58.jpg


  1. 开发了实现整个交互视觉规范的基础样式库@shark/shark-css。

  2. 通过样式开发命名规范,保障后续各种业务组件样式之间能够兼容,不会互相污染。

5. 基础组件库与组件规范

2018092716482561a7e09c-8c9d-4e13-afd5-8720dc2ce018.jpg  201809271650157eeeb4ca-5923-4446-8688-cb03925446f1.jpg

20180927165025a3c6cbc8-73f6-4d41-a10d-c64060e8f814.jpg


  1. 在angular框架下前端组开发了符合交互视觉规范的基础组件库@shark/shark-angularX。

  2. 通过组件规范,保证后续都各业务组件的接口、数据处理、校验能够统一与规范。

6. 开发文档、模版工程

20180927164901f23a870b-e2a6-4e2a-bc5a-f2e4edffbea9.jpg  


  1. 开发文档方面,以组件说明、接口说明、组件实例、代码片段四部分来展示各个组件的交互和试用方式。

  2. 模版工程,用于规范代码结构,模块组织方式,为业务的模块化开发和模块化复用做好基础。在模版工程中,提供了常见的表单、列表、tab、模态等业务模块的开发案例。

7. npm私服

我们搭建了一套npm私服,供发布公共样式库、公共组件库、业务组件、公共业务模块。

201809271649140b0b6892-8bb1-4e56-a57e-d34f2c70fa90.jpg 

8. 开发流程

  1. 前端本地开发环境

    npm run server
  2. 前端联调模式(配置remote地址)

    npm run server-remote
  3. 前端build模式测试

    npm run server-build

9. 插件、cli工具

配套的编辑器插件,辅助代码生成,项目创建,开发了组件库和模版工程配套的vscode插件,cli工具。

201809271649287fcbd38e-5a4c-4fd6-9f42-6f154fc80377.jpg


20180927164943d7442dca-89e1-4301-8fb2-5cd75f677561.jpg 

10. 愿景

希望经过大家的努力,严选的后台系统,能给用户提供更好的使用体验,提升大家的工作效率。


网易云免费体验馆,0成本体验20+款云产品! 

更多网易研发、产品、运营经验分享请访问网易云社区


相关文章:
【推荐】 浅谈由管理者角色引出的B端产品设计思考点

阅读更多
换一批

没有更多推荐了,返回首页