我是 Mr.Weather 作者張鵬 Roc Zhang，CS 專(zhuān)業(yè)大三在讀。Mr.Weather 是第一個(gè)從 0 到 1 完全由我自己完成的 App，因此我也在這個(gè)過(guò)程中體驗(yàn)到了產(chǎn)品、設(shè)計(jì)、開(kāi)發(fā)甚至是客服等各個(gè)角色。從構(gòu)建 Mr.Weather 首版雛形至今已經(jīng)超過(guò)一年，我想不如就從這幾個(gè)身份來(lái)聊聊 Mr.Weather 的故事。

產(chǎn)品

思路的雛形與改變

坦白說(shuō)，開(kāi)始動(dòng)手做 Mr.Weather 時(shí)我甚至沒(méi)想好到底要做個(gè)怎樣的產(chǎn)品，這也是為什么中間花費(fèi)了如此長(zhǎng)的時(shí)間。甚至于今天看來(lái)，雛形和現(xiàn)在的版本完全是兩個(gè)不同的產(chǎn)品。最開(kāi)始是在突發(fā)奇想下決定要做一個(gè)程序員風(fēng)格的天氣 app，實(shí)際上就是類(lèi)似于 Terminal ，直接輸入各種命令，完成查詢(xún)某個(gè)城市天氣之類(lèi)的動(dòng)作。而在這種奇特的思想驅(qū)動(dòng)下，甚至還加入了類(lèi)似聊天機(jī)器人的對(duì)話(huà)功能。整體風(fēng)格也是盡力模仿像素風(fēng)，甚至字體也是用的 Xcode 默認(rèn)的 Menlo。當(dāng)時(shí)還在大二的我覺(jué)得這種感覺(jué)很酷，而現(xiàn)如今看起來(lái)則是有些慘不忍睹了。

之后大二暑假實(shí)習(xí)期間的一個(gè)晚上去 Kevin 家吃飯，我掏出手機(jī)給 Kevin 看了當(dāng)時(shí)的 Mr.Weather。依稀記得 Kevin 說(shuō)挺有趣但感覺(jué)有些自嗨，我認(rèn)真一想感覺(jué)還真的是。就算是程序員，也不會(huì)每次想要查溫度都要輸入一個(gè) weather -temp 呀。

思考

在實(shí)習(xí)結(jié)束后，我開(kāi)始認(rèn)真考慮究竟應(yīng)該做一個(gè)怎樣的天氣應(yīng)用。如同買(mǎi)鉆頭的人需要的往往不是鉆頭而是洞，大部分用戶(hù)查看天氣都不是為了研究天氣數(shù)據(jù)，而是想要知道這些數(shù)據(jù)會(huì)怎樣影響到自己，自己需要做出怎樣的決定。

在仔細(xì)觀(guān)察自己和朋友的使用習(xí)慣之后，初步將需求劃分成兩部分：一是經(jīng)常發(fā)生的，有規(guī)律的動(dòng)作，比如我們會(huì)在早晨出門(mén)前查詢(xún)天氣，通過(guò)降雨概率決定要不要帶傘，或者通過(guò)空氣質(zhì)量指數(shù)決定要不要戴口罩，再或者在周五晚上看看周末的天氣適不適合安排出游之類(lèi)。而另一部分則是相對(duì)隨機(jī)的，沒(méi)有太多規(guī)律的動(dòng)作。比如臨出門(mén)時(shí)天色暗下來(lái)了查查當(dāng)前天氣。于是根據(jù)這兩類(lèi)需求，我開(kāi)始重新考慮 Mr.Weather 的 feature。對(duì)于第一類(lèi)規(guī)律性的動(dòng)作，我做了 Mr.Weather 中最重要的一個(gè)功能，自定義天氣通知。你可以自定義觸發(fā)通知的條件、監(jiān)測(cè)時(shí)間與通知發(fā)送時(shí)間，如 “當(dāng)天的空氣質(zhì)量指數(shù)大于100時(shí)，在早晨提醒我?guī)Э谡帧?，又或是“第二天的降雨概率大?50% 時(shí)，在晚上提醒我裝好傘”。這些規(guī)律性的動(dòng)作，就可以完全交給 Mr.Weather 來(lái)監(jiān)控，用戶(hù)不必每次手動(dòng)查看了。而對(duì)于另一方面的需求，我給出的解決方案是當(dāng)用戶(hù)主動(dòng)查看時(shí)，以最直觀(guān)的方式告訴他所需要的信息。如 App 中包涵了分為四大類(lèi)別的可定制卡片，擁有實(shí)時(shí)播報(bào)和天氣動(dòng)畫(huà)的 Widget。并且盡量更直接的告訴用戶(hù)天氣變化趨勢(shì)以及將帶來(lái)怎樣的影響，而不單是天氣數(shù)據(jù)。

每一次增改 feature 都可能讓已經(jīng)完成的設(shè)計(jì)和代碼被放棄重來(lái)，甚至讓完成進(jìn)度變成遙遙不可期。在經(jīng)歷了第一版的 Mr.Weather 之后，我也學(xué)著更謹(jǐn)慎的面對(duì)每一個(gè)設(shè)想和功能。

克制

在考慮其他功能點(diǎn)時(shí)我也相對(duì)保持克制，引用 Alan 的話(huà)說(shuō)，我非常討厭 “航母級(jí)應(yīng)用”，所有的生活需求被一個(gè) App 接管是一種非?？膳碌氖?。相比而言我更喜歡目的明確的產(chǎn)品，用起來(lái)干脆利落。少即是多的道理誰(shuí)都會(huì)講，而增加功能卻經(jīng)常是一個(gè)思考成本相對(duì)更低的選擇。而由于 Mr.Weather 是個(gè)人作品，所以也有機(jī)會(huì)更加純粹，無(wú)需面對(duì)所謂的 「 KPI 壓力 」 吧。

設(shè)計(jì)

我很敬佩那些設(shè)計(jì)優(yōu)秀重視細(xì)節(jié)的產(chǎn)品，這樣的產(chǎn)品處處都會(huì)充滿(mǎn)著設(shè)計(jì)者的巧思與靈魂。同時(shí)我很享受做設(shè)計(jì)的過(guò)程，打開(kāi) Sketch 看到一個(gè)個(gè) Artboard 排列在屏幕上的感覺(jué)總會(huì)讓人非常愉悅。從自己畫(huà)下 Mr.Weather 中用到的每一個(gè)小圖標(biāo)，到設(shè)計(jì)調(diào)整各個(gè)天氣動(dòng)畫(huà)，甚至是通知提示音，很多細(xì)節(jié)都需要時(shí)間和精力打磨。

氣質(zhì)與迭代

設(shè)計(jì)的理念倒不像產(chǎn)品一樣，從開(kāi)始時(shí)我就希望 Mr.Weather 的設(shè)計(jì)干凈明晰。Mr.Weather 的整體配色相對(duì)克制，也盡量注意留白。整體由信息驅(qū)動(dòng)，尋求干凈開(kāi)闊。由于在產(chǎn)品構(gòu)思上的更新導(dǎo)致整個(gè)產(chǎn)品有過(guò)數(shù)次推翻重來(lái)，我自己又稍稍有些強(qiáng)迫癥，經(jīng)常會(huì)和一個(gè)圖標(biāo)、界面死磕，找不到想要的感覺(jué)就會(huì)再來(lái)。單一個(gè)設(shè)置界面就反反復(fù)復(fù)改了數(shù)版，而至于引導(dǎo)界面、主界面之類(lèi)則更甚，經(jīng)常是自己看著不舒服就推倒再來(lái)。不過(guò)除去做個(gè)人作品怕是很難會(huì)有這樣的時(shí)間成本可以讓自己打磨了。好在最后的結(jié)果自己總體還算比較滿(mǎn)意，當(dāng)然還是有很多不足（比如不少用戶(hù)甚至都沒(méi)能找到設(shè)置入口）。

字體

配合 Mr.Weather 整體的氣質(zhì)，我為 Mr.Weather 的英文與數(shù)字選擇了 Gill Sans 這款字體。Gill Sans 被譽(yù)為英國(guó)的 Helvetica，甚至在 SHERLOCK 電影前的 BBC 片頭里還能見(jiàn)到他的身影。雖然我對(duì)字體的了解還非常淺薄，但我很喜歡這款字體那種相對(duì)謹(jǐn)慎且平和的氣質(zhì)。在 Sketch 和 iPhone 屏幕上反復(fù)比較之后，我覺(jué)得 Gill Sans 相對(duì) Open Sans 、Helvetica 等字體與 Mr.Weather 整體更加契合，于是選定了使用 Gill Sans。而中文字體由于考慮到對(duì)應(yīng)用整體大小的控制，所以算是在妥協(xié)之下選擇了系統(tǒng)默認(rèn)的蘋(píng)方。

動(dòng)畫(huà)

Mr.Weather 的天氣動(dòng)畫(huà)依然在尋求自然干凈的感覺(jué)，晴天、陰天、雨天及下雪等場(chǎng)景的動(dòng)畫(huà)也遵循 Mr.Weather 整體的配色。 除去較大的天氣動(dòng)畫(huà)之外，在 App 中我也加入了很多細(xì)小的動(dòng)畫(huà)。比如下拉菜單時(shí)后面背景的逐漸模糊，添加卡片時(shí)類(lèi)似一推滑動(dòng)的 toggle 動(dòng)畫(huà)，天氣卡片下方展開(kāi)分類(lèi)篩選時(shí)的提示用戶(hù)可以滑動(dòng)的動(dòng)畫(huà)，以及各類(lèi) alert 動(dòng)畫(huà)等等，都希望能營(yíng)造出一種自然、干凈、利落的體驗(yàn)。

Mr.Weather 中的動(dòng)畫(huà)在有些地方使用了 Facebook 的 pop 與 Airbnb 的 Lottie，而 95% 以上的動(dòng)畫(huà)還是使用了 CoreAnimation 來(lái)完成。

開(kāi)發(fā)

由于自己程序員的主要身份，所以整體開(kāi)發(fā)上的煩惱基本只剩下 Xcode 經(jīng)常崩潰的自動(dòng)提示與 Swift 越來(lái)越長(zhǎng)的編譯等待時(shí)間。但最重要的天氣通知?jiǎng)t還是遇到了一些問(wèn)題。對(duì)于如何處理天氣通知想過(guò)非常多的辦法，甚至于一開(kāi)始打算把所有用戶(hù)的通知設(shè)置保存在 Server 上，由 Server 來(lái)處理判斷再給客戶(hù)端發(fā)通知。而這種辦法對(duì)于目前的 Mr.Weather 來(lái)說(shuō)基本不可行。后來(lái)還是采取了后臺(tái)應(yīng)用刷新和遠(yuǎn)程靜默通知結(jié)合的方式來(lái)解決。

數(shù)據(jù)源與運(yùn)營(yíng)壓力

另一件比較煩心的則是天氣數(shù)據(jù)源的選擇。先后比較了幾個(gè)數(shù)據(jù)源，最后還是選擇了一個(gè)付費(fèi)數(shù)據(jù)源。畢竟準(zhǔn)確、及時(shí)的數(shù)據(jù)對(duì)于一個(gè)天氣應(yīng)用至關(guān)重要，也會(huì)在很多時(shí)候影響用戶(hù)體驗(yàn)。而在上架時(shí)，考慮到 Mr.Weather 目前的完善狀況，覺(jué)得現(xiàn)在收費(fèi)還是對(duì)用戶(hù)不太負(fù)責(zé)的行為，所以選擇了免費(fèi)也沒(méi)有添加內(nèi)購(gòu)選項(xiàng)。后來(lái) Mr.Weather 的日訪(fǎng)問(wèn)突然增長(zhǎng)，按次收費(fèi)的天氣接口費(fèi)用讓我措手不及。非常感動(dòng)的是不少用戶(hù)都給予了捐助支持，也幫助我在想清 Mr.Weather 的未來(lái)之前緩解了不少壓力。

內(nèi)測(cè)

在 Mr.Weather 上架之前，我先通過(guò) TestFlight 發(fā)布了數(shù)個(gè)測(cè)試版本。由于開(kāi)發(fā)者使用時(shí)的一些慣性非常容易忽略掉不少問(wèn)題，所以進(jìn)行測(cè)試非常必要。 Mr.Weather 先后從 0.1 測(cè)到 0.7，其中數(shù)次都是凌晨新版本通過(guò)審核后交由朋友們測(cè)試一天，我在當(dāng)天晚上就會(huì)做修改調(diào)整，再提交下一版本審核。朋友們給了很多反饋與建議，數(shù)次下來(lái) Mr.Weather 的問(wèn)題也少了很多，方提交到了 AppStore。 值得一提的是，作為自己第一次提交給 AppStore 的應(yīng)用，一次就通過(guò)審核了，而且前后一共也只用了兩三天的時(shí)間，非常意外。

上架后與用戶(hù)反饋

Mr.Weather 于 5 月 18 日上架到了 AppStore ，至今差不多兩周的時(shí)間。期間最佳排名為國(guó)區(qū)天氣類(lèi)免費(fèi)榜第 25 名。而上架之后，閱讀每日的反饋與來(lái)信也變成一件非常有趣的事情，也正是通過(guò)這個(gè)渠道，結(jié)識(shí)到了不少用戶(hù)甚至是設(shè)計(jì)師和開(kāi)發(fā)者，感覺(jué)非常奇妙。

尾巴

從大二開(kāi)始參與過(guò)大大小小的項(xiàng)目開(kāi)發(fā)，在團(tuán)隊(duì)中每個(gè)人各司其職，相互配合與學(xué)習(xí)的過(guò)程讓我非?？鞓?lè)。而第一次通過(guò) Mr.Weather 完整體驗(yàn)了從 0 到 1 制作一款產(chǎn)品，自己獨(dú)立掌控產(chǎn)品的方方面面則別有一番感觸。這兩種體驗(yàn)都讓我投入且著迷。

我曾想過(guò)做設(shè)計(jì)對(duì)一個(gè)程序員而言會(huì)不會(huì)是不務(wù)正業(yè)，然而上面提到的每一個(gè)角色努力的目的都是為了打造出一個(gè)更好的產(chǎn)品，之間并沒(méi)有沖突。而將我的所學(xué)所想雜糅并傾注到一款產(chǎn)品中去，不斷打磨完善，再實(shí)現(xiàn)新的想法，這個(gè)過(guò)程我想我永遠(yuǎn)不會(huì)覺(jué)得無(wú)趣。

• Mr.Weather 官網(wǎng)與下載地址：http://www.roczhang.com/mr.weather/
• Roc Zhang’s Blog: http://www.roczhang.com