“擬物扁平化”按鈕常見設計制作方式簡介

劉謝川

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

“擬物扁平化”按鈕常見設計制作方式簡介

劉謝川

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

無論在網(wǎng)頁設計還是APP界面設計中，擬物扁平化設計作為擬物化設計和扁平化設計的一種折中方案已經(jīng)成為一種流行趨勢。在這些設計制作中，按鈕的設計是最為常見也最為典型的代表。文章介紹最常見也最為實用的按鈕設計與制作。

擬物扁平化；按鈕；設計

1 研究背景

無論界面設計還是整體的App設計，扁平化設計都已經(jīng)成為顯著趨勢。越來越多的人開始采用扁平化設計的同時，仍有不少人支持擬物化設計。文章具體探討兩種設計風格存在的優(yōu)勢與不足。

擬物設計是追求模擬現(xiàn)實物品的造型和質(zhì)感，通過疊加高光、紋理、材質(zhì)、陰影等各種效果對實物進行再現(xiàn)（也可適當程度變形和夸張）；扁平化設計就是摒棄以上對效果（尤其是高光、陰影等能造成透視感的效果）的追求，追求通過抽象、簡化、符號化的設計元素來表現(xiàn)。

扁平化概念的核心意義是：去除冗余、厚重和繁雜的裝飾效果。摒棄高光、陰影等恩那個造成透視感的效果，通過抽象、簡化、符號化的設計元素來表現(xiàn)。而具體表現(xiàn)在去掉了多余的透視、紋理、漸變以及能做出3D效果的元素，這樣可以讓“信息”本身重新作為核心被凸顯出來。同時在設計元素上，則強調(diào)了抽象、極簡和符號化。缺點：降低用戶體驗，在非移動設備上令人反感；缺乏直觀，需要一定的學習成本；傳達的感情不豐富，甚至過于冰冷。相似度很高，缺乏個性。擬物化通過疊加高光、紋理、材質(zhì)、陰影等效果對實物進行再現(xiàn)，也可適當程度變形和夸張，界面模擬真實物體。意味著再現(xiàn)那些用戶所熟知的事物。盡量保持與參考對象的一致性！缺點：過于強調(diào)圖標本身，導致功能性不夠強。

“擬物扁平化”設計則是一種折中的方式，將擬物與扁平設計手法加以結合，達到互補的目的，在界面設計中應用較多。文章探討界面設計中最為常用的按鈕的“擬物扁平化”常用設計方式。“擬物扁平化”就是在造型上抽象簡化的同時增加一定程度的高光、紋理、材質(zhì)、陰影等各種效果，使按鈕形象化。

2 擬物扁平化按鈕制作方法

由于按鈕是界面設計中最常見最典型的圖標，以此為例列舉常見的按鈕設計制作手法。按鈕的類型大概分為：普通按鈕，漸變疊加按鈕，帶光效的按鈕，圖案疊加按鈕，帶文字變化等。

2.1 普通按鈕的繪制

首先制作完成普通按鈕，其他按鈕都是在這個基礎之上完成的。基本的繪制流程是繪制形狀——添加效果（主要指圖層樣式）——添加內(nèi)容（文字或者圖像）。首先繪制普通按鈕，首先創(chuàng)建250×130，72像素，顏色8位的畫布，給背景填一個深色，然后選擇形狀里面的矩形工具，創(chuàng)建寬為200px，高為50px的藍色形，然后在屬性面板里面給4px的圓角半徑。通常在繪畫的時候只要增加上高光，反光和陰影，物體就會比較形象，顯得有立體感。所以最基本的擬物扁平化按鈕繪制方法就是增加高光，反光和陰影。用添加圖層樣式的方式來添加效果，它能比較方便地調(diào)整，首先添加顏色疊加圖層樣式，選擇一種藍色，然后繪制高光，添加圖層樣式中的內(nèi)陰影，設置顏色為白色，混合模式改為疊加，透明度設置為75%左右，角度改為90度，這樣才符合透視角度。距離表示高光的大小，這里設置為1，大小表示羽化程度，這里設置為0，這就完成了高光的繪制。由于填充的是純色，所以暫時不添加反光。再添加投影樣式，設置投影顏色為黑色，混合模式為疊加，透明度為75%，角度為90，距離為1px，大小為1px，完成投影繪制。

最后在按鈕上添加文字并居中，普通按鈕部分繪制完畢（見圖1）。

圖1 普通按鈕圖

2.2 漸變按鈕的繪制

然后在普通按鈕的基礎之上繪制漸變按鈕，只需要添加漸變疊加圖層樣式，選擇線性漸變并選擇三種顏色，最右邊的是淺藍，中間的是深藍，最左邊的是稍微深一點的藍色，通過這種顏色調(diào)節(jié)主要是繪制出反光，讓按鈕更具立體感（見圖2）。

圖2 漸變按鈕圖

第二種漸變按鈕是兩種顏色的漸變，這種漸變只需要調(diào)整漸變色就可以輕易實現(xiàn)（見圖3）。

圖3 添加漸變色截圖

2.3 帶光效按鈕的繪制

第三類是帶光效的按鈕，這種按鈕我們也可以在漸變按鈕的基礎之上去添加。首先創(chuàng)建一個寬為200px，高為40px的橢圓形狀，確保與按鈕的寬度一致。然后修改橢圓內(nèi)部的填充色為白色漸變色，且兩端透明。最后把這個橢圓形狀對齊按鈕下部（見圖4）

圖4 光效按鈕操作圖

然后左手按住Alt鍵，右手用鼠標在“橢圓形狀”圖層和“按鈕”圖層之間點擊多剪切圖層。整個白色區(qū)域比較尖銳，選中它后在屬性面板的蒙版設置里面做一個羽化，設置羽化值為10（見圖5）。最后降低“橢圓”圖層的填充值為60（見圖 6）。

圖5 設置羽化值圖

圖6 光效按鈕圖

2.4 圖案疊加按鈕的繪制

首先刪除之前繪制的橢圓形狀，然后增加圖案疊加樣式，并選擇一種圖案（見圖7）。

選擇折后沒有看到任何變化，這是由于漸變疊加的不透明度過高，降低漸變疊加的不透明度為50%，圖案疊加的不透明度改為20%（見圖8）：

如果保存了很多圖案素材的話就可以直接調(diào)用，非常方便（見圖9、圖10）。

2.5 帶文字變化按鈕的繪制

圖7 圖案疊加操作圖

前面制作的按鈕上的文字都沒有做效果處理，這里也有常規(guī)的處理方法，凸起和凹陷效果。

圖8 調(diào)整透明度圖

圖9 圖案疊加按鈕效果1

圖10 圖案疊加按鈕效果2

文字凸起效果制作，首先輸入按鈕上面的文字。比如輸入“搜索”，字體為“微軟雅黑”，字號為24，粗體，選中文字之后增加內(nèi)陰影作為高光，內(nèi)陰影顏色選擇白色，混合模式為“正片疊底”，距離為1像素，大小為0像素，角度為90度，不透明度為50%。由于文字也是白色，所以效果不明顯。然后添加投影效果模擬陰影，選擇投影顏色為黑色，混合模式為疊加，距離為1像素，大小為2像素，角度為90度，不透明度為50%（見圖11）

圖12 帶文字變化效果按鈕圖

圖11 添加投影效果圖

文字凹陷效果制作：內(nèi)陷效果結合生活實際，需要上面是陰影，下面是亮部，制作方法與凸起文字類似，區(qū)別在與內(nèi)陰影選擇黑色，投影選擇白色。所以增加內(nèi)陰影，顏色為黑色，混合模式為正片疊底，不透明度為50%，角度為90度，距離為1像素，大小為0像素（見圖12）

除此之外還可以根據(jù)需要自行添加外發(fā)光，內(nèi)發(fā)光等效果。

3 結束語

綜上所述，可以通過添加圖層樣式的內(nèi)陰影，投影，漸變疊加，圖案疊加等方式快速實現(xiàn)“擬物扁平化”按鈕的常規(guī)制作。其他按鈕的制作也是類似，希望大家能夠觸類旁通。

作 者：

U212.33

A

1009-5071（2017）10-0132-04