空中瞭望台是永遠改變我設計過程的輔助項目

2015 年 2 月，我開始開發一款名為Air Lookout的 iOS 應用。 該應用程序的目標是簡化和消除空氣質量信息的任何混淆。 經過一年多的夜間和周末工作，自 2016 年推出以來的總淨收入不到 1,000 美元。 即使有這些數字，我也會重溫每一個小時的工作。

我無法用金錢衡量的一件事是，創建Air Lookout的經歷如何完全改變了我對從那時起從事的每個項目的設計和開發過程的看法。

關於空氣質量的簡要說明

世界各地的空氣質量是一個嚴重的問題。 不管你住在一個充滿汽車和公共汽車排放廢氣的大都市，還是一個樹木多於人口的小鎮。 空氣質量會影響你的生活。 住在鹽湖城，我們在冬天經歷了一次倒轉。 逆溫層是一層熱空氣，可以捕獲冷空氣，包括產生的任何空氣污染物。 這會在鹽湖谷形成一層煙霧。 這些反轉有時會持續數天或數週，並且取決於天氣，每天都會發生變化。

在啟動完成的應用程序之前，如上所示，我必須先了解一百萬個問題，然後才能開始基於解決方案和最少的假設構建設計。

創建空氣質量應用程序的總體任務是艱鉅的。 然而，當我把它分解成更小的部分時，它似乎並不可怕。 事實上，第一步：創建一個可以幫助我理解信息組織的快速設計，看起來相當簡單。 我之前已經為許多不同的客戶執行過這個初始過程一百次。 每個項目都從白板線框開始，設計師致力於從中創建初始設計。 至少，這是我的習慣告訴我的。

我在上述線框圖和初始設計中所做的假設數量在整個過程中被證明是錯誤的，令人震驚。

假裝它直到你（字面上）成功

在創建線框草圖之後，我將我製作的幾個靜態設計上傳到了 InVision。 有了它，我可以整天打開假應用程序。 我在等晚餐做飯的時候使用這個應用程序是什麼感覺？ 當我上車的時候？ 很快我注意到我有很多反復出現的問題。 顏色又是什麼意思？ 橙色比黃色差，對吧？ 但是空氣質量指數（AQI）從 0 到 500。 為什麼？ 而且，最重要的是，我一直有的問題是：這對我的一天有何影響？ 我可以在外面鍛煉嗎？

基於我在污染物方面反復出現的許多問題以及它們如何影響我的一天，我開始在 Invision 中添加可以充當“備忘單”的假屏幕。 最初只是一個簡單的污染物定義，只是為了在設計和開發應用程序時幫助提醒我，最終作為最終功能添加到應用程序中。 現在，在當前應用程序中，點擊污染物名稱將帶用戶進入包含信息源列表和更多信息鏈接的定義（該流程顯示在當前應用程序屏幕截圖中）。 我發現有時對設計者或開發者有用的信息對用戶也有用。

自然地，如前面的線框圖所示，我傾向於使用 UI 來通過郵政編碼添加和管理位置。 但是，在使用了假原型之後，我發現這個過程很艱鉅。 為什麼要讓用戶經歷整個流程？ 如果我開車去帕克城滑雪一天怎麼辦？ 還是羚羊島適合越野跑？ 鹽湖城，空氣質量站，將不再是最近的了。

每天，我發現我只關心我當前位置的空氣質量，而不一定是我家的位置。 而且，對我來說幸運的是，iPhone 配備了相當不錯的消費級 GPS 和定位服務 API。 因此，我從應用程序中刪除了整個位置 Create/Read/Update/Delete UI 和 flow。 我決定當前位置概覽對所有人來說都是最快和最有用的。 我能想像這會令人沮喪的唯一用戶是檢查多個位置的高級用戶。 但提醒我最初的目標——簡化空氣質量——為我的決定增加了信心。

為了測試這一點，我製作了更多的假屏幕在 InVision 中進行測試。 我沒有通過偽造的 UI 和視圖流來敲擊，而是將原型設置為通過我的偽造 GPS 位置更新和定時轉換的自動化步驟。 然後，當我去北鹽湖的一家咖啡店或開車去帕克城時，我會打開我的假應用程序，看它更新並向我顯示不同位置的新數據。

我第一次使用這個新原型時，我可以說這是一個巨大的改進。 當設備具有某些內置功能時，使用這些功能可以通過減少界面設計來獲得更好的用戶體驗。 如果我從未離開 Photoshop 並且沒有想到我的手機上有一個真正的空氣質量應用程序，我將很難得出這個結論。

從代碼開始

在很多客戶項目中，我推薦並監督了用戶測試。 對於Air Lookout來說，這不是一個選擇。 我已經知道會有微薄的利潤，而且用戶測試肯定超出了我的預算。 我還知道，一旦我啟動了應用程序，我就會有用戶和反饋。 我能做的任何事情來簡化應用程序都會加快速度。 在我看來，我寧願推出一個更簡單、製作精良的應用程序並獲得用戶反饋，而不是為一個假設錯誤的非常複雜的應用程序苦惱很長時間。

我的習慣告訴我，使用 InVision 原型後的下一步應該是設計迭代。 這將是任何此類性質的客戶項目的過程。 但是，我對數據的質量有很多疑問，並且擔心我是否能夠使用 UIKit 將數據可靠地傳輸到我的 iPhone 上。 我沒有返回 Photoshop，而是打開了 Xcode。

為了實現我想要的功能，我製作了一個非常簡單（而且大部分都損壞了）的單視圖 iOS 應用程序，它可以顯示真實數據。 最初，該應用程序甚至沒有自行刷新。 如果我想要新數據，我必須手動終止應用程序並重新打開它。 但是，至少它有最新的相關數據（包括我的位置！）。

…然後回到設計

在製作這個最終留下來的粗略原型時，我在代碼中做出了很多設計決策。 最引人注目的是顯示 AQI 顏色的大色塊和大位置文本。 我從來沒有以開發過程為這樣的視覺設計提供信息的方式工作。 但是，我不確定在使用 Photoshop 或 Sketch 等傳統設計工具時是否會發現這一點。 畢竟我只是改變了背景顏色，因為我懶得創建另一個 UIView 來表示 AQI 顏色。

從這裡開始，很容易將屏幕截圖導入 Photoshop 並進一步完善它。 在 Photoshop 中使用間距和字體大小要快得多，而不是在每次更改後等待應用程序重新編譯（特別是考慮到這又是 Swift 2 天的事了）。

許多後續視圖的設計迭代過程最終都遵循與此非常相似的模式。 我會創建一個粗略的工作原型——在代碼中進行快速的設計即興創作——使用它幾天或幾週，然後在 Photoshop 中重新創建和修改視圖。 由於在進行任何靜態設計之前我已經使用過原型，因此我是視圖需要或不需要什麼以及優先級和層次結構應該在哪裡的專家。

在這個過程中，對我來說最大的驚喜之一是需要構建一個能夠正確顯示數據和讀數的工作原型。 我什至在開始靜態設計階段之前就對數據有了了解。 作為一名設計師，如果我自己不完全理解空氣質量的工作原理，我怎麼可能開始像專家一樣解釋空氣質量的複雜性。 創建和使用這些原始原型讓我在短時間內獲得了經驗和專業知識。

…永遠

很多晚上，我會在 Photoshop 和 Xcode 之間來回奔波無數次。 最終，對於我正在解決的任何問題，使用感覺最快的任何工具都感覺很舒服。 有時是代碼，有時是像 Photoshop 這樣的傳統設計工具。 有趣的是，Photoshop 並不總是尋找視覺設計解決方案的最快工具，尤其是在它處理動態數據時。

驗屍

啟動Air Lookout後，很難判斷我的決定是否正確。 我收到了幾封來自用戶的電子郵件，他們抱怨缺少搜索和添加位置的傳統方式。 然而，我很高興我採用了這種更簡單的方法。 位置搜索始終是一項功能，如果有足夠的用戶反饋請求，我可以稍後將其添加到應用程序中。 我確信我的結論——經常使用我的假原型得出——是正確的決定。

同樣，我最終在代碼中做出了許多設計決策，這些決策最終出現在最終的應用程序中。 如果沒有色塊（以及許多其他類似的決定），我的應用程序很有可能看起來像所有其他可用的空氣質量應用程序。

如果我要重新執行此過程，則值得使用現有的 UIKit 組件構建交互式線框原型。 基本上跳過了 InVision 原型並從代碼原型開始。 從那裡開始，了解 UIKit 組件的價值或不足之處，並全面了解我需要處理的數據和數據關係，開始靜態設計會容易得多。 然後，我可以使用真實數據更快地獲得更真實的應用體驗，而不是圍繞著一個虛假的 InVision 原型。

現實與應用

在過去，尤其是當我曾經在一家機構工作時，我會建議在浪費開發人員已經有限的時間來構建基於早期假設的東西（尤其是以後可能需要更改或改進的任何東西）之前進行徹底的設計探索和迭代）。 然而，現在，我對設計師和開發人員合作創建一個使用原生組件製作的可點擊線框應用程序原型來測試和驗證任何早期假設或想法的可能性更加感興趣。

也許一個團隊可以由能夠設計和開發的個人組成，以促進這部分過程（並進一步消除兩個角色之間的語義障礙）。 我相信這是一個更有效的設計和開發過程，將為任何交互式項目的設計基礎奠定更堅實的基礎。

現在，我面臨的挑戰是弄清楚如何在這個非常規流程中向客戶推銷。

注： Air Lookout 於 2016 年推出，可從 App Store 下載。