最近自己一直在進(jìn)行UI設(shè)計(jì)的學(xué)習(xí)，主要使用的軟件是Sketch坞淮。在學(xué)習(xí)的過程中残炮，很多時候在參考前輩們的意見后會進(jìn)行多個版本的更改和嘗試，因此不僅會出現(xiàn)多個版本的.sketch文件同時也會導(dǎo)出很多不同版本的預(yù)覽圖揍愁，這就導(dǎo)致整理的時候其實(shí)比較雜亂，對于管理自己的作品其實(shí)很不利杀饵。因此嘗試用程序員的心頭好git來版本管理莽囤。
相比git（插件）管理，普通方式保存有這么幾個缺陷
1.他人的評價(jià)很難和對應(yīng)版本的文件整合起來（如果在.sketch文件內(nèi)插入他人的評價(jià)文字的話每次審閱還需要打開不同的版本切距，獲取信息效率不高）
2.同時保存多個版本的.sketch文件其實(shí)也是相對來說占空間的朽缎，歸檔時不夠靈活。
3.雖然Sketch其實(shí)已經(jīng)有內(nèi)建的不錯的版本控制谜悟，但該版本回溯功能也只能個人獨(dú)立使用（且效率較低）话肖，會缺乏團(tuán)隊(duì)協(xié)作性。
因此綜上就決定開始嘗試使用Git來進(jìn)行設(shè)計(jì)文件的版本控制葡幸，因?yàn)槲易约簩I(yè)的一半是寫代碼（c++最筒，c#之類...）所以對git會相對熟悉，可以進(jìn)行簡單的命令行進(jìn)行版本控制蔚叨，但命令行操作可能對于很多設(shè)計(jì)師來說還是相對容易出錯的床蜘，因此需要圖形化的插件幫助，為此我專門去尋找了適用于sketch的git插件蔑水。最終效果如下圖所示邢锯。
演示項(xiàng)目已經(jīng)開放給大家，大家可以前去圍觀真使用插件管理的效果搀别。服務(wù)器建立在位于香港的寢室里丹擎，可能速度一般，還請耐心等待歇父。
http://cloud.yuanchenhao.com:30000/stevenyuan/sketchGit.git
1.什么是git
Git是目前世界上最先進(jìn)的分布式版本控制系統(tǒng)（沒有之一）蒂培。
Git是一個開源的分布式版本控制系統(tǒng)，用以有效榜苫、高速的處理從很小到非常大的項(xiàng)目版本管理毁渗。Git 是 Linus Torvalds 為了幫助管理 Linux 內(nèi)核開發(fā)而開發(fā)的一個開放源碼的版本控制軟件。
2.git托管服務(wù)的選擇
git的版本控制可以在本地進(jìn)行单刁，但是推送到遠(yuǎn)程服務(wù)器（局域網(wǎng)內(nèi)建也可）之后其實(shí)有更優(yōu)化的版本視覺對比。現(xiàn)有的主要的git托管庫有兩個一個是github，一個是gitlab羔飞，國內(nèi)的gitcoffee也不錯肺樟。
github免費(fèi)版本和學(xué)生版本都有一定的私人項(xiàng)目上限，需要付費(fèi)才可以開更多的項(xiàng)目逻淌。同時因?yàn)榉?wù)器位于國外的原因么伯，很有可能有鏈接不穩(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)注
我在七牛云上傳了一份0.21版本方便大家下載
http://7xr4z2.com1.z0.glb.clouddn.com.zcool.cn/git-sketch-plugin-master.zip
4.其他的技術(shù)準(zhǔn)備
需要一些時間配置，但是不要嫌麻煩喲绢涡。
1.Sketch >3.1 (非Mac App Store下載的版本牲剃，沒有沙盒機(jī)制）
注意：Sketch已經(jīng)撤離Mac App Store，原來從Mac App store下載的童鞋可以通過官方獲得激活碼激活非Mac App Store版本雄可。
2.將Sketchtool安裝在 /usr/local/bin/sketchtool
可以參考Sketch官網(wǎng)教程
下載好最新的Sketch之后進(jìn)入Finder-應(yīng)用程序凿傅，找到Sketch之后右鍵查看包內(nèi)容
進(jìn)入Content-Resources-sketchtool，找到?install.sh
啟動系統(tǒng)自帶的terminal（終端）滞项，將install.sh拖入即可執(zhí)行安裝程序
如圖所示即安裝成功
3.安裝git
（參考git的官網(wǎng)教程《1.4 起步 - 安裝 Git》）
4.選擇一個git托管服務(wù) （諸如gitlab狭归、github、bitbucket文判、gitcoffee....）
（并將本機(jī)的ssh密鑰綁定方便擁有對gitlab服務(wù)器的訪問權(quán)）
terminal中輸入下方代碼獲取本機(jī)的ssh密鑰
?pbcopy < ~/.ssh/id_rsa.pub
（建立ssh密鑰可以參考：http://doc.gitlab.com/ce/ssh/README.html）
本次范例使用建于寢室服務(wù)器的gitlab过椎。
5.安裝插件
下載?git-sketch-plugin-master.zip
解壓縮后點(diǎn)擊Git.sketchplugin進(jìn)行安裝
安裝成功后的提醒
當(dāng)這些都完成后可以開始啦！
5.案例分享
于gitlab的網(wǎng)頁版本建立一個項(xiàng)目project
項(xiàng)目可以參照這個參數(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ù)制gitlab網(wǎng)頁端項(xiàng)目下的的git命令（create a new repository）拷貝入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
處理一段時間后會出現(xiàn)如圖情況，按回車后進(jìn)行本地的master（主分支）和 remote的master主分支的合并?
git push -u origin master（按回車后自動執(zhí)行）
執(zhí)行到如圖這樣就代表本地文件夾和remote文件夾已經(jīng)聯(lián)系上了榜揖，打開文件夾可以看到一個README.md的項(xiàng)目描述文件，該文件是用于描述項(xiàng)目用，暫時可以不用管它举哟。
準(zhǔn)備工作還差最后一步---建立你的sketch文件思劳。這里為了方便演示，就用我之前在進(jìn)行UI練習(xí)時進(jìn)行到一半的稿件來演示妨猩。當(dāng)然也可以直接將sketch文件復(fù)制到已經(jīng)建立的git文件夾或者將sketch文件復(fù)制到該文件夾
打開該sketch文件潜叛，這個時候這個文件還是屬于無編制狀態(tài)，git系統(tǒng)是沒法管理到它的改變的壶硅，這個時候我們的主角Git插件就可以登場啦威兜，
菜單欄-Plugins-Git-Add File to git
此時sketch下方會出現(xiàn)"File added to git"就表示這個文件被追蹤啦。
現(xiàn)在我們進(jìn)行第一次改動庐椒，試著改動artboard“新聞首頁”的標(biāo)簽位置和字體:將標(biāo)簽移到了作者信息行末尾椒舵，將新聞標(biāo)題的Lato-Light字體更改為Helvetica-Regular，不用手動按保存扼睬，sketch會自動保存逮栅。
好了這時候你決定保存一次，這個時候就要用到commit命令
Plugins-Git-Commit
Sketch會彈出如圖所示的對話框窗宇，commit to “master”措伐，輸入框里可以填寫你對這次更改的描述，比如：客戶需求1：更換字體為Helvetica军俊，更換標(biāo)簽位置侥加。一定要勾選“Generate files for pretty diffs”
這個生成diff差異文件可以說是這個插件和單純用命令行最大的差別了：單純的命令行操作git需要你每次自己在teminal里輸入比如 git commit -m"客戶需求1：更換字體為Helvetica，更換標(biāo)簽位置粪躬。"這樣的命令担败，同時也需要你自己去導(dǎo)出示意圖，非常麻煩镰官，而這個commit命令可以很快完成這兩步提前。
commit 完成后就會出現(xiàn)下方這樣的commit成功說明，如果有時候無法彈出就再次commit一次（一般不會出現(xiàn)泳唠，靜候就好）狈网。
有時候也會出現(xiàn)：no commit to submit 意思的字樣是sketch未來得及保存你的更改你就提交了commit笨腥，重新手動保存一下然后再commit就好拓哺。
現(xiàn)在的commit完成就相當(dāng)于生成了一個階段性的存檔，已經(jīng)可以在本地使用git回溯版本或者查看
,不過為了團(tuán)隊(duì)協(xié)作脖母、以及用上gitlab（或者github）系統(tǒng)的簡潔的GUI操作界面進(jìn)行對比我們需要將改動推送到遠(yuǎn)程服務(wù)器士鸥。
使用插件的push命令
Plugins-Git-Push
然后sketch會卡頓一會兒，鼠標(biāo)會變成風(fēng)火輪旋轉(zhuǎn)一會兒谆级，具體時間視sketch文件的大小而定烤礁，文件越大持續(xù)的時間越長讼积，此時就不要再進(jìn)行其他操作了，如果sketch崩潰可能就要回到命令行去控制版本了鸽凶。
不過有時候可能會跳出Failed..窗口币砂，不用擔(dān)心，其實(shí)commit已經(jīng)提交到遠(yuǎn)程的master分支啦玻侥。
接下來訪問網(wǎng)頁版gitlab查看現(xiàn)在項(xiàng)目的進(jìn)度。
在這里就可以看到現(xiàn)有的項(xiàng)目的commit了亿蒸，每個artboard都有單獨(dú)的跟蹤凑兰，因此無論你修改了哪個arboard都可以看到版本更新，因?yàn)閯倓偸堑谝淮蝐ommit因此沒有對比照边锁，我們再進(jìn)行一次提交來使用對比功能姑食。（步驟同上面完全相同）
在本次修改中我刪除了背景的遮罩、更改了標(biāo)簽顏色茅坛、添加了頁面的分享功能音半，在commits界面可以看到新的一次提交：客戶需求2
打開本次commit之后就可以看到版本2：客戶需求2 和客戶需求1之前的對比了，在右上角的模式中贡蓖，請選擇
SIDE-BY-SIDE
曹鸠，方便對比。
在對比模式中斥铺，gitlab同github一樣提供了三種模式：2-up（左右對比彻桃，如上圖所示），Swipe（從左至右拖動對比）以及Onion Skin（剝洋蔥模式）
Swipe模式如圖所示晾蜘，便于對比版本前后的差異邻眷，如下圖就可以看到現(xiàn)在對比線左右標(biāo)簽的顏色差異、缺失遮罩的畫面不同剔交，再往右拖動就可以看到分享菜單的有無對比肆饶。
Onion skin
模式就是從右往左的拖動，動態(tài)的進(jìn)行對比岖常，在之前的使用過程中覺得尤其對明暗的對比特別的有用驯镊。
上面的范例已經(jīng)簡要說明了兩次版本提交以及對比的使用方法，基本上覆蓋了本次使用的git插件的主要功能腥椒。如果個人單獨(dú)使用阿宅，可以在每一步寫上你從其他人（比如主管、前輩笼蛛、用戶）那邊得到的反饋或者參考的項(xiàng)目鏈接洒放，可以做到每一步改動都有理論的支撐而不是隨意的更改。如果是團(tuán)隊(duì)使用那么git的功能就更方便的發(fā)揮了滨砍，可以將團(tuán)隊(duì)中每一個人都添加到群組中往湿，對更改發(fā)出各自的意見建議妖异。
6.其他
branch功能和其他稍微高級一點(diǎn)的git指令就暫時就不講啦，之后有時間再更新领追，不過branch和master分支的切換對于團(tuán)隊(duì)開發(fā)或者自己進(jìn)行多次不同風(fēng)格的嘗試的話會非常有用他膳，可以獨(dú)立進(jìn)行多個分支的設(shè)計(jì)、通過自己或者團(tuán)隊(duì)審核通過后合并到master主分支形成最終的版本绒窑。
其他更加高階的操作可以參照git的標(biāo)準(zhǔn)操作流程來使用棕孙。附上gitlab flow以及github的flow，兩者其實(shí)理念上是一樣的
兩者的差異可以參考 阮一峰前輩的這篇對比文《Git 工作流程》
7.聯(lián)系
本次行文比較倉促也比較偏口語化些膨，暫時沒有時間錄制視頻給大家了蟀俊，
如果有Sketch git插件的使用的問題可以加我的微信：804933158 或者給我寫郵件 yuanchenhao1026@gmail.com
