最近自己一直在进行UI设计的学习，主要使用的软件是Sketch。在学习的过程中，很多时候在参考前辈们的意见后会进行多个版本的更改和尝试，因此不仅会出现多个版本的.sketch文件同时也会导出很多不同版本的预览图，这就导致整理的时候其实比较杂乱，对于管理自己的作品其实很不利。因此尝试用程序员的心头好git来版本管理。
相比git（插件）管理，普通方式保存有这么几个缺陷
1.他人的评价很难和对应版本的文件整合起来（如果在.sketch文件内插入他人的评价文字的话每次审阅还需要打开不同的版本，获取信息效率不高）
2.同时保存多个版本的.sketch文件其实也是相对来说占空间的，归档时不够灵活。
3.虽然Sketch其实已经有内建的不错的版本控制，但该版本回溯功能也只能个人独立使用（且效率较低），会缺乏团队协作性。
因此综上就决定开始尝试使用Git来进行设计文件的版本控制，因为我自己专业的一半是写代码（c++，c#之类...）所以对git会相对熟悉，可以进行简单的命令行进行版本控制，但命令行操作可能对于很多设计师来说还是相对容易出错的，因此需要图形化的插件帮助，为此我专门去寻找了适用于sketch的git插件。最终效果如下图所示。
演示项目已经开放给大家，大家可以前去围观真使用插件管理的效果。服务器建立在位于香港的寝室里，可能速度一般，还请耐心等待。
http://cloud.yuanchenhao.com:30000/stevenyuan/sketchGit.git
gitlab对比界面
1.什么是git
Git是目前世界上最先进的分布式版本控制系统（没有之一）。
Git是一个开源的分布式版本控制系统，用以有效、高速的处理从很小到非常大的项目版本管理。Git 是 Linus Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。
2.git托管服务的选择
git的版本控制可以在本地进行，但是推送到远程服务器（局域网内建也可）之后其实有更优化的版本视觉对比。现有的主要的git托管库有两个一个是github，一个是gitlab，国内的gitcoffee也不错。
github免费版本和学生版本都有一定的私人项目上限，需要付费才可以开更多的项目。同时因为服务器位于国外的原因，很有可能有链接不稳定的情况。gitcoffee用的不多。
本次范例使用的git托管服务是前不久在自己寝室的服务器上建立的gitlab的community版本。如果是团队协作可以在内网中架设github服务器，既可以确保安全性也可以方便团队成员使用。（不大确定在真的商用公司是如何进行版本控制的，本文仅供各位参考，数据安全关系如需要架设自己的服务器一定要注意容灾，增加备份）
3.Sketch git插件的选择
本次使用的是一款名为git-sketch-plugin的插件，由开发者mathieudutour开发，是众多现有的git插件中持续维护情况最好功能最完善的，项目在github开源，各位可以持续关注
我在七牛云上传了一份0.21版本方便大家下载
http://7xr4z2.com1.z0.glb.clouddn.com.zcool.cn/git-sketch-plugin-master.zip
4.其他的技术准备
需要一些时间配置，但是不要嫌麻烦哟。
1.Sketch >3.1 (非Mac App Store下载的版本，没有沙盒机制）
注意：Sketch已经撤离Mac App Store，原来从Mac App store下载的童鞋可以通过官方获得激活码激活非Mac App Store版本。
2.将Sketchtool安装在 /usr/local/bin/sketchtool
可以参考Sketch官网教程
下载好最新的Sketch之后进入Finder-应用程序，找到Sketch之后右键查看包内容
显示Sketch的包内容
进入Content-Resources-sketchtool，找到 install.sh
install.sh
启动系统自带的terminal（终端），将install.sh拖入即可执行安装程序
terminal（终端）
如图所示即安装成功
sketchtool安装成功
3.安装git
（参考git的官网教程《1.4 起步 - 安装 Git》）
4.选择一个git托管服务 （诸如gitlab、github、bitbucket、gitcoffee....）
（并将本机的ssh密钥绑定方便拥有对gitlab服务器的访问权）
terminal中输入下方代码获取本机的ssh密钥
pbcopy < ~/.ssh/id_rsa.pub
（建立ssh密钥可以参考：http://doc.gitlab.com/ce/ssh/README.html）
本次范例使用建于寝室服务器的gitlab。
5.安装插件
下载 git-sketch-plugin-master.zip
解压缩后点击Git.sketchplugin进行安装
点击Git.sketchplugin进行安装
安装成功后的提醒
插件安装成功
当这些都完成后可以开始啦！
5.案例分享
于gitlab的网页版本建立一个项目project
开始建立项目
项目可以参照这个参数进行配置，可以设置项目为私人项目，也可以设置为public或者internal（本gitlab服务的用户可以访问）
建立gitlab项目
建立后使用git命令clone到本地Mac中（通常我自己的路径就在自己的文件夹中）
通常直接拷贝Create a new repository下的几行命令进行项目文件夹的创建以及git项目的初始化
在Mac系统下，可以使用系统自带的terminal进行git的管理，非常方便。
terminal(终端）
直接复制gitlab网页端项目下的的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
处理一段时间后会出现如图情况，按回车后进行本地的master（主分支）和 remote的master主分支的合并
git push -u origin master（按回车后自动执行）
本地、远程master分支已经同步
执行到如图这样就代表本地文件夹和remote文件夹已经联系上了，打开文件夹可以看到一个README.md的项目描述文件，该文件是用于描述项目用，暂时可以不用管它。
git文件夹的初始化状态
准备工作还差最后一步---建立你的sketch文件。这里为了方便演示，就用我之前在进行UI练习时进行到一半的稿件来演示。当然也可以直接将sketch文件复制到已经建立的git文件夹或者将sketch文件复制到该文件夹
于git文件夹内创建（粘贴）.sketch文件
打开该sketch文件，这个时候这个文件还是属于无编制状态，git系统是没法管理到它的改变的，这个时候我们的主角Git插件就可以登场啦，
菜单栏-Plugins-Git-Add File to git
将文件添加入Git跟踪列表
此时sketch下方会出现"File added to git"就表示这个文件被追踪啦。
文件添加成功
现在我们进行第一次改动，试着改动artboard“新闻首页”的标签位置和字体:将标签移到了作者信息行末尾，将新闻标题的Lato-Light字体更改为Helvetica-Regular，不用手动按保存，sketch会自动保存。
进行第一次改动（将被保存为第一个版本）
好了这时候你决定保存一次，这个时候就要用到commit命令
Commit 命令
Plugins-Git-Commit
Sketch会弹出如图所示的对话框，commit to “master”，输入框里可以填写你对这次更改的描述，比如：客户需求1：更换字体为Helvetica，更换标签位置。一定要勾选“Generate files for pretty diffs”
这个生成diff差异文件可以说是这个插件和单纯用命令行最大的差别了：单纯的命令行操作git需要你每次自己在teminal里输入比如 git commit -m"客户需求1：更换字体为Helvetica，更换标签位置。"这样的命令，同时也需要你自己去导出示意图，非常麻烦，而这个commit命令可以很快完成这两步。
Commit+版本描述+生成导出图
commit 完成后就会出现下方这样的commit成功说明，如果有时候无法弹出就再次commit一次（一般不会出现，静候就好）。
commit状态成功、并自动生成了导出图
有时候也会出现：no commit to submit 意思的字样是sketch未来得及保存你的更改你就提交了commit，重新手动保存一下然后再commit就好。
现在的commit完成就相当于生成了一个阶段性的存档，已经可以在本地使用git回溯版本或者查看
,不过为了团队协作、以及用上gitlab（或者github）系统的简洁的GUI操作界面进行对比我们需要将改动推送到远程服务器。
使用插件的push命令
Plugins-Git-Push
执行push命令
然后sketch会卡顿一会儿，鼠标会变成风火轮旋转一会儿，具体时间视sketch文件的大小而定，文件越大持续的时间越长，此时就不要再进行其他操作了，如果sketch崩溃可能就要回到命令行去控制版本了。
不过有时候可能会跳出Failed..窗口，不用担心，其实commit已经提交到远程的master分支啦。
接下来访问网页版gitlab查看现在项目的进度。
项目界面
在这里就可以看到现有的项目的commit了，每个artboard都有单独的跟踪，因此无论你修改了哪个arboard都可以看到版本更新，因为刚刚是第一次commit因此没有对比照，我们再进行一次提交来使用对比功能。（步骤同上面完全相同）
commit详情页
在本次修改中我删除了背景的遮罩、更改了标签颜色、添加了页面的分享功能，在commits界面可以看到新的一次提交：客户需求2
Commits历史界面
打开本次commit之后就可以看到版本2：客户需求2 和客户需求1之前的对比了，在右上角的模式中，请选择
SIDE-BY-SIDE
，方便对比。
2-up模式
在对比模式中，gitlab同github一样提供了三种模式：2-up（左右对比，如上图所示），Swipe（从左至右拖动对比）以及Onion Skin（剥洋葱模式）
Swipe模式如图所示，便于对比版本前后的差异，如下图就可以看到现在对比线左右标签的颜色差异、缺失遮罩的画面不同，再往右拖动就可以看到分享菜单的有无对比。
Swipe模式
Onion skin
模式就是从右往左的拖动，动态的进行对比，在之前的使用过程中觉得尤其对明暗的对比特别的有用。
Onion skin模式
上面的范例已经简要说明了两次版本提交以及对比的使用方法，基本上覆盖了本次使用的git插件的主要功能。如果个人单独使用，可以在每一步写上你从其他人（比如主管、前辈、用户）那边得到的反馈或者参考的项目链接，可以做到每一步改动都有理论的支撑而不是随意的更改。如果是团队使用那么git的功能就更方便的发挥了，可以将团队中每一个人都添加到群组中，对更改发出各自的意见建议。
评论功能（支持Markdown）
6.其他
branch功能和其他稍微高级一点的git指令就暂时就不讲啦，之后有时间再更新，不过branch和master分支的切换对于团队开发或者自己进行多次不同风格的尝试的话会非常有用，可以独立进行多个分支的设计、通过自己或者团队审核通过后合并到master主分支形成最终的版本。
其他更加高阶的操作可以参照git的标准操作流程来使用。附上gitlab flow以及github的flow，两者其实理念上是一样的
两者的差异可以参考 阮一峰前辈的这篇对比文《Git 工作流程》
7.联系
本次行文比较仓促也比较偏口语化，暂时没有时间录制视频给大家了，
如果有Sketch git插件的使用的问题可以加我的微信：804933158 或者给我写邮件 yuanchenhao1026@gmail.com
网友评论