[经验] 【详解】为什么苹果 iOS 是目前“最流畅”的手机系统?(下)

文章正文
2020-06-12 16:54

说明:#原创#标签为IT之家在IT圈所设的投稿栏目,具体投稿规则点此查看。

— 写在前面 —

承蒙各位支持,本帖有了下篇。在上一帖(点此跳转中,我介绍了如何设计动画才能让系统用起来"流畅"。本帖将继续介绍另外两个显著影响系统流畅度的因素:

• 交互方式:全面屏设计移除了手机正面的物理按键,手势操作真的比按钮好吗?

• 符合直觉:手机系统的流畅不仅体now动画上,还体now逻辑中。

本帖旨在探讨"何谓流畅"this开放式问题。我以 iOS 为例子,纯粹because iOS 在"流畅"这方面做的比较完善,方便我进行展示、说明。安卓 OS 拥有许多 iOS 缺少的功能,比如应用分身、小窗模式、全局返回等等 ,但安卓 OS 的流畅度参差不齐也是事实,我得结合多个系统的特点才能把事情说清楚,这会让本帖显得混乱。

废话不多说,start正文。我在这儿提前感谢各位读者耐心wait动图加载🧎‍♀️4G 流量用户需要点击图片后加载,WIFI 用户wait 10 秒钟即可🧎‍♀️


Part Two.⎡交互方式:别让"动画"成了"延迟"⎦

一个很简单的事实:weuse手👋来finish一生中大部分的任务。自人类 700 万年前从黑猩猩中分离出来至今,weuse过的工具🔧不胜枚举,但we的手并没有太大变化:通过精密的肌肉sport,仅仅十个finger可以实现近乎无限的操作。

随着人类科技的发展,weuse的工具愈加先进,但也愈加抽象。朴素的工具,如锤子、榔头、剪刀,它们没有任何按钮,use前无需study,能达到看到就会用的程度;复杂的工具,如手机、电脑,它们use按钮来操作,用户如果不认得汉字或字母,想愉快地use就很难了。

▼ maybe每个人都会用"剪刀",但不是每个人都会用"剪切"

历史证明,受我们lcome的设计都是简洁易用的。13 年前,实体按键是手机不可分割的一部分,键盘区域sometimes会比显示屏幕还大。用户通过十字方向键控制选框,进而和系统、 App 进行交互。we灵巧的双手被塑料按键限制在了狭小的空间内,效率低下。

▼ 经典机型:诺基亚 N95

2007 年,首代 iPhone 用一整块触摸屏取代了实体键盘,造就了现代智能手机的雏形。乔布斯将"按键手机"革新为"触屏手机",目的很明确:虚拟按钮能随 App 的切换而改变,且用户可以直接与按钮交互。这好比射击game中,鼠标玩家会比手柄玩家操作更加精准:usefinger操纵工具的人类,of course适合用finger交互内容。

▼ 经典机型:iPhone 3GS

值得注意的是,尽管智能手机系统use多点触控、拟物、过渡动画等一系列细节让use手机更加自然,但手机系统的运作始终遵循四个步骤,这里以"o钢笔手电筒"为例:

1. 用户大脑🧠:环境太暗,需要o钢笔手机的手电筒;

2. 用户finger👐:对准"手电筒"按钮按下去;

3. 过渡动画🌓:模拟手电筒开启的过程;

4. 触发功能🔦:开启后置闪光灯。

上篇帖子中,we将匀速直线sport的动画成为"线性动画";同样,because以上四个步骤是单向、直线排列的,we称这种操作逻辑为"线性交互"。用户按下按钮,系统执行this按钮对应的功能,如同打字般一一对应。过渡动画在这类交互逻辑中是多余的,一些用户甚至会把动画效果关闭,以取得更快的响应速度。

▼ 左:动画开启;右:动画关闭

一般来说,过渡动画持续time较短,且启动 App 需要一段加载time,大部分用户都接受在"操作"与"功能"间加入"动画"来衔接这能使手机系统更加流畅。不过,正如打字时会按错键,用户触发功能时也难免有失误。举个例子,我本想o钢笔 IT 之家,但不小心点击了云Music,这该怎么办?按照"线性交互"的流程:

▼ 不小心点击"云Music" →wait动画end→ 点击 Home 键 →wait动画end→ 点击"IT 之家" →wait动画end→ 应用开启

此时,起到衔接作用的动画反而造成了操作间的延迟,用户的流畅体验被破坏。为了解决this问题,we不妨想想use朴素工具,如剪刀✂️时,we的操作逻辑是怎样的:

1. 用户大脑🧠:沿着引导线裁纸;

2. 用户finger👐:将剪刀对准线条;

3. 过渡动画🌓:一边剪纸,一边Hugh正方向,使✂️始终在线条上;

4. 触发功能🔦:窗花。

以上逻辑与"线性交互"有个重要区别:系统会实时对"操作"给予反馈,用户并非"思考"完毕再实施"操作",而是一边"思考"一边Hugh正"操作"。换句话说,"动画"不仅起到过渡的作用,还留给用户"思考"与"操作"的time。我称这种操作逻辑为"非线性交互"。

▼ 鉴别某个系统的"过渡动画"是否是多余的,只要把动画关掉,在那时看看手机的use是否受影响即可。iPhone 开与不开动画,完全是两种手机。

想把"智能手机"📱设计成"剪刀"✂️,仅靠点按这类只有"点 — 不点"两种状态的操作是很难实现的;如果剪刀✂️只有"开 — 关"两种状态,那一刀下去finger多半会断。we需要用"手势"替换"按钮",通过检测手势中的各种信息去揣测用户的意图,最终触发某个功能。

此时,"动画"并非填补"操作"与"功能"的装饰,而是实时反馈用户手势的信号。MIUI 12 发布后,大家津津乐道的"可打断动画",就是其中一种特性。


需要指出的是,这并非"动画"被打断了,而是手机系统即使在动画之中,也会实时反馈用户的触控操作。读者可以试一试,下面these操作,您的手机是否能做到:

▼ 开启 App 时,你可以同时启动多任务界面,App 窗口会移动到finger位置

▼ 开启 App 时,你不用等 App 完全o钢笔,就能进行交互

▼ 关闭 App 时,你不用等 App 图标归位,就能滑动桌面

大家like把 iOS 的these细节描述成"精致的动画",实际上,这是apple改良人机交互逻辑后,产生的附带品罢了。如同✂️,你控制工具时finger的速度、力度都会影响最终呈现的效果;如果触控屏仅仅记录下finger的位置,那我完全可以把"屏幕"当作扁平化的"键盘"。iOS (没砍 3D Touch 前)会记录每一次触控的位置、速率、速度、力度等信息,并分析these信息来判断用户意图。

▼ 以移动"画中画"为例,系统需要通过手势判断用户想把"画中画"放在哪里。如果仅仅记录finger的位置,那系统只能用"就近吸附"的方式定位浮动窗口

▼ iOS 记录了手势的速度(矢量),即便小窗没有移动到角落,系统也能know,用户是想把窗口向角落移动

如果各位的手机支持"小窗模式",不妨开启小窗拖动看看,你的快速滑动和慢速滑动是否有区别。说实话,某些系统用不同位置上滑来触发"返回" "主屏幕" "多任务"这三种操作,或者用屏幕边缘侧滑来触发"返回",这不是非线性的手势操作,只不过是把原本用"点击"就能触发的按钮,改成用"滑动"触发罢了。我相信like"点按返回"而不是"侧滑返回"的安卓用户不在少数。

▼ "全局侧滑返回"会遮住 App 正常的侧边菜单,交互上存在矛盾

▼ 虽然和 iOS 一样都是上滑返回主屏幕,但如果交互逻辑仍是线性的,"手势"和"按钮"并没有区别

这里,我想表扬下 MIUI12。除了可打断的动画外,MIUI12 的"超级壁纸"将"非线性交互"引入到"主屏 — 锁屏 — 息屏"这 iOS 也尚未考虑到的部分中来。

▼ "息屏 — 锁屏"可以像踢球一样来回滚动


Part Three.⎡符合直觉:用户所想,系统所示⎦

最后一部分,可能和系统中"会动的部分"无关,仅仅是一些细节。maybe你没有注意到,人类都拥有"预知未来"的能力。走Lou时,we会避开前方的障碍物;打雷时,we会提前look for避雨的#@re地方@#;而use手机时,we根据现实生活中培养起来的直觉,来预测系统的下一步动作。

▼细看下面的动画,你会觉得膈应

首先是系统和第三方 App 的一致性。

我在帖子中举的例子多为主屏幕相关的操作,比如o钢笔 App、关闭 App;实际上,用户在use手机时,stay在主屏幕的time相比use App 的time,可以说是极少了。纵使你的桌面做得再好,如果 App 里的动画仍是生硬的,那用户反而会because系统与应用间强烈的反差而难受。淘宝、京东这类购物 App,because展示商品与广告推销需要,常把界面打扮的花里胡哨。在 iOS 平台,就算开发者脱离apple的设计language放飞自我,动画效果和 iOS 仍是一致的。

▼ 大部分列表都有弹性

▼ App 中返回上级页面的操作是非线性的

其次是页面移动的方向具有空间连续性。

比如,被我滑动到右边的页面,should从右边回来,而不是上面或下面。不然,就算动画是流畅的,用户也无法感知到系统的连贯性。

▼ 左:页面向浮现,但却向退出;右:页面从边出现,并返回

▼ 从下方出现,表示from本地草稿箱;移到上方get out屏幕,表示s结束成功

最后是系统 UI 设计在不同界面的一致性。

▼ because手机屏幕use了较大的圆角,用户会倾向认为,App 窗口也是同样大小的圆角矩形

▼ because系统use了触控条来指示上滑返回主屏,用户会倾向认为,其他可以交互的元素也should有此触控条


— 写在最后 —

我用了两个帖子的篇幅,介绍了衡量手机系统流畅性的三个方面:动画设计,交互方式,以及符合直觉的细节。

所谓流畅,首先要满足we的眼球,至少不能在视觉上给用户留下卡顿、割裂的印象;之后要符合人类use工具的习惯,始终响应from用户的操作,尽量减少延迟;最后要迎合we脑中的逻辑,让用户能通过前一步预判后一步。满足这三点,手机系统就能在外观、运行与内核三方面获得流畅性。

最近发布的 MIUI12,because一些设计与 iOS 雷同,在数码圈造成了争议。要我说,除去把通知中心和操控中心分别放到左上角和右上角这点照抄了 iOS,MIUI12 的其他部分与 iOS 是良性趋同,是值得肯定的。趋同设计在数码圈里很常见,比如 Yoga Book 与 Surface Book 的铰链,两者都想把笔记本电脑💻向书本📖靠拢,于是都在铰链部分采用了类似书脊的结构。

在全面屏时代,"手势"取代"按钮"是大趋势。基于物理现象的动画也好、非线性的交互方式也好、统一的系统UI 设计也好,these东西没有专利可言。的确,becauseapple注册了列表回弹的专利,所以大部分安卓 OS 只能用一圈波纹来指示列表的尽头。但小米、华为、索尼等厂商,它们想出了不同于 iOS 的方式,在系统级应用中实现了列表回弹,这足以说明一两个专利并不会让其他系统全军覆没。缺的是厂商的技术实力,或者对系统流畅性的重视程度。

MIUI12 的"米柚光锥动效架构"是一个良好的开端,它的存在说明安卓 OS 是可以绕过谷歌进行底层动画改动的。大家should鼓励各个厂商积极跟进行业里先进的设计方案客观评判不同品牌的优劣,取长补短,而不是 A 压倒 B。


再次感谢各位的阅读🙏我写these帖子纯粹是分享经验,我自己也乐于探究手机系统的细节。只要有人阅读,我就有动力继续写下去。上一篇帖子收到了许多家友的打赏,我十分感动😹。各位称赞也好,批评也好,只要能丰富各位在之家的体验,these帖子就值了。

文章评论