本文來自網易雲社區
作者：吳子房
背景
網易嚴選經過一年多的快速發展，項目膨脹很快，業務規划上，也到了拆分工作台的時候了。當前一個業務人員在完成一個新品開發的流程的時候，需要在多個業務系統之間切換。然而因為歷史原因，各后台項目有着不同的交互視覺形式，體驗比較差，統一交互視覺規范與前端交互已經迫在眉睫。
目標
設計與開發這套規范的目標，是讓用戶體驗更佳，操作習慣一致，各系統間能夠無縫對接。
規范上的准備
從用戶體驗上規范：統一認證、交互、視覺規范。 從開發流程上規范：前端開發規范、基礎框架、樣式庫、組件庫。 從開發效率上規范：構建工具、npm私有庫、輔助開發工具。
具體實施步驟
1. 統一認證，統一管理外網訪問權限
統一認證的實現，讓各個系統直接的切換變的更流暢，避免了流暢跳轉時業務系統需要重新登錄。
實現方案：
統一各業務系統的域名，分配應用名給各業務系統。
接入統一的登錄服務來實現。
統一外網訪問管理：應用登錄時，登錄服務根據用戶權限生成可訪問列表的token，nginx通過secure_link模塊來進行鑒權與控制轉發。
2. 統一交互視覺規范
一致的交互視覺規范，這也是后面各個步驟實施的基礎，在前端同學的深度參與下，交互視覺同學提取目前各業務系統的交互視覺需求，完成了交互視覺規范的制定。
交互同學提供了符合規范的一套axure元件庫，在產品交互階段進行規范。
3. 統一基礎前端框架
統一基礎框架是組件庫開發與代碼復用的基礎，我們選擇了anguarjs(1.x)的繼承者angular(當前4.x)
4. 基礎樣式庫與樣式規范
開發了實現整個交互視覺規范的基礎樣式庫@shark/shark-css。
通過樣式開發命名規范，保障后續各種業務組件樣式之間能夠兼容，不會互相污染。
5. 基礎組件庫與組件規范
在angular框架下前端組開發了符合交互視覺規范的基礎組件庫@shark/shark-angularX。
通過組件規范，保證后續都各業務組件的接口、數據處理、校驗能夠統一與規范。
6. 開發文檔、模版工程
開發文檔方面，以組件說明、接口說明、組件實例、代碼片段四部分來展示各個組件的交互和試用方式。
模版工程，用於規范代碼結構，模塊組織方式，為業務的模塊化開發和模塊化復用做好基礎。在模版工程中，提供了常見的表單、列表、tab、模態等業務模塊的開發案例。
7. npm私服
我們搭建了一套npm私服，供發布公共樣式庫、公共組件庫、業務組件、公共業務模塊。
8. 開發流程
前端本地開發環境
npm run server
前端聯調模式（配置remote地址）
npm run server-remote
前端build模式測試
npm run server-build
9. 插件、cli工具
配套的編輯器插件，輔助代碼生成，項目創建，開發了組件庫和模版工程配套的vscode插件，cli工具。
10. 願景
希望經過大家的努力，嚴選的后台系統，能給用戶提供更好的使用體驗，提升大家的工作效率。
網易雲免費體驗館，0成本體驗20+款雲產品！
更多網易研發、產品、運營經驗分享請訪問網易雲社區。
相關文章：
【推薦】 #3.14 Piday#我的圓周率日