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

vs3176 8年前發布 | 35K 次閱讀 開源 移動開發

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嘍!

The 10000 Hour Rule

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個圖標。

二是其簡單大方的設計感,讓我很直觀的感受到設計者的意圖。

noahbombom的設計稿

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

使用紅黃藍綠四個顏色的LOGO

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

Logo的設計稿

主要界面的效果圖

關于字體設計

前段時間,MartinRGB在它的朋友圈里發表了一篇文章 – 愜讀的設計 ,這篇文章對我的感觸挺大,我覺得雖然FOUR不是一款閱讀類的app,但字體對于用戶的體驗終究是至關重要的。

不過遺憾的是我對中文字體的理解沒有那么深刻,更別說去合理的搭配字體來營造一種十分愜意的感覺,所以我在FOUR上并沒有對中文字體進行任何的優化和設計。

不過值得高興的是,由于我平時對各類英文字體有過些許研究,加上自己也會寫寫畫畫,所以在制作FOUR的時候,我嘗試著用MartinRGB的思維方式為FOUR設計一套合適的字體組合。

我的英文字體作品

以下是我在總結前人經驗的基礎上,挑選出的幾套比較優秀的字體搭配組合,同時我也將網上使用這種字體組合的應用場景找了出來,以便大家直觀的感受。

簡單的說明一下,下面的圖片左邊是對當前字號大小和字體細分種類的說明,圖片右邊的單詞就是字體的名稱哦。

字體組合1

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

Lato means “Summer” in Polish. “Male and female, serious but friendly. With the feeling of the Summer,”

– ?ukasz Dziedzic, Lato creator.

字體組合2

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

字體組合3

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

字體組合4

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

字體組合5

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

字體組合6

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

字體組合7

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

字體組合8

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

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

3 FOUR的實現

回顧FOUR的整個制作過程,如果從技術角度來看它的話,其實它并沒有什么特別的技術難點。

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

FOUR的界面構成

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

Analysis界面的動態效果

這個界面看起來十分簡單,但它能展現的內容卻十分豐富:

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

它的實現主要還是基于 JBChartView 的Demo而想到的。所以如果大家有興趣,可以直接閱讀該框架的Demo文件,我想一定會有不小的收獲,如果你覺得看起來麻煩,也可以看看 FOUR 的源代碼。

4 FOUR的誕生

經過大概3周左右的時間,我終于將FOUR從一個模糊的概念變成了一個具體的app,雖然它還存在著各種各樣的缺點,但對于我這樣一個半年前還從來未接觸過編程的人而言,那種強烈的成就感是不言而喻的。

我到現在還記得當時大概是下午2點多提交的app,之后我就以每隔半小時的速度刷一遍郵箱,期待著Apple的回復。直到凌晨3點多,我終于收到審核通過的郵件,那一刻的心情,覺得比當年考上大學還要激動,弄得我后半夜都沒睡著。

Anyway,終于實現了自己在2015年給自己許下的心愿。

Apple的審核通知郵件

雖然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歲,無相關行業經歷,無相關專業背景,完全零基礎,天資平平的人條件還要差。

在這里我并不想說誰好誰不好,誰對誰不對,我只是覺得踏踏實實的去走自己的路或許能收獲更多,至少會多一份自信,少一份不安。

 

來自:http://ios.jobbole.com/87301/

 

 本文由用戶 vs3176 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!