作者:容正先生
来源:知乎
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

iOS的设计逻辑是教科书级别严密的,尤其是在空间上的逻辑。

就举个简单的例子吧

在多任务界面里面,上一个使用的应用在当前应用的左边

嗯,是这样没错,然后呢?

所以当你讲底部的导航条往右边拽的时候,上一个应用就恰好在左边等着你

这就是iOS在设计界面的时候所贯彻的原则:空间上的连续性-Spacial Consistency

在以下链接里面会看到其出处:

流畅界面设计​developer.apple.com

没时间看也没关系,做了一长串的英语听力之后,我将其中的部分演讲内容还原了出来:

Next we want to talk a bit about the architecture of the interfaces. How you lay it out conceptually? And we think when you doing that it's important to maintain spacial consistently ranked movement. What is that mean? This kind of mimics the way are object consistent memory works in real world. So things move and leave in a perception and symmetric path. So something is disappeared one way, we expected to emerge from where it came. So if I walk off the stage this side, and emerged that way, you will be pretty amazed, right? Because that's impossible, so you want to implying this kind of consistent sense of space we all have had in the world. In so what that means is something is going out of you in the interface and coming back in the view, you you should do so in the symmetric path, it should have a consistent off-screen path as enters and leave. A good example is, this is actually in the iOS navigation. When I tap an element in this list here, it slides on the right, When I tap the back button, it goes back to the right. It's a symmetric path. Each element has a consistent place where it leaves at both states. This also reinforce the gestures. If I choose to slide myself to the right, because I know that's where I leave, I can do that. It is expected. So what if we didn't do this? Use an example when I tab on something it slides in, and when I hit back, it goes down. It feels disconnected and confusing, right? It feels I am sending something in some where, in fact, if I want to communicate that I am sending it to some where, this is how I do it right? So that's the topic about spacial consistency , helps the gesture feel align with our spacial understanding in the world.

翻译之后可以总结出以下几点:

  • iOS的动效设计参考的是现实世界物体的运动规律,尽可能符合我们大脑对于运动物体的认知(事实上iOS的很多动效都是取材自现实直接的);
  • "从哪儿来,回哪儿去","进"和"出"两者的运动方式要做到对称,这在视觉上是一种连贯的过程,不然就会产生割裂感;
  • 每层界面都有它应该待的地方,更高优先级的界面会从右边进来,低优先级的会在左边待着。(事实上这是iOS想要实现的视觉效果,和之前多任务界面的逻辑如出一辙)
  • 空间上的连续性直接决定了手势操作的方式。注意,和按键的点按操作不同,滑动手势操作对内容的操作方式是直接的,所以既然它是从左边来的,那返回界面的动作就是从左边回到右边,这时候手势的方向也必须和它的运动路径保持一致。iOS想要做到的不仅仅要看着连贯,而且操作上也要尽可能符合直觉,而不是记忆。

最后一点在iOS的开发规范中也有所提及:

As a general rule, use standard gestures. People are familiar with the standard gestures and don't appreciate being forced to learn different ways to do the same thing. In games and other immersive apps, custom gestures can be a fun part of the experience. In other apps, it's best to use standard gestures so extra effort isn't needed to discover or remember them.

简单地翻译一下:

  • 当使用者被迫用不同的方式做同样的事情的时候,别指望他们会感激你;
  • 在游戏或者是模拟器App里面,自定义手势可以成为有趣体验中的一部分;
  • 在其他的App里面,最好使用标准手势,这样就不用花多余的功夫去发现它或者是记住它。

有了这张Gif,理解上面所说的内容就容易多了

所以从左侧边缘向右滑动返回是在以上这些原则上产生的,那为什么从App桌面会是按Home键或者是上滑导航条就能解释清楚了:因为所有App并不是从右边过来的,而是由一个App图标展开成一个完整的界面,想要做到路径的对称,要么间接操作内容,不产生冲突;要么上滑返回,做到对称。而且桌面的优先级是独立的:它既不是App,也不是App里面一层一层的界面,从左往右滑的界面并不适用,因为桌面并没有在左边等着你,这一点在多任务界面里也有相应的暗示:

看到隐隐约约的桌面了吗?

返回上一级在左上角的按钮在左上角也是同样的道理:毕竟上一级界面在左边等着,箭头指向左边,并且放在两者的交界处附近,就等同于在告诉你;"嘿,左边还有东西!点这里是回去左边的"。这是一个简单的暗示。不想放左上角的话那还能放哪里呢?底部的Dock栏?想法不错,很久之前的Flyme也有过这样的尝试,但下面的Dock栏已经塞下了5个图标了,再塞一个返回箭头一方面是会让底部非常拥挤,搞不好会误操作;另一方面是Dock栏不是在每个界面都有,这和顶栏不一样,顶栏是个一直都有而且空间相对充足的位置。两个因素加起来就决定了那个返回按钮只能在左上角待着。不方便起码好过无处安家。

第三方App对这个手势的支持程度就取决于App开发者了,现在大多数常用的App已经适配了,但没适配的App在体验上就会产生割裂感,参差不齐的体验确实让人心累。

安卓是返回手势依旧是在间接的操作内容:滑动-达到触发距离-松手-开始返回上一级界面,本质上是通过边缘的滑动取代原来返回键的操作。这样的返回方式虽说方便,但也拖沓,特别是MIUI,它将滑动的距离设置得比较长,比Flyme的要长很多,用Flyme的时候拇指伸过去轻轻勾一下就能返回,而MIUI就不行,需要刻意地拉一段再松开。在"返回"这个动作的操作效率上,Flyme要好很多,很大程度上是因为Flyme触发距离非常短(粗略地估计了一下是2~3mm之间),比H OS 和Color OS 都要短,很明显Flyme对此是有所考虑的。当然,论操作效率,如果能习惯的话能直接操作内容的iOS是最高效的。

我对于iOS的返回操作是比较青睐的,因为平时使用手机的时候右手的拇指会经常放在屏幕的下半部分,所以想返回上一级界面的话,下意识地直接伸过去勾一下很方便,如果要刻意地跑大老远回到屏幕右边"拽一下"、松手然后返回我觉得反而会有点麻烦,而且很多时候我想不到要这么做。事实上"伸过去勾一下返回"这个习惯在以前我用魅族16th的时候就有了,即使两边都可以返回。所以到iPhone上就能无缝衔接,这种直接无延迟的交互方式反而用得更加顺手,并不觉得麻烦(很可能是我的iPhone11 并不是一台特别大只的手机,如果是Max、Plus的机型可能会比较吃力了)。

最后修改:2020 年 05 月 02 日 06 : 23 AM
如果觉得我的文章对你有用,请随意赞赏,感谢您支持6zgm.com !