各式按鈕背景:進階篇

32.jpg
這篇會教大家怎麼在按鈕外圍做一圈凹陷的陰影,為了教學需要、有故意將效果做得誇張些。如果知道原理了、記得把數值調小一點比較自然。請接續各式按鈕背景:基本篇 製作~

進階篇1:圖樣覆蓋

在按鈕區塊加上材質也是種加強明辨度、畫面更精緻的作法。
17.jpg

進階篇2:內發光

和按鈕同色系的淺色內發光能增加按鈕的立體感。
18.jpg

進階篇3:凹陷邊框

1.常常在知名App上看到按鈕外緣有一圈襯托按鈕本身的凹槽,其實作法很簡單。使用圓角矩型工具繪出一個比按鈕本身略大的方塊。
19.jpg

2.凹槽的反光,設定白色的「陰影」。
20.jpg

3.加上內陰影,讓凹槽更有凹陷下去的感覺。完成。
21.jpg

特別篇2:立體按鈕

1.不管是電視搖控器、電燈開關、或是電子計算機,它們的按鈕會做的比介面還凸出,是立體的。在App的介面上也可以製作擬真的立體按鈕,留意光影的變化就能做的非常精緻。先製作一個平面的按鈕。
22.jpg

2.複製一層移到按鈕下方,並壓扁它。這是按鈕的厚度。光線從正上方照射,所以這層厚度的顏色要比按鈕更深。
23.jpg

3.為了襯托按鈕,製作一層凹槽。
24.jpg

4.設定凹槽的高光。
25.jpg

5.凹槽的陰影。有時正上方90度角的設定會讓圖層顯得扁平無立體感,可以偷偷將角度改成120度。
26.jpg

6.為了更擬真,按鈕和厚度之間需加上高光。製作一個淺色的橢圓形。
27.jpg

7.高斯模糊後把橢圓形壓得扁扁的。
28.jpg

8.可以使用方向鍵微調高光的位置,並降低透明度。
29.jpg

9.加強厚度的陰影處,同樣使用壓扁的橢圓形,填上深色。
30.jpg

10.高斯模糊後加上遮色片。
31.jpg

11.調整透明度後,立體按鈕就完成囉!
32.jpg

以上是我常使用的幾種做按鈕的技巧,因為 App 畫面就是這麼大,除了首頁會使用大顆較特別的按鈕外,內頁操作和 Navigation Bar 上的按鈕用基本篇的就夠了,太花俏反而易造成畫面混亂。請以易用性為基礎、再來考慮視覺效果。

Akane Lee

Akane Lee

幫助你快速學會 UI/UX 實用技巧,結合理論與實作,短時間內擺脫設計瓶頸,讓你每個專案都能交出滿意的成果!

Comments

wave
comments powered by Disqus

Press ESC to close