开发者自述:一个Android Wear应用的设计经历

jopen 5年前

开发者自述:一个Android Wear应用的设计经历
开发者自述:一个 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 带来的愉悦之情更胜一筹,因为你把应用亲自戴在了自己的手腕上。我已经迫不及待地想让大家都来体验一下了。

来自: 新浪科技