1.1 什么是UI动效设计

当互联网时代发展到移动互联网时代时，不仅有网页UI，还有手机和穿戴设备的UI，都为动效设计的发展提供了更多的可能性。在学习UI动效设计之前，先认识一下什么是UI。

1.1.1 先说UI

UI是英文User Interface的缩写，本意是用户界面，从字面上看由用户和界面两个部分组成，但实际上还包括用户与界面之间的交互关系。以手机为例，手机上的界面都属于UI。UI设计是指软件的人机交互、操作逻辑和界面美观的整体设计。

UI设计具体包括界面设计、按钮设计、导航设计、图标设计等，如图1-1所示。

1.3.3 配色方式

色彩和其他事物一样，需要使用得恰到好处。如果在配色方案中使用3种基本色，将获得更好的效果。将颜色应用于设计项目中，要保持色彩平衡，使用的颜色越多，越难保持平衡。配色方式有以下几种。

1. 色相差配色

色相差配色是由一种色相构成的统一性配色，即由某一种色相支配、统一画面的配色。除同一种色相外，色相环上相邻的类似色也可以形成相近的配色效果。图1-24所示为同色系主导的配色界面，主色和辅助色都在统一的色相上，这种配色方式的页面往往会给人一致化的感受。

1.4.2 按钮

按钮的作用是引发即时操作，即当用户单击按钮后，触发即时操作。作为基础组件之一，按钮广泛应用于不同平台的产品中。同一应用软件的按钮应该具有统一的设计风格，每个按钮之间也应该有所区别，如图1-28所示。

完整的按钮视觉体系包含强、中、弱3个层次，按钮的状态分为正常未单击、单击时和不可用3种状态，如图1-29所示。

1.4.3 导航

导航的作用是引导和指示，它可以引导用户和产品进行有效的交互，实现用户的目标。单击导航上的按钮可以进入对应的内容页面，导航的种类有很多，如宫格式导航、陈列式导航、舵式导航等。图1-30所示为宫格式导航和陈列式导航。

1.4.4 栏

栏是包含了导航信息、告诉用户目前所在的位置和能帮助用户浏览或启动某些操作的控制按钮。栏分为状态栏、导航栏、标签栏和工具栏。图1-31所示为状态栏。