从一到五:一个Mac OS X应用从概念到上线的全过程

美丽的Flume应用开发者的故事,期望能给正在开发Mac应用的大家带来帮助

本文由 @刷微博的蒜瓣儿 翻译自 stories.uplabs.io

Image

在iOSUp,我们总是喜欢深度挖掘网站和应用开发背后的故事。它们如何被提出,如何开始,如何完成,以及上述过程中的所有故事。在设计中,哪怕是最微小的细节,也会有着不为人知的故事,我们要发掘出这一切。因此,我们采访了开发了Flume(一个优秀的Mac应用)的两位小伙。Flume能在桌面上使用Instagram的功能。

简介

Rafif Yalda和Peter Amende在柏林开发了Flume。

Image

Rafif有点像一个世界公民,充满好奇心(问题:究竟是好奇心让他环游了世界,还是环游世界让他变得好奇呢?)。他来自伊拉克。他环游过世界。他还是一位先驱。「我一直对计算机感兴趣,」他说,「我曾经为杂志写过程序,那个时候我也不过六七岁吧。我在1995年第一次接触网络之后,它就一直吸引着我。我最终取得了软件工程学位,从此之后成为一名专业的程序员。」最好的学习场所?「能接触到成功产品的创造过程,即使是一个小团队,有时只有我和一个设计师。」

Image

Peter是一位高级产品设计师,来自德国。他曾有过一段有趣的旅行,向我们证明了机智的人不一定只有企业家。「我在德国的时候,尝试在任何地方学习视觉设计,但都被拒绝了。自学了建站之后,我身无分文的去了柏林。我依旧想要学习,不过还是找了一份工作作为起步,几年内换了好几份工作,也做了很多的项目。在这之后,我已经可以掌握整个项目从开发到完成的整个过程,但我现在只做有趣的项目。」

接下来,让我们探索Peter和Rafif创造Flume背后的故事。

1.创意

iOSUp:你在Instagram上发了很多美丽的照片。你是怎么想到开发Flume的呢?那个时候有可供替代的产品吗?

Rafif:谢谢!开发Flume其实经历了很长时间,第一次提出这个想法可能是在2013年年中吧。我旅行过很多地方。在旅行的时候,我每天都会拍很多照片上传到Instagram上,回复照片的评论,然后寻找新的目的地。当我回来工作的时候(坐在桌子前),我发现我不得不切换到手机来更新Instagram上的状态,这让我觉得无比麻烦。当时有一个软件叫做「iPhoto for Instagram」可以用,但是它的功能并不完善,你还是不得不把注意力从你手头的事情上转移开来关注一下Instagram。

除此之外,我在手机上用VSCO Cam编辑照片,他们的图片库视图非常棒。我用的另一个Instagram辅助软件,Carousel,让我有了开发一个好看的应用程序的想法,让人们专注于照片内容的本身,免受外界打扰。

2.浏览器插件

iOSUp:不过,你首先做的是浏览器的插件——为什么你一开始开发了一个插件而不是直接开发一个应用程序呢?

Rafif:在发布Flume New Tab这个插件的时候,Flume for Mac其实已经完成了差不多75%。出于市场的需要,在发布Mac版本之前要有必要的宣传,让人们知道我需要一些时间来完成这个应用程序。同时,也能测试人们对这个产品感兴趣的程度。为Safari开发标签插件是前无古人的(我不确定现在是否有了后来者),但这在Chrome是很常见的。因此,我把它看做一个挑战——我花了整整一个周末来尝试它能否成功。当我发现这可行的时候,我就搁置了Mac版本的开发,全力投入到插件的开发中去了。而将插件移植到Chrome只花了我四个小时!

Image

随之而来的想法是,如果当你点击链接的时候已经安装了Mac APP,这个插件会呼起它。这是在用户忘记软件时,让他们重新用起APP来的一个好点子。

网站(和不久上线的订阅功能)和插件同时上线。我当时被用户的反映震惊了。一天之内,我们就收到了超过2000的订阅,被The Next Web推到首页,在Product Hunt上收到超过400的赞后登顶了。

iOSUp:这一切都是你一个人完成的吗?你用过什么特殊的框架吗?

Rafif:所有的编码工作都是由我完成的,当然也使用了很多第三方的开源代码,这些我都在软件的版权中申明了。当时Swift还没出现,所以我是用Objective-C写完这个程序的。我完成的第一个部分是API和数据库交流层。Paw和Base帮了我很大忙。

Image

我当时(现在也是)还用了TwUI framework。当时做一个导航层,和一个好看的下拉刷新界面真的很难。现在也还是,不过已经好多了。

TwUI已经很久没有维护过,我根据自己的需求为这个框架打了很多补丁。也许将来我会放弃它,重写很多内容,但是使用TwUI为加速当时的开发进度贡献很大,我不后悔用了它。

iOSUp:这个程序是有一个后台功能,还是通过OAuth协议直接和Instagram直接通讯呢?

Rafif:所以的通讯都是直接通过Instagram处理的,不过在登陆网站的时候,使用了OAuth协议的一个回调函数。

3.Mac程序开发

iOSUp:这个有着好看界面又有着许多实用功能的软件已经在Mac应用商店上线了。你能说说,如何把一个有创意的想法成为现实的过程吗?

Rafif:谢谢!我第一次提交Flume是在2014年1月4号。我用晚上和空余时间断断续续花了一整年来完成它。工作和旅行的时候,我觉得我没有给它足够的重视。2014年底,我通过SteamCloud认识了Phillip Brechler和Peter Amende。我是SoundCloud的重度用户,但是他们的网站实在是太慢了。我联系到了Peter,后来我们就在一起设计了。

1-mja7MXCHJyzhautsz5xSTA.png

我们一起改善原有的「模型」。他从那个时候开始处理设计,最终我们改良了它。在Peter加入之前,Flume的设计只停留在我的脑子里,我从未把它们放到Sketch或者Photoshop中实现。Peter来的正是时候,如我所说,实现了这些设计。

我从来没有独立的完成过一个原型,不过在很早的时候,我用HockeyApp在我们之间发布Beta版本。一般来说,屏幕录像就能让他知道设计的UI元素看起来如何,或者我们讨论的功能怎么样。

我们远程处理了所有事情,我们无法当面讨论设计或者功能。Screeny,iMessage和Dropbox给我们带来很多帮助。当然还有Wunderlist.。

1-6v2WA4hHsXUm3T4QaZPcoQ.gif

早期,我说服Peter把他的设计从PSD换成Sketch文件,我很感谢他这么做了!这使得导出变得非常容易,所以我可以轻松的改变Slice的名字,使它和Xcode工程里一致。然后就可以通过Dropbox同步给Peter。

iOSUp:你是如何处理Instagram的API请求频率限制的呢?你对那些能够从Mac直接上传图片的的应用程序怎么看呢?你是不是添加了一些在API文档中没有的东西呢?

Rafif:如果让我的服务器处理请求,确实能提供比Instagram更高的频率限制。但我不希望这成为任何用户的瓶颈,也不想去处理这带来的安全问题。

Instagram不希望第三方应用使用它的API,限制的手法也也来越像Twitter,尽量把第三方应用全部驱除。现在,任何第三方应用都不能点赞,评论或者关注,除非得到允许。很幸运,我在这些改变实施之前可以使用一个现在已经被去除的API。

iOSUp:你支持这个决定吗?或者说你尊重这个决定?

Rafif:我不认为Instagram会开放上传权限,并且他们的理由也可以理解。

Instagram随时可以关闭我的API接口,这可能非常可怕。不过我认为Flume中已经有足够的代码能使用附加组件,并且支持更少的限制API的照片分享服务,比如EyeEm或者500px

4.图标设计1-BrGRbRLTpAvdPKzJhJIYiQ.png

iOSUp:Peter,我们都知道你很擅长扁平化设计。你能告诉我们一些创造Flume图标过程中的故事吗?比如你用了什么工具?

Peter:很高兴你了解了我的一些作品。这个图标使用Photoshop做的,我有一个轻松导出的模板。

这个快速灵巧的模板能让我看到显示效果,并在应用中测试。这比Photoshop/Sketch可以提供的模拟效果好太多。

图片的颜色很明显是为了和Instagram协调,背景里的波浪暗示了Flume这个词的意思。同时也有流动的意思在里面。

1-OlePmMEpvQVTS1nyuXRjjA.png

只有在美工的时候才会用到Photoshop。去年最开始的时候,我用Photoshop设计了第一个界面,但后来换成了Sketch。后来,我渐渐把所有的工作全部转移到了Sketch上。

iOSUp:Apple有图像设计的相关规范吗,比如扁平化设计?

Peter:当然,Apple的OS X Human Interface Guidelines非常好的介绍了设计应用程序的细节。

但真正困难的是,你什么时候要打破束缚。

Flume被设计为一个圆形。它和iTunes或者iBooks一样是一个圆形,并有着银色的边界。

1-78Z0i_sYvHGiEoAuKVKruA.jpeg

对那些想要入门OS X图标设计的人来说,Ollin的博客也很好的描述了图标之间的不同。

iOSUp:你最喜欢的Mac应用图标是什么呢?

Peter:嗯,我最喜欢的是OpenEmu的图标,是一个的游戏控制杆,是一个游戏仿真的开源程序。

1-BkbwuoePcbMRVBRNwKXL2Q.png

我想,没有什么标志能比以前学校里的红色游戏控制杆更好的表现这个应用了。

同时,即使在Finder的小尺寸视图中,他也是一个与众不同的风格。我很喜欢这样。

 5.向App Store提交

iOSUp:在App Store提交应用程序的过程是怎样的呢?和Chrome应用商店相比呢?

Rafif:我不是第一次往App Store提交应用。所以我早就做好了准备,来接受缓慢审核的煎熬。同时,在OS X和沙盒模式的应用,你必须有充分的理由被授予永久的安全权限,比如读取用户的位置,摄像头,或者读写文件的权限等等。大多数时间这不是问题,如果你有充分清晰的权限要求的理由。不过这个程序被拒绝了两次,大概是因为我在应用名字和截图中使用了Mac这个词。最终花了我十二天的时间,我不得不两次推迟上线时间,简直令人抓狂。

Chrome网上商店就好多了,我想Google Play也是这样。现在有一个Safari插件评估团队,Flume的新版插件已经等待了数周,也没有可见的进度。与此相反,我的更新在Chrome Web Store中15分钟内就上线了。

我不得不特别提一下iTunes Connect。这是用来上传和提交你的二进制文件和营销材料的。前几天它做了一个很大的变更,结果就是,我花了整整四天时间来不断上传所有内容!

往iOS和Mac App Store提交应用非常考验你的耐心——你不得不继续耐心等待,即使你已经在这个应用上花了整整两年!

1-wYWzB6RPNIkuyshyr8_vGA.png


一些其他问题...

iOSUp:你在开发应用的过程中遇到最烦和最开心的事情是什么呢?

Rafif:我在2014年放弃了旅行来完成Flume,我一个人在做,没有人反馈,没有人鼓励我。遇到Peter减轻了我很多负担,也让我有机会能够交流想法。

开发的过程很少有开心的事情,但上线绝对是最开心的事情。我很享受和支持者、测试版用户和公测用户交流。我很喜欢,当他们发现我在下一个测试版本中就加上了他们想要的功能时候,那种震惊的感觉!

iOSUp:Mac应用中你最喜欢的设计和应用方面的程序是什么?

Rafif:好问题。我猜是Dash。我是一个重度的快捷键用户(因此Flume中添加了所有的快捷键功能),Dash也从没让我失望。我可以很轻松的打开它,通过关键词搜索我想要的信息,在几秒之内关掉它。整个过程不需要让我的手离开键盘!

1-Jft2eHj5bzLbhlizkk8QSQ.png

当然,还有Alfred,我每天都用的另一个键盘友好应用。

(超爱Alfred,我们也整天用它!)

本文来自GET社区翻译计划,每翻译一篇高质量文章,可获100元奖金。翻译计划赞助商:
转载必须保留来源和以上赞助商信息。

本文由 Easy 第一时间收藏到GET,原文来自 → stories.uplabs.io

「GetParty」

关注微信号,推送好文章

微信中长按图片即可关注

更多精选文章

评论(1)
微博一键登入