赞助商
立即赞助

5 个Apple Watch 设计原则+实战优化案例

UI设计3年前 (2021)发布 流光
3.8K 0 0

上周出席苹果的 WWDR Events(加速器活动),非常感谢司提供的珍贵学习机。次 Apple Watch 体验活动主旨,是开发者提供设计、交互和技术指导和帮助。

Apple Watch 为一款极具前瞻的产品,硬件已经展到 Apple Watch Series 5,系统也已经更新到 watch OS 6。智能手表是目前除手机之外, 最方便人眼观看且为成熟的业化硬件。次加速器活动带给我的触动很大,原以为 Apple Watch 只是一款小众产品,际上国内早已有众司和设计师深耕此。若以 UI 设计师的角度出,我们目前正身处科技变迁速度极快的时代,硬件和软件在围绕人类、网络不断进化和迭代,在种大境中,我认为设计师需要以更加场化、智能化的角度来重新审视「设计」。设计的质是「决问题」,问题时刻在改变,就要求设计师时刻持「新鲜的学习态度」。

通过近距离接触苹果一线技人员,还获得了相当多的第一手资讯。因此总结了活动中与设、交互相关的得体会,以此文分享给家。这篇文章分两部分,半部分将分享 5  Watch app 的设原则技巧;后半部分则以荔枝的 Watch app 案例,提出优化方案。

5 个Apple Watch 设计原则+实战优化案例

5 个 Watch app 的设计原则

1. 设计原则一:单一功能

大部分 Watch App 都依赖于手端 Apple App,可以说是手端功能移植或延伸。如设计师并不充分了解 Apple Watch 使用场景,则很有可能「过分贪心」,在小小表盘保留过多功能。基于硬件屏幕小、使用场景常是在碎片化时里「瞥眼」特性,交互设计需要做到常克制,做到保留最核心功能,以适应佩戴设备使用场景。

以「50音源」一款优产品为例,在手机上,它有源、速查、学习、测试、词卡等个功能模块,但是当它以 Watch app 呈现时,则只留词卡一个功能。

5 个Apple Watch 设计原则+实战优化案例

2. 设计原则二:专注

限于 Apple Watch 硬件特性,屏幕实可击区域常小。都知,在 iPhone 上最小触积是 44 x 44 points,换算为物理尺寸大约是 6.86 毫米。以 Apple Watch 自带解锁界为例,我们可以看到,数键盘已经几乎撑满个屏幕,个实上这里个按钮宽度大概有 6.00 毫米,触摸区域比起 iPhone 最低议要小。

5 个Apple Watch 设计原则+实战优化案例

充分了解屏幕尺寸限制后,再把日常使用场景考虑到设计,能明白:在 Apple Watch 上交互体验并不会常愉悦,用户很有可能为「失去耐心」而放弃交互和功能复杂品。此,设计师需要在屏幕上提供足够显眼操作和轻量交互选项,尽可能避免让用户时进多类型任务。

以菜单级为例,假用户想要使用一个功能,需要进三才能找到,能不到半分钟,他就放弃。比取的方法是,避免复的导航和深的级,让用户每次能顺完成一个主要任务;遵守 HIG 的规范,果一定要放置按钮,在水平方向上也不要放置超 3 个。

3. 设计原则三:易读

上文次提到「使用场」个概念,现生活中,使用 Apple Watch 的场主要有三种:工/学习等静态场、走路/轻量运动等微动态场、运动/跑等强动态场。尽管有静有动,但三种场伴随着抬手/翻腕的动,而在动态场下,眼睛和大脑对信息的处理速度降低,因此信息的读必须非常高。

5 个Apple Watch 设计原则+实战优化案例

文信息为 Apple Watch 的主要展示对象,我认为设计师需要从字、字号、字重、彩对比度等方面综合把控,确用户能快速获取到重要的信息。

字

在之前的 WWDC 中,苹果介绍「New San Francisco Fonts」字家族,其中的「SF Compact」就是门为 Apple Watch 设计的英文字。和 SF 的区别在,Compact 将字母的笔画变得更加竖直, 因此在小屏幕的辨识度也更。

每应用建议只使用一种字体,以避免混乱。如考虑到品牌性问题时,对于较的文字元素,则可以使用自义字体。但如果还以展示信息主 ,则建使用系统字体。另外,苹果推荐应用使用系统字体,因可以享受「动态字体」的功能。

字与字间距

当字小于 19 时,推荐使用 SF Compact;于 20 时则推荐使用 SF Compact Display。眼球追踪的速度可见,当字 16-19 时,使用 SF Compact Text 效果较好;于20时,Display 效果较好。

SF 等字体已经置好默认的字间距,这个字间距是根据屏幕最佳阅读性定的,所以不建议计动调整字体的字间距。

字重

避免使用 Thin 字重,因为经过研究发现,Thin 及更轻的字重,用户会难以甚至在 Apple Watch 中阅读,辨识度较差。

颜色对比度

虽然 HIG 中也提了色彩对比度,但并不像网页的 WCAG(Web Content Accessibility Guideline,网页内容无障碍指南)一直列出对比度的数值。在 WCAG 中,对比度的推数值是 7:1,值得参考。

4. 设计原则四:简明的

Watch App 需要在屏幕上帮助用户解决问题,即使对于同一个工来说,在机和表上需要完成的使命也不一。好的 Watch App 需要做简洁了,帮用户做好决定,而不是提供众多选项让用户去选择。

手表作为一款独立的产,在功和特性上都和大熟悉的手机相差甚远。在设计时,手表应该被设计师看作「迷你版的手机」,功都应该做到快速、方地被使。

以支付宝为例子,你会看到界上半部分展示了账户余额,下有付款码、余额宝和查汇率三个功能。如把支付宝入口添加到表盘,击支付宝时会打开付款码。

换个角度,要是能让用户一次打开时,以去自定义选择自己想要的功能,不也很吗?际上,在使用一段时间,我根不想在小小的手表上,操任何复的互。付款码是非常适合手表的功能,我享受到抬手快速支付的愉悦验。回归质,支付宝的核心功能,不正是钱包吗?

5 个Apple Watch 设计原则+实战优化案例

5. 设计原则五:实时的

手表、时钟,必须实时,才能让感觉可靠。处于信息爆炸时代我们,都已经「实时性」衍生出极强依赖。我们需要足够快网速来刷新网页,需要社交软件实时将信息实时传到自己手上,否则将生焦虑和不信任感。

关时,Watch app 有两点需要注意:时信息要确时、把用户在意的时信息展示出来。

第一点,实时信息如果不实时,将会令用户产不信任感,需实时展示的内通常持续化新的、即将到的、行中的事件。举例子,天气应用需根据用户实际的点,展示当、当下气候信息。

第二点,计需要做心中有数,结景将用户最关心的重要实息传递给用户。许多 Watch app 都会向用户展示间、地点等实性的数据息,提醒、消息也需要实传达给用户。举个例,Keep 在游泳,会实展示游泳距离、运动长和圈数,这些都是动变化的、用户想要实获取的息。

6. 结

以上就是本次享的活动主要内容。结和快速回顾一下在进行 Watch app 计需要注的 5 个计则:

  • 只保留核的单一功能
  • 让用户保持专注,避免使用复杂的交互
  • 保证本信息的易读性,通过多方面综合把控
  • 简明扼要,帮用户解决问题
  • 证时,将重要的时信息传达给用户

以荔枝音频节目为案例的优化

在展示优方案之前,先和大快速地简单了解 Apple Watch 的核心功和交互方式。

1. 快速了解:手势

Apple Watch 中,屏幕上有两种交互手势:扫和点。中「扫」可是纵向或横向的,纵向的扫可滚当前界面,横向的扫可切换基于页面导航的界面。「点」分成了轻点和重点(Force Touch)。「扫」和「点」可组合成「拖」。需要注意的是,Apple Watch 是支持多指手势的,例如双指的捏合。

2. 快速了解:导航

目前供了两种导航形式,一种是「page-based(基于页面的导航)」,户可左右轻扫来切换页面,同的页面上可放联较低的容;另一种是「Hierarchical(分层导航)」,是纵向的列表项,户可通过上轻扫到自己需要的功。HIG 指,两种导航形式同时使。

优一:交互优 – 导航调整

可见到,目前打开荔枝的 Watch App,映入眼帘的是个功,较为直观和简洁。虽然在手机端打开荔枝,Watch App 会自打开播放器页面,但是「正在播放」是在第二层级当中的。结合上到的专注原则,我认为播放是音频产最核心的功,应该将核心功放在最佳位置。

5 个Apple Watch 设计原则+实战优化案例

因此我把导航从「类分层导航」调整为标准的「基于页面的导航」。结合目前务重心,将「订阅更」替换成「我的」。于是的导航形式是:正在播放、订阅更、最收听个页面,分页的形式,放置在了同一级层级。

5 个Apple Watch 设计原则+实战优化案例

优化二:UI 优化 – 播放器页面

目前播放器页面的封面图,直铺在了表盘最底层,不仅响息阅读,其美观度也有大的可优化空间。另外,重要的标题息,不仅展示力度较弱,息密度上来说,也只展示了一行。

总结来说,播放页的优原则是增操作的利性,升信息的识别。因此,我首先将标题设计成两行,并作为此页面的重点展示。音乐控制器进行了优,除了对图标进行视觉优之外,还增了进条的展示;重要性较低的封面,则只在模糊处,作为使,减视觉干扰。

5 个Apple Watch 设计原则+实战优化案例

优化三:UI 优化 – 列表

可以,目前的计中,历史收听是以列表形式展现的,包含了封面和标题个息。将列表从第二层调整为第一层后,也去掉了封面。这的理,主要是考虑在如此的屏幕上,图像识别度低,用户只能通过文字去识别内容。去掉封面后,不仅更为简洁,也更加高效。

5 个Apple Watch 设计原则+实战优化案例

总结

非常荣幸可以借此机会,家分享本次 Apple Watch 加速器活动的得与感悟;另也以荔枝音频节目案例,提出了少许拙见。希望家能我们多提思宝贵意见,感谢各的阅读。

最后还要谢公提供了如此珍贵的学习机会,谢此次活动中给予许多帮助的 momo,谢帮助促成此文的杰哥。

注作者的微信公众号:「Lizhi Design Lab」

5 个Apple Watch 设计原则+实战优化案例

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

在交互设计领域,有很多经过时间检验过的定律及法则,来作为设计的指导原理,它能够帮助产品设计者对界面上的各种视觉元素进...
UXD笔记
设计平平无亮点???不如看看这些仪式感设计 在我们日常生活中,存在着各种各样的仪式感:婚庆、过节,升国旗奏国歌,它可...
ui设计
当产品发展到一定阶段,优秀的用户体验设计对于产品在激烈的商业竞争中保持核心竞争力是至关重要的。一个产品能否高效地帮助...
产品设计
王M争:苏宁金融是国内 O2O 金融的先行者,自己从事的也是互联网金融行业。为了进一步提升自己的产品思维,我就尝试着把 app ...
App分析
写在前面 「我们这双鞋绝对是正品,支持专柜验货!」 「买咱这支基金,稳赚不赔,绝对涨,还要再涨,现在不买后面后悔死你!...
交互设计
本文作者结合自身经验,总结了一份交互自查表,来帮助大家在工作中面对分支流程和异常情况的时候,提高处理效率。 先来看一...
交互设计
随着移动互联网的发展与普及,人们的生活方式发生了巨大的变化。当我们足不出户便可以享受到香喷喷的美食、相隔千里也能有面...
无障碍设计
本篇文章的价值:看完之后可以独立统筹整个产品的全局设计。 做从 0 到 1 的产品时,在设计产品功能的交互流程和 UI 设计中...
ui设计