設計不能重來,但 Abstract 可以!

設計稿隨便老闆你改,這次我挺得住

image background resource: https://www.goabstract.com/2017/07/11/abstract-home-for-modern-design-teams.html

這暑假開始用 Sketch 大量的畫設計圖,碰到了棘手的問題。
檔案命名、共同協作溝通、修改部分需要反覆確認…等等,這些問題往往花上很多人很多時間來討論,卻又難以有效、快速的被記錄下來。此文章是使用過這個版本控制軟體後的一些心得,希望讀者在讀過之後可以對 Abstract 有簡單的理解,也歡迎一起討論更好的設計開發流程!


這篇文章分成三個部分:

  1. 以往設計上面臨的問題
  2. Abstract 開發流程與解決方式
  3. 其他的相關工具以及 Sketch 更新帶來的改變

再小提醒一遍,因為小弟並非本科系(設計相關)出身,也沒有真的到設計公司去接受設計實習過的經驗,這些心得與做法只說是個人習慣,而後續提到Sketch 更新也是個人一些想法,就當作帶著一顆輕鬆愉快的心看小品文吧!

ㄧ、所以到底發生了什麼事

命名、命名、命名:

因為設計圖無法一次到位,又常常東改西改,造成每階段存下來的設計圖都要先把檔案複製一份新的再改檔名,這樣才能掌握歷史的脈絡、快速跳回某個版本。

很好,我根本不知道我做了什麼

不過因為同伴很善良、會尊重我提出設計上的想法,所以較不會有反覆在同個元件上面一直做龜毛的修改。但是我也在一些論壇上面看過以下這種亂七八糟的狀況,只能說設計師辛苦了,你們都是命名大師:

image resource: https://9gag.com/gag/azEQd0j/every-designer-in-the-world

讓我們討論一下這個區塊:

檔案的修改通常都伴隨著討論。基本上團隊在溝通上除了口頭紙筆外,還需要去標注特定的設計圖區塊,留下許多反覆的想法討論。小弟的 Sketch 並沒有安裝相關的套件,只用了 Prototype 工具提供的註解功能,在每個圖上面去註記應該要修改的點。

謝謝 Invision,我聽到同伴尋求修改的聲音了

雖然這工具方便使用,但是卻沒有做歷史版本控制,上傳的新設計圖會直接覆蓋掉舊的,喔對了,是無情的覆蓋那種。也就是說標記在上面的註記點點,會因為設計圖更新後就又要重新註記過一遍


怎麼我們兩個圖差好多:

這種狀況也許比較少見,在有多位設計師的公司中才會存在吧?假設 Tom 設計好了一個版本的設計圖。隔天,同事 Jenny 非常好心的接力做下去,同時 Tom 也繼續完成設計,當兩人要核對設計圖時,勢必會有部分的設計是重疊、產生衝突的。

這樣子尷尬的情況之下,兩人可能又要花更多時間在確認差異、溝通想法以及畫面取捨上面,只能說團隊裡面只有我一個設計人士真是相對輕鬆了呢(咦!? 有一種寂寞感)


上述是簡單說明我認為設計師在生產中會面臨到的問題,Abstract 瞭解這件事,試著導入更好的流程來改善這個糟糕的開發體驗,他們將工程師使用的 git flow 與設計行為相結合,讓設計師也變成掌握歷史脈動的魔法師了!

二、踏入 Abstract 的世界

基本介紹

在開始分享前,可以請還不太清楚 Git 為何物的讀者們快速地瀏覽過這份投影片,若還是不理解,可以請教公司中的工程師,他們會在震驚與不解的情緒下為你詳細解釋的:

好,大略暸解 Git 後,我們就開始註冊 Abstract 的帳號吧!
這裡是傳送門: https://www.goabstract.com/ (目前還是 beta版 — 2017.07.18)
非常棒! 是我跟我的分身

收費與功能

Abstract 分成兩種收費類型: 個人與團隊,兩種類型分別有一般收費跟比較高級的方案,不過在一開始新帳號註冊時有免費試用30天。小弟我在奉上信用卡被扣了一筆 31 元的手續費後就辦了一個團隊,裡面有我跟我的分身。

在下載了桌面版的應用程式並打開後,小弟馬上建立一個「dashboard」的專案。Abstract 是不允許直接在 Master branch 上面做修改的,一切的流程都需要 Create new branch 並在修改後 Merge 回去(呼,寫這句話我壓力很大,不懂的朋友要趕快求救啊)。

這是使用介面,非常的乾淨

在使用 Abstract 時讓我感到非常愉快的有兩件事,一是歷史設計圖差異視覺化、二是實用的聊天溝通輔助。

首先第一點,下面是我把背景從黃轉湖水綠(或是湖水藍,設計師不要為了藍綠傷和氣),並且 commit 的過程,其實這就是簡單的 git push,但是轉化成設計師輕鬆操作且方便閱讀紀錄的方式。

可視化又簡潔的流程

再來是第二點,針對剛剛做出的 commit,可以直接在畫板上面圈出哪邊需要修改,另外也可以在聊天室看到這些通知,訊息都被統一管理起來了。甚至每次不同的 commit 中專屬的 comment 都會被保留下來,不同版本的評論也不會被覆蓋掉了!

快速查看評論很舒爽

在完成一個 Branch 中的任務後,將這個成果拉回到 Master 上面,Merge 完之後曾經的紀錄都會一併被整合到 Master 上面,更棒的是,還一併視覺化那些修改過的設計圖們,設計師不用再打開整份檔案慢慢尋找差異了!


更棒的協調功能

在這種開 new branch 的方式中免不了遇到兩支 branch 都修改了同一個元件,或是新開的 branch 與 Master 有差異:

下面是一個 Master 為黑底圓按鈕,branch 試圖改成黃底紅方按鈕的衝突狀況。一般在設計流程上面可能會需要交代,但是 Abstract 能夠自動的判斷,省去人為檢視的時間。

你知道嗎?要修改也不用自己開 Sketch 直接按 edit button 即可編輯!

下面附靜態的示意圖,左邊是 Master 右邊則是修改過一些 UI 的 branch,可能是因為圖片的關係, conflict 是無法自動 merge,這裡的解決方式是放棄掉某一邊,而不是做到部分自動整合,再交給設計師去修改剩下的部分,這個整合修改流程會是比較費時間的地方。

針對有衝突的檔案,特別拉出來讓設計師評估下

簡單的做個小結,Abstract 做到了
1. File control
2. commit control
3. conversation control
這三點,並且讓設計師學會了一種新的開發方式,小弟不知道一般設計師能不能夠接受並消化,但是單看這個產品本身整合的功能,我想它是有抓住到設計上遇到的痛點,並讓我在管理上減少很多心力。

三、所以我能夠穿梭歷史了?

使用後心得:

Abstract 實在好用,站在設計師的角度去構想一個好的開發流程,試圖導入 git flow 改善整個使用體驗,謝謝你們開始解救痛苦多年的設計師們。

不過在使用時讓我無法適應的是這些版控檔案存放在 Abstract 公司的 Server 裡面和本地電腦之中,和我平時存放 code 的 Github、Gitlab 是不同的管理系統。在管理上面設計跟 coding 開發就會分散在兩邊、溝通記錄可能就不會同步在兩個系統了。

另外一點,開始使用版本控制後,設計圖檔會因為 commit 一次而複製一次,用你意想不到的速度侵蝕你的儲存空間:

大約做了十多次的 commit 後資料夾就肥大了

這大概就是用空間換取時間產生的小缺點了,而 Abstract 也是瞭解這一點,在收費上面就有存儲空間的限制,如果讀者是一個專職的設計師我想應該很快就會掏錢升級了,畢竟我才裝起程式一天就用了幾百 MB,如果不升級付費是不能夠協作,同時也會被小小的儲存空間搞得很頭大。


同場加映 Sketch43 改版重點:

當小弟這兩天在寫 Abstract 心得時,不料半路殺出個程咬金,另外一個版本控制的工具 Kactus.io 就出現了!

Kactus.io 是目前我所使用的 git-sketch-plugin 的加強版。先介紹一下 git-sketch-plugin,他是安裝在 Sketch 上面的擴充套件,會把每一個前後有修改的畫布輸出成 png檔視覺化每一次差異。由於我除了設計外也會開發程式,所以這套能在 Github 上面呈現設計差異的套件深得我心:

而 Kactus.io 則是為這個套件做了一套完整的使用介面(不過跟桌面版的 Github App 有 87% 相似),不必再 Github 上面艱辛的看,但缺點是只針對 Sketch 這套設計軟體做版本控制,這點讓我很好奇,非常好奇

到底還有多少軟體給我一次出一出啊!

看了國外開發者的 Medium 文章才知道,原來是 Sketch 升級到 43 版的時候,順便讓檔案本身更新成整齊的檔案格式(應該就是方便的 JSON)。

這件事看起來好像很平常,但是一來 Sketch 本身軟體產出的檔案大小是倍數減少、執行速度有翻倍的提升第二,開發者目前仰賴 官方提供的 API 已經做出上百款實用的套件,現在連設計圖本身也能轉成有條理的文字格式,這也難怪上述提到的版本控制能確實地掌握設計圖的修改差異,往後應該會有更多實用的套件如雨後春筍產出,這裡附上我的想法:

設計稿不僅僅是設計稿,背後是有條理能管理的文字格式,而 Sketch 也不再僅僅是設計軟體,他已甩開很多競爭者,提升為開發平台 (development platform) 了。

這次文章有點長,謝謝能看到最後的各位,排版上有些混亂,因為原本只是想聊聊我在設計上遇到的狀況,以及一套新服務的心得。殊不知就接續著分享比較艱澀的一些個人看法。若還有疑惑的部分歡迎提出來一起討論,或是交流一下 Sketch 的技巧,我想要變厲害點,哈哈。
文末,附上版本控制相關的軟體,祝天下的設計師設計平安,身體平安
One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.