EZTABLE IDEAS 是 EZTABLE 成員揮灑熱情和大家分享專業及創意的網誌。 EZTABLE 讓消費者 24 小時都可以在網路訂位全台灣最優質的餐廳,同時提供餐廳經營者 e 化的訂位管理系統 (雲端、iPad、智慧型手機)

【Workshop】EZTABLE Design Library

八月 14 2014 Published by under Design, Engineering

 【Workshop@140808】

Topic: EZTABLE Design Library
Speaker: KC Liu
slideshare: EZTABLE Design Library

 

 

何謂 Design Library?  Design Library 的重要性是什麼?

今天邀請到 Front-end engineer KC,介紹屬於我們 EZTABLE 的 Design Library。

 

 

6-IMG_1969-001

很多人通常都有使用過 Twitter bootstrap 的經驗。透過 bootstrap,不需要寫什麼 CSS ,即可快速建構出有一定設計水準的網站;如果 EZTABLE 自己的網站在開發時,可以有一套類似 bootstrap 的元件庫,那就可以加速網站開發流程。

 

 

 

 

Why need it?

2-IMG_1952-001投影片1_01

有了 EZTABLE Design Library,因為有一個公開的設計元件庫可以參考,所以大家對於 EZTABLE 的設計風格會有一定的共識 ,像是大家對於 Logo 的 style、顏色,button 的種類等等,因此可以減少同事們在許多設計方面的溝通成本 (例如 Front-end engineer 跟 Designer 的溝通或是 PM 跟 Designer 的溝通)。以下列出為何我們要打造 EZTABLE Design Library 的原因:

  • learn from Bootstrap, Semantic UI
  • better communication
    使用共通的語言可以加快團隊溝通速度,甚至到不用溝通的程度。
    當大家對這些 Style 都有共識時,很多細節我們便不用再多花時間做確認和調整。
    例如在和 Designer 一起工作時,常常需要跟對方要說我這 button 的顏色、CSS 的色碼,
    如果有 Design library 的話,Designer 便可直接看到,便不需要再與他們做確認,這將會節省許多時間。
  • consistency  
    設計風格保持一致的水準,不會有很大的變動。
  • reusable components
    通常用來用去不外乎某幾個button、顏色,有了Design Library將可以重複使用,不用重新寫那些 CSS 的詳細項目。
  • boost development 
    加速開發,不用寫到很細的 CSS 的設定,便可以直接拿到需要的樣式。

 

 

 

 

 SASS+KSS

投影片2

 

所以我們要如何設計一個專屬於 EZTZBLE Design Library 呢?

經過調查之後,我們最終決定使用這兩個──SASS+KSS。

 

 

 

投影片3

 

SASS 如果有稍微寫過前端的 code 的人應該都知道,SASS 有一些 CSS 沒有的好處,例如可以設定變數、style 比較精簡,還有很重要一點是 Modular file structure with @import

 

1-投影片4

(↑pic: Demo_01)投影片5

(↑pic: Demo_02)

  • Modular file structure with @import

Design Library 會用到的東西,都可以寫成 SASS 的架構,例如顏色,可以全部寫在 color.sass 的檔案裡,按鈕則寫在 button.sass 的檔案。(pic: Demo_01)

因為 SASS 是一個變數,因此可以對 CSS 色碼做 naming,橘色可叫做 ez-red ,方便在語意的表達上更清楚。

 

顏色(pic: Demo_02)
定義灰色,在 SASS 裡面可用變數直接對每種顏色做定義,
如圖定義出 EZTABLE 的紅色($ez-red:f04e2f),之後在其他 SASS 檔裡便可以直接運用這個變數,我們就不用在背那個色碼,可以用更語意的方式來 coding 。灰色白色藍色亦是如此,只要你有定義的話,之後都可重複使用。

 

所以說 SASS 本身的架構和用法已經很符合我們心目中 EZTABLE Design Library 的樣子。
不輪是顏色、字型等等,我只要定義好一次便可以一直使用! 

但還必須要有一套系統來把 SASS  的內容做視覺化的呈現。

 

 

 投影片6

 

  投影片7

KSS 是一套由 Github 的設計師撰寫的 styleguide 產生工具,支援多種語法,例如 CSS、SASS、SCSS 等,你可以在 SASS 裡面直接寫註解,在註解那邊定義好必須呈現的元件, KSS 就可以自動幫你產生一個網頁式的 styleguide ,KSS 產生出的網頁裡會有你剛剛定義好的那些內容這樣便不用花額外的時間去寫 documentation;因此你可以更視覺化,從一個網頁上看到剛剛放上去變數的樣子。

 

 

 投影片8

  • KSS 本身是用 Ruby 寫的, 但也有人另外改寫出 Node.JS 的版本。

 

 

投影片9_01

  • 這邊示範了註解的撰寫方式

 

 

投影片10

投影片11

  • KSS 產生出來的網頁。 

 

5-IMG_1961 

 

 

3-IMG_1957-001

 

 

總結

  • 1. Design Library 有助於加快團隊溝通速度,甚至到不用溝通的程度,並保持設計風格一致,加速開發。
  • 2. 直接使用 SASS 來打造 Design Library。
  • 3. 除了字型、button 外,還有許多像 table, check box, segmented buttons, alert 等各種元件, 均可以放入 Design Library 。
  • 4. 只要將註解寫成 KSS 的格式,就可以直接由 KSS 產生 Design Library 網頁。
  • 5. 用 KSS 時,只要專心寫你的 SASS 、寫你的註解,寫完之後它會幫你自動產生出來! 同時這樣還有一個好處,這樣的 SASS 可以直接 import 在各個 project 裡面,所以它其實是同步在與你的網站更新的,不會有網站上有寫這個style,可是下面註解卻不見的情況。

 

有了 EZTABLE  Design Library,使我們 EZTABLE 裡的 PM、Designer、 Front-end engineer 的溝通以往更順暢!

並提升我們的開發速度,增進效率,可謂一舉多得!

 

 參考連結

http://sass-lang.com/guide

http://semantic-ui.com/

https://speakerdeck.com/kneath/a-better-future-with-kss

https://github.com/kss-node/kss-node

 4-IMG_1960

 

 


 

如果您喜歡這篇文章可以點擊「讚」&「分享」
並歡迎訂閱 EZTABLE IDEAS!  😀

如果你是學習力強,而且經驗值高的人才,
歡迎一起加入我們 EZTABLE!! 

104 人力銀行-Visual Designer 視覺設計師

EZTABLE at Linkedin 

 

 


Related Posts Plugin for WordPress, Blogger...

No responses yet

發表迴響