FOUR – 一個27歲零基礎無業遊民的第一個開源作品

0 寫在前面的廢話

如果你不喜歡看廢話，可以直接繞過第一段哦 : ]

我是一名14年畢業的研究生，當時的主攻方向是能源科技領域，離開校園後就去了上海的一家外企當起了管理培訓生，後來還參與了朋友的創業專案，在外人看來，這樣的生活還不錯。但就是這樣還不錯的生活，讓我一直隱約的感覺到不安，所以在去年的時候，我跟家人說想辭掉現在所有的工作，嘗試去做一名程式設計師。

這樣的決定讓我的家人和朋友都十分不解，在他們看來我在本科和研究生階段所學的東西都跟計算機沾不上邊（事實情況也確實如此），而且我也已經27歲了，重新進入一個完全陌生的領域代價實在是太大了，雖然有很多不利的因素，但我在今年年初參加完SwiftGG翻譯組在北京組織的Swift開發者大會後，終於下定了決心。

其實參加會議本身到沒有什麼內容刺激到我，因為當時參會的時候，我甚至都沒看完Swift Programming Language這本書，現場聽得懂的內容也屈指可數（PS:我可是全場唯一一個從新疆趕到北京參會的人啊，但當時我真的一點都不懂Swift……），但真正刺激到我的還是這個大環境，為什麼這麼說呢？

這還要說到現場發生的一個小插曲，會議當天，坐在我前面的是一個帥哥，我完全不認識，大概沒多久，我看到@周楷雯Kevin從前排起身要出去，剛好路過我這，本以為他就會這麼走過去，但他突然停下來，好像認出了坐在我前面的男子，然後兩人像老熟人一樣說起了話，話裡的內容一部分是互相寒暄，另一部分則是對對方作品的讚賞和肯定，後來我才知道坐在我前面的這位男子是奇點的作者@圖拉鼎 先生，最神奇的是我當時最愛用的微部落格戶端就是奇點，而此時它的開發者就坐在我的面前…ORZ

這只是當天會議中的許多場景中的某一個片段，你可以在午休時段，看到很多開發者通過某個作品認識到了新的朋友，這讓我覺得在這裡，人與人之間的關係很簡單，有時候可能就是通過在GitHub或者App Store上的作品，就能把兩個完全不認識的，甚至不同膚色，不同國籍，不同語言的兩個人聯絡到一塊，這裡不是一個靠關係，靠背景的地方，而是一個靠實力，靠能力來說話的地方。
Anyway，就是這樣一次看似簡單的參會經歷，讓我決定了從零基礎開始學習iOS開發。

1 FOUR的由來

開發這個app的初衷一方面是因為看完了《異類》這本書後頗受啟發，一方面是覺得如果今後找工作的話，像我這樣非計算機專業出身的開發者，怎麼也得有個自己的作品才好，所以帶著這樣的目的，我決定開發一款基於The 10000 Hour Rule的app。
至於為什麼叫FOUR，就像我在app的引導頁中所說一樣，假如每天花4個小時去做一件事，至少也需要十年左右才能達成一萬小時的要求，所以照此推算，我們在六十歲的時候大概也就能實現四個人生大目標吧，所以就起名叫FOUR嘍！

2 FOUR的起點

2.1 開發前的思考

在開發這款app時，我曾經認真思考過到底用哪種技術來實現，純OC，純Swift, React-Native, Reactive-Cocoa，RxSwift？
面對這些個選擇，最開始的時候我是想著用點新技術，雖然使用新技術是體現自己的學習能力，但考慮到時間成本我決定還是先暫時放一放。
在OC和Swift的選擇中，雖然現在大趨勢是Swift，我自己也系統的學習了Swift語言，但考慮到3.0即將到來，我選擇採用OC開發的策略，一方面可以避免Swift語言版本的更新問題，一方面我認為只有在同一個專案中使用兩種不同的語言進行開發才可以更好的去理解這兩種語言的差異和優劣，所以我不妨先用OC寫一遍，等程式比較穩定且Swift3.0正式釋出後，我再用Swift寫一遍，這樣豈不是效率更高一些麼？
至於React-Native，Reactive-Cocoa，RxSwift這樣的技術，如果以後有機會，當然也會來寫一遍。
為什麼？
難道終身學習不是一個程式設計師的自我修養麼！！！

2.2競品分析

關於app的UI設計，我覺得在某種程度上還是蠻重要的，畢竟使用者不會直接看到你的程式碼寫的多漂亮，邏輯有多清晰，架構有多合理，他們看到的只是你在手機上的展示的東西，所以UI設計的工作就顯得尤為重要。
周楷雯在《Producter》一書說道：

“設計總是從模仿開始，在我的記憶裡，第一次做設計是在 Ubuntu 7.04 上用 GIMP 製作桌布，模仿 Mac 的霞光桌布，那還是 2007 年的事。”

所以，我決定也從模仿開始做起，那麼模仿什麼呢？不如看看App Store裡都有哪些app吧，於是我搜尋了與10000 hour rule相關的app，在搜尋前幾名的app如下：

1. iHour
   iHour的功能十分豐富，但正因為豐富的功能設定，使得我在使用過程中顯得有些不知所措，但是從功能和設計的角度上來說，這款app有不少值得我去借鑑的地方。

   

   iHour介面截圖
2. 10,000 hours
   這款app雖然看起來相當簡陋，也只能新增一個Task，但它給我最深刻感受就是簡單明瞭，尤其在我進入app的主介面後，沒有花費太多時間就能明白製作者的意圖，並很快的熟練使用起來，這種設計理念我十分喜歡，雖然設計感還有待提高，但使用者的體驗還是很好的，這總比花了好幾分鐘都沒有找到計時功能的iHour好很多。

   

   10,000 hours介面截圖
3. Color Time
   這款app呢，我覺得最大的亮點在於Task中詳細資訊的展現上，可以看出開發者肯定是有想法的，不知道是受限於技術問題，還是設計問題，在最終的展現上讓人看起來有些奇怪，但不可否認，開發者肯定是想以一種不同於前兩個app的方式來表達Task中的詳細資訊。

   

   Color Time介面截圖
4. 10000 Hours To Success
   這個app在某種程度上和iHour十分相似，有著不錯的UI設計，但複雜的操作和奇怪的邏輯讓使用者的體驗感變差不少，尤其是它新增任務，記錄任務的方式讓我覺得實在太不人性化。

   

   10000 Hours To Success介面截圖
5. 10000 Hours
   對於這個app而言，你看下面的截圖就可以清楚的感受到它的優點和缺點。

   

   10000 Hours介面截圖
6. Outliers – Law of 10,000 hours
   說實話，這個app的售價是12RMB，但我覺得這有點對不起它自己的售價。

   

   Outliers – Law of 10,000 hours介面截圖

在使用完上面六款app後，我總結了以下幾點感受：

• 優雅的UI設計會為app增分，即使用起來有些彆扭，畢竟這是一個看臉的社會
• 合理的互動設計會減少使用者的學習負擔，一個好的app不應該有過多的提示操作，而是應該以一種簡明的設計方式來引導使用者學習使用
• 對於類似To-Do List類的app而言，記錄任務和展示資訊是兩個十分重要的環節，一方面這是使用者使用頻率最高的環節，一方面也是展現開發者智慧的地方

3 FOUR的雛形

3.1關於介面設計

FOUR的設計靈感最初來自noahbombom在Dribbble上的設計稿，我被這個設計稿吸引的原因有兩點：
一是因為圖片上面剛剛好夠展示4個圖示。
二是其簡單大方的設計感，讓我很直觀的感受到設計者的意圖。

選定完樣式以後，我就開始考慮app的配色問題，noahbombom在她的設計稿上使用的是非常經典的四個顏色：紅黃藍綠，這四個顏色在很多知名的app上都有過不同的展現方式。

正因為紅黃藍綠的經典性，我考慮將其移植到我的app設計稿中。

關於字型設計

前段時間，MartinRGB在它的朋友圈裡發表了一篇文章 – 愜讀的設計，這篇文章對我的感觸挺大，我覺得雖然FOUR不是一款閱讀類的app，但字型對於使用者的體驗終究是至關重要的。
不過遺憾的是我對中文字型的理解沒有那麼深刻，更別說去合理的搭配字型來營造一種十分愜意的感覺，所以我在FOUR上並沒有對中文字型進行任何的優化和設計。
不過值得高興的是，由於我平時對各類英文字型有過些許研究，加上自己也會寫寫畫畫，所以在製作FOUR的時候，我嘗試著用MartinRGB的思維方式為FOUR設計一套合適的字型組合。

以下是我在總結前人經驗的基礎上，挑選出的幾套比較優秀的字型搭配組合，同時我也將網上使用這種字型組合的應用場景找了出來，以便大家直觀的感受。
簡單的說明一下，下面的圖片左邊是對當前字號大小和字型細分種類的說明，圖片右邊的單詞就是字型的名稱哦。

Lato是一個相對而言較新的字型，它在設計之初被廣泛用於帶有使用者介面的網站設計，這主要是因為它給人一種堅固感和些許的中性風格。Lato這個詞出自波蘭語，關於它的解釋呢，我覺得還是用英文原文來做解釋比較好，這樣能不破壞它的語義。

Lato means “Summer” in Polish. “Male and female, serious but friendly. With the feeling of the Summer,”
– Łukasz Dziedzic, Lato creator.

這個無襯線的字型組合是根據傳統的廣告字型進化而來，它能夠很快的抓住使用者的注意力，尤其是它的一級字型和二級字型造成了很好的視覺對比效果。

Kollektif字型誕生的目的就是為了打破幾何字型精緻清新的風格，這種字型的視覺衝擊感主要在於它的圓形設計和強烈的設計感。而Gidole字型是一種細而簡明的字型，這與Kollektif的沉重感形成了一種很好的互補效果。

Six Caps是一種非常緊湊且窄瘦的字型，非常適合用於做標題。與Archivo Narrow搭配後能夠營造出一種60年代的復古風。加上三級字型採用了Source Sans Pro後，三種風格迥異的字型能夠很好的表達或者從某種程度上暗示出訊息的重要性和順序性。

Raleway和Roboto Condensed的組合在很多海報中都被使用過，這是一個非常非常經典的搭配，由它們構成的主副標題會給人十分深刻的印象。

Bebas Neue在時尚領域裡非常討好，它簡明乾淨的形式使它具有成為一個好標題的所有基本條件，它自身具有很漂亮圓角設計感，同時相比於其他字型來說，它是一個偏瘦的字型，如果有一個相比它而言較為矮胖的字型就會是一個完美的搭配，剛好Montserrat就是這樣一個非常好的搭配角色。

Norwester是一個非常引人注目的字型，非常適合做標題，當Norwester與Kollektif，還有Montserrat組合在一起能夠產生一種極其強烈的幾何效果感覺，這也是我非常非常喜歡的一個字型組合。

Roboto Condensed是Sans serif系列的衍生體，十分適合閱讀，它被廣泛引用在科技領域的文字設計中。相比於它的父類，它在高度上的變化使得它給人一種更加強烈的凝聚感。

對這8種字型組合做完分析後，我認為字型組合1給我的感覺與FOUR的氣質十分契合，不求轟轟烈烈，只求天長地久，Lato字型的踏實穩重感正是FOUR需要的，所以就選它了！

3 FOUR的實現

回顧FOUR的整個製作過程，如果從技術角度來看它的話，其實它並沒有什麼特別的技術難點。

• 在設計模式上，選用了最常見的MVC模式。
• 在資料庫上，我使用了移動端的新貴-Realm，原因很簡單：Realm真的好用到哭，有沒有！！！
• 在動畫上，用JazzHands框架實現了引導頁上的動畫效果，用pop框架實現了其餘部分的動畫效果。
• 在UI介面上，咳咳咳，請允許我吐槽一下！但凡在Github搜到的那些精緻漂亮的UI框架都是用Swift編寫的，為毛就沒有人用OC寫呢！！！哎，好吧，自己從頭搭建吧….

仔細琢磨下，唯一值得分享的就是Analysis介面的實現，首先用一個動圖來展示下它的效果吧。

這個介面看起來十分簡單，但它能展現的內容卻十分豐富：

• 首先它包含每個任務在近一週內的執行時間趨勢圖。
• 其次在觸控和滑動曲線的過程中，下端的介面可以彈出任務在某一天內執行的時間長度。
• 最後在相同的介面中，可以展現出多個任務的曲線走勢圖。

它的實現主要還是基於JBChartView的Demo而想到的。所以如果大家有興趣，可以直接閱讀該框架的Demo檔案，我想一定會有不小的收穫，如果你覺得看起來麻煩，也可以看看FOUR的原始碼。

4 FOUR的誕生

經過大概3周左右的時間，我終於將FOUR從一個模糊的概念變成了一個具體的app，雖然它還存在著各種各樣的缺點，但對於我這樣一個半年前還從來未接觸過程式設計的人而言，那種強烈的成就感是不言而喻的。
我到現在還記得當時大概是下午2點多提交的app，之後我就以每隔半小時的速度刷一遍郵箱，期待著Apple的回覆。直到凌晨3點多，我終於收到稽核通過的郵件，那一刻的心情，覺得比當年考上大學還要激動，弄得我後半夜都沒睡著。
Anyway，終於實現了自己在2015年給自己許下的心願。

 

雖然FOUR的上架對於我來說是近期工作的一個終點，但從長遠來看，這或許才是我在iOS開發道路上真正意義上的一個起點。
因此，在app上架後，我就將其在GitHub上開源了，一方面是希望通過它來記錄自己的技術成長，一方面也是希望以後能夠有機會和更多優秀的人共同工作，共同成長。
至於未來，我希望能像前面說的一樣，逐步完成FOUR的swift版本，React-Native版本，React-Cocoa版本等等。

下面是FOUR在Github和App Store上的地址：
GitHub： https://github.com/SketchK/FOUR
App Store： https://itunes.apple.com/app/id1136588862
如果您喜歡FOUR，記得給我點個星星哦！
如果對專案任何問題，歡迎在專案主頁上提issue。，
當然FOUR裡還有個功能就Donate，如果各位覺得不錯，可以考慮贊助我個可樂神馬的！: ]
哈哈哈，在此先謝謝各位啦！

5 尾聲

這篇文章基本就要結束了，可能也沒什麼乾貨，就是說了說我在製作FOUR時都想了什麼，做了什麼，幹了什麼。
如果非要說說這篇文章的意義所在，我想應該是：

我希望通過這篇文章,能夠激勵更多的人以一種踏踏實實的方式去追尋他們內心向往的東西。

PS：說這些是因為在加入的這些個iOS開發者微信群裡，總能聽到行業內的人說今天面試了幾個偽造簡歷的年輕人，或者說某某培訓機構教學生包裝假簡歷。
我很難想像現在的iOS就業市場中，還能有多少比我這樣一個已經快要30歲，無相關行業經歷，無相關專業背景，完全零基礎，天資平平的人條件還要差。
在這裡我並不想說誰好誰不好，誰對誰不對，我只是覺得踏踏實實的去走自己的路或許能收穫更多，至少會多一份自信，少一份不安。

 

對了！插入廣告一枚！
本人現在無業狀態，十分渴望從事iOS開發的相關工作。
如果有哪位好心人士覺得我還不錯，願意培養培養，在下不勝感激！
微信聯絡方式：sketchk