LINE Dev Day 2019 議程心得之五:設計系統中的前端技術


成也設計,敗也設計。好的設計可以吸引目光,帶來人潮,提供更良好的使用者體驗。像 LINE 有 App 版本、桌機版本、網頁後台,用戶橫跨好幾個國家,不免讓人好奇如何實現一致的設計。在 LINE Developer Day 2019 第二天( 11/21 )下午有一場官方講座,主題是〈 Front-end in Design Systems 〉( 設計系統中的前端技術),講者是日本 LINE 前端標準化團隊的工程師 Akihiko Okazaki ,分享了許多有趣的秘辛,例如光一個關閉的叉叉圖示,就可以有 10 款設計,意想不到吧。

由 Akihiko Okazaki 主講〈 Front-end in Design Systems 〉( 設計系統中的前端技術)。
由 Akihiko Okazaki 主講〈 Front-end in Design Systems 〉( 設計系統中的前端技術)。

整個 UIT 組織隸屬於前端開發中心,所謂 UIT 就是「 UI 科技」,全球有超過 160 位前端工程師。在這個場次的議程裡面, Akihiko Okazaki 帶領聽眾們一窺前端部門的奧秘,大方揭露了許多技術細節,包括他們的工程師對於兩個最重要的前端技術 CSS 和 JavaScript 語言的熟悉程度,專家等級都很稀缺,分別是 7% 和 10% ,大部分工程師都是中等和進階等級,分別是 47%+25% 和 33%+33% 。至於使用最多的 CSS 框架是 Bootstrap 和自訂框架,而使用最多的 JavaScript 框架則是 VueReact

UIT 團隊的成果之一,就是隨著 LINE 步入官方帳號 2.0 時代,他們重新打造了官方帳號的管理後台。原本的「 LINE@ 生活圈」、「 LINE 官方帳號」、「 LINE Business Connect 」、「 LINE Customer Connect 」總共 4 個產品,最後通通變成了「官方帳號」。真的是非常浩大的工程!

設計即視覺,然而「視覺」往往也是最主觀、最難所有人都滿意、最難妥協卻也最容易吵架的部分,例如最常見的兩顆按鈕「取消」(灰色)和「確定」(綠色),到底誰要放左邊、誰要放右邊呢?所以 UIT 團隊秉持三大原則,在投影片中間和最後一頁的結語時都有寫到:

  1. 設計原則( Design Principles )
  2. 樣式指南( Style Guide )
  3. 模式庫( Pattern Library)

第一點「設計原則」是希望能夠按照這樣設計( Wish ),第二點「樣式指南」說明了為什麼以及如何設計( How/Why ),第三點「模式庫」同樣說明了如何去做設計( How )。

顏色、字體、圖示都有各式各樣細如牛毛的考量點,例如光一個關閉的叉叉圖示,就可以有 10 款設計,不同的線條粗細、不同的留白,意想不到吧。於是 LINE 發展了自己的素材庫( LINE Atomic Icons, LAICON),避免不一致所導致的設計落差,因此採用統一的命名規格,未來將以 SVG 格式釋出,很方便運用於 CSS 、 Vue 、 React 的程式碼當中,可以包成 npm 、放在網站上,或是放在 CDN 引用。

為了實現可重複使用的元件, UIT 團隊發展了 koromo-element 框架,程式碼也變得更精簡,未來即將發佈的 LUI ( LIFF UI )也將以 koromo-element 為基礎。

UIT 團隊必須跟幾乎所有人士打交道,跟設計師、跟 PM 、跟 Android App 工程師、跟 iOS App 工程師、跟後端工程師(驚!)、跟測試工程師,所以這些團隊當中也都配置了前端工程師。也因此,幾乎在所有專案中都可以看到前端工程師們的貢獻,舉凡帳號一覽清單、優惠卷、集點卡、問卷調查、貼文串等。

這個場次是 LINE 官方講者,所以有提供簡報,請從這裡下載,後來官方也釋出了可供觀看的錄影(超貼心,雖然講者講日文,但是有配上英文口譯的聲音,跟我們在現場帶耳機一樣)。

LINE 在全球有超過 160 位前端工程師。
LINE 在全球有超過 160 位前端工程師。
設計系統團隊的人員配置, UI 設計師和前端工程師佔了大部分。
設計系統團隊的人員配置, UI 設計師和前端工程師佔了大部分。
前端工程師的人員配置,網頁元件的開發人員佔了大部分。
前端工程師的人員配置,網頁元件的開發人員佔了大部分。
將原本的「 LINE@ 生活圈」、「 LINE 官方帳號」、「 LINE Business Connect 」、「 LINE Customer Connect 」總共 4 個產品,重新打造為新的「官方帳號」管理後台網站。
將原本的「 LINE@ 生活圈」、「 LINE 官方帳號」、「 LINE Business Connect 」、「 LINE Customer Connect 」總共 4 個產品,重新打造為新的「官方帳號」管理後台網站。
UIT 團隊在設計時所秉持的三大原則。
UIT 團隊在設計時所秉持的三大原則。
光一個關閉的叉叉圖示,就可以有 10 款設計,不同的線條粗細、不同的留白,意想不到吧。
光一個關閉的叉叉圖示,就可以有 10 款設計,不同的線條粗細、不同的留白,意想不到吧。
為了避免不一致所導致的設計落差,因此將有統一的命名規格並以 SVG 格式釋出的 LINE 素材庫。
為了避免不一致所導致的設計落差,因此將有統一的命名規格並以 SVG 格式釋出的 LINE 素材庫。
示範了元件可重複使用的 koromo-element 框架所撰寫的程式碼。
示範了元件可重複使用的 koromo-element 框架所撰寫的程式碼。
總結一下,用一張圖來說明設計系統中的前端技術。
總結一下,用一張圖來說明設計系統中的前端技術。