趙錦江在網路上暱稱「勾三股四」,是一名網頁前端開發工程師,他近日在一場活動中提出實驗性的UI設計方法「Atomic Design+」,重新詮釋前端開發的分層設計架構。

圖片來源: 

圖/iThome

使用者介面設計(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+方法論;或是目前新興的設計工具,大多已經能在瀏覽器中執行,部分也與雲端結合,提供雲計算或儲存的功能,來更快的線上協作與交付演示,還能輕鬆管理版本,這是傳統設計工具不具備的場景。「不過,工具是一方面,也要鼓勵設計師真正擁抱真實的環境,不然有了工具,設計師還是按照舊有思維來思考,問題就沒有真正解決。」


Advertisement

更多 iThome相關內容