安卓接口和苹果接口对比_苹果流体接口设计

安卓接口和苹果接口对比

When we looking at iOS and Android, clearly Apple paid attention to smoothness and usability more than Android. Apple always uses only one method to get what they want: naturalness. iPhone was inspired by nature like Apple’s many products.

当我们查看iOS和Android时,显然苹果比Android更注重流畅性和可用性。 苹果始终只使用一种方法来获得他们想要的东西:自然。 iPhone的灵感来自自然,就像苹果的许多产品一样。

When we look at Steve Jobs’ biography, Jobs felt that Apple should create products that everyone can use; even without the user guide.

当我们看史蒂夫·乔布斯的传记时,乔布斯认为苹果应该创造所有人都可以使用的产品。 即使没有用户指南。

For example, iPhone’s home screen can be compared to a book page in real life. When you look at the movements you can understand what I’m saying.

例如,可以将iPhone的主屏幕与现实生活中的书页进行比较。 当您查看动作时,您可以理解我的意思。

We can’t flip a book page up or down, so we can’t do it with the iPhone too. If we ask that every smartphone is not like that anyway; old Androids were very confused about this.

我们无法上下翻书,因此我们也无法使用iPhone翻页。 如果我们要求每个智能手机都不是那样的话; 旧的Android对此非常困惑。

安卓接口和苹果接口对比_苹果流体接口设计
An example of page transition in iOS14
iOS14中的页面转换示例
安卓接口和苹果接口对比_苹果流体接口设计
Let’s see a book page
看书页

Another example will be the cursor. Gestures on the iPhone screen are designed according to our cursor usage habits. We move our finger on the screen like a cursor. Just as we used a cursor on the computer.

另一个例子是光标。 iPhone屏幕上的手势是根据我们的光标使用习惯设计的。 我们像光标一样在屏幕上移动手指。 就像我们在计算机上使用光标一样。

屏幕流动性 (Screen Fluidity)

延迟和响应 (Latency and Response)

If there is a delay in the reaction on the screen after touching the screen, we will feel like the phone has not responded to us. Therefore, the fast response feels more fluid.

如果触摸屏幕后屏幕上的React有延迟,我们会感觉电话没有​​响应我们。 因此,快速响应感觉更加流畅。

安卓接口和苹果接口对比_苹果流体接口设计
WWDC 2018
WWDC 2018

Apple didn’t just focus on the iPhone’s reactions. The user may also be delayed to a reaction. Apple wanted to prevent this too, but how? Of course with gestures designs…

苹果不仅关注iPhone的React。 用户也可能会延迟React。 苹果也想防止这种情况,但是如何呢? 当然还有手势设计…

‘Gestures’ became very important with the removal of the home button on iPhone X. It was almost the most important point. Because all the operations of the home button are done by the gestures that came with iPhone X. How can the gestures design speed you up? The answer is: If you don’t have to think about what to do before applying the gestures, you will speed up. So when you interact with the screen first and decide what to do next, you take quick action. Are you confused? Gifs help us;

随着iPhone X上的主页按钮的删除,“手势”变得非常重要。这几乎是最重要的一点。 因为主页按钮的所有操作都由iPhone X随附的手势完成。这些手势设计如何使您加快速度? 答案是:如果您无需在应用手势之前考虑要做什么,则可以加快速度。 因此,当您首先与屏幕进行交互并决定下一步要做什么时,您将采取快速行动。 你困惑吗? Gif帮助我们;

安卓接口和苹果接口对比_苹果流体接口设计
You opened an application, but you realized that you opened the wrong application, we can go back to the correct one quickly.
您打开了一个应用程序,但是您意识到打开了错误的应用程序,我们可以快速返回到正确的应用程序。
安卓接口和苹果接口对比_苹果流体接口设计
Let’s assume that you need to send photos urgently. You can do this with this gesture.
假设您需要紧急发送照片。 您可以用此手势进行操作。

These may sound like small and unnecessary details. But reconsider this by thinking about 2 seconds after opening the wrong application.

这些听起来像是很小的不必要的细节。 但是,请考虑打开错误的应用程序大约2秒钟后再进行考虑。

When you open a wrong application on iPhone’s with the home button, your finger will necessarily go to the home button. (Your finger goes to the home button until the application is opened and there is almost no waste of time) But on iPhones without a home button, your finger is already on the screen. If there was no such gesture, you would have to wait for the application to open first. Then you would have to move your finger to the handler and close the app.

当您使用Home键在iPhone上打开错误的应用程序时,您的手指必定会转到Home键。 (您的手指一直指向主页按钮,直到打开应用程序为止,几乎没有时间浪费。)但是在没有主页按钮的iPhone中,您的手指已经在屏幕上了。 如果没有这种手势,则必须等待应用程序首先打开。 然后,您必须将手指移至处理程序并关闭应用程序。

安卓接口和苹果接口对比_苹果流体接口设计
Just when you were going to open Twitter, you thought that you should check your mail. This gesture for you.
刚要打开Twitter时,您认为应该检查您的邮件。 这个手势适合您。

接口响应 (Interface Response)

Now, we are fully in touch with the screen. When we click on an application, open the notification center, etc. we would like to see something happening on the screen. Because the screen provides feedback such as vibration, icon color change. So, we understand that the screen responded to our action.

现在,我们与屏幕完全保持联系。 当我们单击一个应用程序时,打开通知中心等。我们希望看到屏幕上发生的事情。 因为屏幕提供了诸如振动,图标颜色变化之类的反馈。 因此,我们了解到屏幕响应了我们的操作。

Apart from these, as can be seen in the gifs above, the application starts from a small scale and quickly covers the whole screen.

除此之外,如上面的gif所示,该应用程序从小规模开始,并Swift覆盖了整个屏幕。

安卓接口和苹果接口对比_苹果流体接口设计
The reverse is also possible
反过来也是可能的
安卓接口和苹果接口对比_苹果流体接口设计
As you press they grow up and out towards your finger
当您按下时,它们会长大并朝着手指伸出

橡皮筋 (Rubber Banding)

While we are reading an article on a website, we scroll down a few more times to see if the article is over. The same thing happens when we on apps; for example in notes or photographs. When you slide it up or down, this gesture letting you know “there is nothing there”. This is called “rubber banding”.

当我们在网站上阅读文章时,我们向下滚动几次以查看文章是否结束。 当我们使用应用程序时,也会发生同样的事情。 例如在笔记或照片中。 当您向上或向下滑动时,此手势将使您知道“那里什么也没有”。 这称为“橡胶带”。

安卓接口和苹果接口对比_苹果流体接口设计
Rubber banding
橡皮筋

Chan Karunamuni (the host that appears on gifs) says that if there was no such feedback, you actually wouldn’t know between a frozen phone and phone that just top of the edge of the screen.

Chan Karunamuni(显示在gif上的主持人)说,如果没有这样的反馈,您实际上不会知道在冻结的电话和仅在屏幕边缘上方的电话之间。

动画制作 (Animations)

How should animations that are easy on the eyes and soften the transition should be? Apple shows that the number of frames shown per second is not enough for this, but also needs different criteria with the gif below;

眼动且柔和的动画应该如何过渡? Apple表示每秒显示的帧数不足以实现此目的,但是下面的gif仍需要不同的条件;

安卓接口和苹果接口对比_苹果流体接口设计
Both 30 fps
两者均为30 fps

At the same time, the speed of animation and the appearance of each frame is important. Motion blur and motion stretch are used for this.

同时,动画的速度和每帧的外观也很重要。 为此使用了运动模糊和运动拉伸。

安卓接口和苹果接口对比_苹果流体接口设计
Single frame from 3 animations
单幅3动画

For example, when we click on an application icon, it enlarges and covers the entire screen. The smooth transition is provided with motion stretch.

例如,当我们单击一个应用程序图标时,它将放大并覆盖整个屏幕。 平滑过渡带有运动拉伸。

As a result, Apple has revealed our requirements that we are not even aware of. Documents will be our most important resource when designing an application, no doubt. But the details in such presentations also give good tips about user interfaces.

结果,Apple披露了我们甚至没有意识到的要求。 毫无疑问,在设计应用程序时,文档将是我们最重要的资源。 但是,此类演示文稿中的细节也为用户界面提供了很好的提示。

翻译自: https://uxplanet.org/apples-fluid-interface-design-687c2914e886

安卓接口和苹果接口对比