UI Style Guide 跟 UI Patterns，協助 UI 溝通與開發的有效工具

從新創公司到跨國企業都適用的解決方案

6 min readMay 22, 2014

我們在開發產品有時是一個或是多個視覺設計師 (Visual designer) 在一個專案中支援，等專案結束後再移往下一個專案，但是往往會碰到，視覺設計師彼此會需要在不同的產品間重覆提供類似介面的 UI 規格書給開發人員，在過程中會產生許多重工 (Repeat Work) 的問題以及來回討論的時間消秏，有什麼樣的工具可以提昇溝通的效率以及協助 UI 的開發呢 ? UI Patterns 與 UI Style Guide 就是因應此需求而誕生。

什麼是 UI Patterns 跟 UI Style Guide ?

當你的產品中有一些重覆出現的 UI 元件，基本上就可以將它們歸類為是 UI Patterns，而 UI Style Guide 就是基於 UI Patterns 產生出來的一份參考文件。

因此，UI Style Guide 是提供給設計師，產品經理以及開發人員非常有用的資源，可以達到維護實作過的前端程式碼以及在統整產品間視覺設計的一致性，加速開發的有力工具。

目前有許多大大小小的企業己經建立他們產品自已的 Style Guide，例如

Starbucks(http://www.starbucks.com/static/reference/styleguide/)，
MailChimp(https://ux.mailchimp.com/patterns)，
Github(https://github.com/styleguide/css)，
Salesforce(http://sfdc-styleguide.herokuapp.com/) ，

從 2012 年底開始，Trend Micro 的 HIE Consumer Segment 也建立了 Style Guide ，並且在不同的消費型產品間使用。

DirectPass 2.0 使用了 UI Style Guide，並且整合入開發工具 (Grunt/Gulp) ，可以即時產生出新的文件。

從 Bootstrap 開始建立 UI Pattern

為了加速開發，我們使用了 bootstrap (http://getbootstrap.com) 這套 CSS framework 來建立第一套 UI Patterns，因為它解決了部分跨瀏覽器的問題，還具備了 Responsive Design 的彈性，讓我們可以將重心放在視覺上面的實作跟新的元件開發。

我們將原先的 Modal 做了些調整，讓 Modal 更貼近視覺設計師所要的感覺。

到目前為止，我們提供最常用到的 UI Patterns 以及常用樣版，隨著接觸不同的產品，我們也不停的慢慢增加相關的元件。

2012 年開始是基於 Bootstrap 2 來開發，支援舊有的 IE 瀏覽器。
2013 年底開始把舊有的 2.0 版本 migrate 到 3.0，同時並存二套。

利用工具產生 Style Guide

有了 UI Pattern 後，開始可以來產生我們的 Style Guide 了，產生 Style Guide 的方式有很多，你可以發揮硬漢本色產生手作 Style Guide，或是利用第三方的程式來產生懶人包，用 Ruby 開發的 KSS (http://warpspire.com/kss/styleguides/) 是目前比較常見的工具，它支援常見的 CSS Preprocessor 像是 Less 或是 Sass。如果你的開發環境有安裝 Node.js，你可以選擇 kss-node (https://github.com/hughsk/kss-node) 的版本。

KSS 的運作原理是，當我們在開發 CSS 元件時，針對每一個元件，利用註解的方式記載以下資訊，

區塊名稱

區塊名稱會出現在 Style Guide 的目錄上

該區塊的說明

所以對於該區塊的定義，介紹都會寫在這裡

HTML Markup 的內容

呈現這個項目所需要的 HTML Markup

變更樣式的名稱 (modifiers) 跟說明

用來改變目前樣式的 class/pseudo class 名稱

Style Guide 的索引

KSS 在建立文件時用來編排章節用

只要當我們閱讀這份文件時，我們就可以清楚知道要產生一個按鈕在畫面上，只要將載入相關的 CSS 跟 JavaScript 檔案，接著將文件中的 HTML markup 貼上，套用相對應的 class，就可以得到期望的 UI 元件了。

持續性的更新

Style Guide 建立出來後，下一步是要讓它可以跟著產品開發一同更新，如果你的專案當中有使用 Grunt，可以在你們的 build script 當中加入 grunt-styleguide (https://github.com/indieisaconcept/grunt-styleguide)，達到每次版本更新就產生新的 Style Guide 的目的。