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