分享 我是如何进行『创作』的

ichord · 2014年10月21日 · 最后由 wikimo 回复于 2014年10月23日 · 3525 次阅读

我是如何进行『创作』的

前几天在对自己进行反省的时候发现了一件有趣的事情,就是我自己是如何进行『创作』的。 打双引好是因为我认为我这其实不是真正的创作,但确实是做出了一个新东西。

这基本是我制作了一个 Sketch 插件,sketch-divine-proportions,的过程。 然后再想想时,其实这跟我当时制作 At.js 套路基本上是一样的。

PS. 内容略长....

动心

首先,要找到一个目标,或者说你想要『创作』的东西。我的选择参考如下,按权重排序:

  • 还没有人实现
  • 有意思
  • 很有用

这其实是我回顾总结出来的自己的选择策略,但事实上就是那一瞬间让我感到兴奋的东西,根本不会一条一条去考虑。
这个心动一刻会让我克服『创作』过程中遇到的困难并坚持下去。

关于 还没有人实现 这条,在 刚刚兴起 的事物里比较容易找到。

因为用 Sketch 画了一些东西后,觉得它很赞,一直想要为它能逆袭 Photoshop 成功而做些贡献。
有一天在 ui.cn 上看到翻译过来的介绍时,我想着这么酷的东西 Sketch 不能没有! 当然了还没有人实现,毕竟多是设计师。

Steal

嗯,我不想引用什么名言,比如乔布斯说的什么。主要就是 steal 这些:

  • 创意
  • 想法
  • 逻辑

这个插件基本上是个平台移植,逻辑可以说是『临摹』过来的。 其实如果已经有人做得好了的话,我会选择 Copy & Paste,我也就不想去做了。

当我看到是老外做到插件的时候,我就预感到了有可能项目会托管在 github 上]。 但 ui.cn 上的那片介绍没有给出原作者的信息,当时在原文地址里也没找着。 于是我直接去 google 了一下,果然在 github 上找到它了。

它是开源的,我能看到插件的实现逻辑。 它用的是一种后缀为 .jsx 的文件,当时没太在意那是什么脚本语言,反正大概能看懂是什么意思就行了。 后来好奇才去了解了一下 .jsx 是什么东西,语法上基本就是 javascript。 我去查找了 Photoshop 的插件怎么写,里面用到的方法是什么意思。找不到,这类资料太少了。 当时看完也只是知道了大概是怎么画线而已,是个非常模糊的东西。 而且,Sketch 插件要如何实现或者能不能实现类似的操作我是完全不知道的,一片空白。 但至少有了个参照的东西,和一些有用的信息。所以不急着完全看懂,也看不懂,先开始尝试在 Sketch 上去实现。

基本在整个『创作』的过程中,我会反复的回来 steal 这个项目的东西。

学习

有了大概的方向和想法后,接着就是去学习并尝试掌握需要的东西。一般来说,这个是整个『创作』过程中最耗时间的一环。 一般情况下你可以先去 阅读相关书本 或者比较 好的教程 入门。但是当这些都没有话,只有去寻找这类资源:

  • 查阅文档
  • 阅读别人代码

嗯,第二条是重要和有效的做法。你不会是第一个去做一类事情的人,总会有先驱。如果你是第一人,那恭喜你。

编写 Sketch plugin 没有教程和相关文章,更别说书本了。但有官方的文档, Sketch 官方的文档写的很简陋,开头简单的介绍了下「插件系统」所使用的语言 ( CocoaScript ),然后举了一个历遍 Selection 的例子。剩下的就非常简单的介绍了一些主要/常用类,基本就只是列出来而已,没有例子。带着前面的想法和问题,我过了一遍文档后只是对几个主要的类有个初步的认识而已。

但是,文档的最后一页给出了更多的线索。别人写的插件,还有可以将 Sketch 所有类的 头文件 全都导出来的工具,里面没有任何注释。

首先当然是去阅读现有的插件,看看先驱们是怎么做的,里面可以看到大量实用的代码和信息。 挑选一些合适的插件项目尽量细读,挑选意味着要去将列出来的插件的代码过一遍,知道里面有没有和你要解决的问题相符合,或者看上去有关系的内容。当然不是要看所有,可以根据项目名字的相关性过滤掉一些。

在翻阅了4,5 个项目后,我首先选了 sketch-measures 进行细读。注意, 不需要一次就读完和看懂 ,因为其实很多内容对我的『创作』暂时是没有什么用的。在 sketch-measures 这个项目里,我知道了怎么编写和组织一个 Sketch plugin ,还有几个主要的类的用法和关系。更多的是文档里面没有的东西,比如如何添加图层、画矩形、创建图层组和如何使用 CocoaScript。而其它的如何测量图层具体,如何添加颜色,还有一些工具方法我也只是过过眼而已。

CocoaScript 说是用的 javascript 的语法,但基本是和 Objective-C 的混合。 有些插件的代码看上去就不伦不类,一会 js, 一会 oc。而我则尽量使用 js 的语法,这样会让代码更容易阅读一些,但这也耗费了我不少时间。

然后,就是 尝试使用 学到的知识,而这个学习的过程也是需要 反复进行的

实践

这是学习的一部分,但是在没有书本,教程的情况下,应该拿出来单独说说。这部分才是真正耗时的环节。我总结的是两个方法:

  • 猜测
  • 实验

先回到我要『创作』的内容:画出各种黄静比例曲线。我先从画出一个黄金比例的矩形开始。 如何使用 Cocoascript 在 Sketch 里画出一个矩形?为了解决这个问题我把前面学到的知识全都挖了一遍。

如何画出一个矩形?如何设定宽高?如何给边框(Border) 加上样式?如何填充颜色? 我在 measures 项目里找到了相关代码,官方文档没有。当然了,我没有复制粘贴,我必须理解代码,这些依然是基础知识。所以我又翻阅了一边官方文档,去熟悉那些使用到的类和方法的用途和关系。

另外一个需要熟悉的是,CocoaScript 的使用。刚开始它使我很困惑,而其它插件都混用了很多 OC 语法。 我坚持全都使用 javascript 的语法,所以我反复调整执行代码查看结果去熟悉它。最后一节我会举两个代码的例子。 折腾了 CocoaScript 并画出了第一个矩形后,之前学习到的东西都掌握了。

接着我要先画出一条曲线。这个既无文档,又无『先驱』。 而 Sketch 这个名字在这个时候是个悲剧,google 都帮不到了我,只能靠自己了。 我只能导出头文件自己找了,里面有近百个文件。。。

那么,我们来开始 谜游戏,在这堆头文件里找到想要的解决方法。 通过阅读官方文档,可以知道类的命名规则和一点点的『设计套路』。画出第一个矩形的过程对我进行猜测非常有帮助,因为我已经熟悉了。

先根据我要要的东西 猜类名 ,比如 MSCurve 之类的。然后是 猜函数名 ,感觉猜对了就猜 调用方法 开始进行实验。实验就是执行代码,看看结果是否符合,失败后就继续找。 因为缺乏搜索用的关键字,我开始在猜好类之后查阅整个类的函数列表,想在其中找到蛛丝马迹以获得新的关键字。 大部分实验都是不断的在报错,比如参数类型不对、找不到方法、参数给的类不对。虽然 OC 是静态语言,但是很多都用的是 id 类型,也就是不知道指向哪里的指针... 只能通过参数名猜相关的类。 唯一成功的画出来确实两个点,直线都不是。

后来我找到了一条重要的线索,先是找到了 MSBezierPath , BezierPath 是什么东西?我不知道… 没有曲线的意思阿。原来它是一种绘制曲线的方法的名字,或者就是一种曲线,其实是个人名,具体请看 wikipedia。 另一个是 NSBezierPathNS 开头的类是 Cocoa Framework 类名的统一前缀,是苹果官方的类!苹果文档对 NSBezierPath 做了详细的说明,感觉突然回到了文明世界。

即使我知道了 NSBezierPath 怎么使用,我还是不知道怎么把它画到 Sketch 的画板上,只能回去继续猜测了。 在尝试了很久之后依然没有找到方法,但是觉得很靠近了。 于是我停下来了,我想着去 github 碰碰运气,直接搜索我之前找到的一个新类名 BCBezierPath 。 我在 AEFlowchart 这个 sketch plugin 项目里找到了如何将曲线画到画板上的方法了。其实关键就差个 MSShapeGroup 类, 这一举解决了我想要实现的一个效果:合并图层,这个很重要。

msPath = BCBezierPath.bezierPathWithNSBezierPath(bzPath)
layer = MSShapeGroup.shapeWithBezierPath(msPath)
// …
parentLayer.addLayer(layer)

当成功画出第一条曲线后,欢呼吧!这时候可以开始将那个 PS 神器搬过来了。 也就是说真正的工作才刚刚开始,前面都是前奏,呵呵! 曲线的绘制逻辑基本上跟那个 PS 神器里的一样,花些时间『临摹』下来就可以了。不过临摹的过程中我顺便去了解了下各种曲线,还有 PS 里使用到的一些常量。

对了,经过这一战役,我发现一个好的类名或者函数名是非常重要的! 后来发现原来我很不幸地忽略了一些社区,原来有个 sketch 插件开发者的邮件列表,直接去那里问应该会快很多,不用走那么多弯路。

交互

在一阵混乱过后,我掌握了『创作』所需要的一切。接下来就是要让这个混乱的世界变得有条理,和更好。 在前面几个阶段里,因为我是在不断做 实践 的,如何使用的问题就突出了。 基本上我是想做到:

  • 易于使用
  • 整洁的代码

因为画出来的曲线是分段不连贯的,我需要把它们合并成 单个图层 。 因为是一条曲线,非常难被选中。我需要用图层组将它包住,然后就可以 轻松的选中整个图形 了,而且于是『透明』的。 图层组(容器)的大小需要根据曲线大小调整。 需要 锁定比例 ,这样调整大小才不会让图形变形。 还有,根据选中图片或者画布 画出相应大小的曲线

简单的说就是:动态生成,容易操作,可自定义(颜色,粗细,大小)。

另外一个就是整理代码和重构,用更好的实现方法。前面漂亮,后面也要漂亮,其实都是要给人看的。这就是为什么我要坚持尽可能全都使用 javascript 语法的原因:容易阅读。

当这一切完成后,『创作』基本上是完成了三分之二。这个想要给人用的,需要让别人知道和使用,然后『创作』才算完成。

包装

所谓包装就是让你的『创作』显得逼格很高。我从这几方面入手:

  • 『像样』的项目
  • Logo
  • 动画操作演示

Github 是个首选的项目托管平台,原因是什么就不多说了。现在很多图形类的资源都也放在上面了,虽然虽然不如技术类的,但是这个平台给人可靠的感觉。凡是在上面找到的项目给人感觉都是挺靠谱的甚至是优秀的,就好像 Stackflow 找问题一样。 最基本的,加上 README 文件介绍安装和使用方法后放到 Github 上。 容易阅读的代码也对一个好项目是重要的,所以就如我前面提到的一样,要统一使用 js 语法使其更容易阅读。 项目主页对于一个『像样』的项目的重要性我就不多说了。我直接使用了 github pages(就是 README 的内容), 并顺便加上了 google analytics。当然最好就是能自己设计一个项目首页,但是我知道这个又是一个费时间的工作,权衡之下还是算了而且当时也急着发布出去。

对于 Logo, 我发现很多比较好的技术类开源项目都会附上漂亮的 Logo, 比如 Devise, AFNetworking 和我上面提到的 sketch-measures 项目等等。也许就是因为 sketch-measures 有个漂亮的 Logo 我才选择做精读的学习项目。 一个有 Logo 和没有 Logo 的项目比较起来,逼格会差很远。如果 Logo 越好看,那项目给人的感觉自然就会更好,图给人的感觉会亲近很多。想研究 Logo 的请看设计类书籍。 所以我也给项目加上了一个 Logo ,虽然没有太用心设计,但一眼能看出项目是做什么的就好了。

动画操作演示,复杂点的可以使用视频。但是我觉得要动用视频的去做演示都是比较复杂的交互了,一般一个剪短的 gif 动画图片演示完最好。 这个的作用就好比 Logo,写 500 字的说明文档还不如一个小动画,而且是瞬间国际化,没有语言障碍。 这个我当时没有给项目用上,而是用了三行字。当时看着就很不舒服了,但是就偷了懒。 后来在一个新项目 simditor-dropzone 里我就用上了 gif 做演示,看上去好太多了。

推广

包装好后,就要进行推广。让更多人知道,这个比较简单,我做了这两个事情:

  • 教程 (ui.cn)
  • 各个相关社区发布。

因为这个工具的定位是 ui 设计类的,所以要找相关社区去发文章。工具类的自然是用使用教程了。 因为我 steal 的那个 PS 神器实在 ui.cn 上发现的,所以先在上面发了。然后在那个帖子的回复里贴上我发的教程和介绍的连接,因为那个帖子被推荐到首页了了, 去沾点光。

另外一个上去就是 Sketch 的各类国内社区发布在 ui.cn 的文章,国外社区就直接上 github 项目和简单的介绍。 国内的我去了 v2ex.com, sketchcn.com, 还有意外的发到了 rubychina 社区。 国外的我在 designcode.io Facebook 群组里、Google+ 的Sketch+ 社区、还有 sketchresources.com 上发布了 github 地址和介绍。后来又去了 Twitter 上 tweet 了一下。

这个时候 Logo 就起了大作用了。另外放在 Github 上的好处也凸显出来, 因为在 Google+、Facebook 和 Twitter 上发布 github 的链接都会自动生成项目简介卡。

我这里要特别提一下两个地方:

sketchresources.com 是一个 sketch 的免费资源站,发布插件要审核的。这个网站的流量相对来说应该是很高的,基本使用 sketch 的人都会去,因为 sketch 的资源相对来说还非常少,大部分应该都集中在这里。

另一个是 designcode.io,这是一个教设计师写 APP 的书,主要工具就是使用 sketch。我自己认为它的读者水平应该都是不错的。另外,作者每周会收集一些优秀的 sketch 和 ios 的资源然后给读者发周报。按照作者说的,购买书本的读者已经超过了 6000 。结果就是,我的这个工具被作者收录在 designcode.io/learn 里并发了周报,也就是说 6000 个学习/使用 sketch 的设计师会看到我这个插件。

而在 google analytics 里记录的浏览记录中有一个陌生地址,占了很多的流量。 blog.templatemonster.com 里面对我这个工具的介绍是

Here’s a one of the best free design Sketch plugins

呵呵呵呵呵呵.... 我刚又去看了下,50% 来自 sketchresources.com 。

跟踪

发布后我会紧紧地盯着看看效果如何,其实这是很自然的事情,因为我很关心我做出来的东西是否和预期一样有用,并从中获得成就感和喜悦。 我现在时不时还会去看下这个工具的情况。 在这个过程中也能发现到不少有意思的东西,然后我就产生了写这篇分享的念头。

然后

以上就是我『创作』这个 sketch-divine-proportions 工具的过程。完成后就是满满的满足感,有意思又好玩。自己翻代码寻求解决方法的那段时间最困难,常常进入死胡同而且会钻牛角尖。最后还是在 github 上找到了解决方法,github 实在是太赞了。

虽然是个小小的工具项目经验,但是我觉得挺有意思的。希望这个分享对大家有用。 以上愚见请笑纳。:)

其它

这里举两个关于 CocoaScript 中,oc 和 js 对应的语法例子。

一般的调用:

oc:

[[layer frame] setHeight: 200]
[[layer frame] setWidth: 200]

js:

layer.frame().height = 200
layer.frame().width = 200

多参数函数:

这个也是我在调试插件的时候发现的。搜索过如何对应,但是没有搜到。

oc:

[MSColor colorWithHex:"979797" alpha:1.0]

js:

MSColor.colorWithHex_alpha(“979797”, 1.0)

共收到 10 条回复

妈蛋,看死我了

认真阅读完~ 果然也是少有的成就驱动型选手:)

这种直角引号不好看

我是如何进行『创作』的

大家都喜欢用这种

我是如何进行「创作」的

长文,看了好久,感觉好有趣好给力! :plus1:

找到一个目标很重要啊

#3楼 @xiaoronglv 问,也是。但是『』 是双引号,「」是单引号。我还是改回简体版的好了。

#1楼 @michalyang 😄 其实如果我看到那么长的,基本不怎么看。

#8楼 @ichord 喵了个咪,我不辛苦,求再来一篇! 😄

非常棒,值得学习

需要 登录 后方可回复, 如果你还没有账号请点击这里 注册