空中瞭望台是永远改变我设计过程的辅助项目

已发表: 2022-03-10
快速总结 ↬空气质量是一个严重而复杂的问题。 它不像天气那么容易理解。 然而,通过创建各种快速迭代原型——不管多么假——我能够找到直接的答案来设计和编程我的 iOS 应用程序 Air Lookout。

2015 年 2 月,我开始开发一款名为Air Lookout的 iOS 应用。 该应用程序的目标是简化和消除空气质量信息的任何混淆。 经过一年多的夜间和周末工作,自 2016 年推出以来的总净收入不到 1,000 美元。 即使有这些数字,我也会重温每一个小时的工作。

我无法用金钱衡量的一件事是,创建Air Lookout的经历如何完全改变了我对从那时起从事的每个项目的设计和开发过程的看法。

关于空气质量的简要说明

世界各地的空气质量是一个严重的问题。 不管你住在一个充满汽车和公共汽车排放废气的大都市,还是一个树木多于人口的小镇。 空气质量会影响你的生活。 住在盐湖城,我们在冬天经历了一次倒转。 逆温层是一层热空气,可以捕获冷空气,包括产生的任何空气污染物。 这会在盐湖谷形成一层烟雾。 这些反转有时会持续数天或数周,并且取决于天气,每天都会发生变化。

Air Lookout 应用程序的快速预览
左:Air Lookout 应用程序的主屏幕。 中间:Air Lookout 中使用的条形图,显示了过去 12 小时空气质量站的 AQI。 右图:最新版 Air Lookout 中所有空气质量站的地图视图。

在启动完成的应用程序之前,如上所示,我必须先了解一百万个问题,然后才能开始基于解决方案和最少的假设构建设计。

跳跃后更多! 继续往下看↓
Air Lookout 应用程序的早期粗略线框图
原始(并且令人难以置信的尴尬)线框。 值得注意的是:简单的要点——地图是几个月的努力,直到 v1.3 才发生

创建空气质量应用程序的总体任务是艰巨的。 然而,当我把它分解成更小的部分时,它似乎并不可怕。 事实上,第一步:创建一个可以帮助我理解信息组织的快速设计,看起来相当简单。 我之前已经为许多不同的客户执行过这个初始过程一百次。 每个项目都从白板线框开始,设计师致力于从中创建初始设计。 至少,这是我的习惯告诉我的。

我在上述线框图和初始设计中所做的假设数量在整个过程中被证明是错误的,令人震惊。

Air Lookout 的初始设计有很多错误的假设。
原始而幼稚的设计。 我认为这里唯一大部分保持不变的是奖杯和设置齿轮图标。

假装它直到你(字面上)成功

在创建线框草图之后,我将我制作的几个静态设计上传到了 InVision。 有了它,我可以整天打开假应用程序。 我在等晚餐做饭的时候使用这个应用程序是什么感觉? 当我上车的时候? 很快我注意到我有很多反复出现的问题。 颜色又是什么意思? 橙色比黄色差,对吧? 但是空气质量指数(AQI)从 0 到 500。 为什么? 而且,最重要的是,我一直有的问题是:这对我的一天有何影响? 我可以在外面锻炼吗?

基于我在污染物方面反复出现的许多问题以及它们如何影响我的一天,我开始在 Invision 中添加可以充当“备忘单”的假屏幕。 最初只是一个简单的污染物定义,只是为了在设计和开发应用程序时帮助提醒我,最终作为最终功能添加到应用程序中。 现在,在当前应用程序中,点击污染物名称将带用户进入包含信息源列表和更多信息链接的定义(该流程显示在当前应用程序屏幕截图中)。 我发现有时对设计者或开发者有用的信息对用户也有用

车站详情
在当前应用程序中查看站点详细信息(左)并滚动将显示单个污染物测量值(中),如果点击,将显示污染物的定义以及任何信息或统计数据的来源(右)。

自然地,如前面的线框图所示,我倾向于使用 UI 来通过邮政编码添加和管理位置。 但是,在使用了假原型之后,我发现这个过程很艰巨。 为什么要让用户经历整个流程? 如果我开车去帕克城滑雪一天怎么办? 还是羚羊岛适合越野跑? 盐湖城,空气质量站,将不再是最近的了。

每天,我发现我只关心当前位置的空气质量,而不一定是我家的位置。 而且,对我来说幸运的是,iPhone 配备了相当不错的消费级 GPS 和定位服务 API。 因此,我从应用程序中删除了整个位置 Create/Read/Update/Delete UI 和 flow。 我决定当前位置概览对所有人来说都是最快和最有用的。 我能想象这会令人沮丧的唯一用户是检查多个位置的高级用户。 但提醒我最初的目标——简化空气质量——为我的决定增加了信心。

为了测试这一点,我制作了更多的假屏幕在 InVision 中进行测试。 我没有通过伪造的 UI 和视图流来敲击,而是将原型设置为通过我的伪造 GPS 位置更新和定时转换的自动化步骤。 然后,当我去北盐湖的一家咖啡店或开车去帕克城时,我会打开我的假应用程序,看它更新并向我显示不同位置的新数据。

我第一次使用这个新原型时,我可以说这是一个巨大的改进。 当设备具有某些内置功能时,使用这些功能可以通过减少界面设计来获得更好的用户体验。 如果我从未离开 Photoshop 并且没有想到我的手机上有一个真正的空气质量应用程序,我将很难得出这个结论。

InVision 原型中使用的城市详细视图的早期设计。
我的“启用位置”InVision 原型的设计。

从代码开始

在很多客户项目中,我推荐并监督了用户测试。 对于Air Lookout来说,这不是一个选择。 我已经知道会有微薄的利润,而且用户测试肯定超出了我的预算。 我还知道,一旦我启动了应用程序,我就会有用户和反馈。 我能做的任何事情来简化应用程序都会加快速度。 在我看来,我宁愿推出一个更简单、制作精良的应用程序并获得用户反馈,而不是为一个假设错误的非常复杂的应用程序苦恼很长时间。

我的习惯告诉我,使用 InVision 原型后的下一步应该是设计迭代。 这将是任何此类性质的客户项目的流程。 但是,我对数据的质量有很多疑问,并且担心我是否能够使用 UIKit 将数据可靠地传输到我的 iPhone 上。 我没有返回 Photoshop,而是打开了 Xcode。

为了实现我想要的功能,我制作了一个非常简单(而且大部分都损坏了)的单视图 iOS 应用程序,它可以显示真实数据。 最初,该应用程序甚至没有自行刷新。 如果我想要新数据,我必须手动终止应用程序并重新打开它。 但是,至少它有最新的相关数据(包括我的位置!)。

早期原型的截图
左:单视图 Air Lookout 原型的屏幕截图。 请注意,我什至没想到 AQI 名称会超过两行(哎呀)。 右图:同一个单一视图应用程序滚动显示附近的其他车站。 这个层次结构保留在最终的应用程序中(有很多额外的修饰)。

…然后回到设计

在制作这个最终留下来的粗略原型时,我在代码中做出了很多设计决策。 最引人注目的是显示 AQI 颜色的大色块和大位置文本。 我从来没有以开发过程为这样的视觉设计提供信息的方式工作。 但是,我不确定在使用 Photoshop 或 Sketch 等传统设计工具时是否会发现这一点。 毕竟我只是改变了背景颜色,因为我懒得创建另一个 UIView 来表示 AQI 颜色。

从这里开始,很容易将屏幕截图导入 Photoshop 并进一步完善它。 在 Photoshop 中使用间距和字体大小要快得多,而不是在每次更改后等待应用程序重新编译(特别是考虑到这又是 Swift 2 天的事了)。

这显示了我用来根据空气质量为 Air Lookout 调整不同颜色状态的 Photoshop 测试文件。
在我发现使用 AQI 色块后,我花了更多时间在 Photoshop 中调整颜色以增加对比度和美感。 感谢我的妻子,一位插画家,感谢她在这一步上提供的帮助。

许多后续视图的设计迭代过程最终都遵循与此非常相似的模式。 我会创建一个粗略的工作原型——在代码中进行快速的设计即兴创作——使用它几天或几周,然后在 Photoshop 中重新创建和修改视图。 由于在进行任何静态设计之前我已经使用过原型,因此我是视图需要或不需要什么以及优先级和层次结构应该在哪里的专家。

在这个过程中,对我来说最大的惊喜之一是需要构建一个能够正确显示数据和读数的工作原型。 我什至在开始静态设计阶段之前就对数据有了了解。 作为一名设计师,如果我自己不完全理解空气质量的工作原理,我怎么可能开始像专家一样解释空气质量的复杂性。 创建和使用这些原始原型让我在短时间内获得了经验和专业知识。

…永远

很多晚上,我会在 Photoshop 和 Xcode 之间来回奔波无数次。 最终,对于我正在解决的任何问题,使用感觉最快的任何工具都感觉很舒服。 有时是代码,有时是像 Photoshop 这样的传统设计工具。 有趣的是,Photoshop 并不总是寻找视觉设计解决方案的最快工具,尤其是在它处理动态数据时。

应用真实数据预览
左:完成的应用程序中不健康的色块和粒子动画(真实数据)。 中:成品应用中不健康的敏感群体色块和粒子动画(真实数据)。 右图:成品应用中的中度色块(真实数据)。

验尸

启动Air Lookout后,很难判断我的决定是否正确。 我收到了几封来自用户的电子邮件,他们抱怨缺少搜索和添加位置的传统方式。 然而,我很高兴我采用了这种更简单的方法。 位置搜索始终是一项功能,如果有足够的用户反馈请求,我可以稍后将其添加到应用程序中。 我确信我的结论——经常使用我的假原型得出——是正确的决定。

同样,我最终在代码中做出了许多设计决策,这些决策最终出现在最终的应用程序中。 如果没有色块(以及许多其他类似的决定),我的应用程序很有可能看起来像所有其他可用的空气质量应用程序。

如果我要重新执行此过程,则值得使用现有的 UIKit 组件构建交互式线框原型。 基本上跳过了 InVision 原型并从代码原型开始。 从那里开始,了解 UIKit 组件的价值或不足之处,并全面了解我需要处理的数据和数据关系,开始静态设计会容易得多。 然后,我可以使用真实数据更快地获得更真实的应用体验,而不是围绕着一个虚假的 InVision 原型。

现实与应用

在过去,尤其是当我曾经在一家机构工作时,我会建议在浪费开发人员已经有限的时间来构建基于早期假设的东西(尤其是以后可能需要更改或改进的任何东西)之前进行彻底的设计探索和迭代)。 然而,现在,我对设计师和开发人员合作创建一个使用原生组件制作的可点击线框应用程序原型来测试和验证任何早期假设或想法的可能性更加感兴趣。

也许一个团队可以由能够设计和开发的个人组成,以促进这部分过程(并进一步消除两个角色之间的语义障碍)。 我相信这是一个更有效的设计和开发过程,将为任何交互式项目的设计基础奠定更坚实的基础。

现在,我面临的挑战是弄清楚如何在这个非常规流程中向客户推销。

Air Lookout 于 2016 年推出,可从 App Store 下载。