搞定设计版本控制!一份超详细的 Sketch git 插件使用指南

一份超详细的 Sketch git 插件使用指南

 

袁晨皓:对每一个设计师来说,如何管理文件版本是令人很头痛的。本次教程使用Sketch的 Git 插件帮助你记录每一次的更改、处理好混乱的版本迭代,教程超详细,建议收藏!

设计师的版本控制:Sketch的 Git 插件使用案例

温馨提示:

本次案例的项目已经公开啦,http://cloud.yuanchenhao.com:30000/stevenyuan/sketch Git . Git,各位可以前往我的自建 Gitlab查看每一步的对比,不过服务器建在我香港学校的寝室里,访问速度可能较为一般,还请海涵。如果有想要实践的有问题可以加我微信804933158一起探讨~感谢!

最近自己一直在进行UI设计的学习,主要使用的软件是Sketch,很多时候在参考前辈们的意见后会进行多个版本的更改和尝试,因此不仅会出现多个版本的.sketch文件同时也会导出很多不同版本的预览图,这就导致后期整理的时候其实比较杂乱,有这么几个问题:

  1. 他人的评价很难和对应版本的文件整合起来(光塞入sketch文件里在跨版本选择的时候就需要打开每个文件比较麻烦)
  2. 同时保存多个版本的.sketch文件其实也是相对来说占空间的。

虽然Sketch其实已经有内建的不错的版本控制,但在是用上来说也只能个人独立使用,会缺乏团队协作性。

因此综上就决定开始尝试使用 Git 来进行设计文件的版本控制,因为专业的一半是写代码(c++,c#之类)所以对 Git 会比较熟悉,可以进行简单的纯命令行的进行版本控制,但可能对于很多设计师来说还是相对容易出错的,因此需要图形化的插件帮助,为此我专门去寻找了适用于sketch的 Git 插件。最终效果如下:

1464671489-8071-1zz20160302

1. 什么是it

> Git 是目前世界上最先进的分布式版本控制系统(没有之一)。

Git 是一个开源的分布式版本控制系统,用以有效、高速的处理从很小到非常大的项目版本管理。 Git 是 Linus Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。

2. Git 托管服务的选择

Git 的版本控制可以在本地进行,但是推送到远程服务器(局域网内建也可)之后其实有更优化的版本视觉对比。现有的主要的 Git 托管库有两个一个是 Github,一个是 Gitlab,国内的 Git coffee也不错。

Github免费版本和学生版本都有一定的私人项目上限,需要付费才可以开更多的项目。同时因为服务器位于国外的原因,很有可能有链接不稳定的情况。 Git coffee用的不多。

本次范例使用的 Git 托管服务是前不久在自己寝室的服务器上建立的 Gitlab的community版本。如果是团队协作可以在内网中架设 Github服务器,既可以确保安全性也可以方便团队成员使用。(不大确定在真的商用公司是如何进行版本控制的,本文仅供各位参考,数据安全关系如需要架设自己的服务器一定要注意容灾,增加备份)

3. Sketch Git 插件的选择

>本次使用的是一款名为 Git -sketch-plugin的插件,由开发者Mathieudutour开发,是众多现有的 Git 插件中持续维护情况最好功能最完善的,项目在 Github开源,各位可以持续关注

Github链接:https:// Github.com/mathieudutour/ Git -sketch-plugin

我上传了一份0.21版本方便大家下载:http://7xr4z2.com1.z0.glb.clouddn.com/ Git -sketch-plugin-master.zip

4. 其他的技术准备

真的不要嫌麻烦哟,真的安装完之后会特别好用!

>1. Sketch >3.1 (非Mac App Store下载的版本,没有沙盒机制)

>2. 将Sketchtool安装在 /usr/local/bin/sketchtool

- Sketch官网教程: http://www.sketchapp.com/tool/

下载好最新的Sketch之后进入Finder-应用程序,找到Sketch之后右键查看包内容。

操作流程:

1464671494-1136-2zz20160302

进入Content-Resources-sketchtool,找到 install.sh

1464671492-3401-3zz20160302

启动系统自带的terminal(终端),将install.sh拖入即可执行安装程序

1464671492-5062-sketchGit24

如图所示即安装成功。

1464671492-3688-5zz20160302

>3. 安装 Git (参考 Git 的官网教程《1.4 起步 – 安装 Git 》

>4. 一个 Git 托管服务(并将本机的ssh密钥绑定方便拥有对 Gitlab服务器的访问权)本次使用 Gitlab, Github的使用可以参考这篇链接。

安装:下载 Git -sketch-plugin-master.zip

解压缩后点击 Git .sketchplugin进行安装。

1464671500-8163-4zz20160302

安装成功后的提醒:

1464671500-8597-sketchGit28

当这些都完成后可以开始啦!

5. 案例分享

1. 于 Gitlab的网页版本建立一个项目project。

1464671518-1746-7zz20160302

项目可以参照这个参数进行配置,可以设置项目为私人项目,也可以设置为public或者internal(本 Gitlab服务的用户可以访问)

1464671518-3379-9zz20160302

建立后使用 Git 命令`clone`到本地Mac中(通常我自己的路径就在自己的文件夹中)

通常直接拷贝`Create a new repository`下的几行命令进行项目文件夹的创建以及 Git 项目的初始化。

1464671518-1048-79741-db86eb352eefdf8a

在Mac系统下,可以使用系统自带的terminal进行 Git 的管理,非常方便。

1464671521-3940-10zz20160302

直接复制上方的 Git 命令拷贝入terminal

 Git  clone ssh:// Git @cloud.yuanchenhao.com:30001/>stevenyuan/sketch Git . Git 

cd sketch Git 

touch README.md

 Git  add README.md

 Git  commit -m "add README"

 Git  push -u origin master

1464671525-9209-79741-1a4037815dde8161

处理一段时间后会出现如图情况,按回车后进行本地的master(主分支)和 remote的master主分支的合并。

> Git push -u origin master

1464671526-8440-13zz20160302

执行到如图这样就代表本地文件夹和remote文件夹已经联系上了,打开文件夹可以看到一个README.md的项目描述文件,该文件是用于描述项目用,暂时可以不用管它。

1464671549-3833-14zz20160302

准备工作还差最后一步—建立你的sketch文件。这里为了方便演示,就用我之前在进行UI练习时进行到一半的稿件来演示。当然也可以直接将sketch文件复制到已经建立的 Git 文件夹或者将sketch文件复制到该文件夹。

1464671550-4071-15zz20160302

打开该sketch文件,这个时候这个文件还是属于无编制状态, Git 系统是没法管理到它的改变的,这个时候我们的主角 Git 插件就可以登场啦 —— 菜单栏-Plugins- Git -Add File to Git

1464671553-4877-16zz20160302

此时sketch下方会出现”File added to Git “就表示这个文件被追踪啦。

1464671552-8459-17zz20160302

现在我们进行第一次改动,试着改动artboard“新闻首页”的标签位置和字体:将标签移到了作者信息行末尾,将新闻标题的Lato-Light字体更改为Helvetica-Regular,不用手动按保存,sketch会自动保存。

1464671556-8552-18zz20160302

好了这是根据最新的设计潮流更改的,你决定保存一次,这个时候就要用到commit命令:Plugins- Git -Commit

1464671563-9918-19zz20160302

Sketch会弹出如图所示的对话框,commit to “master”,输入框里可以填写你对这次更改的描述,比如:客户需求1:更换字体为Helvetica,更换标签位置。一定要勾选“Generate files for pretty diffs”

这个生成diff差异文件可以说是这个插件和单纯用命令行最大的差别了:单纯的命令行操作 Git 需要你每次自己在teminal里输入比如 Git commit -m”客户需求1:更换字体为Helvetica,更换标签位置。”这样的命令,同时也需要你自己去导出示意图,非常麻烦,而这个commit命令可以很快完成这两步。

1464671584-3599-20zz20160302

commit 完成后就会出现下方这样的commit成功说明,如果有时候无法弹出就再次commit一次(一般不会出现,静候就好)。

有时候也会出现:no commit to submit意思的字样是sketch未来得及保存你的更改你就提交了commit,重新手动保存一下然后再commit就好。

1464671597-7509-21zz20160302

现在的commit完成就相当于生成了一个阶段性的存档,已经可以在本地使用 Git 回溯版本或者查看,不过为了团队协作、以及用上 Gitlab(或者 Github)系统的简洁的GUI操作界面进行对比我们需要将改动推送到远程服务器。

使用插件的push命令:Plugins- Git -Push

1464671599-4755-22zz20160302

然后sketch会卡顿一会儿,鼠标会变成风火轮旋转一会儿,具体时间视sketch文件的大小而定,文件越大持续的时间越长,此时就不要再进行其他操作了,如果sketch崩溃可能就要回到命令行去控制版本了。

不过有时候可能会跳出Failed..窗口,不用担心,其实commit已经提交到远程的master分支啦。后文会介绍解决这个问题。

接下来访问网页版 Gitlab查看现在项目的进度。

1464671605-9798-23zz20160302

在这里就可以看到现有的项目的commit了,每个artboard都有单独的跟踪,因此无论你修改了哪个arboard都可以看到版本更新,因为啥第一次commit因此没有对比照,我们再进行一次提交来使用对比功能。(步骤同上面完全相同)

1464671923-2272-24zz20160302

在本次修改中我删除了背景的遮罩、更改了标签颜色、添加了页面的分享功能,在commits界面可以看到新的一次提交:客户需求2

1464671616-7657-25zz20160302

打开本次commit之后就可以看到版本2:客户需求2 和客户需求1之前的对比了,在右上角的模式中,请选择SIDE-BY-SIDE,方便对比。

1464671622-5818-26zz20160302

在对比模式中, Gitlab同 Github一样提供了三种模式:2-up(左右对比),Swipe(从左至右拖动对比)以及Onion Skin(剥洋葱模式)

Swipe模式如图所示,便于对比版本前后的差异,如下图就可以看到现在对比线左右标签的颜色差异、缺失遮罩的画面不同,再往右拖动就可以看到分享菜单的有无对比。

1464671922-7368-27zz20160302

Onion skin模式就是从右往左的拖动,动态的进行对比,在之前的使用过程中觉得尤其对明暗的对比特别的有用。

1464671627-2442-28zz20160302

上面的范例已经简要说明了两次版本提交以及对比的使用方法,基本上覆盖了本次使用的 Git 插件的主要功能。如果个人单独使用,可以在每一步写上你从其他人(比如主管、前辈、用户)那边得到的反馈或者参考的项目链接,可以做到每一步改动都有理论的支撑而不是随意的更改。如果是团队使用那么 Git 的功能就更方便的发挥了,可以将团队中每一个人都添加到群组中,对更改发出各自的意见建议。

1464671631-2243-29zz20160302

branch功能和其他稍微高级一点的 Git 指令就暂时就不讲啦,之后有时间再更新,不过branch和master分支的切换对于团队开发或者自己进行多次不同风格的尝试的话会非常有用,可以独立进行多个分支的设计、通过自己或者团队审核通过后合并到master主分支形成最终的版本。

其他更加高阶的操作可以参照 Git 的标准操作流程来使用 附上 Gitlab flow以及 Github的flow,两者其实理念上是一样的

两者的差异可以参考阮一峰前辈的这篇对比文《 Git 工作流程》
如果有Sketch git插件的使用的问题可以加我的微信:804933158,或者给我写邮件 yuanchenhao1026@gmail.com

Sketch教程合集持续更新中:

投稿者:袁晨皓

原创文章,作者:ioued,如若转载,请注明出处:https://www.iamue.com/15191/

(0)
iouedioued
上一篇 2016-05-31 08:55
下一篇 2016-05-31 17:04

相关推荐

  • 浅谈微信应用交互设计

    微信应用相信大家都不陌生,比如前段时间风靡朋友圈的神经猫,就创造了三天过亿访问量的神话,开发一款好玩有趣的微信应用,通过微信朋友圈的自发传播,达到品牌和产品的有效推广,是当下很多企业都在尝试的,但事…

    2017-08-02
  • 【设计】UI设计、UE设计、交互设计分别是什么?

    这些概念在传统行业和传统工业中其实已经发展的很成熟,近几年随着互联网的发展又重新流行起来。UI即User Interface ,字面意思是用户界面,业界一般指的是界面视觉设计UE即User Experience,字面意思是用户体验,这个范围就很广了,不仅仅包含视觉与交互交互设计又称互动设计 ,是人工制品、环境和系统的行为,以及传达这种行为的外形元素的设计与定义。UE范围最大,他研究的对象是用户使用这个产品过程中所有的感受,比如听觉视觉触...

    2018-05-08
  • 实例解析「交互设计七大定律」在设计中的应用(下篇)

    交互设计之父阿兰·库珀说过这样一句话:“除非有更好的选择,否则就遵从标准”;在交互设计领域中,有很多被时间和前人验证过的设计法则,这些法则是从用户的行为逻辑中总结出来的,掌握这些法则能让我们迅速有效的完成自己的设计。上篇内容已经介绍了「交互设计七大定律」的前五个,接下来将把剩下两个定律为大家做个实例分析。六、复杂性守恒定律/泰思勒定律(Tesler’s Law )1、复杂度守恒定律/泰思勒定律(Tesler’s Law )简介:复杂度守...

    2018-03-19
  • 案例:交互设计七大定律分享

    一费茨定律(Fitts' Law)1、费茨定律(Fitts’ Law)简介费茨定律是由保罗·费茨(Paul M. Fitts)博士,在对人类操作过程中的运动特征、运动时间、运动范围和运动准确性进行研究之后提出的,时间是1954年;该定律被用来预测从任意一点到目标中心位置所需时间的数学模型,在人机交互(HCI)和设计领域的影响却最为广泛和深远。费茨定律指的是:使用指点设备到达一个目标的时间,与当前设备位置和目标位置的距离(D)和目标大小(...

    2018-02-28
  • 反应(Reaction):生活中并不是所有的事情都那么“赞”

    我在Facebook跟我所关心的朋友们分享各种各样的事情——从完成60天瑜伽练习的庆祝状态到悼念失亲之殇。从我的故事中也连接了一群相似的人,有相似的故事要分享。有时候我们只是想借助一个简单的方式去告诉分享者我们真的很喜欢他们的故事,或是当看到他们的生活发生挫折,简单地表达一下同情。

    2017-05-26
  • 交互设计师的60日计划之第二天

    此次分享的[button type="info" text="交互设计师的60日计划" url="https://www.iamue.com/tag/interaction-designers-of-60-days" open_new_tab="false"] 来自 Killa.G 让我们一起跟着学习和并学会做自己的总结与…

    交互专题 2015-08-20
  • 淘宝2017-提示信息的情感化设计

    作者:要白 明飒   开端:做一个有故事的 现如今,消费者对产品的需求从追求高性价比更多地转为高品质,虽然手机只是一个机器,但用户与产品之间当然是能有情感传递的,不然就只是一个冷冰冰的工具而已,能让用户在…

    交互专题 2017-08-07
  • sketch 44.1+汉化插件下载

    如果你喜欢UI设计如果你喜欢高效设计如果你喜欢简洁的设计最重要的,你得有个Macbook pro !Macbook pro!Macbook pro  !不要提什么macbook air,因为你是设计师,设计师,设计师。官网地址http://www.sketchcn.com/,可免费下载体验30天。  很值得购买的软件,只需要$99为什么选择 SketchSketch 是为图标设计和界面设计而生的。它是一个有着出色 UI 的一站式应用,所...

    2018-04-22
  • iOS 9人机界面指南(三):iOS 技术 (下)

    文章索引译者注:本 文译自苹果官方人机界面指南 iOS Human Interface Guidelines (2015年10 月21日),由腾讯ISUX设计师翻译整理,非发文者一人之作。译文首发于ISUX博客,如在阅读过程中发现错误与疏漏之处,欢迎不吝指出。后续章节会 陆续更新,敬请期待。

    2017-05-30
  • 极有可能被低估的三种有趣的网页设计趋势

    设计出不同凡响的网站是许多设计师一直追求的事情,所以大家着迷各种时尚的元素,漂亮的配色,流行的趋势,复古的样式,等等。经过时间验证的经典设计、固定的搭配是不错的选择,而逐步展露头角的新趋势,则能更好的满足这一需求。

    2017-05-26