元件庫通用樣式設計總結

ttys000發表於2018-07-07
元件

前言

作為前端UI元件庫，從樣式角度去看，應當滿足兩方面要求：一致性和可定製[1]。

其實這兩點也非常好理解，一致性保證了元件庫視覺上保持一致，而不是東拼西湊，而且說得高大上一點可能還有規範可循。而可定製就需要元件庫暴露介面，供開發者配置形成自己風格的元件庫。

一致性

但是具體一致表現在哪些方面呢？對於設計師而言，會很清楚，但是對於我們前端開發人員而言，具體指的是哪些東西呢？我們又如何把這些東西轉化為程式碼呢？這部分具體見設計規範部分。

可定製

根據可定製的粒度大小，可以分為元件層面的可定製和整套元件庫的主題定製。有元件使用經驗的同學都知道，使用具體元件時我們可以傳入某些引數或主題引數，元件就可以呈現不同的表現。另外，一些有名的元件庫也都提供了主題定製的相關方法，如 antd-mobile 、Vant 和 Element ，尤其是 Element ，提供了多種主題定製的方法。

設計規範先行

前面提到的一致性是由“設計規範”來保證的，其實這一塊涉及到的內容非常多。可能在我們眼裡就是元件庫裡的那套看似雜亂無序的通用變數（設計規範 ≠ 通用變數），但是其實裡面還是有一些套路的，也建議多多和設計師溝通，產生思維碰撞，你會發現一些平時寫程式碼過程中不一樣的思維。在我和設計師溝通的過程中，這點體驗非常深。

設計規範包含哪些內容？

那和元件庫密切相關的設計規範體現在哪些方面呢？前幾天餓了麼前端架構師 林溪 在《Vue元件庫建設實踐》分享裡提到有以下內容：

  • 統一視覺樣式
    • 色彩
    • 佈局
    • 字型
    • 圖示
  • 統一互動動效
    • 時長、緩動
    • 移動路徑
    • 形變、編排

設計規範如何落地？

其實上面有一個關鍵詞： 統一 。 我們如何保證樣式統一？沒錯，就是剛才提到的通用變數（但我仍然不會認同“設計規範 = 通用變數”，很難表達出這種感覺），以 antd-mobile 為例，具體包含以下內容[2]：

  • 顏色（字型、填充、全域性、邊框、透明度）
  • 字型尺寸
  • 字型族
  • 圓角
  • 邊框尺寸
  • 間距（水平、垂直）
  • 高度
  • 圖示尺寸
  • 部分元件樣式

其實理解了設計規範，我們再來反過來理解元件庫裡面的通用變數就會感覺其實變數之間其實也是存在某種內在體系的，在寫具體元件的樣式時就更會或者更能遵守這套規範，而不是胡亂定義了。

相關擴充套件資料：

主題定製

主題定製是大多陣列件庫都會提供的一個核心樣式相關的功能。但是具體解決方案有許多，但無非有兩種解決方式：

  1. 藉助gulp/webpack等打包工具相關的外掛，配置需要定製的樣式變數，在打包時覆蓋對應變數值；
  2. 手動修改通用變數，或者新寫一套樣式檔案覆蓋元件庫樣式。

具體可參照知名元件庫做法：

不過，對於企業內部元件庫而言，這一塊其實要求並不強，相反對於一套元件庫提供多套 配色 需求更高一點。這裡指的配色和主題定製還是有區別的，因為配色要求不同“皮膚”的樣式需要同時存在，而主題定製相當於就只有一套配色。

而如果採用多種配色的話，增加一套配色檔案也可以達到“主題定製”的功能。

其他通用樣式

除了設計規範裡的相關樣式外，其實還包含但不限於如下通用/複用樣式：

  • reset / normalize
  • hairline
  • animation
  • util / mixins
  • clearfix
  • ……

這裡不僅僅元件庫，一般專案中也會有這方面的通用樣式，相信大家都明白，這裡就不展開介紹了。但是這也很重要，是元件庫樣式基礎的一部分！

程式碼結構

下面是借鑑知名元件庫後設計的一個樣式程式碼結構，供參考，供拍磚。

style
├── core
|   ├── animation.scss
|   ├── color-card.scss
|   ├── hairline.scss
|   ├── mixins.scss
|   └── normalize.scss
├── themes
|   ├── skin
|   |   ├── _brown.scss
|   |   ├── _green.scss
|   |   ├── _pink.scss
|   |   ├── ……
|   |   └── _white.scss
|   └── default.scss
├── core.scss
└── index.scss
複製程式碼

另外，為了開發方便，元件相關樣式變數都放在了元件程式碼目錄，雖然會給後期維護（增加“配色”時需要更新每個元件樣式特定程式碼），但是這種情況甚少。不過通用型元件庫會將其寫在通用變數中以方便主題定製粒度到元件層面。

展望

還需要考慮的一些樣式相關的問題：

  1. Icon
  2. 高清方案
  3. 相容性（如flex相容性等）
  4. 按需載入
  5. ……

另外，其實元件庫有通用型元件庫和業務型元件庫區分，一般有名的元件庫都屬於前者，很多解決方案不一定適合企業內部的業務型元件庫，因此在設計時也需要充分考慮業務需要，找到適合自己的最/較優解。

參考

前端晚自修

相關文章