我是 Mr.Weather 作者張鵬 Roc Zhang,CS 專業(yè)大三在讀。Mr.Weather 是第一個從 0 到 1 完全由我自己完成的 App,因此我也在這個過程中體驗到了產(chǎn)品、設(shè)計、開發(fā)甚至是客服等各個角色。從構(gòu)建 Mr.Weather 首版雛形至今已經(jīng)超過一年,我想不如就從這幾個身份來聊聊 Mr.Weather 的故事。
產(chǎn)品
思路的雛形與改變
坦白說,開始動手做 Mr.Weather 時我甚至沒想好到底要做個怎樣的產(chǎn)品,這也是為什么中間花費了如此長的時間。甚至于今天看來,雛形和現(xiàn)在的版本完全是兩個不同的產(chǎn)品。最開始是在突發(fā)奇想下決定要做一個程序員風格的天氣 app,實際上就是類似于 Terminal ,直接輸入各種命令,完成查詢某個城市天氣之類的動作。而在這種奇特的思想驅(qū)動下,甚至還加入了類似聊天機器人的對話功能。整體風格也是盡力模仿像素風,甚至字體也是用的 Xcode 默認的 Menlo。當時還在大二的我覺得這種感覺很酷,而現(xiàn)如今看起來則是有些慘不忍睹了。
之后大二暑假實習期間的一個晚上去 Kevin 家吃飯,我掏出手機給 Kevin 看了當時的 Mr.Weather。依稀記得 Kevin 說挺有趣但感覺有些自嗨,我認真一想感覺還真的是。就算是程序員,也不會每次想要查溫度都要輸入一個 weather -temp 呀。
思考
在實習結(jié)束后,我開始認真考慮究竟應(yīng)該做一個怎樣的天氣應(yīng)用。如同買鉆頭的人需要的往往不是鉆頭而是洞,大部分用戶查看天氣都不是為了研究天氣數(shù)據(jù),而是想要知道這些數(shù)據(jù)會怎樣影響到自己,自己需要做出怎樣的決定。
在仔細觀察自己和朋友的使用習慣之后,初步將需求劃分成兩部分:一是經(jīng)常發(fā)生的,有規(guī)律的動作,比如我們會在早晨出門前查詢天氣,通過降雨概率決定要不要帶傘,或者通過空氣質(zhì)量指數(shù)決定要不要戴口罩,再或者在周五晚上看看周末的天氣適不適合安排出游之類。而另一部分則是相對隨機的,沒有太多規(guī)律的動作。比如臨出門時天色暗下來了查查當前天氣。于是根據(jù)這兩類需求,我開始重新考慮 Mr.Weather 的 feature。對于第一類規(guī)律性的動作,我做了 Mr.Weather 中最重要的一個功能,自定義天氣通知。你可以自定義觸發(fā)通知的條件、監(jiān)測時間與通知發(fā)送時間,如 “當天的空氣質(zhì)量指數(shù)大于100時,在早晨提醒我?guī)Э谡帧?,又或是“第二天的降雨概率大?50% 時,在晚上提醒我裝好傘”。這些規(guī)律性的動作,就可以完全交給 Mr.Weather 來監(jiān)控,用戶不必每次手動查看了。而對于另一方面的需求,我給出的解決方案是當用戶主動查看時,以最直觀的方式告訴他所需要的信息。如 App 中包涵了分為四大類別的可定制卡片,擁有實時播報和天氣動畫的 Widget。并且盡量更直接的告訴用戶天氣變化趨勢以及將帶來怎樣的影響,而不單是天氣數(shù)據(jù)。
每一次增改 feature 都可能讓已經(jīng)完成的設(shè)計和代碼被放棄重來,甚至讓完成進度變成遙遙不可期。在經(jīng)歷了第一版的 Mr.Weather 之后,我也學著更謹慎的面對每一個設(shè)想和功能。
克制
在考慮其他功能點時我也相對保持克制,引用 Alan 的話說,我非常討厭 “航母級應(yīng)用”,所有的生活需求被一個 App 接管是一種非??膳碌氖?。相比而言我更喜歡目的明確的產(chǎn)品,用起來干脆利落。少即是多的道理誰都會講,而增加功能卻經(jīng)常是一個思考成本相對更低的選擇。而由于 Mr.Weather 是個人作品,所以也有機會更加純粹,無需面對所謂的 「 KPI 壓力 」 吧。
設(shè)計
我很敬佩那些設(shè)計優(yōu)秀重視細節(jié)的產(chǎn)品,這樣的產(chǎn)品處處都會充滿著設(shè)計者的巧思與靈魂。同時我很享受做設(shè)計的過程,打開 Sketch 看到一個個 Artboard 排列在屏幕上的感覺總會讓人非常愉悅。從自己畫下 Mr.Weather 中用到的每一個小圖標,到設(shè)計調(diào)整各個天氣動畫,甚至是通知提示音,很多細節(jié)都需要時間和精力打磨。
氣質(zhì)與迭代
設(shè)計的理念倒不像產(chǎn)品一樣,從開始時我就希望 Mr.Weather 的設(shè)計干凈明晰。Mr.Weather 的整體配色相對克制,也盡量注意留白。整體由信息驅(qū)動,尋求干凈開闊。由于在產(chǎn)品構(gòu)思上的更新導致整個產(chǎn)品有過數(shù)次推翻重來,我自己又稍稍有些強迫癥,經(jīng)常會和一個圖標、界面死磕,找不到想要的感覺就會再來。單一個設(shè)置界面就反反復復改了數(shù)版,而至于引導界面、主界面之類則更甚,經(jīng)常是自己看著不舒服就推倒再來。不過除去做個人作品怕是很難會有這樣的時間成本可以讓自己打磨了。好在最后的結(jié)果自己總體還算比較滿意,當然還是有很多不足(比如不少用戶甚至都沒能找到設(shè)置入口)。
字體
配合 Mr.Weather 整體的氣質(zhì),我為 Mr.Weather 的英文與數(shù)字選擇了 Gill Sans 這款字體。Gill Sans 被譽為英國的 Helvetica,甚至在 SHERLOCK 電影前的 BBC 片頭里還能見到他的身影。雖然我對字體的了解還非常淺薄,但我很喜歡這款字體那種相對謹慎且平和的氣質(zhì)。在 Sketch 和 iPhone 屏幕上反復比較之后,我覺得 Gill Sans 相對 Open Sans 、Helvetica 等字體與 Mr.Weather 整體更加契合,于是選定了使用 Gill Sans。而中文字體由于考慮到對應(yīng)用整體大小的控制,所以算是在妥協(xié)之下選擇了系統(tǒng)默認的蘋方。
動畫
Mr.Weather 的天氣動畫依然在尋求自然干凈的感覺,晴天、陰天、雨天及下雪等場景的動畫也遵循 Mr.Weather 整體的配色。 除去較大的天氣動畫之外,在 App 中我也加入了很多細小的動畫。比如下拉菜單時后面背景的逐漸模糊,添加卡片時類似一推滑動的 toggle 動畫,天氣卡片下方展開分類篩選時的提示用戶可以滑動的動畫,以及各類 alert 動畫等等,都希望能營造出一種自然、干凈、利落的體驗。
Mr.Weather 中的動畫在有些地方使用了 Facebook 的 pop 與 Airbnb 的 Lottie,而 95% 以上的動畫還是使用了 CoreAnimation 來完成。
開發(fā)
由于自己程序員的主要身份,所以整體開發(fā)上的煩惱基本只剩下 Xcode 經(jīng)常崩潰的自動提示與 Swift 越來越長的編譯等待時間。但最重要的天氣通知則還是遇到了一些問題。對于如何處理天氣通知想過非常多的辦法,甚至于一開始打算把所有用戶的通知設(shè)置保存在 Server 上,由 Server 來處理判斷再給客戶端發(fā)通知。而這種辦法對于目前的 Mr.Weather 來說基本不可行。后來還是采取了后臺應(yīng)用刷新和遠程靜默通知結(jié)合的方式來解決。
數(shù)據(jù)源與運營壓力
另一件比較煩心的則是天氣數(shù)據(jù)源的選擇。先后比較了幾個數(shù)據(jù)源,最后還是選擇了一個付費數(shù)據(jù)源。畢竟準確、及時的數(shù)據(jù)對于一個天氣應(yīng)用至關(guān)重要,也會在很多時候影響用戶體驗。而在上架時,考慮到 Mr.Weather 目前的完善狀況,覺得現(xiàn)在收費還是對用戶不太負責的行為,所以選擇了免費也沒有添加內(nèi)購選項。后來 Mr.Weather 的日訪問突然增長,按次收費的天氣接口費用讓我措手不及。非常感動的是不少用戶都給予了捐助支持,也幫助我在想清 Mr.Weather 的未來之前緩解了不少壓力。
內(nèi)測
在 Mr.Weather 上架之前,我先通過 TestFlight 發(fā)布了數(shù)個測試版本。由于開發(fā)者使用時的一些慣性非常容易忽略掉不少問題,所以進行測試非常必要。 Mr.Weather 先后從 0.1 測到 0.7,其中數(shù)次都是凌晨新版本通過審核后交由朋友們測試一天,我在當天晚上就會做修改調(diào)整,再提交下一版本審核。朋友們給了很多反饋與建議,數(shù)次下來 Mr.Weather 的問題也少了很多,方提交到了 AppStore。 值得一提的是,作為自己第一次提交給 AppStore 的應(yīng)用,一次就通過審核了,而且前后一共也只用了兩三天的時間,非常意外。
上架后與用戶反饋
Mr.Weather 于 5 月 18 日上架到了 AppStore ,至今差不多兩周的時間。期間最佳排名為國區(qū)天氣類免費榜第 25 名。而上架之后,閱讀每日的反饋與來信也變成一件非常有趣的事情,也正是通過這個渠道,結(jié)識到了不少用戶甚至是設(shè)計師和開發(fā)者,感覺非常奇妙。
尾巴
從大二開始參與過大大小小的項目開發(fā),在團隊中每個人各司其職,相互配合與學習的過程讓我非??鞓?。而第一次通過 Mr.Weather 完整體驗了從 0 到 1 制作一款產(chǎn)品,自己獨立掌控產(chǎn)品的方方面面則別有一番感觸。這兩種體驗都讓我投入且著迷。
我曾想過做設(shè)計對一個程序員而言會不會是不務(wù)正業(yè),然而上面提到的每一個角色努力的目的都是為了打造出一個更好的產(chǎn)品,之間并沒有沖突。而將我的所學所想雜糅并傾注到一款產(chǎn)品中去,不斷打磨完善,再實現(xiàn)新的想法,這個過程我想我永遠不會覺得無趣。
- Mr.Weather 官網(wǎng)與下載地址:http://www.roczhang.com/mr.weather/
- Roc Zhang’s Blog: http://www.roczhang.com
阿澤
為什么沒安卓版本的
2018-02-17 15:29
阿澤
為什么沒用安卓版本的
2018-02-17 15:29
Frank
Roc 的這篇文章寫的非常非常的細致,記錄了 Mr.Weather 從無到有的設(shè)計歷程,我們今后會邀請更多的 Developer 來玩兒法分享他們的產(chǎn)品開發(fā)故事,大家如果有任何問題想與 Roc 溝通的,請在評論區(qū)給他留言吧!
2017-06-03 17:00