移动APP设计:7种动效设计和10个设计原则
发布时间:2021-02-21 18:20

请让动效的每一帧都得有它的道理,那样的动效设计才算是成功的,在动效设计中切忌为了炫而炫,为了动效而动效。

你可能听说过:好的设计是显而易见的而优秀的设计是无形的。对于App的动效设计来说也是一样的。一个优秀的动效能你的App变得友好而且抓人眼球,但是绝不会让用户分心。任何动效的主要任务都是向用户阐释APP的逻辑。在此我希望分享一下我们在设计美观并实用的动效时的一些经验。

动效的种类:

为了充分利用动效,你必须了解动效在App中的定位和职责,我们一起看一些动效的种类吧。

视觉反馈

对于任何用户界面来讲,视觉反馈都是至关重要的。在现实生活中,人们和任何物体的交互都是伴随着回应的。

同样地,人们期待从APP元素中得到一个类似的效果。App给的视觉,听觉及触觉反馈,使用户感到他们在操控APP。同时视觉反馈有个更简单的用途:它暗示着您的APP运行正常。当一个按钮在放大或者一个被滑动图像在朝着正确方向移动,那么很明显,这个APP在运行着呢,在回应着用户的操作。下面的例子显示,当用户点击屏幕以示完成任务时,包含有数据的方块就缩小并且变成了绿色。

来自:Workout book

Tinder中使用的左划喜欢右划跳过被大家所熟知,而这种交互方式同样也是一种视觉反馈。这个动画效果已经被我们实现出来放在开源库Koloda中了。

来自:Koloda

功能改变

这种动效展示出元素在与用户进行交互的时候是如何发生变化的当您想要阐明一个元素功能如何变化时,这种动效是最好的选择。它经常与按钮,图标和其它小设计元素一起使用。

从第一个例子中您可以看到一个图标从汉堡菜单变成了“X”状,以表示按钮的功能其实已经发生了改变。

来自:Principle animation

第二个例子中,图标随着内容的变化而变化:

来自:Contact display switch

空间扩展

大部分的移动APP都有非常复杂的结构,所以设计师的的工作就是尽可能地简化APP的导航。对于这项任务来讲,动效是极其有帮助的。如果您的动效展示出了元素被藏在哪里,那么用户下次找起来就会很容易了。第一个例子中,我们看到导航栏的菜单,当用户点击按钮时,它颠倒过来了:

来自:Guillotine

下面这个例子中,我们可以看到更多选项是如何从屏幕底部出现的,这也改进了用户进行选择的流程:

来自:Bottom navigation

元素的层次结构及其交互

动效完美地描述了界面的各个部分并且阐明了它们之间是如何进行交互的。动效中每个元素都有其目的和定位。比如,一个按钮可以激活弹出菜单,那么此菜单最好从按钮弹出而不是从屏幕侧面滑出来:这样就会给用户显示按下按钮的回应。这样就会帮助用户理解这两个元素(按钮和弹出菜单)是有联系的。

所有动效都应该阐释元素之间是如何联系的。这种层次结构和元素的互动对于一个直观的界面来讲是非常重要的。下面第一个例子显示当按钮被点击后菜单栏出现,并且在用户的眼里,菜单栏和按钮本质上是同样的元素,只是变大了:

来自:Hamburger menu

第二个例子中,一张包含信息的卡片在用户点击了之后变大,让用户知道这是同一个元素,唯一的不同是尺寸:

来自:3D Touch and Apple Pay concept.

视觉提示

动效暗示如何与元素进行交互。当一款APP的元素间有不可预估的互动模式时,动效提供视觉线索就十分必要了。在这个例子中,当用户打开一个博文系列时,带有文章的卡片就从屏幕的右侧出现,用户就可以知道要水平地滑动来浏览这些卡片:

来自:Travel blog app.

第二个例子中,用了同样的方法,只是运用到了社交图标上:

来自:Share and statistics menu concept

购买咨询电话
yobo体育,yaboapp,yobo体育app