从零开始,设计一款极简相机 app(李昀临 · Google 设计师)

从零开始,设计一款极简相机 app(李昀临 · Google 设计师)

《UX Coffee 设计咖》是一档关于用户体验和产品设计的播客节目。如果你想要收听本次访谈的音频节目,或是了解更多业界大咖的故事,就到苹果 Podcast网易云音乐喜马拉雅 FM 搜索「ux coffee」订阅收听我们的节目吧。



这次访谈,我们请到了 Google 安卓团队的设计师李昀临。她正在为去年推出的 Pixel 手机做操作系统的设计。在加入 Google 之前,她是摩托罗拉颇受好评的旗舰机 Moto X 的设计师之一。如今,李昀临从事用户体验设计已近 10 年,回看她的设计师生涯,却有一个与设计似乎并不那么相关的起点。

从新闻学到AR游戏设计

UX Coffee:你在台湾国立政治大学新闻系读的本科,是什么让你对设计产生了兴趣?

李昀临:新闻和设计其实是有些联系的。报纸编辑也要懂版面设计的概念,比如层次、大小、视觉动线。采访记者常常说的「目标读者是谁」,其实和设计师要明确使用对象也是一个道理。

UX Coffee:是什么让你决定出国学习的呢?

李昀临:大学三年级细分专业时,我选择了网络多媒体方向,也认识了我的恩师张宝芳老师。她是我们系网络与多媒体学科的奠基人,也是比较早出国的一批新闻系学生之一,曾经在硅谷工作过一段时间。她向我们介绍了许多硅谷出现的新的趋势,也是她的建议让我决定出国留学。

UX Coffee:你去的项目是卡内基梅隆大学(Carnegie Mellon University,以下简称 CMU)的娱乐科技硕士(Master of Entertainment Technology),听上去是一个很有趣的专业。

李昀临:是的,我们专业的毕业生很多进入了 Disney、Pixar 这类娱乐产业公司做电影、游戏相关的工作。当时我不觉得自己可以申请上,毕竟 CMU 是计算机很强的学校,我又没有相关的背景。但我还是厚着脸皮申请了,(而且)很幸运地就申请上了!


UX Coffee:可以介绍一下这个项目的课程吗?


李昀临:这个项目的课程偏实践。比如有一门在 CMU 全校都很有名的课,叫做构建虚拟世界(Building Virtual Worlds),其实就是现在很红的 VR、AR。我的课程项目之一是做一个运用虚拟现实的魁地奇游戏。小组成员中有人负责编程,有人做建模,有人做美工。我不会这三样(笑),就当制作人,帮助进行项目规划,代表团队上台展示成果。我还参与了音效的制作。最终做出的效果就是让玩家拿着一个装有传感器的扫把,通过左右摇晃来控制画面里的人物抢到金色飞贼。学期最后,我们会在学校礼堂展示项目成果给全校的同学们看,这个展示会已经成为 CMU 的一个传统了。


李昀临与组员共同完成的虚拟游戏魁地奇



从零开始,设计一款极简相机 app

毕业后,李昀临进入了一家制作 3D 图库插件的公司 Cooliris 担任设计师。2011 年 4 月,她加入了摩托罗拉的多媒体团队。这是一个很特别的节点。当时,Google 刚刚宣布以 125 亿美元的价格买下了摩托罗拉。时任 Google CEO 的拉里·佩奇指明这笔收购意在「进一步强化整个 Android 生态系统」。 加入 Google 后,摩托罗拉的下一步战略计划是打造一支 X phone。所谓 X 就是不确定,对设计师而言,它意味着要跳出已有的条条框框,重新想象手机平台上用户体验的可能性。这是一个不小的挑战。2013 年 8 月,Moto X 作为摩托罗拉加入 Google 后的首款旗舰机上市,被评价为一款「不完美但却最特别」的手机。它最被称道的创新之一就是对 Android 系统的优化,增加了许多新颖有趣又很人性化的交互设计。李昀临就是这些创新设计的创造者之一。


UX Coffee:你为 Moto X 设计了一款极简的相机 app,介绍一下这个项目吧。


李昀临:因为当时的目标是要做一个 「X phone」,我们就在想怎么做出一个不一样的东西。团队里的同事提到了一个 iOS 上的相机应用。这个相机只有一个按钮,按一下就能开始照相,长按开始录影。我们就想能不能做出一个像这样极简的产品,也许是一个不一样的挑战。


UX Coffee:这么极简对于一款系统自带的相机而言还挺大胆的。


李昀临:对,这确实有点太大胆了,很难满足大部分人对相机应用的需求。我们就从零开始,先把功能都拿掉,再一步步把需要的加回去。


UX Coffee:在加回去的过程中,你们的设计准则是什么?


李昀临:快。照相的时候要快,拍完后照片能很方便地分享出去。另外,除了拍照,这个应用还要能帮助用户更好地记录和整理自己的回忆。


UX Coffee:最终的设计方案是什么样的?


李昀临:我们让整个手机屏幕都成为相机的取景框。界面上只有两个按钮,一个在左下角用来切换前后镜头,另一个在右下角,按下去就开始录影。现在在 iOS 上,录影还是分为两步的,要先切换到录影模式再按下录影键。我们当时认为用户想要记录的瞬间是非常重要的,即使记录下多余的也不能错过,所以我们的设计让用户能够一键就开始录影。


UX Coffee:那其他的功能放在哪里?


李昀临:往左边滑是设置,往右滑是查看之前的照片。


motoX相机中的手势交互



UX Coffee:虽然手势交互现在已经被广泛使用了,但这在当时应该是很新颖的设计方案。但是手势也存在难以被用户发现的问题,你们是怎么解决的?


李昀临:用户在最初打开 app 的时候就会看到引导界面,可以让用户通过亲自操作来熟悉主要的交互方式。除了能不能被发现,还有一个挑战是用户能不能记住这个手势交互。这对设计师的要求就是要把手势设计得非常自然,让用户可以很快学会。


UX Coffee:你们会做用户测试来确定交互手势是否自然吗?


李昀临:设计过程中我们做了八次用户测试。当时用 Flash 做的原型,虽然比较简陋,但是测试结果显示用户是可以发现并使用这些交互手势的。用户积极的反馈也让我很开心。


UX Coffee:测试时是在手机上播放 Flash 吗?


李昀临:不是的。用户可以真实地在手机上滑动、点击。单击照相,长按连续拍照,这些交互都可以用 Flash 实现。(小编表示惊呆了😲)


UX Coffee:这个项目里有不少新颖的设计,比如手势交互和极简界面,在推进的过程中会不会受到产品经理或者程序员的阻力?


李昀临:当然会。幸运的是当时我们有充裕的时间做设计、原型和测试。接触到工程师的时候,我们已经有一个交互原型了。如果只是静态图,他们可能会质疑「你真的知道你在讲什么吗」。但有一个可以把玩的原型让他们很容易地体会到这个产品真的很不一样、很有趣。另一方面,我们根据用户数据,对每一项功能的使用频率进行了比较。在最终发布的产品中,我们把原本设计中 40 个以上的功能精简到了最常用的 8 个。



只用黑白两色创造打动用户的设计

UX Coffee:你在摩托罗拉还参与了另一个项目 Moto Display,对手机上的通知功能做了革新。这个功能在 Moto X 发布后获到了不少用户和业界的好评。


李昀临:这是一个很有挑战的项目。当时大多数手机在有新信息时,会闪烁 LED 来提醒用户。如果想要知道更具体的信息,用户就必须点亮屏幕查看。这其实是一个很耗电的过程,因为它会唤醒整部手机,手机上的应用也会开始运行。这个项目的目标就是在不唤醒整个手机的情况下提供用户必要的信息,来实现省电的目的。


UX Coffee:你们是怎么做到的呢?


李昀临:Moto X 使用的 OLED(Organic Light-Emitting Diode,有机发光二极管)屏幕可以做到每个像素独立发光。也就是说如果显示信息时只点亮一个区域的像素点,这就会非常省电。但是因为屏幕只能有亮和不亮两种状态,设计的时候就只用到了黑、白两种颜色。


UX Coffee:这有点像武林高手,只在需要的时候发力。只有黑和白两种颜色,连灰度都没有,这感觉确实很难。最终的效果如何呢?


李昀临:最终的设计用了逐层为用户提供信息的方式。当收到新消息时,屏幕上会出现一个简单的图标,用户大概可以知道「我有一个新的邮件或者短信」。当按下图标时,用户就可以看到更具体的信息。另一个大家很喜欢的设计是用手在手机上面挥一下来点亮屏幕查看时间。这用的是红外线感应技术,这种感应器本身的耗电也很少。这个设计的初衷在于很多时候用户打开手机只是为了看一下时间,如果用挥一下的方式显现时间,过一会让手机自己睡眠,就要比唤醒整个手机再关掉省电得多。


motoX 锁屏界面上的通知功能可以为用户逐层提供信息



UX Coffee:这很像刘谦的魔法,手一挥就有东西出现。现在应该有不少产品借鉴了这个理念,比如 Apple Watch 用手盖上,屏幕就会暗下去,手抬起来,屏幕就会亮起来。



设计进阶:如何破解复杂系统的设计

2015 年底,李昀临成为了 Google 安卓组的设计师,上手的第一个项目很巧合地又是为一支全新的手机做设计 —— Pixel 手机。作为 Google 的「亲生儿子」,Pixel 比 Moto X 获得了公司更多的重视和资源。带着在摩托罗拉积累的安卓设计经验,李昀临希望能把这个「亲生儿子」培养好。

UX Coffee:安卓是一个非常复杂的操作系统,你具体是负责的是哪一块呢


李昀临:我现在负责的是客户服务和手机空间管理功能的用户体验。


UX Coffee:市场上有不少清理大师这类的应用,让用户可以一键清理手机内存,空间管理是想要在安卓系统内加入类似的功能吗?


李昀临:这类应用是在没有空间可用的情况发生后,让用户可以手动清理获得空间。我们希望实现的是在用户平时使用的过程中,为他们自动处理内存和优化空间,尽量避免手机内存不足的窘境。这是一个很崇高的目标(笑),实际做起来是很难的。我们现在想到的解决方案之一是当手机内存低于一定程度时,自动把已经在云端备份好的照片从手机上清除,因为照片常常是最占用手机空间的一类文件。


UX Coffee:你觉得做这个设计的难点是什么?


李昀临: 难点之一就是判断什么东西可以删除、什么不可以,要判断自动到什么程度会让用户觉得失去了控制或隐私被侵犯。比如说网络上下载的文件很多时候可以更快地被自动清除,因为用户通常只需要打开这些文件一次。在 iOS 平台上这类文件甚至没有办法被重新打开。但是照片这类文件就要谨慎,因为通常是用户很在意的内容。已经备份好的文件也并不一定可以安全地删除,因为并不是所有用户都随时随地有网络信号,他们可能会想在没有信号的情况下打开文件。


另一个问题是要不要告诉,以及在什么时间点告诉用户他们的内容被删除了。提前告诉我们删除了文件和将来可能会发生的情况可以给他们控制感,但有些被清理的文件是用户都不一定了解,比如视频播放时产生的缓存,这种情况下你还要不要向用户解释呢?


UX Coffee:可以想象在做手机设置这类的设计时,你要做的是一个非常复杂的流程,从一个点开始,在不同的情况下产生许多不同的分叉。对于这类涉及复杂流程的项目,你一般是怎么着手的呢?


李昀临:在做系统层级的设计时,这的确是一个难点,因为它可能会影响到手机里的所有应用,带来一些未知的影响。我自己也没有一个最好的答案。通常我的方法是从一个 Golden Case(黄金情境)着手,假设所有事情都在理想的情况之下,列出相应的流程。然后再来考虑可能发生的错误。有些错误仔细想一下可能是可以规避的。如果不能规避,可以尝试把有共性的错误场景合并成一类,使用相同的设计。还有一点就是你并不需要做出解决所有问题的设计,如果把每一条分叉都走到底,花很多时间去设计那些出现概率小于 1% 的情况,其实并不是高效的工作方式。


UX Coffee:你用什么方式和产品经理、工程师沟通这些复杂的流程呢?


李昀临:我会用的工具是 spreadsheet(电子表格)。在表格里把所有可能情况、变数尽量完整地列出来,自己先把问题都想清楚了,再和工程师一起讨论,看看有没有漏掉的情况。我个人觉得这是一个很有效的方法。电子表格是工程师很熟悉的形式,沟通效率很高。当设计师和工程师在交互流程、可能发生的错误上达成共识时,接下来的设计工作就会变得很简单,不会出现设计稿做好了工程师却有不同意见的情况。


UX Coffee:你为 Pixel 手机做的另一个设计是它的开箱体验,英文叫做 out of box experience,能不能跟我们介绍一下这个概念?


李昀临:字面上,开箱体验就是当你拿到了一个新的手机,把它的包装盒一层一层拆开,查看说明书,撕掉保护膜,按下电源开机的过程。软件部分的开箱体验就是从用户按下电源、点亮屏幕的那一刻开始的。这是用户和手机的第一次接触,是给用户的第一眼印象。你当然希望能够保持用户的兴奋感,不让他们觉得失望。但其实开箱是一连串的很枯燥的手机设置。在设计的过程中,要想办法让整个流程更流畅,拿掉不必要的步骤,合理安排步骤的顺序来提高效率,让用户在完成设置之后觉得「哇!这个体验超棒的!」


Pixel 手机的外包装



UX Coffee:除了让用户简单、方便的完成设置,设计开机体验时还需要考虑到什么?


李昀临:开机设置的过程其实是把一连串不同的功能串在一起。这就需要和开发各个功能的团队合作。如果许多团队都认为自己的功能很重要应该放在开机设置中,你要怎么协调和取舍。另外,当把不同的功能放在一起时,要怎么保证整个体验的一致性和连贯性。同时,开机体验不只是功能的使用体验,也包括品牌的第一印象。在开箱体验中,要制造品牌的印象,带给用户兴奋感,这其实要比其他的部分更加重要。



Pixel 的开机动画也是对 Google 品牌形象的展现



李昀临的设计道路有很多元的一面,从学习新闻、网络多媒体到娱乐科技再到交互设计;也有很专注的一面,从2011年到现在,从摩托罗拉到 Google,她钻研了六年安卓系统的设计。无论是转变还是延续,李昀临把它们都视作为一种幸运。如果你对她的经历感兴趣,还想要了解更多,就戳下面嘉宾的联系方式吧。

嘉宾联系方式

李昀临的电子邮件:yunlingl@gmail.com

李昀临的个人网站:Yun-Ling Lee

————————

本期编辑:Safei、美鑫、赞赞、黑眼圈Chloe、吴艾蔚、帆阿帆

微信公众号:uxcoffee | 每周一杯咖啡,聊聊用户体验

文章被以下专栏收录
还没有评论
推荐阅读