说三道四技术文摘-感悟人生的经典句子
说三道四 > 文档快照

唯“简”不破,Apple Watch App的设计之道

HTML文档下载 WORD文档下载 PDF文档下载
不同于其他智能穿戴设备,Apple Watch的特殊性向设计者提出了完全不同的要求。本文详细分析了在Apple Watch上可被利用的交互方式和注意事项,比官方用户手册更通俗。读完此文,你会了解更多如何为它的界面进行设计。

我很肯定那些看过Apple Watch功能的人对其有多么的失望,但是我想写的正是为你展示功能局限的好处。起先,当我研究Apple Watch的时候,想在它身上做的很多事情都不能实现。后来我意识到Apple Watch的关键在于瞥一眼某个应用,它应该配合某个应用而不是替代它。当我这样思考后才意识到Apple Watch能够真正被应用到的,不仅仅是通知,更重要的是使人们能够方便地使用最常用的那些App的核心功能。


我将让你通过几个关键的功能重新树立观点,借此我们会把Apple Watch视为真正的尤物。

保持简化

在我所有的设计里我都崇尚简化。你可以有一个复杂的想法但必须把它简化到使每个人都可以使用它。截止到目前为止苹果已经持续推行着这个理念——内容是关键,而Apple Watch通过确保用户使用一个非常轻量级的界面去实现有限的功能,在这一理念上践行得更远。

想像一下我们会怎么去设计一个模板?答案是创造一些功能有限但灵活的东西在各种设备上可以被使用。我们这么做的原因是这样一来就没有人能使用这个模板去创造完全不同的,一般的,丑陋的东西。苹果已经这样做了,但不要以为是为了让所有的应用看起来都是苹果出品,仔细想想,他们似乎是想要确保所有的应用为Apple Watch而生并简单易用,没有复杂的屏幕或不必要的组件,只是回到了我们真正需要的。

看看你手中的一个应用,想想它的核心功能,人们最常用的是什么?那个功能在Apple Watch上要怎么正确地被使用?你怎样针对这个核心功能去简化这个app,从而使人们愿意在Apple Watch上使用它而不是在iPhone上呢?

音乐软件可能是一个比较好的例子。它的主要功能一般是播放音乐、切换曲目和调节音量。此刻我们仅仅调节一下耳机上的装置就可以改变曲目和音量,但有件事情被忽视了:现在在播放什么曲目?怎样快速切换专辑而不是曲目?Apple Watch的第一屏应该负责这些主要功能,我们可以轻击屏幕显示当前播放曲目并选择另一个,或使用上下菜单从我们最常播放的前四个专辑中去选择。

功能至上

对于新屏幕我们能够使用的切换方式转场效果都是非常有限制的,因此在这里一切都变得非常简约。

模态界面

在每天使用的应用中我们已经习惯了这种模拟情景的交互方式,它同样也可以被利用在Apple Watch上作为在我们设备的主屏幕之外设置或控制其他的东西时。需要过渡的是之前我们已经习惯于当前屏幕上从下往上的移动方式。

旋转

根据屏幕底部显示的页码我们会通过简单地轻击去切换页面,但是不要被炫酷的视觉效果所迷惑,因为在AppleWatch每个页面在显示时都需要静态地呈现,炫酷的视觉效果没有意义。

推出

就像手机里的iOS应用一样,当我们选择去访问一个新的页面时,可以依然让它从左到右地显示出来。

层级菜单

这是Apple Watch上一个非常有趣的新功能,访问菜单的唯一办法就是长按界面。这个菜单的设计关键是呈现它与你当前页面的上下的层级联系,因此叫层级菜单。思考一下它作为一个菜单选项去改变你当前的环境,无论是切换一个模式还是从你的乐库中选择一个新的播放列表。关于层级菜单你可以在Apple Watch上使用更多的例子,只要保证它们总是与你要访问的页面相关联。

UI设计


为Apple Watch做设计最大的难点在于可供设计的界面区域非常有限。想象一下每个页面都是一个表盘,每个元件即一个元素,一切都不可重叠。设计一个HTML邮件有时也会如此,与Apple Watch在屏幕上的局限非常相似。

尽可能给你的按钮更多区域,至少从触摸最小区域标准44px开始设计,而且因为我们旨在让Apple Watch上的界面更简洁,你可能会使用更多的空间。

试着让屏幕上的元素保持最小,你要尽量尝试并避免因为各种用户行为而去滚动屏幕。通常我们应该只在阅读内容或选择一个项目列表(比如专辑列表)时需要滚动屏幕。

关于界面,苹果在非常努力地试图呼吁背景色保持黑色。而色彩只用于屏幕中的元素,这会促使设计中使用最少的颜色,在应用里只对屏幕上的关键信息进行着重强调从而引导用户使用。我收到一个关于Apple的评论说这样会帮助节省电池损耗,作为回应我只想说最好苹果能够改善硬件来确保我们可以自由设计。然而苹果保证设备上的应用在他们设定的标准之内,而不允许人们去创造他们任何想做的东西,那样可能会破坏人们的愿景。还有一个挑战,如果所有的Apple Watch应用都是黑色背景,你要怎么通过界面的元素让你的界面与众不同?如何让用户能够正确识别他们正在使用的应用?

最后一件和布局有关的趣事是苹果建议所有的元素都延伸到边界。原因是由于黑色的表身和建议使用的黑色背景,这两个表面形成了一个完整的屏幕,因此在设计时显示屏边缘的物理边框也被考虑在内。当然如果你打算使用一个背景色,可以像往常一样延伸到边缘的。(译者注:应该是为了达到无形边界的全屏UI视觉效果,这样有利于模糊软件与硬件之间的差别,带来更整体性的使用体验。)

图像

为提高设备的电池效率建议你尽可能地少用图片,但是如果你仍然要使用它们,可以用下面的这些方法。

背景图

整个屏幕的背景图是填充的,不会随着内容滚动,因此保证它简洁尽可能只有一种颜色,苹果最希望是黑色。

区域内容背景

另外一个使用背景图的例子是一个区域(类似容器)的视觉效果,背景图像上可能会被内容覆盖。这种情况下把你的内容作为一块区域来考虑,图像也只在这个特定的区域出现作为背景并保持静止(译者注:这个容器的背景可以是纯色也可以是背景图片,是Apple Watch布局的重要工具)。

独立图片

像往常一样,使用图片即简单又容易理解,但是为了提高电池效率依然尽量少地使用。

动画效果

我们都喜欢应用里的动效,不管是一个新的元素出现在屏幕上的动效,还是一些点击的反馈动效。在Apple Watch这里我们受到的局限是,展示动效的唯一方式是使用GIF动图。这意味着我们只能将动效运用在现有屏幕的元素上。使用动效的好处是用户与界面中元素发生交互行为时获得了反馈。以按钮为例,我们可能需要为轻击按钮设计一个弹起效果,或使用一连串的动画表达填完某项内容。

只要记住动效只能被用于某个元素被触发而设计相关的反馈就可以了。如果你的组件充满了动效,通过点击很多步,每一次点击都将会触发组件自身的动效。因此如果你有一整个100帧的动画和10个点击动作,每一次点击都会播放一次动画,你会发现快速地点击4次会使动画跳过前3次直接转到第4次的动效,想想有点可怕。这时可能要确保每个操作有少量的帧动画,以便在点击动作之间有时间去展示平滑的动效过渡。

手势

这是Apple Watch最大的局限之一。除了滑动旋转,我们不能使用其他任何类型的触摸手势。查看层级菜单我们可以使用的有滑动滚动、轻击、长按。实际上解除按钮让我们以一种更简单的方式思考用户如何浏览我们的应用程序,尤其是,这里只有一个手表,我们所设计的的一切交互方式都必须小、快速和简单。

一些资源


Apple Watch GUI PSD供大家下载研究

Apple Watch Free Template PSD设计模板

希望这篇文章能够阐明如何设计一个可行并完美的Apple Watch App。

英文文章来源:Medium,译文出自:简书网,译者:Smallneinei

(责编/刘璐璐)

备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘