念叨 - 关于Sketch、Origami、Swift及Apple Watch

念叨 - 关于Sketch、Origami、Swift及Apple Watch

周末，清明，所谓弹簧式天气，夏日般的高温，高温之后的风，雨，乌云，尴尬的阳光，一屋子猫毛，Pearl Jam MTV Unplugged 1992，威士忌，扔在门外的Air Force 1，晚间21:55，凌波丽，Eddie Vedder正在绝望的嘶吼“We belong together,together”，目光神经质且坚毅着。

翻开朋友圈满眼都是精致的文艺的酒吧餐厅餐盘美食小清新民谣Live吧啦吧啦...just fuck off...

话说，这周没有看到像样的或是愿意做的文章，想想就自己念叨念叨好了。从来都只是在正式译文前念叨，这次搞大了；记得以前有些朋友评论说每篇开始的念叨属于信息噪音，尽快进入正文才好；也是个角度，不过抱歉今次怕是没正文了，都是念叨呢。我几乎把自己逗乐了。

当然念叨的也是正经东西居多，只是随性了吧，毕竟不是一板一眼的做译文或团队博客，脑子里没什么中心思想啊框架啊提纲一类，想哪说哪好了。谁知道会不会念叨上瘾以至于以后越来越多这样呢。谁知道。

Sketch

不知道为什么，看到这几个字母，想到那颗黄钻，总觉得有种舒服的感觉呼之欲出。

我自己约莫是从去年秋天才开始正经高频使用Sketch的，要自己搞些东西玩，所以连同UI也要自己一并做掉。多年来的习惯，有什么新东西的时候首先要花些时间找些靠谱的教程带一下，然后尽快到实践中摸索。说到靠谱的Sketch教程，我当时就从了Meng To，应该有不少朋友知道，一直致力于在设计圈子里推广Sketch+Xcode“前端设计开发能力”的牛人，从前在他的个人网站还有Medium发过一些很有影响力的文章教程，后来开始做designcode.io，兜售自己的教程。他的东西始终以实战为基础，内容涵盖Sketch、Xcode(Storyboard)以及后面更新的Swift，从设计师的角度讲解怎样综合利用最恰当的工具进行iOS前端设计开发工作 - 如今市面上有不少个人或小团队出品的设计开发教程，但目前为止只有Meng To的让我愿意花50美金来买个账。

这套教程包括文字、视频和相关的项目文件，目前仍在保持更新；恕不共享，只做引介。当时跟着其中Sketch一章简单的走了一遍，然后开始做自己的东西，且做且学；话说回来，Sketch本就没什么学习曲线，从3.0开始的操作也更遵循Mac OS典型应用的模式，上手不会有什么难度；细节当中的一些技巧，包括一些针对常见需求的经典插件，倒是需要看看相关的资讯多做了解，并在实战中充分运用以养成习惯。我这边有做过相关的译文，有需要的朋友可以进去看看有没对自己有价值的信息：

其中的“Sketch 3视频教程专辑”里面放了19个视频教程，由LevelUpTuts出品，以此作为入门教程也是完全可以的。

此外，上面的文章当中也有介绍到Sketch Toolbox；在这里再次建议大家在尝试其他插件之前先装好这东西，然后通过它统一下载与管理。

其实我个人来说没有很强烈的欲望去花费口舌推广Sketch - 使用正确的工具完成特定的任务，这是再简单不过的道理，说太多反而没劲了 - 我宁愿相信很多有能力有条件使用Sketch却仍然抱着怪兽一般的Photoshop去做界面的设计师其实只是出于习惯，并且尚未了解新工具的“正确”之处；当然另外一方面还有一直以来的项目文件难以迁移的问题，只是，该做的正确的事，怎样都是尽快做起来的好。作为交互，也不想过多的在这方面指指点点了。

Origami

去年Facebook团队刚刚抛出这东西时试了一下，摸不着头绪，加之一时没有实战场景，放弃了。

前些日子看到Origami 2.0发布，尤其是提供iPhone端的Live预览以及与Sketch协作的功能，眼前一亮，正好同事做了内部主题分享，更是忍不住再去试。QC啊Origami啊一路下载安装，不记得1.0时官方有没提供过那些教程和范例，只是这次的相关内容还是够丰盛的，包括5个教学视频，若干范例文件以及文档，个人感觉供入门是足够了。

花了点时间跟着前4个视频走了一遍，内容大致包括：点击照片进行缩放并显示或隐藏图片信息，典型的table列表界面滚屏及滚屏过程中导航栏的缩放，点击table中的内容进入详情页，唤出编辑内容的模态界面及table内容更新，这些。跟着做下来感觉不大容易，前3个还好，到了第4个已经开始没有方向感了，大group套小group，满屏幕都是线，几近昏厥。各位有兴趣可以看看官方的几个视频，看过前面一两个基本就能对这个工具的能力以及使用方式产生认知了。

看上去，至少对我个人来说，使用Origami来打造相对完整(app级)的原型仍然不大现实；不过话说回来，根据我的理解，Origami，或是说QC，本质也不是用来做产品原型的 - 对我们而言，它最适于演示局部的转场及动画效果，并能够再进一步的生成相关的代码，相当于在设计师和开发人员之间架起一座桥梁，帮助设计师将难以用文字描述的、难以通过Keynote一类“低定制化”原型工具完美展示出来的那些效果精准的传达给开发人员。大体是这样。

此外还有一个严重的问题，至少在我这台2012年的MacBook Pro上，Origami跑上几分钟就会导致风扇猛转，底壳烫手，此前还从没有过这样的情况，蛮吓人的，这还只是做了两个界面之间的一些简单的跳转；应该还是由QC的本质所决定的吧，图形方面的工具，也许只有垃圾桶才能驾驭？

所以其实到现在我也从没找到过一款所谓“完美”的原型工具，例如我希望这个工具可以和Sketch协作，提供原生app的交互方式，在移动端有相应的同步预览app，不依托于Web，能够提供原生的动效并可以进行定制，可以体现功能逻辑，对设计师要友好(学习成本低，易于操作，在使用模式上贴近于我们常用的设计工具)，等等。说起来，Origami还是挺接近的，但是如前所述，在学习成本和实现难度上，以及对硬件要求等方面的问题，使我爱不起来；如今很多Web app其实不错诶，只是一方面我个人始终无法信任基于Web的专业工具，一方面时不时需要翻个墙一类也是蛮虐的。

说来说去，根据不同的需求，Sketch、Axure和Keynote这几位还是实际工作中最顺手最快捷的帮手；最不行了，还有嘴、手和纸笔，以及最重要的 - 愿意认真理解设计意图并配合设计师快速调试效果的开发同学。

Swift

其实是接着上面的话题。我有时还是会问自己，在身边没有开发同学配合，而自己需要产出产品级别的高保真原型的时候，我该怎么做？我缺少什么工具，或是说缺少对什么工具的使用能力？归根到底还是开发工具，即Xcode与入门级别的代码能力。说到这其实再次解释了为什么我买Meng To的账，在我眼里他至少就是这样一个同时拥有设计及前端级别iOS开发能力的设计师，所以他从自己的角度出发而写出的教程也是我愿意follow的。

对于前文当中提到的那些关于原型工具的理想化需求，Xcode这样的原生开发工具确实难以做到学习成本低廉，要实现设备预览也要先掏99美金(每年)给苹果才可以，但在其他方面，特别是“原生交互方式”、“原生动效且可定制”、“体现功能逻辑”等方面，显然无可挑剔(本来就是做app的工具)，所以一旦这些方面的需求优先级较高时，Xcode怕是最合适的选择了。对于Storyboard和Objective-C或Swift，达到一定程度的实战能力，那么制作一套完整的高保真交互原型所需要的成本其实并没想象的那么高。

当然关键问题就在于怎样达到所谓“一定程度的实战能力”。了解我的朋友，或是这个博客的老读者们可能都知道其实这些年我没少花时间在iOS开发的学习上...只是太过零散，这一锤子那一棒子，几乎没有真正投入到实际案例当中去做，到如今也只是有的没的对一些基础知识有所了解罢了。所幸自己还没放弃，慢慢的也在调整思路 - 从前希望自己能达到做出app的程度，目标制定的太过高远怕是难以有动力去真的保持前行；如今以制作原型为追求，不脱离设计师的角色，求师于有相同思路和目标的设计师 - 我想这至少也算是进步。

说到Swift，其实到写这些字的时候为止我也只学了两天...所以从技术的角度也说不出什么所以然；简单介绍几个不错的学习资源，包括：

Apple Watch

关于Watch倒没打算念叨什么，我估摸着在正式上手之前，关于这个话题自己能说的都已经在上周那篇“Apple Watch平台认知与产品设计”里面说完了，从新设备与现有平台之间的共生关系，到有可能的产品模式，以及相关的设计框架，算是给自己理理思绪，自然也推荐给还没读过的朋友；等不及快点把这东西戴到腕上。

这里要补充一点信息，在那篇文中提到“Apple官方为我们准备了一整套Glance布局模板用来参考”，有朋友问到资源在哪里可以下载，其实就在Apple开发者站点的WatchKit首页，下面有“Apple Watch Design Resources”，不过需要99美金的付费开发账户才有下载权限，所以有需求的朋友不妨拜托团队里的开发人员下载一套。

资源包当中除了Glance模板以外还有不少货，特别是专门提供了一套Sketch模板：

哦另外苹果官网刚刚上新了一些视频，目前有四段，分别是“入门介绍”、“信息”、“表盘”和“Digital Touch”，关于各方面功能有不少实际演示；另外还有6段应该会很快放出(10号之前的吧)，包括“电话”、“Siri”，“地图”、“音乐”等等。

约莫就这样了，谁知道下次念叨点什么；各位周末愉快。