在6個月內(nèi),一個UI設(shè)計師如何搭建和發(fā)布iOS應(yīng)用程序

7 評論 6238 瀏覽 25 收藏 12 分鐘

“讀到這篇文章的時候我自己已經(jīng)在學(xué)習(xí)編程的路上磕磕絆絆好一段時間了,學(xué)習(xí)編程是一件痛并快樂著的事情,我想這篇文章的作者的目標(biāo)也許和我一樣,并不是想轉(zhuǎn)行做開發(fā)者,但是喜歡這種親手用代碼創(chuàng)造出一款產(chǎn)品的樂趣,恩,在代碼的世界,每一個開發(fā)者,都是造物主?!?/p>

關(guān)于設(shè)計師是否需要去學(xué)習(xí)編程是一個持續(xù)的話題。我很高興能和大家聊一聊這個問題。

我認(rèn)為通過學(xué)習(xí)編程能讓設(shè)計師從另外的角度去看待問題。

你想通過學(xué)習(xí)代碼做到什么?是去得到一份工作,完善你的簡歷,進(jìn)入一個設(shè)計的新領(lǐng)域,更好地和開發(fā)者溝通?學(xué)習(xí)編寫代碼要看你的目的到底是什么。

就我來說,我想去發(fā)布一個App 產(chǎn)品。

一點的故事背景

在2015年,我和兩個朋友一起完成了Sofa 這個項目的第一個版本。我是設(shè)計師,其他兩個人一個是IOS開發(fā)工程師,一個是前端開發(fā)工程師。我們之前一起工作,現(xiàn)在也還在一起合作得很好。

Sofa 1.0版本

在那個時候我不需要知道如何去編寫代碼。只要我將設(shè)計部分的工作做好就足夠了。在經(jīng)過了一年的開發(fā)和測試之后我們發(fā)布了1.0的版本。

但是,緊接著出現(xiàn)了一些困難。Sofa對我們來說是一個工作之余的項目,因為我們都有全職的工作。我的兩個開發(fā)小伙伴由于工作太忙了導(dǎo)致沒有辦法繼續(xù)花很多時間在sofa上面。我們的產(chǎn)品陷入了停更的困境,這對我來說十分痛苦?;诤芏嘤脩舻姆答仯冶緛碛泻芏嗟南敕ㄒ獙Ξa(chǎn)品進(jìn)行迭代,但是現(xiàn)在我卻無能為力。這是讓我決定去學(xué)習(xí)編程的導(dǎo)火索。

從Framer開始學(xué)起

和很多設(shè)計師一樣,我之前也略微有學(xué)習(xí)過一點的HTML,CSS以及JavaScript。但是直到我開始使用Framer我才真的開始了解去這些代碼的基礎(chǔ)原理。

不是我產(chǎn)品的原型,只是一張隨便的截圖

在于設(shè)計師去學(xué)習(xí)如何編程這個事情上,F(xiàn)ramer 是一個那么神奇的工具。能親眼看著自己編寫的代碼實現(xiàn)自己想要的效果,讓我了解到到底這個編程的過程當(dāng)中發(fā)生了什么。Framer教會了我基本的一些代碼知識比如說“變量”、 “FOR循環(huán)”、“遍歷” 、還有函數(shù)。沒有什么花哨的技巧,都是些實用的知識。

通過Framer我涉獵了更多的JavaScript的知識,但是我的心更向往著去開發(fā)原生的IOS App。

向Swift前進(jìn)

在swift語言還是誕生之前,我嘗試地去學(xué)過IOS開發(fā),那時候的主流開發(fā)語言是Objective-C,它對于我實在是太難消化了。當(dāng)Swift語言發(fā)布了,我當(dāng)時就認(rèn)為,我應(yīng)該能學(xué)會它。其實我也不是很確定,但是swift語言給了我一點點的自信。

這是很艱難的部分。當(dāng)時有很多學(xué)習(xí)IOS開發(fā)的資源,但是大多數(shù)都非常糟糕,老師們總是會想當(dāng)然地假定學(xué)生對很多基礎(chǔ)的概念十分了解。很多針對初學(xué)者的課程都是這個狀況。他們告訴你如何去實現(xiàn)“X”,但是從不告訴你你同同時需要先完成“A,B 和 C”。課程結(jié)束后反而覺得更加困惑和失落。

我覺得我體驗過最好的學(xué)習(xí)IOS開發(fā)的資源是來自Meng To。 他的 Design+ Code 課程非常棒。他自己本身是一個設(shè)計師,他知道如何和設(shè)計師交流。這是讓我覺得他的課程比別人的好的一個重要原因。純開發(fā)者去教沒有開發(fā)經(jīng)驗的人,他們總會忘記剛開始的時候的我們最應(yīng)該學(xué)什么。Meng 為設(shè)計師們解決了這個問題。

Design+ Code 網(wǎng)站

Design + Code 教會了我如何在各個窗口間來回地傳遞數(shù)據(jù),通過代碼改變APP的界面設(shè)計,以及如何使用故事板。再次說一下,很多其他的課程也教這些,只是他們沒有傳達(dá)得很清晰易懂。

這個課程教會了我IOS開發(fā)的基礎(chǔ)知識。從那時候開始我就能夠探索和搭建一些產(chǎn)品框架。一個是Sofa2的早期框架,另外一個是針對IPAD的協(xié)作程序。我沒有徹底地完成他們中的任何一個,但是我在這個過程中學(xué)到了很多。

在六個月里開發(fā)和上線Sofa2.0

在2017年的夏天,我覺得我已經(jīng)等不及要去迭代Sofa了。等我的同伴的時間表上有時間,那估計就是明年了。那個時候我就決定自己開發(fā)Sofa的2.0版本。

我剛開始的時候我心里真的不是很有譜,但是我就是一股腦的扎進(jìn)去了。我對于開發(fā)的基礎(chǔ)的了解,足夠我一步一步慢慢向前推進(jìn)了。

一些功能的提交版本

在我開發(fā)的過程中,有兩個我一直使用的學(xué)習(xí)資源:Stack Overflow 和 YouTube 。是的,就是YouTube。當(dāng)你學(xué)習(xí)一些新的東西,只是看書總是不夠的??纯磩e人是如何解決那些你遇到的類似的問題總是非常有幫助的。這就是YouTube特別棒的地方。當(dāng)我碰到一些難點解決不了的時候,我總是在YouTube上搜索相關(guān)的視頻來看。這里有一些YouTube賬號對于我的開發(fā)學(xué)習(xí)幫助非常大:

  • Mark Moeykens
  • Brian Advent
  • Let’s Build That App
  • Sean Allen

我真的非常感謝這些人分享了這么多這么棒的而且通俗易懂的內(nèi)容。

sofa2.0測試版

從七月份到九月份,我主要在做基礎(chǔ)的app功能的開發(fā)。然后從九月到十二月份,我變成一個測試人員,對產(chǎn)品的一些功能和體驗進(jìn)行了不斷地測試。

隨著時間一周一周的過去,我收獲了越來越多的自信??傆幸恍┘值膯栴}很難處理,還有一些我特別怕的難題,比如說 核心數(shù)據(jù),但是總的來說整個過程并不是很難。

2017年12月6號的時候,我正式上線了Sofa2.0版本。嚴(yán)格的來說,還沒用到6個月的時間,我的數(shù)學(xué)一直都不好。我很難形容自己的這種感覺——花了很長時間在做一樣?xùn)|西然后把它和全世界分享。有點嚇人,有些激動,總得來說——特別有意思。

在我自己開發(fā)的這段時間里,我的好朋友同時也是Sofa的成員,Oliver Pfeffe 一直默默地支持著我。他是Sofa app的第一版的開發(fā)者,也是我合作過最棒的開發(fā)者。當(dāng)我告訴他我想要自己開發(fā)Sofa 2.0版本時,他非常地支持。當(dāng)我陷入困境時,他總是給我指明正確的方向,而不是直接告訴我答案。他讓我自己按自己的想法把代碼寫出來,這樣我學(xué)到的更多。到開發(fā)階段的尾期,他幫我進(jìn)行了代碼審查(我當(dāng)時有一堆重構(gòu)的活需要做)并且寫了一些庫幫我清理了從google book上獲取的數(shù)據(jù)。他在我開發(fā)2.0版本的過程中給了我很大的幫助,雖然他可能不這么認(rèn)為。

發(fā)布的Sofa 2.0版本

我并不是一個人在戰(zhàn)斗

我很清楚地知道,我沒有辦法一個人完成這些所有的事情。Framer教會我編寫代碼的基礎(chǔ),Meng To教會了我基本的IOS開發(fā),還有Stack Overflow和youtube 和Oli 教會了我更多IOS開發(fā)中更深層的東西。

不僅僅是那些教會了我如何編寫代碼的人,還有那些每天都支持著我的人。我的妻子,我的家庭,我的朋友,我的工作伙伴,我的老板等等。我非常幸運身邊有這么一群人,他們關(guān)心并且支持著我看似有些愚蠢的激情。這段時光我永遠(yuǎn)也不會忘記。

你也能做到

不僅僅是設(shè)計師,每個人都可以。如果你有一個你向往的目標(biāo),雖然現(xiàn)在沒有足夠的技能,不要擔(dān)心?,F(xiàn)在這個時代,學(xué)習(xí)新東西的途經(jīng)和機(jī)會都遠(yuǎn)遠(yuǎn)超過歷史上任何一個時期。你唯一要做的就是把時間用在學(xué)習(xí)上。而且完成這件事情可能沒有你想象的那么困難。

 

原文鏈接:https://medium.com/sofa-blog/how-a-designer-built-and-shipped-an-ios-app-in-6-months-58258869b5fa

譯者:MU.SIR,一個不斷學(xué)習(xí)的不正經(jīng)設(shè)計師。

譯者地址:三木自習(xí)室(微信號:mumumustudy)

本文由 @MU.SIR 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)作者許可,禁止轉(zhuǎn)載。

題圖來自 Pexels,基于 CC0 協(xié)議

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 購買Design+ Code好像需要美國discover卡,感覺中國人申請有點麻煩,還有其他途徑嗎

    來自上海 回復(fù)
  2. 贊一個

    回復(fù)
  3. ??

    來自北京 回復(fù)
  4. ??

    回復(fù)
  5. ??

    回復(fù)
    1. ??

      回復(fù)