Vue.js前端工程師提出新UI開發方法論，要促進設計師與工程師更緊密的協作

使用者介面設計（User Interface, UI）的開源框架Vue.js，其核心團隊成員趙錦江，日前在一場活動中提出實驗性的UI設計方法「Atomic Design+」，是基於目前主流的方法論Atomic Design，重新詮釋前端開發中，由小元件到整體頁面呈現的分層設計架構，目的要讓UI設計師與前端工程師能更緊密的協同合作，而非現今常見的作業流程中，由設計師先畫好整體UI，再交由工程師來開發的情景。

Atomic Design是現今主流的方法論，將網頁設計架構，由小到大分層為原子（Atoms）、分子（molecules）、有機體（organisms）、樣板（templates）與頁面（pages）。若要更具體對應到設計流程，不可拆分的原子等同於基本的HTML元素，如表單標籤、輸入框、按鈕等；分子則是由多個原子組成，如前述元素組合成搜尋欄位；而多個分子能合成有機體，如網頁最上方的header，通常包括品牌logo、主導覽列表和搜索欄位等；多個有機體又能構成網頁的樣板，最後再加入網站內容、動畫進行微調，來完成整個網站的開發。

不過，趙錦江認為，設計網站的最小單位應該改為欄位（field）更恰當，「既然UI就是為了展示信息，那我們不妨從提供訊息的角度，以網頁中的每個功能作為原子的概念。」由於欄位是能體現功能的最小單位，所以在新的Atomic Design+架構中，設計流程架構改為從欄位開始，一層層往上組合成群組（groups）、卡片（cards）、區塊（sections）、頁面（pages），以及App應用程式。

趙錦江提到，新架構是將基本元素融合到每一層中，如顏色與行距（color & spacing）、字型樣式（typography）、動畫（animations）、導航（navigations）、裝飾（decorations），在設計最小單位時就要納入考量，並在往後的每一層中體現連貫的風格。比如說，在設計搜尋欄位時就要考量到區塊顏色、字型、圖樣風格等，在設計主導覽列表時也要一併考慮下拉式頁面的動畫風格等。

因此，趙錦江認為理想的開發情境，是由設計師與工程師協同合作，從底層開始就相互討論，一層開發完再到下一層，來減少UI設計與最終網頁呈現的落差，以及工程師開發完成後必須不斷修改的問題。「如果這種方法能實現，不僅每一層的協作方式，甚至每個人需要具備的能力、整個團隊結構都會產生改變。」

尤其，現在設計師與工程師大多為分開獨立作業，未來若能具體推廣這個開發方法，「也許設計團隊跟前端團隊可能重新回到一個大團隊。」目前，趙錦江的團隊也嘗試用此方法用來開發網頁。

除了新興設計工具走向線上協作與雲端管理，UI開發也更重視設計師與工程師的雙向溝通

趙錦江在網路上暱稱「勾三股四」，是一名網頁前端開發工程師，從2007年畢業於中國西安西北工業大學軟體工程學系，就從事前端工作至今，先後曾在傲遊瀏覽器（Maxthon）、手機淘寶和阿里雲工作，同時也是前端設計框架Vue.js核心團隊成員；而他在網路上也不吝於分享網頁開發技術與經驗，其GitHub帳號有上千人追蹤，微博也累積上萬名粉絲。

「身為前端工程師，很重要的職責之一，就是把設計師的想法變成現實。」趙錦江在活動中表示，現行UI設計工具實際應用在開發過程中，會遇到一些無法克服的問題，這也是現今有越來越多UI設計軟體興起的原因，除了常見的Photoshop之外，也出現了如Sketch、InVision、Marvel、Axure、Adobe XD、Zeplin等軟體，能讓設計師依據不同設計需求去挑選適合的軟體來作業。

對此，趙錦江也整理出開發UI設計圖檔最常碰到的幾個問題。比如說，設計工具的自動化丈量，理論上已經標註非常詳細，但是，卻不一定會符合前端工程師的需求，尤其圖片與文字都有外框，是應該採用文字高度與邊框的距離，還是採用文字框與邊框的距離？就是在開發過程需要釐清的。

又或者，許多設計師喜歡用色塊加上透明圖層來顯示顏色，但工程師卻不一定能運用工具，直接量測到圖層疊加後的顏色，反而需要透過截圖才能測量，這就是UI設計工具不夠友善的地方。

還有，在Bootstrap的資料庫中具備所有文字標題的大小（heading level），但圖片本身卻有很多種理解方式，除了字號固定之外，每種heading level的排距，是要算上方heading level的下邊距，還是下方heading level的上邊距？還是各占一半，或以某種比例分配？那分配好之後，又是屬於內邊距還是外邊距？這些看似微不足道的細節，決定了開發過程是否能順暢進行，如果資訊不能透過設計稿傳遞楚，就需要額外花時間理解。

此外，現在的設計幾乎都走向響應式網站，在瀏覽器中，用戶可以根據喜好來來調整頁面呈現的高、寬度，使用者介面也可以動態滑動，但設計過程使用的畫布卻是固定尺寸，這也讓網頁開發的過程，需要更多的溝通來調整頁面。趙錦江也特別指出，近來手機螢幕尺寸也越來越多元，這也對軟體啟動畫面的設計，帶來一定程度的挑戰。

要克服現有設計工具的侷限，設計師與工程師的雙向溝通很重要，趙錦江表示，現今普遍協作方式，通常是由設計師先完成設計稿，再交由工程師開發，部分較複雜的設計，會多增加「設計還原評審」的流程，也就是工程師開發完程式、尚未與後端串接之前，先提供給設計師回饋意見並修正。不過，多數設計師與工程師仍多為分開作業，沒有達到充分溝通。

這種單向協作方式，可能無形中限縮的創新的可能。比如說，設計師因為擔心想法難以實現，可能在沒和工程師溝通的情況下，直接去找其他網站已經做到的設計作為參考。當設計師逐漸習慣這種設計思維之後，就可能侷限了原本的創意，也減少了工程師技術創新與突破的機會。

趙錦江表示，上述這些普遍存在於設計工具與工作流程的問題，未來可能出現更多新興的設計工具與方法論來改善。比如說，內部團隊正在嘗試的Atomic Design+方法論；或是目前新興的設計工具，大多已經能在瀏覽器中執行，部分也與雲端結合，提供雲計算或儲存的功能，來更快的線上協作與交付演示，還能輕鬆管理版本，這是傳統設計工具不具備的場景。「不過，工具是一方面，也要鼓勵設計師真正擁抱真實的環境，不然有了工具，設計師還是按照舊有思維來思考，問題就沒有真正解決。」