搞定设计版本控制!一份超详细的 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-05-15
  • seeds对话未来丨李斌:重新定义用户体验

    对话未来丨seeds系列分享会seeds, 由蔚来原创打造,是一个分享有趣观点、新知与灵感的讲堂,它寓意着每一个思想的火花都像一颗种子,被灵感浇灌后,汇成大树。2015年3月seeds诞生,从一个面向蔚来全球员工的内部讲演平台,发展到不断吸引各行各业的主讲人,并且在蔚来App公开直播的产品。到目前为止,seeds 已举办了13场演讲。今年,seeds会走进我们各个城市的蔚来中心,成为常设活动。我们也欢迎各位用户成为seeds的主讲人。4...

    2018-05-03
  • UED设计年会系列活动在江苏省宿迁市成功举办!

    欢迎点击上方蓝字免费订阅!阅读本文前,请您先点击本文标题下面的蓝色字体“快宿迁”再点击“关注”,并点击“置顶公众号”,这样您就可以每天继续免费收到文章了。每天都有分享。完全是免费订阅,请放心关注!2018年1月19—21日,UED设计年会系列活动在江苏省宿迁市成功举办,共议如何在当下中国,以设计、文化、艺术的力量引领城乡发展。年会系列活动包含“设计·文化·艺术引领下的城市发展和乡村振兴”高峰论坛、“衲田杯”可持续设计国际竞赛颁奖盛典暨第...

    2018-02-03
  • 设计师保持画草图是个不错的习惯

    一名优秀的设计师的经验之谈。 我从不敢放眼将来长远的看过去若干年,也许正是这个原因才让自己对很多事情不那么在意。其实我是个很安心于能让自己安心的事物的人,只是这样的事物随着时间的推移而越来越少;自己所…

    2015-05-19
  • 美国设计师总结:2018年的用户体验设计趋势和方法

    这是由一位美国作者站在美国的视角写的文章。即便抛开个人因素不谈,国内外的发展进度并不完全同步。例如情感化反馈这一块也许国内稍稍落后一点、但是移动支付和AR却要快一些,有些方面即便步调差不多,举出的例子却不一样。不过看看别人的总结也挺有意思,至少可以了解一下国际风向。2017年即将结束,是时候向前展望,预测在接下来的十二个月里,信息体验设计会如何。我将在本文概述的,除了2017年里见证到的巨大的变化之外,还有值得关注的趋势,以确保能够赶于...

    2018-03-29
  • 资深交互设计师经常强调的「场景」到底是什么?

    编者按:资深设计师经常强调的「场景」是什么?今天@拉瓦像阿拉蕾 通过5个搜索的案例,带你认识场景的魅力。

    2017-08-29
  • 国内大公司的交互设计实习面试经验总结

    沈天宇 :看着拉钩、脉脉上关于互联网岗位的信息,找一个交互设计的岗位几乎要面对100个人的竞争。想想我面前站着100个人,我要赤手空拳的打败他们,这画面简直不敢想。所以一开始我完全不知道我到底能找到一个什么样的工作,大概有一种「大爷赏口饭吃」的姿态去找实习。毕竟,我们实验室也好几年没出过阿里的人了,我也感觉我没那么优秀。面对如此严峻的就业形势,恩,首先还是开始找实习吧。这是一个最坏的时代,(一点也不好。),而且也许以后会更坏。对于找工作...

    2018-02-01
  • 一个视觉交互设计失败的案例

    本文由PMCAFF 原创作者 臻龙 原创发布于pmcaff.com最近在做产品设计时,遇到了一个非常典型的设计失败案例。这个案例反应了一些老生常谈的问题,我觉得非常有意思。好看的设计未必好用我负责的是一款秀场类产品,近…

    2017-08-02
  • 善用Axure写PRD:产品逻辑的五种呈现方法

    每天一篇好文章,2018年第2期不管是APP、web网站还是pc客户端的软件,流程&页面&交互&逻辑始终是最重要的几环,分享一下我呈现逻辑的几种方法,大部分PM应该也采用过类似的方法。一、直接不写逻辑最开始根本没有写逻辑的概念,只是用交互事件加上基本的页面跳转。当技术童鞋来问的时候,口述给他。经常会被鄙视。二、直接写到页面里开始学乖了,把一些逻辑直接写到页面里。不过很快就发现了弊病,某些逻辑不应该呈现给用户,只能给前后端童鞋看。同时也造...

    2018-03-27
  • 从会计到交互设计,她用社会热点打动皇家艺术学院招生官!

    本科学的是会计研究生申请的却是交互设计零基础、跨专业却能在短短一年时间拿到5所顶尖艺术院校的offerQS世界艺术类大学排名第一的皇艺和享誉世界的英国伦艺都向她抛出了橄榄枝从西单骑摩拜到望京全程3个多小时收集了20多个单车乱堆积地点采访了数十位大爷和小朋友回家腿痛了整整一周只为做一个项目的调研成长的路上总是布满荆棘但坚持就是胜利杜娜/研究生/交互设计皇家艺术学院预科伦敦传媒学院格拉斯哥艺术学院金斯顿大学谢菲尔德哈勒姆大学杜娜offer(...

    2018-04-25