赞助商
立即赞助

同样是光标设计,苹果是如何把体验做到极致的?

UI设计3年前 (2021)更新 流光
2.6K 0 0

假如你想给 iPad 设计一鼠标的光标,会怎么?

没问题,你许会说,就是给 iPad 加鼠标的光标吗,这什么难的。于乎提出了下图中的设,桌面版的鼠标一模一样,既精确家又熟悉, iPad 甚至还一种跨平台设的温暖。感觉很满意,就第一时间推给消费者了。

同样是光标设计,苹果是如何把体验做到极致的?

这事交给 Apple 这样的。我们给 iPad 加鼠标的光标。于乎了这事 Apple 需十几人的设团队一两的时间,因这需投入能好的事。 Apple 其它公司的始一样的,区别。我们先把鼠标移植到iPad ,看看如何。

同样是光标设计,苹果是如何把体验做到极致的?

怎么回事?虽然指针很精确,但这里的体验不好,指针指向的置可能出错误的判断。比如图中指针的置,比如用户点的其实暂停音乐,因指针具素级的精确度,很可能图的置就识别了一首歌,这样的话用户会自己犯错的感觉,体验就很糟糕。

同样是光标设计,苹果是如何把体验做到极致的?

这种体验的割裂感如何造的呢?其实因精确度的感知不匹配。比如图中的按钮,了 iPad 的触摸设的,因此考虑到手指的小。这些按钮的精确度并不高,用户只需一范围内点击即可,鼠标指针则不然,它一精确度极高的输入设备。二者的结合就会造一问题,精确度不匹配。

同样是光标设计,苹果是如何把体验做到极致的?

什么解决办法呢? Apple 提出了「动态精确度」的概念,这思下,iPad 鼠标指针的精确度会随界面元素的不同随时调整自己。达到输入精确度与界面预精确度相匹配的效果。比如图中,iPad 的指针被替换了一 19 pt 的圆帮用户完精确度的过渡。仔细观察这面鼠标指针的移动,会发鼠标入点选按钮时降低了自己的精确度,转化按钮本身的小以达到视觉精确度匹配的效果。

而按钮间的移,因为这个感知而取消了我上面例子中户知道到哪个按钮的模糊空间。鼠标的位置变成了有明确的两个状态,是按钮一就是按钮二。而会现鼠标指针放在中间,户有可点错的模糊状态。态精确的想法解决了鼠标精确的问题, Apple 的目光又到了我们现在熟悉的鼠标光标上。这东西起来像是这样,我们很熟悉,好像没么问题。

同样是光标设计,苹果是如何把体验做到极致的?

等等,没么问题吗?这个设计可是每个设计的人都难容忍的。设计好的图标被一个巨大的黑色物体遮住了一半,像户头上中了一箭,实在无吐槽。那怎么办,多一些功夫把鼠标隐藏起来,只要点的图标上面叠一层半透明的图案就可了,圆满。

等等,像又有问题。虽鼠标光标一直在屏幕的最上面,但是放在按钮上像有点不对劲。仔细观察下图,你现在图标上叠加鼠标光标的图案,一叠加导致对图标颜的改变,样设计图标的人不开心,因为没按照自己预期的颜显示。忽的颜改变也导致界面一致的破坏。

同样是光标设计,苹果是如何把体验做到极致的?

怎么决?设计一个新的渡吧,每一次鼠标光标接近图标之,鼠标的图自动下移,退到图标的最下。上图所示,光标进图标区域自动下移,离开区域自动恢复到最顶。

同样是光标设计,苹果是如何把体验做到极致的?

图标问题决,来测试看看是不是圆满。唉?个文字选择它怎么不用啊。下图中是我们熟悉的文字光标选择用来像也没什么问题。但是迁移到 iPad 上似乎总有点问题。

同样是光标设计,苹果是如何把体验做到极致的?

是的,因为用手选择的时指针不精确,而鼠标光标选择的时异常精确。同一设备上两种输方式的不同给指向精确度造成割裂感。在下图中,你看到我们熟悉光标的运行方式,它依靠中间点来判断行的位置。此时我们在意的操精确度是精确到行,而输精确度是精确到点。种精确度的不同,导致用户只要稍有偏差,就选选中自己不想的一行。

同样是光标设计,苹果是如何把体验做到极致的?

何避免用户选择错误而带来的挫败感?决方案依旧是动态精确度。比下图的动画中,新的设计明确告用户当前所选中的行,并靠近中间点时自动贴在上面,以彻底消除鼠标位两行中间的模糊状态。此时鼠标精确度由点降低到行。

同样是光标设计,苹果是如何把体验做到极致的?

得文章开头举的个历的例子吗?在用户拖拽时,创建历的区间其是固定的,也就是每 15 分钟一个区间。而鼠标的精确度给用户能拖拽出更精确时间的错,决方法也是动态精确度,当鼠标光标至此时每 15 分钟的间隔给出一个磁吸点,来明确告用户里是有明确时间间隔的。

同样是光标设计,苹果是如何把体验做到极致的?

动态分辨率说完。我们接下来将目光次回到个小圆点上。大家看到的鼠标光标其有两个,顶部的控光标判断际光标位置,底的显示光标根据需求变换形状来给用户明确的功能感。

同样是光标设计,苹果是如何把体验做到极致的?

控光标的具工方式下图。控光标负责检查际位置,而显示光标负责用户感。因为 iPad 的触摸版相对 Mac 要小一,有时用户能遇到点按的瞬间手抖的情况,来想点某一个按钮却因为控光标靠近按钮边缘而滑出去,导致点击失败。为避免里的挫败感,用户每次手指离开触摸版时,控光标图所示自动居中,确用户下次点击光标停留在预期的按钮上。

同样是光标设计,苹果是如何把体验做到极致的?

决显示的问题。我们来看看 Apple 何做滑动位置的判断的。比下图中,你想用触控板滑动光标来选择左的设置图标。时你做的能是在触摸版上向左滑动,但是结果有几种能,要么你一下滑光标跑到尺子里去,要么是一次滑动差么一点点距离光标停在设置旁边。

同样是光标设计,苹果是如何把体验做到极致的?

有没有能做的更? Apple 设计一套磁吸位置预判来决个问题。还是图,在 Apple 的眼中它是样的。当鼠标离开触摸版的一瞬间,光标根据滑动距离和速度来判断预期的最终位置。下图中的最终与其位置便是同心圆的圆心,此时根据最终位置生成周边一系列磁吸点。判断磁吸点下方是否有控的按钮。下图中设置图标是最近的磁吸控按钮。因此用户光标自动吸在上面。对用户来说,种感就得自己很厉害,每次能选到想要的东西。

同样是光标设计,苹果是如何把体验做到极致的?

说许光标的逻辑,却还没说它的设计。在开始之前,你以看下图中的动画感受一下。是的,我们所看到的平面按钮际上设计是具备深度的。比点按时,你现你的点按动是和按按钮一样,又一个下压的动。还得我们之前讨论的控点吗,为让用户在光标变成按钮时仍对控点有位置上的感,控点此时变成一个点光源。

同样是光标设计,苹果是如何把体验做到极致的?

明确告用户什么被选中是一个光标的责任。比下图中所有选中的图标有一种悬浮的特效,并且有我之前提到的控点光源来告其控点。

同样是光标设计,苹果是如何把体验做到极致的?

现个特效际上将原有的一图标分成四。最上面的光源告控位置,二是际的图标,三是动态位置,四是根据光源变化的阴影。

同样是光标设计,苹果是如何把体验做到极致的?

样的设计逻辑像没什么问题。但是在某情况下,设计逻辑能造成不想要的视反馈。比下图中一组按钮的高亮选择,若继续沿用图标的个半透明图,则际显示出来颜深降低区分度。对按钮的显示,则采用悬浮的设计并取消光源,比下图中历的选择按钮。与此类似的小细节修改点还有很,不赘述。

同样是光标设计,苹果是如何把体验做到极致的?

么决光标的逻辑和显示问题,我们来看 Apple 何进一步推动光标设计,来使明确的传达功性。首先光标作为一个指向性的物件,必须保持随时可见,因此光标的显示颜色是和当背景有的,仔细观察你会发现,光标会依旧容的颜色而更改自身的颜色。次对于见的拉框,光标还会像图一样变成指向性图标。

同样是光标设计,苹果是如何把体验做到极致的?

但在 iPad 中,光标的功指向性止于此。它可根据需求自调整颜色,变成功性的图标。而在变更过程中,还需要考虑光标的中心位置是否明确,填充类转换为边缘线类时视觉重量的升等等。

同样是光标设计,苹果是如何把体验做到极致的?

更绝妙的是:我说了一篇章,许你压根没在 iPad 上见过这个光标,因为 iPad 有触摸版的人是数。

大家现在热烈讨论的 ARM 版 Mac,其 Apple 已经做准备很年。比 4 年前宣取消 32 位应用支持,5 年前开始推 Metal 图形来统一框架,是在为 Mac for ARM 做准备。只是太人分析情只看当下不看大局,选择蒙着眼睛,或者是的看不到。今年大家看到的能表现优异,不是去数年努力的成果展示而已。

其实 Apple 不是什魔法,只是在计认真的去为用户做考量。愿在这些别人不在的细节上投资,一点点积累之后,就有了独的用户体验。用户虽对每年的创新所带来的小毛病憋着一肚子气,但心底里还是希望有人能付出努力,把别人不在意的细节一点点做,是尽量宽容,大概就是种默契吧。

本文所有素材来源: Apple WWDC: Design for the iPadOS pointer

过去几年里, Apple 放出设计视频大概有近百个。本文引用也是其,本文并该设计视频翻译,而是我看过视频,在 WWDC 与 Apple 工程师交流后,把些想法用文码在这里。其实 Apple 年放出这些视频我想初衷也是和大家致,这些心值被更多所知。本文初衷也是如此。

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

相关文章

问题:设计师怎么样才能在产品中为用户塑造「惊喜感」呢? 解答:你觉得,人和人交往的行为模式,能够被复刻到人和其他事物...
产品
网易UEDC – 王业 :这篇文章讲述了我对产品设计的一些个人理解和看法。用户参与设计,指的是在有限的设计引导下,要给予用户...
交互设计
用户测试其实相当于在收集用户对某一个功能,或流程的行为反馈数据以及满意度指标数据,但很多时候你的用户测试是无效的,那...
可用性测试
工作到现在已经负责过2个资讯类新项目了,每次做完项目感觉都有很多缺憾,这次就对新闻资讯类 app 做一个 UX 总结解析,希望...
App设计
旅行时我们顺利到达一个又一个的目的地;生病时我们快速地找到医疗科室;超市里我们在数以万计的商品中找到心仪的商品,完成...
卡通形象设计
本文总结了 8 个用户体验设计师比较关心的问题,针对每个问题给出了极其详细和实用的答案。 你是如何考虑「体验设计」的? ...
UI设计师
上瘾论? 最早接触「上瘾」一词除了毒品瘾品外,就是被称为「精神鸦片」的电子游戏。最初,我思考游戏的成瘾原因很简单,就是...
上瘾
财务和金融相关的应用是一个相对专业的分支,在这个领域当中创造体验优异的设计并不是一件简单的事情。身为资深设计师Taras B...
App设计