“拟物扁平化”按钮常见设计制作方式简介

刘谢川

（成都信息工程大学，四川 成都 610225）

“拟物扁平化”按钮常见设计制作方式简介

刘谢川

（成都信息工程大学，四川 成都 610225）

无论在网页设计还是APP界面设计中，拟物扁平化设计作为拟物化设计和扁平化设计的一种折中方案已经成为一种流行趋势。在这些设计制作中，按钮的设计是最为常见也最为典型的代表。文章介绍最常见也最为实用的按钮设计与制作。

拟物扁平化；按钮；设计

1 研究背景

无论界面设计还是整体的App设计，扁平化设计都已经成为显著趋势。越来越多的人开始采用扁平化设计的同时，仍有不少人支持拟物化设计。文章具体探讨两种设计风格存在的优势与不足。

拟物设计是追求模拟现实物品的造型和质感，通过叠加高光、纹理、材质、阴影等各种效果对实物进行再现（也可适当程度变形和夸张）；扁平化设计就是摒弃以上对效果（尤其是高光、阴影等能造成透视感的效果）的追求，追求通过抽象、简化、符号化的设计元素来表现。

扁平化概念的核心意义是：去除冗余、厚重和繁杂的装饰效果。摒弃高光、阴影等恩那个造成透视感的效果，通过抽象、简化、符号化的设计元素来表现。而具体表现在去掉了多余的透视、纹理、渐变以及能做出3D效果的元素，这样可以让“信息”本身重新作为核心被凸显出来。同时在设计元素上，则强调了抽象、极简和符号化。缺点：降低用户体验，在非移动设备上令人反感；缺乏直观，需要一定的学习成本；传达的感情不丰富，甚至过于冰冷。相似度很高，缺乏个性。拟物化通过叠加高光、纹理、材质、阴影等效果对实物进行再现，也可适当程度变形和夸张，界面模拟真实物体。意味着再现那些用户所熟知的事物。尽量保持与参考对象的一致性！缺点：过于强调图标本身，导致功能性不够强。

“拟物扁平化”设计则是一种折中的方式，将拟物与扁平设计手法加以结合，达到互补的目的，在界面设计中应用较多。文章探讨界面设计中最为常用的按钮的“拟物扁平化”常用设计方式。“拟物扁平化”就是在造型上抽象简化的同时增加一定程度的高光、纹理、材质、阴影等各种效果，使按钮形象化。

2 拟物扁平化按钮制作方法

由于按钮是界面设计中最常见最典型的图标，以此为例列举常见的按钮设计制作手法。按钮的类型大概分为：普通按钮，渐变叠加按钮，带光效的按钮，图案叠加按钮，带文字变化等。

2.1 普通按钮的绘制

首先制作完成普通按钮，其他按钮都是在这个基础之上完成的。基本的绘制流程是绘制形状——添加效果（主要指图层样式）——添加内容（文字或者图像）。首先绘制普通按钮，首先创建250×130，72像素，颜色8位的画布，给背景填一个深色，然后选择形状里面的矩形工具，创建宽为200px，高为50px的蓝色形，然后在属性面板里面给4px的圆角半径。通常在绘画的时候只要增加上高光，反光和阴影，物体就会比较形象，显得有立体感。所以最基本的拟物扁平化按钮绘制方法就是增加高光，反光和阴影。用添加图层样式的方式来添加效果，它能比较方便地调整，首先添加颜色叠加图层样式，选择一种蓝色，然后绘制高光，添加图层样式中的内阴影，设置颜色为白色，混合模式改为叠加，透明度设置为75%左右，角度改为90度，这样才符合透视角度。距离表示高光的大小，这里设置为1，大小表示羽化程度，这里设置为0，这就完成了高光的绘制。由于填充的是纯色，所以暂时不添加反光。再添加投影样式，设置投影颜色为黑色，混合模式为叠加，透明度为75%，角度为90，距离为1px，大小为1px，完成投影绘制。

最后在按钮上添加文字并居中，普通按钮部分绘制完毕（见图1）。

图1 普通按钮图

2.2 渐变按钮的绘制

然后在普通按钮的基础之上绘制渐变按钮，只需要添加渐变叠加图层样式，选择线性渐变并选择三种颜色，最右边的是浅蓝，中间的是深蓝，最左边的是稍微深一点的蓝色，通过这种颜色调节主要是绘制出反光，让按钮更具立体感（见图2）。

图2 渐变按钮图

第二种渐变按钮是两种颜色的渐变，这种渐变只需要调整渐变色就可以轻易实现（见图3）。

图3 添加渐变色截图

2.3 带光效按钮的绘制

第三类是带光效的按钮，这种按钮我们也可以在渐变按钮的基础之上去添加。首先创建一个宽为200px，高为40px的椭圆形状，确保与按钮的宽度一致。然后修改椭圆内部的填充色为白色渐变色，且两端透明。最后把这个椭圆形状对齐按钮下部（见图4）

图4 光效按钮操作图

然后左手按住Alt键，右手用鼠标在“椭圆形状”图层和“按钮”图层之间点击多剪切图层。整个白色区域比较尖锐，选中它后在属性面板的蒙版设置里面做一个羽化，设置羽化值为10（见图5）。最后降低“椭圆”图层的填充值为60（见图 6）。

图5 设置羽化值图

图6 光效按钮图

2.4 图案叠加按钮的绘制

首先删除之前绘制的椭圆形状，然后增加图案叠加样式，并选择一种图案（见图7）。

选择折后没有看到任何变化，这是由于渐变叠加的不透明度过高，降低渐变叠加的不透明度为50%，图案叠加的不透明度改为20%（见图8）：

如果保存了很多图案素材的话就可以直接调用，非常方便（见图9、图10）。

2.5 带文字变化按钮的绘制

图7 图案叠加操作图

前面制作的按钮上的文字都没有做效果处理，这里也有常规的处理方法，凸起和凹陷效果。

图8 调整透明度图

图9 图案叠加按钮效果1

图10 图案叠加按钮效果2

文字凸起效果制作，首先输入按钮上面的文字。比如输入“搜索”，字体为“微软雅黑”，字号为24，粗体，选中文字之后增加内阴影作为高光，内阴影颜色选择白色，混合模式为“正片叠底”，距离为1像素，大小为0像素，角度为90度，不透明度为50%。由于文字也是白色，所以效果不明显。然后添加投影效果模拟阴影，选择投影颜色为黑色，混合模式为叠加，距离为1像素，大小为2像素，角度为90度，不透明度为50%（见图11）

图12 带文字变化效果按钮图

图11 添加投影效果图

文字凹陷效果制作：内陷效果结合生活实际，需要上面是阴影，下面是亮部，制作方法与凸起文字类似，区别在与内阴影选择黑色，投影选择白色。所以增加内阴影，颜色为黑色，混合模式为正片叠底，不透明度为50%，角度为90度，距离为1像素，大小为0像素（见图12）

除此之外还可以根据需要自行添加外发光，内发光等效果。

3 结束语

综上所述，可以通过添加图层样式的内阴影，投影，渐变叠加，图案叠加等方式快速实现“拟物扁平化”按钮的常规制作。其他按钮的制作也是类似，希望大家能够触类旁通。

作 者：

刘谢川（1982-），男，重庆人，硕士，讲师，研究方向：图像图像，影视制作，研究方向：图形图像影视教学。

U212.33

A

1009-5071（2017）10-0132-04