對(duì)每一個(gè)設(shè)計(jì)師來說,如何管理文件版本是令人很頭痛的。本次教程使用Sketch的git插件幫助你記錄每一次的更改、處理好混亂的版本迭代
設(shè)計(jì)師的版本控制-Sketch的git插件使用案例
最近自己一直在進(jìn)行UI設(shè)計(jì)的學(xué)習(xí),主要使用的軟件是Sketch,很多時(shí)候在參考前輩們的意見后會(huì)進(jìn)行多個(gè)版本的更改和嘗試,因此不僅會(huì)出現(xiàn)多個(gè)版本的.sketch文件同時(shí)也會(huì)導(dǎo)出很多不同版本的預(yù)覽圖,這就導(dǎo)致后期整理的時(shí)候其實(shí)比較雜亂,有這么幾個(gè)問題
-
他人的評(píng)價(jià)很難和對(duì)應(yīng)版本的文件整合起來(光塞入sketch文件里在跨版本選擇的時(shí)候就需要打開每個(gè)文件比較麻煩)
-
同時(shí)保存多個(gè)版本的.sketch文件其實(shí)也是相對(duì)來說占空間的。
雖然Sketch其實(shí)已經(jīng)有內(nèi)建的不錯(cuò)的版本控制,但在是用上來說也只能個(gè)人獨(dú)立使用,會(huì)缺乏團(tuán)隊(duì)協(xié)作性。
因此綜上就決定開始嘗試使用Git來進(jìn)行設(shè)計(jì)文件的版本控制,因?yàn)閷I(yè)的一半是寫代碼(c++,c#之類)所以對(duì)git會(huì)比較熟悉,可以進(jìn)行簡(jiǎn)單的純命令行的進(jìn)行版本控制,但可能對(duì)于很多設(shè)計(jì)師來說還是相對(duì)容易出錯(cuò)的,因此需要圖形化的插件幫助,為此我專門去尋找了適用于sketch的git插件。最終效果如下
1.什么是git
Git是目前世界上最先進(jìn)的分布式版本控制系統(tǒng)(沒有之一)。
Git是一個(gè)開源的分布式版本控制系統(tǒng),用以有效、高速的處理從很小到非常大的項(xiàng)目版本管理。Git 是 Linus Torvalds 為了幫助管理 Linux 內(nèi)核開發(fā)而開發(fā)的一個(gè)開放源碼的版本控制軟件。
2.git托管服務(wù)的選擇
git的版本控制可以在本地進(jìn)行,但是推送到遠(yuǎn)程服務(wù)器(局域網(wǎng)內(nèi)建也可)之后其實(shí)有更優(yōu)化的版本視覺對(duì)比?,F(xiàn)有的主要的git托管庫有兩個(gè)一個(gè)是github,一個(gè)是gitlab,國(guó)內(nèi)的gitcoffee也不錯(cuò)。
github免費(fèi)版本和學(xué)生版本都有一定的私人項(xiàng)目上限,需要付費(fèi)才可以開更多的項(xiàng)目。同時(shí)因?yàn)榉?wù)器位于國(guó)外的原因,很有可能有鏈接不穩(wěn)定的情況。gitcoffee用的不多。
本次范例使用的git托管服務(wù)是前不久在自己寢室的服務(wù)器上建立的gitlab的community版本。如果是團(tuán)隊(duì)協(xié)作可以在內(nèi)網(wǎng)中架設(shè)github服務(wù)器,既可以確保安全性也可以方便團(tuán)隊(duì)成員使用。(不大確定在真的商用公司是如何進(jìn)行版本控制的,本文僅供各位參考,數(shù)據(jù)安全關(guān)系如需要架設(shè)自己的服務(wù)器一定要注意容災(zāi),增加備份)
3.Sketch git插件的選擇
本次使用的是一款名為git-sketch-plugin的插件,由開發(fā)者mathieudutour開發(fā),是眾多現(xiàn)有的git插件中持續(xù)維護(hù)情況最好功能最完善的,項(xiàng)目在github開源,各位可以持續(xù)關(guān)注
4.其他的技術(shù)準(zhǔn)備
真的不要嫌麻煩喲,真的安裝完之后會(huì)特別好用!
1.Sketch >3.1 (非Mac App Store下載的版本,沒有沙盒機(jī)制)
2.將Sketchtool安裝在 /usr/local/bin/sketchtool
下載好最新的Sketch之后進(jìn)入Finder-應(yīng)用程序,找到Sketch之后右鍵查看包內(nèi)容
進(jìn)入Content-Resources-sketchtool,找到install.sh
啟動(dòng)系統(tǒng)自帶的terminal(終端),將install.sh拖入即可執(zhí)行安裝程序
如圖所示即安裝成功
3.安裝git(參考git的官網(wǎng)教程《1.4 起步 - 安裝 Git》 )
4.一個(gè)git托管服務(wù)(并將本機(jī)的ssh密鑰綁定方便擁有對(duì)gitlab服務(wù)器的訪問權(quán))本次使用gitlab,github的使用可以參考這篇鏈接。
安裝:下載git-sketch-plugin-master.zip
解壓縮后點(diǎn)擊Git.sketchplugin進(jìn)行安裝
安裝成功后的提醒
當(dāng)這些都完成后可以開始啦!
5.案例分享
-
于gitlab的網(wǎng)頁版本建立一個(gè)項(xiàng)目project
項(xiàng)目可以參照這個(gè)參數(shù)進(jìn)行配置,可以設(shè)置項(xiàng)目為私人項(xiàng)目,也可以設(shè)置為public或者internal(本gitlab服務(wù)的用戶可以訪問)
建立后使用git命令`clone`到本地Mac中(通常我自己的路徑就在自己的文件夾中)
通常直接拷貝`Create a new repository`下的幾行命令進(jìn)行項(xiàng)目文件夾的創(chuàng)建以及git項(xiàng)目的初始化
在Mac系統(tǒng)下,可以使用系統(tǒng)自帶的terminal進(jìn)行g(shù)it的管理,非常方便。
直接復(fù)制上方的git命令拷貝入terminal
git clone ssh://git@cloud.yuanchenhao.com:30001/>stevenyuan/sketchGit.gitcd sketchGittouch README.mdgit add README.mdgit commit -m "add README"git push -u origin master
處理一段時(shí)間后會(huì)出現(xiàn)如圖情況,按回車后進(jìn)行本地的master(主分支)和 remote的master主分支的合并
git push -u origin master
執(zhí)行到如圖這樣就代表本地文件夾和remote文件夾已經(jīng)聯(lián)系上了,打開文件夾可以看到一個(gè)README.md的項(xiàng)目描述文件,該文件是用于描述項(xiàng)目用,暫時(shí)可以不用管它。
準(zhǔn)備工作還差最后一步---建立你的sketch文件。這里為了方便演示,就用我之前在進(jìn)行UI練習(xí)時(shí)進(jìn)行到一半的稿件來演示。當(dāng)然也可以直接將sketch文件復(fù)制到已經(jīng)建立的git文件夾或者將sketch文件復(fù)制到該文件夾
打開該sketch文件,這個(gè)時(shí)候這個(gè)文件還是屬于無編制狀態(tài),git系統(tǒng)是沒法管理到它的改變的,這個(gè)時(shí)候我們的主角Git插件就可以登場(chǎng)啦,菜單欄-Plugins-Git-Add File to git
此時(shí)sketch下方會(huì)出現(xiàn)"File added to git"就表示這個(gè)文件被追蹤啦。
現(xiàn)在我們進(jìn)行第一次改動(dòng),試著改動(dòng)artboard“新聞首頁”的標(biāo)簽位置和字體:將標(biāo)簽移到了作者信息行末尾,將新聞標(biāo)題的Lato-Light字體更改為Helvetica-Regular,不用手動(dòng)按保存,sketch會(huì)自動(dòng)保存。
好了這是根據(jù)最新的設(shè)計(jì)潮流更改的,你決定保存一次,這個(gè)時(shí)候就要用到commit命令:Plugins-Git-Commit
Sketch會(huì)彈出如圖所示的對(duì)話框,commit to “master”,輸入框里可以填寫你對(duì)這次更改的描述,比如:客戶需求1:更換字體為Helvetica,更換標(biāo)簽位置。一定要勾選“Generate files for pretty diffs”
這個(gè)生成diff差異文件可以說是這個(gè)插件和單純用命令行最大的差別了:?jiǎn)渭兊拿钚胁僮鱣it需要你每次自己在teminal里輸入比如 git commit -m"客戶需求1:更換字體為Helvetica,更換標(biāo)簽位置。"這樣的命令,同時(shí)也需要你自己去導(dǎo)出示意圖,非常麻煩,而這個(gè)commit命令可以很快完成這兩步。
commit 完成后就會(huì)出現(xiàn)下方這樣的commit成功說明,如果有時(shí)候無法彈出就再次commit一次(一般不會(huì)出現(xiàn),靜候就好)。
有時(shí)候也會(huì)出現(xiàn):no commit to submit意思的字樣是sketch未來得及保存你的更改你就提交了commit,重新手動(dòng)保存一下然后再commit就好。
現(xiàn)在的commit完成就相當(dāng)于生成了一個(gè)階段性的存檔,已經(jīng)可以在本地使用git回溯版本或者查看,不過為了團(tuán)隊(duì)協(xié)作、以及用上gitlab(或者github)系統(tǒng)的簡(jiǎn)潔的GUI操作界面進(jìn)行對(duì)比我們需要將改動(dòng)推送到遠(yuǎn)程服務(wù)器。
使用插件的push命令Plugins-Git-Push
然后sketch會(huì)卡頓一會(huì)兒,鼠標(biāo)會(huì)變成風(fēng)火輪旋轉(zhuǎn)一會(huì)兒,具體時(shí)間視sketch文件的大小而定,文件越大持續(xù)的時(shí)間越長(zhǎng),此時(shí)就不要再進(jìn)行其他操作了,如果sketch崩潰可能就要回到命令行去控制版本了。
不過有時(shí)候可能會(huì)跳出Failed..窗口,不用擔(dān)心,其實(shí)commit已經(jīng)提交到遠(yuǎn)程的master分支啦。后文會(huì)介紹解決這個(gè)問題。
接下來訪問網(wǎng)頁版gitlab查看現(xiàn)在項(xiàng)目的進(jìn)度。
在這里就可以看到現(xiàn)有的項(xiàng)目的commit了,每個(gè)artboard都有單獨(dú)的跟蹤,因此無論你修改了哪個(gè)arboard都可以看到版本更新,因?yàn)樯兜谝淮蝐ommit因此沒有對(duì)比照,我們?cè)龠M(jìn)行一次提交來使用對(duì)比功能。(步驟同上面完全相同)
在本次修改中我刪除了背景的遮罩、更改了標(biāo)簽顏色、添加了頁面的分享功能,在commits界面可以看到新的一次提交:客戶需求2
打開本次commit之后就可以看到版本2:客戶需求2 和客戶需求1之前的對(duì)比了,在右上角的模式中,請(qǐng)選擇SIDE-BY-SIDE,方便對(duì)比。
在對(duì)比模式中,gitlab同github一樣提供了三種模式:2-up(左右對(duì)比),Swipe(從左至右拖動(dòng)對(duì)比)以及onion Skin(剝洋蔥模式)
Swipe模式如圖所示,便于對(duì)比版本前后的差異,如下圖就可以看到現(xiàn)在對(duì)比線左右標(biāo)簽的顏色差異、缺失遮罩的畫面不同,再往右拖動(dòng)就可以看到分享菜單的有無對(duì)比。
onion skin模式就是從右往左的拖動(dòng),動(dòng)態(tài)的進(jìn)行對(duì)比,在之前的使用過程中覺得尤其對(duì)明暗的對(duì)比特別的有用。
上面的范例已經(jīng)簡(jiǎn)要說明了兩次版本提交以及對(duì)比的使用方法,基本上覆蓋了本次使用的git插件的主要功能。如果個(gè)人單獨(dú)使用,可以在每一步寫上你從其他人(比如主管、前輩、用戶)那邊得到的反饋或者參考的項(xiàng)目鏈接,可以做到每一步改動(dòng)都有理論的支撐而不是隨意的更改。如果是團(tuán)隊(duì)使用那么git的功能就更方便的發(fā)揮了,可以將團(tuán)隊(duì)中每一個(gè)人都添加到群組中,對(duì)更改發(fā)出各自的意見建議。
6.其他
branch功能和其他稍微高級(jí)一點(diǎn)的git指令就暫時(shí)就不講啦,之后有時(shí)間再更新,不過branch和master分支的切換對(duì)于團(tuán)隊(duì)開發(fā)或者自己進(jìn)行多次不同風(fēng)格的嘗試的話會(huì)非常有用,可以獨(dú)立進(jìn)行多個(gè)分支的設(shè)計(jì)、通過自己或者團(tuán)隊(duì)審核通過后合并到master主分支形成最終的版本。
其他更加高階的操作可以參照git的標(biāo)準(zhǔn)操作流程來使用 ,兩者其實(shí)理念上是一樣的
兩者的差異可以參考 阮一峰前輩的這篇對(duì)比文《 Git 工作流程》