Creative customization

Creative customization

创意定制

动画可以在很宽的范围内使用,它能够将功能和外观非常和谐的联系起来。

Animation may be used in a wide range of and contexts to unite beauty and function.

图标类型

Icon types

系统图标可以拥有双重功能。

System icons may perform dual functions.

产品表现的应该非常优雅。

Product icons should demonstrate polish.

05-creative-customization


图标

Icons

系统图标

System icons

一个图标可以具有双重功能。例如,一个菜单图标可以平滑的转换成返回控制,并再次恢复成菜单图标。这个效果既告诉了用户这个按钮的功能同时为交互增加了神奇的元素。

An icon may serve dual functions. For example, a menu icon may smoothly transition to a playback control, and back again. This effect both informs the user of the button's function while adding an element of wonder to the interaction.

将菜单图标转换成返回箭头意味着两个动作是有关联并且这两个状态是不能同时出现的。必须按下返回按钮才能回到具有菜单图标的一级视图。

Transforming the menu icon into the back arrow signifies that the two actions are connected, and that one cannot exist while the other is present. The back button must be pressed in order to return to the top-level view with the menu icon.

将播放按钮转换成暂停按钮意味着这两个动作是有联系的,按下一个可以使另一个出现。

Transforming the play button to a pause button signifies that the two actions are linked, and that pressing one makes the other one visible.

当按下浮动动作按钮时,加号变形成为铅笔。这意味着铅笔对应的操作是主要的创造方法。

When pressing this floating action button, the plus sign transforms into a pencil. This indicates that the pencil is the primary creation method.

产品图标

Product icons

产品图标的动画应该从应用启动瞬间就开始表现的足够精致并且优雅。

Animated product icons should demonstrate polish and refinement from the moment the app launches.

当用户第一次进入应用并进行登陆的时,Inbox 产品的图标动画展示。

The Inbox product icon animation displays when the user opens the app for the first time and is asked to sign in.

当用户第一次使用日历时,日历的产品图标动画展示

The Calendar product icon animation displays when the user’s calendar data is loaded for the first time.

用户第一次打开 Google 相册时,它会使用产品图标向用户进行欢迎

The Photos product icon animation displays when the user opens the app for the first time and enters the warm welcome.

Gmail 的产品图标动画具有比较有趣的个性,并且具有保持相似的展示,也是会在用户首次打开应用时出现,并且要求用户进行登录。

The Gmail product icon animation has a slightly more playful personality while still keeping a similar reveal, and is also displayed when the user opens the app for the first time and is asked to sign in.


插图

Illustrations

在图片和插图中加入细微的动画,可以让用户场景变的更加有趣,增强用户体验。

Subtle animation in imagery and illustrations can add a sense of playfulness to the user experience.

当显示意外错误时,可以把它看作一个展示有趣动画的机会。

When displaying an unexpected error, use it as an opportunity to delight with animation.

在日历计划目标时,使用自行车动画可以让用户在等待安排时间时不会变的无趣。

Animating the bicycle while Calendar schedules a goal helps entertain the user while the task finishes.

在完成个人目标时(例如 Inbox Zero)可以通过动画来奖励用户,可以使应用的功能产生更深层次的互动。

Rewarding the user with an animation when they accomplish personal goals, like reaching Inbox Zero, can create deeper engagement with app features.

使用插图动画展示应用的新特性,可以让用户对新功能产生更深刻的印象。

Animating an illustration for a new feature can educate the user about the feature in a memorable way.