ps.本文转录自it之家的it圈子 非新闻 转录者注:时常看到手机板有各种吵为甚麽iOS比较顺的问题，却没有人能提出证据性的解 释，希望透过这篇文章能让大家来了解这两大作业系统中，iOS的优势在哪里，并让大家 更 能体会使用者体验的重要性。 本文为下文 https://quan.ithome.com/0/655/094.htm https://quan.ithome.com/0/655/841.htm 部分词语修改为台湾用语 -- 本文帖将继续介绍另外两个显着影响系统流畅度的因素： ‧互动方式：全萤幕设计移除了手机正面的实体按键，手势操作真的比按钮好吗？ ‧符合直觉：手机系统的顺畅不仅体现在动画上，还体现在逻辑中。 本文旨在探讨"何谓顺畅"这个开放式问题。我(原作)以iOS为例子，纯粹因为iOS在"顺畅"这 方面做的比较完善，方便我(原作)进行展示、说明。安卓OS拥有许多iOS缺少的功能，比如 应用分身、小窗模式、全局返回等等，但安卓OS的顺畅度参差不齐也是事实，我得结合多 个系统的 特点才能把事情说清楚，这会让本文显得混乱。 废话不多说，开始正文。我(原作)在这儿提前感谢各位读者耐心等GIF图加载 -- Part Two:别让"动画"成了"延迟" 一个很简单的事实：我们使用手来完成一生中大部分的任务。自人类700万年前从黑 猩猩中分离出来至今，我们使用过的工具不胜枚举，但我们的手并没有太大变化：通 过精密的肌肉运动，仅仅十个手指可以实现近乎无限的操作。 https://i.imgur.com/R6kjWwe.png 随着人类科技的发展，我们使用的工具愈加先进，但也愈加抽象。朴素的工具，如锤子、 榔头、剪刀，它们没有任何按钮，使用前无需学习，能达到看到就会用的程度；复杂的工 具，如手机、电脑，它们使用按钮来操作，用户如果不认得汉字或字母，想愉快地使用就 很难了。 ▼也许每个人都会用"剪刀"，但不是每个人都会用"剪切" https://s1.ax1x.com/2020/06/07/tRQImD.gif 历史证明，受欢迎的设计都是简洁易用的。13年前，实体按键是手机不可分割的一部分， 键盘区域有时会比萤幕还大。使用者透过十字方向键控制选框，进而和系统、App进行 互动。我们灵巧的双手被塑胶按键限制在了狭小的空间内，效率低下。 ▼ 经典机型：诺基亚N95 https://s1.ax1x.com/2020/06/07/tRQo0e.gif 2007年，首代iPhone用一整块触控萤幕取代了实体键盘，造就了现代智慧手机的雏形。 乔布斯将"按键手机"革新为"触控手机"，目的很明确：虚拟按钮能随App的切换而改变，且 使用者可以直接与按钮互动。这好比射击游戏中，滑鼠玩家会比手柄玩家操作更加精准： 使用手指操纵工具的人类，当然适合用手指互动内容。 ▼ 经典机型：iPhone 3GS https://i.imgur.com/YI6Sn2i.png 值得注意的是，尽管智慧型手机系统使用多点触控、拟物、过渡动画等一系列细节让使用 手机更加自然，但手机系统的运作始终遵守四个步骤，这里以"打开手电筒"为例： 1.使用者大脑 ：环境太暗，需要打开手机的手电筒； 2.使用者手指 ：对准"手电筒"按钮按下去； 3.过渡动画 ：模拟手电筒开启的过程； 4.触发功能 ：开启後置闪光灯。 https://i.imgur.com/urtXbca.png 上篇文章中，我们将匀速直线运动的动画成为" 线性动画"；同样，因为以上四个步骤是 单向、直线排列的，我们称这种操作逻辑为"线性互动"。使用者按下按钮，系统执行这个 按钮对应的功能，如同打字般一一对应。过渡动画在这类互动逻辑中是多余的，一些使用 者甚至会把动画效果关闭，以取得更快的反应速度。 ▼ 左：动画开启；右：动画关闭 https://s1.ax1x.com/2020/06/07/tRQfl6.gif 一般来说，过渡动画持续时间较短，且启动App需要一段载入时间，大部分使用者都接受在 "操作"与"功能"间加入"动画"来衔接。这能使手机系统更加流畅。不过，正如打字时会按 错键，用户执行功能时也难免有失误。举个例子，我本想打开IT之家，但不小心点击了云 音乐，这该怎麽办？按照"线性互动"的流程： ▼不小心点击"云音乐" → 等待动画结束 →点击Home键→ 等待动画结束 →点击"IT之家 " → 等待动画结束 →程式开启 https://s1.ax1x.com/2020/06/07/tRQyTJ.gif 此时，起到衔接作用的动画反而造成了操作间的延迟，使用者的流畅体验被破坏。 为了解决这个问题，我们不妨想想使用朴素工具，如剪刀我们的操作逻辑是怎样的： 1.使用者大脑 ：沿着引导线裁纸； 2.使用者手指 ：将剪刀对准线条； 3.过渡动画 ：一边剪纸，一边修正方向，使✂终在线条上； 4.触发功能 ：窗花。 https://s1.ax1x.com/2020/06/07/tRQWSx.gif 以上逻辑与"线性互动"有个重要区别：系统会实时对"动作"给予回应，使用者并非"思考"完 毕再实施"动作"，而是一边"思考"一边修正"动作"。换句话说，"动画"不仅起到过渡的作 用，还留给使用者"思考"与"动作"的时间。我称这种操作逻辑为"非线性互动"。 ▼ 监别某个系统的"过渡动画"是否是多余的，只要把动画关掉，然後看看手机的使用是 否受影响即可。iPhone 开与不开动画，完全是两种手机。 https://s1.ax1x.com/2020/06/07/tRQ2f1.gif 想把"智慧型手机"设计成"剪刀"✂ 仅靠点按这类只有"点—不点"两种状态的动作是 很难实现的；如果剪刀✂ 有"开—关"两种状态，那一刀下去手指多半会断。我们需要 用"手势"替换"按钮"，通过检查手势中的各种讯息去揣测用户的意图，最终触发某个功能 此时，"动画"并非填补"操作"与"功能"的装饰，而是实时反应使用者手势的讯号。MIUI 12 发布後，大家津津乐道的"可打断动画"，就是其中一种特性。 https://s1.ax1x.com/2020/06/07/tRQsw4.gif 需要指出的是，这并非"动画"被打断了，而是手机系统即使在动画之中，也会实时反应使 用者的触控动作。读者可以试一试，下面这些动作，您的手机是否能做到： ▼ 开启App 时，你可以同时启动多工介面，App视窗会移动到手指位置 https://s1.ax1x.com/2020/06/07/tRQrmF.gif ▼ 开启App 时，你不用等App 完全打开，就能进行互动 https://s1.ax1x.com/2020/06/07/tRQ0yT.gif ▼ 关闭App 时，你不用等App 图标归位，就能滑动桌面 https://s1.ax1x.com/2020/06/07/tRQNYn.gif 大家喜欢把iOS的这些细节描述成"精致的动画"，实际上，这是苹果改良人机互动逻辑後 ，产生的附带品罢了。如同✂，你控制工具时手指的速度、力度都会影响最终呈现的效 果；如果触控萤幕仅仅记录下手指的位置，那我完全可以把"萤幕"当作扁平化的"键盘"。 iOS （没砍3D Touch前）会记录每一次触控的位置、速率、速度、力度等讯息，并分析这 些讯息来判断使用者意图。 https://i.imgur.com/W6eCIk0.png ▼以移动"画中画"为例，系统需要通过手势判断使用者想把"画中画"放在哪里。 如果仅仅记录手指的位置，那系统只能用"就近吸附"的方式定位浮动视窗 https://s1.ax1x.com/2020/06/07/tRQck9.gif ▼ iOS记录了手势的速度（矢量），即便小窗没有移动到角落，系统也能知道，使用者是 想把视窗向角落移动 https://s1.ax1x.com/2020/06/07/tRQgYR.gif 如果各位的手机支持"小窗模式"，不妨开启小窗拖动看看，你的快速滑动和慢速滑动是否 有分别。说实话，某些系统用不同位置上滑来触发"返回" "主画面" "多工"这三种动作 ，或者用萤幕边缘侧滑来触发"返回"，这不是非线性的手势操作，只不过是把原本用"点 击"就能触发的按钮，改成用"滑动"触发罢了。我相信喜欢"点按返回"而不是"侧滑返回" 的Android 使用者不在少数。 ▼ "全局侧滑返回"会遮住App 正常的侧边选单，互动上存在矛盾 https://i.imgur.com/EkXKxoV.png ▼ 虽然和iOS 一样都是上滑返回主画面，但如果交互逻辑仍是线性的，"手势"和"按钮" 并没有区别 https://i.imgur.com/qHrcYPM.jpg 这里，我想表扬下MIUI12。除了可打断的动画外，MIUI12 的"超级壁纸"将"非线性动画" 引入到"主画面-锁定画面-关闭萤幕"这iOS 也尚未考虑到的部分中来。 ▼ "关闭萤幕-锁定画面"可以像踢球一样来回滚动 https://s1.ax1x.com/2020/06/07/tRQdS0.gif -- Part Three:符合直觉-使用者所想，系统所示 最後一部分，可能和系统中"会动的部分"无关，仅仅是一些细节。也许你没有注意到，人 类都拥有"预知未来"的能力。走路时，我们会避开前方的障碍物；打雷时，我们会提前寻 找避雨的地方；而使用手机时，我们根据现实生活中培养起来的直觉，来预测系统的下一 步动作。 ▼细看下面的动画，你会觉得很靠北 https://s1.ax1x.com/2020/06/07/tRQJoj.gif 首先是系统和第三方App 的一致性。 在文章中举的例子多为主画面相关的操作，比如打开App、关闭App；实际上，使用者在使 用手机时，停留在主画面时间相比使用App的时间，可以说是极少了。纵使你的桌面做 得再好，如果App里的动画仍是生硬的，那使用者反而会因为系统与程式间强烈的反差而难 受。淘宝、京东这类购物App，因为展示商品与广告推销需要，常把界面打扮的花里胡哨 。在iOS平台，就算开发者脱离苹果的设计语言放飞自我，动画效果和iOS仍是一致的。 ▼ 大部分列表都有弹性 https://s1.ax1x.com/2020/06/07/tRQBOU.gif ▼ App 中返回上一页的操作是非线性的 https://s1.ax1x.com/2020/06/07/tRQtFs.gif 其次是页面移动的方向具有空间连续性。 比如，被我滑动到右边的页面，应该从右边回来，而不是上面或下面。不然，就算动画是 顺畅的，使用者也无法感知到系统的连贯性。 ▼左：页面向上浮现，但却向右退出；右：页面从右边出现，并返回右边 https://s1.ax1x.com/2020/06/07/tRQGwQ.gif 最後是系统UI 设计在不同界面的一致性。 ▼因为手机萤幕使用了较大的圆角，使用者会倾向认为，App视窗也是同样大小的圆角矩形 https://qimg.ithome.com/image/2020/06/07/6372716232544344149901760.png ▼因为系统使用了触控条来指示上滑返回主画面，使用者会倾向认为，其他可以互动的元素 也应该有此触控条 https://qimg.ithome.com/image/2020/06/07/6372716232675103561401822.png — 写在最後— 我(原作)用了两个文章的篇幅，介绍了衡量手机系统顺畅性的三个方面：动画设计，互动 方式，以及符合直觉的细节。 所谓顺畅，首先要满足我们的眼球，至少不能在视觉上给使用留下卡顿、撕裂的印象；之 後要符合人类使用工具的习惯，始终回应来自使用者的动作作，尽量减少延迟；最後要迎合 我们脑中的逻辑，让使用者能通过前一步预判後一步。满足这三点，手机系统就能在外观、 运作与内核三方面获得顺畅性。 最近发布的MIUI12，因为一些设计与iOS雷同，在数码圈造成了争议。要我(原作)说，除去 把通知中心和操控中心分别放到左上角和右上角这点照抄了iOS，MIUI12的其他部分与iOS是 良性趋同，是值得肯定的。趋同设计在数码圈里很常见，比如Yoga Book与Surface Book的 铰链，两者都想把笔电向书本靠拢，於是都在铰链部分采用了类似书脊的结构。 https://qimg.ithome.com/image/2020/06/07/6372716232813676298861142.png 在全萤幕时代，"手势"取代"按钮"是大趋势。基於物理现象的动画也好、非线性的互动方 式也好、统一的系统UI设计也好，这些东西没有专利可言。的确，因为苹果注册了列表回 弹的专利，所以大部分安卓OS只能用一圈波纹来表示列表的尽头。但小米、华为、索尼等 厂商，它们想出了不同於iOS的方式，在系统级程式中实现了列表回弹，这足以说明一两 个专利并不会让其他系统全军覆没。缺的是厂商的技术实力，或者对系统顺畅性的重视程 度。 MIUI12的"米柚光锥动效架构"是一个良好的开端，它的存在说明安卓OS是可以绕过谷歌进 行底层动画改动的。大家应该鼓励各个厂商积极跟进行业里先进的设计方案，客观评判不 同品牌的优劣，取长补短，而不是A压倒B。 -- 转录者心得: iOS能让整体系统看起来那麽顺的原因，还有一个重要因素是:严格的设计语言。 每个APP遵循良好的设计语言，在整体系统来看的话，无论是系统程式还是第三方软体， 都会看起来很一体，这样就不会发生明明在桌面或是系统程式很顺畅，但却进去APP又是另 一种体验。 有些人可能会说，我都没有感觉，可能只是你没感觉到，又或者是现在系统可能更精进了 但Android设计语言大量采用线性动画这件事情却是事实不变的 其实非线性动画，很早就有出现过，包括大家所说的WP动态砖也是。 HTC也是其中之一 https://www.youtube.com/watch?v=fYnIz4wAjTE 可以看到HTC的解锁环的那个弹簧动画效果 以及进入主画面旋转ease in的效果 只可惜这东西再也不复见了 很高兴看到越来越多厂商重视使用者体验这一块，希望Google也能将这种非线性动画体验 当作设计标竿，现今Android对设计语言也越来越重视了，像是介面元素位置不能乱改之类 的。 -- 一天老婆跟我说她无聊，想让我带她找点刺激的事做做。我说，要不我们去吃霸王餐怎麽 样？老婆开心的说好啊好啊。於是点完菜，我们找了一个靠门的位置坐下，趁她去洗手间 的时候，我偷偷把帐结了。她回来後开始吃饭，吃得差不多了，我悄声问她，准备好没有 。老婆激动的点点头，然後我就拉着她跑了出来，一路上，老婆笑得好开心。 其实老婆也付了一遍。老板想：每天都能碰到这样浪漫的人就好了。 --

※ 发信站: 批踢踢实业坊(ptt.cc), 来自: 42.76.39.179 (台湾) ※ 文章网址: https://webptt.com/cn.aspx?n=bbs/MobileComm/M.1591771903.A.FA1.html 你在中文表达能力上出了什麽问题吗 这什麽文法 我想他要表达的是Android厂商设计全局返回健跟侧边选单手是打到的问题 因为像我自己在用iOS 真的比较少APP会设计侧边滑出选单的功能 如果有通常都是在APP主 画面 但我也不否全局返回很好用 MIUI的甚至可以切换APP 这点我觉得是原作者多虑了 因为救我体验来说 之前完朋友MIUI跟EMUI都没有遇到这两个手势冲突问题 ※ 编辑: nk950357 (140.125.221.79 台湾), 06/10/2020 15:49:36 的确抄了很多东西 但说老实话 非线性动画这也不是ios抢先开发出来的 WP7早就用了 还记 得iPhone的滑动解锁吗？在ios6以前都是线型动画 所以看起来很生硬 https://youtu.be/8hpvh0InDhs ※ 编辑: nk950357 (42.76.39.179 台湾), 06/10/2020 16:01:10