嫁給RD的 UI Designer

UI/UX 設計、教育訓練、課程演講

高雄-6月份 UI 設計師入門班,報名頁面

各式按鈕背景:進階篇

| Comments


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

進階篇1:圖樣覆蓋

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

進階篇2:內發光

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

進階篇3:凹陷邊框

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

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

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

特別篇2:立體按鈕

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

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

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

4.設定凹槽的高光。

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

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

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

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

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

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

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

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

Comments

comments powered by Disqus