搞定设计版本控制!一份超详细的 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

相关推荐

  • 报名最后12小时|6周快速玩转axure,同时提升产品和交互

    众所周知,Axure是产品经理必备的工作软件。薪资越高的产品经理(比如月薪18k+以上的产品经理),不仅能高效玩Axure,更能用Axure体现产品思维。“起点学院&腾讯课堂”联合打造6周Axure实战班,第7期报名最后12小时!从第1期到现在,2000多位同学学习成长,好评如潮。来看看同学们的成长。下图是0基础同学,学习后制作的“冲顶大会”高保真原型(福利资料:添加班主任Sara为好友,可获取“冲顶大会”原型文件。Sara微信见文末)...

    2018-04-11
  • 动起来才好玩——创意交互设计景观

    设计是靠亮点征服人,吸引眼球,大部分方案构思雷同,建成后风格水平都差不多,如何让场地更加吸引人而脱颖而出,这就需要在新、奇上下功夫。电子梦幻天幕世贸天阶最著名的“全北京向上看”的“超豪华LED天幕”,这座天幕将为整条商业街带来富于梦幻色彩和时尚品位的声光组合,成为一座吸引人潮的世界级奇观。建成之后,人们在这里可以欣赏缤纷悦目的日夜景观,感受现代科技带来的富于梦幻色彩和时尚品位的声光艺术。而且游客可以把想说的话发送短信到平台号码,天幕上就...

    2018-02-03
  • 译文|为未来的SaaS应用,提供新的交互及视觉设计

    本文介绍给大家一些基本需要关注的点,以及我们设计团队通过在相当长的时间内的试验和学习,如何为在线办公应用Zoho设计更好的用户体验?

    2017-05-20
  • 人鸡交互 VS 人机交互

    交互就是一名翻译官,一个机器和人类的翻译官。

    2017-05-06
  • 案例分析:聊聊扁平化设计的六点优势

    著名的艺术家 Edgar Degas 曾经说过,艺术并不是你所看到的东西,而是你让别人看到所看到的东西。平面设计能够通过调整形状、阴影、字体的笔触、字母间距来调整观看者的情绪和感受,在这一点上,它和艺术是共通的。作为目前设计的大趋势,扁平化设计,无疑也具备着同样的特征。

    2017-05-10
  • 车载系统交互设计畅想Part1:仪表数据展示

    智能车载系统的概念变得越来越火热,智能驾驶的理念也越来越普及。现阶段,国内外各大互联网巨头都在联合传统汽车企业一起探索智能汽车的设计研发。可以预见的是,在不久的将来,驾驶员在车内将更加自由,就像智能手机一样,智能汽车将为驾驶员带来前所未有的丰富体验。本文作者Adhithya,通过一系列的访谈调研,探索现阶段驾驶员在驾驶过程中的行为方式,并依此为未来的智能车载系统的交互方式设计提供了科学的思路。“我知道在手动挡车上转速表的作用,但当我换了自动挡后我就很少去看它了“
    ——被采访人1
    ”我并没有真正的去关注过它,对我来说,这部分信息没有什么意义。“
    ——-被采访人2
    ”可能在爬坡的路面上我会看一下转速表了解一下车况,但当我在城市里平坦的路况行驶时,我很少会看它。“
    ——-被采访人3

    2017-05-01
  • 7个实用规则,让你的设计更加简单直观

    简单直观的设计并不一定非得是极简的,它同样可以是丰富而又有趣的。

    2017-05-09
  • 马化腾:用户体验,比一切事情都大

    企业快速成长中,第一个大问题就是战略。/演讲|马化腾来源|笔记侠(ID:Notesman)我非常希望也很高兴在这个平等氛围中,以创业者的身份跟大家进行这样一场交流。在座的创业者,很多拿到A轮、B轮,有些在走向C轮。企业快速成长中,第一个大问题就是战略。创业最难的就是选准创业的点,你会面对很多机会、很多诱惑,需要不断做出选择。自腾讯初创开始的六七年,是我们变化最快的时期,我想把这个时期包括战略选择等方面的经验跟大家分享。一、关注痛点你出来...

    2018-02-16
  • 手机端官网设计:适配还是不适配,这是个问题

    Pc端使用平台:手机端使用平台:红米2增强版 自带浏览器 MIUI6.6.2.0(KHJCNCF)|稳定版

    2017-05-31
  • 从用户体验的角度谈多数RPG战斗系统中的缺陷

    在为RPG创建战斗系统时,多数开发者首先会考虑到这个问题:“游戏中的各个角色会有哪些优势和弱点”。四大元素系统基本的战斗系统之一是,带有水、火、风、土的“四大元素系统”——水比火厉害,火比风厉害等等。这一系统适用于元素不多的游戏,因为玩家几乎立刻就会明白哪些元素能对敌人造成更大伤害。在现实生活中,不同元素的相互作用是众所周知的,因此开发者可以在不提供大量教程的情况下使用这些现实生活中的元素。但如果将这个系统进行延伸的话,就会导致交叉优势...

    2018-04-17