Element：一套通用組件庫的開發(fā)之路
Element 是由餓了么UED設(shè)計、餓了么大前端開發(fā)的一套基于 Vue 2.0 的桌面端組件庫。今天我們要分享的就是開發(fā) Element 的一些心得。
官網(wǎng)：http://element.eleme.io/#/
github：https://github.com/ElemeFE/element
## 設(shè)計目的
大部分項(xiàng)目起源都是源于業(yè)務(wù)方的需求，Element 也是一樣。隨著公司業(yè)務(wù)發(fā)展，內(nèi)部開始衍生出很多后臺系統(tǒng)，UED 部門也接到越來越多的設(shè)計需求，分析整個過程，我們發(fā)現(xiàn)如下問題：
- 日漸增多的后臺產(chǎn)品設(shè)計需求
- 設(shè)計資源有限，沒辦法支持所有業(yè)務(wù)線
- 公司內(nèi)部諸多后臺產(chǎn)品使用體驗(yàn)不一致
于是我們決定：
- 設(shè)計一套后臺支撐框架，提升后臺系統(tǒng)的可用性和一致性
- 套用此框架，即使沒有設(shè)計師參與，也能讓產(chǎn)品或開發(fā)設(shè)計出一套好用的后臺系統(tǒng)
## 設(shè)計階段
下面簡單說一下設(shè)計 Element 經(jīng)歷的幾個階段。
**了解業(yè)務(wù)并熟悉公司內(nèi)各后臺產(chǎn)品，尋找業(yè)務(wù)上的共性問題**
設(shè)計的目的是為了業(yè)務(wù)服務(wù)。第一步我們從內(nèi)部系統(tǒng)開始入手，了解公司內(nèi)部在使用的各種后臺系統(tǒng)，將其組件抽象剝離，尋找共性特征。
**專注業(yè)務(wù)組件設(shè)計**
總結(jié)了公司不同系統(tǒng)不同組件的使用情況后，我們打算從業(yè)務(wù)組件入手，因?yàn)檫@部份是由公司特殊需求衍生的解決方案，我們認(rèn)為解決了這些棘手的問題，也能給其他后臺產(chǎn)品帶來好的設(shè)計引導(dǎo)。
**尋求開發(fā)支持**
到這一步，我們開始尋找公司內(nèi)部的開發(fā)團(tuán)隊，并在這時才得知不同團(tuán)隊里使用著不同的前端框架，有 Vue、React、Angular 等等。
**與大前端合作**
大前端作為獨(dú)立的前端團(tuán)隊，有能力開發(fā)底層的工具去服務(wù)不同業(yè)務(wù)，并且 Vue 也是一套年輕且發(fā)展方向很好的一個技術(shù)棧。UED 與大前端的合作一拍即合。
**方向轉(zhuǎn)變，專注于基礎(chǔ)組件**
跟大前端接觸后，才發(fā)現(xiàn)最開始的方向并不正確，因?yàn)闃I(yè)務(wù)變化過快，即使有通用的業(yè)務(wù)組件，也很難跟上需求的變化，而基礎(chǔ)組件才是所有開發(fā)團(tuán)隊都需要的通用組件。這時候我們開始把方向調(diào)整為基礎(chǔ)組件的設(shè)計。
**組件交互完成，進(jìn)行視覺封裝，并搭建主體網(wǎng)站**
前期的設(shè)計工作主要是由交互設(shè)計師進(jìn)行設(shè)計，等確認(rèn)完所有組件的功能和交互后，開始進(jìn)行視覺階段，這中間包括制定顏色、字體等各類規(guī)范，也同時進(jìn)行主體網(wǎng)站的設(shè)計。
輸出 UI Kit 文件，統(tǒng)一設(shè)計規(guī)范
