一个Android Wear应用的设计故事

2014-06-05 09:22:20来源:新浪科技作者:

美国Android Developer Blog周二刊登题为《一个Android Wear应用的设计故事》(An Android Wear Design Story)的文章,讲述了设计师罗曼·奴里克(Roman Nurik)和蒂莫西·乔丹(Timothy Jordan)第一次为Android Wear设

美国Android Developer Blog周二刊登题为《一个Android Wear应用的设计故事》(An Android Wear Design Story)的文章,讲述了设计师罗曼·奴里克(Roman Nurik)和蒂莫西·乔丹(Timothy Jordan)第一次为Android Wear设计应用的经历。

以下为文章全文:

几周前,我和蒂莫西聊起如何为可穿戴设备设计应用,以便验证我们为Google I/O 2014大会规划的一些内容。在谈到这些设备如何能够同时吸引普通用户和开发者的关注时,我们聊了很多。我们还谈到了用户情景,以及如何让我们开发的应用更加善于把握机会,在其能够发挥作用的情景中呈现自己。在可穿戴设备上,开发者必须要改变观念,不能再将应用视为网格中的一个图标,而应该将其当做覆盖整个操作系统的一个功能层。

\

尽管我之前为Android设计过很多触摸界面,而蒂莫西也在谷歌眼镜上拥有丰富的设计经验,但我们二人却从未有过Android Wear的设计经验。所以,我们决定将自己的想法付诸实践,看看为这个新平台设计应用究竟是什么效果。

在开始前,我们需要规划一个想法。我们去年参加了纳迪亚·迪里科娃(Nadya Direkova)举行的非正式谷歌眼镜应用设计大赛,我的团队设计了一款徒步旅行应用。这个想法是让你从附近选择一系列游览地,然后在不同地点之间步行,而且在每个地点都能够了解目的地的详细信息。

虽然当时的模型很粗糙,但我还是十分看好那个创意,所以在此次实践中,我们还会继续使用这个创意。这似乎是情景识别应用的完美案例,可以加强你的Android Wear体验。

为Android Wear设计步行应用

我们首先想到的是该应用的入口:用户将如何“启动”该应用?虽然使用“启动XYZ徒步旅行应用”语音指令是很标准的做法,但如果能在用户准备旅行时,在情景流中呈现一条通知,从而向其推荐附近的徒步旅行景点,肯定也很有吸引力。这些通知将具备“低优先级”,所以,只有当你解决了好友发送的文本信息等更重要的内容后,它们才会显示出来。

到这时,我们的兴奋情绪已经被调动起来,决定开始设计用户界面。我们并没有从头开始,而是使用了泰勒·灵(Taylor Ling)的Android Wear 0.1设计模板为基础,它同时包含了方形和圆形设备的界面。我们首先从方形开始,因为我们最熟悉的便是长方形的界面设计:

我必须承认,在如此紧凑的环境中设计界面的确令人激动不已。140×140dp(280×280px @ XHDPI)的空间确很有限,所以你需要对何时呈现信息以及如何呈现信息做出一些艰难的抉择。但这些问题恰恰是设计的乐趣所在。这会让你花费更多时间来思考,而用在Photoshop或Sketch上的作图时间则会相应地减少。

我们很快为方形设备绘制好了这款应用的其余部分,包括了少量额外屏幕:一个与下一站之间距离的动态通知,以及一个在你到达目的地后显示出来的长达4页的详细屏幕——你可以多花一些时间了解后一项信息。

事实上,Photoshop也只能做这么多了。对于一名设计师来说,要真正了解一个平台,就必须要亲手用用真正的设备(最好能长时间使用),看看你的作品实际呈现出来的效果。之后,你便可以对信息流的复杂度、触控目标的尺寸和文本的易读性进行评估。

幸运的是,我和蒂莫西手上都有测试设备——我有一台LG G Watch原型机,蒂莫西则拿到了一台Moto 360原型机。我们接下来需要通过一种方式,将我们设计的屏幕发送到这些设备上,从而对设计进行改进。几年前,我发布了一款Android Design Preview工具,让用户将自己设计的界面投射到联网的Android设备上。令我们欣慰的是,这款工具可以很好地兼容Android Wear!在LG G Watch上看到我们的原型界面后,我们做出了一些细微调整,对整个理念更有信心了。

我们之前从未设计过圆形用户界面,所以不确定这个新的考验究竟意味着什么。但说实话,实际操作起来却异常简单,甚至简单得令人难以置信:我们只花了1个小时就将所有的8个屏幕改造成了圆形效果。当你每次只需要在屏幕上展示最重要的两三条信息时,便只需要针对圆形设备优化这两三条信息即可。我们只进行了如下几项基本修改:

—— 将背景图片扩大到160×160dp(320×320px @ XHDPI)

—— 将内容边缘从方形界面的12dp扩大到圆形界面的26dp;这意味着内容在方形界面上是116×116dp,而在圆形界面上会略有缩小,仅为108×108dp

—— 将“继续旅行”等循环动作调整到表盘的中心位置
 
—— 在圆形设备上将某些简短的文字片段居中对齐,而不再沿用方形界面上的左对齐

—— 用情景流卡片填充边垫(平台会自动针对通知完成这一工作,所以我们其实并没有做什么)

在使用Android Design Preview将我们的模拟界面投射到Moto 360原型机上后,我们的兴奋之情溢于言表。说轻一点,我们的思维受到了震撼。

在完成了圆形和方形界面,并将其投射到我们的设备上以后,我们首次得以了解到为这个令人振奋的新平台设计应用是什么感觉。

设计Android Wear应用与设计桌面、手机和平板电脑应用截然不同。就像谷歌眼镜一样,你需要仔细思考你所呈献给用户的信息和活动,而根据用户所处的情景呈现出的内容更是要经过深思熟虑。

对设计师来说,这是一次愉快的体验——在设备尺寸和用户注意力等资源都很有限的情况下,深入思考自己的创意,更早、更频繁地调整这些创意,便显得更加重要。而真正的作图部分反而异常简单。

经过一番努力,我们终于将自己的想法付诸实践,投射到几年前还只存在于梦想中的设备上。这是我长期的界面设计工作中难得的愉快体验。还记得你第一次为Android设计了一款应用,并在你的Android手机上运行后的感受吗?这两种感觉几乎一模一样,只是Android Wear带来的愉悦之情更胜一筹,因为你把应用亲自戴在了自己的手腕上。我已经迫不及待地想让大家都来体验一下了。

赞助商链接: