3.3 精益求精：优化移动UI的图案效果

“二流企业造产品，一流企业创品牌”。在消费者越来越挑剔、可替代性产品越来越泛滥的环境下，想要使自己的产品突出重围，就必须要能打动人心。优秀的UI设计能够在第一时间吸引人的眼球，本节将讲解如何优化移动UI的图案效果。

3.3.1 分辨率影响美感

在移动UI中，图像的品质与分辨率有很大的关系，较高的分辨率可以让图像显得更加清晰、精美，能够体现出图像的内在质感，如图3-20所示。

当然，如果图像非常模糊，品质较差，那么肯定会影响用户的视觉体验，降低用户对APP的好感，如图3-21所示。

3.3.2 拉伸影响美感

在设计移动UI中的图像时，如图3-22所示为原图，如果随意拉伸图像则会造成图像失真变形，如图3-23所示，不但看上去感觉很奇怪，而且还会让用户质疑APP的专业性。

因此，在处理移动UI的图像时，应该按照等比缩放或者合理裁剪的原则来控制图像的尺寸，避免出现随意拉伸的情况，要保持图像的真实感。如图3-24所示分别为原图、等比缩放图、合理裁剪图。

3.3.3 特效美化界面

在移动UI中应用各种素材图像时，设计者可以适当地对图像进行一定的色彩或特效处理，使其在移动UI中的展示效果更佳，为用户带来更好的视觉体验。

使用Photoshop调整图像的透明度、混合模式或者虚化效果等，都是不错的移动UI的图像处理方式，可以突出移动UI中的重点信息，使APP界面的层次感更强。如图3-25所示分别为原图、调节透明度图、模糊虚化效果图。

3.3.4 交互动作特性

如今，触摸屏已经成为移动智能设备的标配，多点触控手势技术也被广泛应用，使用户与智能手机、平板电脑等设备之间建立起了一种更宽广的联系方式。

智能手机的APP UI设计中，最重要的特性就是手势交互动作特性。用户可以通过模拟真实世界的手势，与手机屏幕上的各种元素进行互动，进一步增加人机交互的体验。如图3-26所示为一些常见的手势交互操作。

例如，手势交互动作特性中的自然手势就是在真实物理世界中存在或演变而来的手势。这类手势的动作十分自然，用户基本不需要或很少需要去学习。如图3-27所示为钢铁侠系列电影中的全息触控交互。

3.3.5 增加真实感

在APP UI设计中，“循环动作原则”主要是指一个UI元素的运动频率。例如，在如图3-28所示的这款游戏APP界面中，赛车一直处于旋转的循环运动中，可以向用户360°地展示其特点。

对于那些运动频率很小的UI元素来说，在设计时可以通过数据精确地将其描述出来，让APP中的动画效果看起来更加真实。

3.3.6 透析事物关系

从APP的体验设计层面来说，设计者必须考虑多个UI元素动作的重复运用及循环速率，以此来解释各个UI元素之间的关系，并省下大量的设计工作。

例如，在如图3-29所示的这款游戏APP的界面中，用户点击赛车即可查看其具体的参数，但赛车的循环运动动作还是在重复不变。

3.3.7 展现复杂效果

在移动UI设计中，大部分的动画和运动特效都可以运用关键动作进行绘制。例如，“植物大战僵尸”游戏APP就是运用关键动作进行绘制的，用户可以通过将多种不同植物进行武装来切换、改变其功能，从而快速有效地把敌人阻挡在入侵的道路上，如图3-30所示。

关键动作主要是将一个动作拆解成一些重要的定格动作，通过补间动画来产生动态的效果，适用于较复杂的动作，如图3-31所示。

3.3.8 展现简单动画

连续动作是将动作从第一张开始，依照顺序画到最后一张，通常是用来制作较简易的动态效果。例如，“水果忍者”APP就是采用连续动作原则来描述运动轨迹的，如图3-32所示。

3.3.9 实现夸张想象

移动UI动画设计的最大乐趣在于设计者可以充分发挥天马行空的想象力和创造力，利用夸张的方式制作利于触碰的UI元素，如图3-33所示。