各式按鈕背景:基本篇


最常見的按鈕就是個長條型的色塊,配上文字說明讓使用者知道點擊這個色塊能達到什麼目的。讓這個色塊擁有像現實生活的光影變化,在視覺上更顯精緻。可接著各式按鈕作法:文字篇 的步驟接著做。

基礎篇1:邊框

圖層樣式「筆畫」,在內側增加一條細線,使用和按鈕底色相同的色系,調成較深色強調按鈕輪廓。
1.jpg

基礎篇2:邊框+漸層

漸層可說是運用與變化最廣泛的手法,從基本的兩種色彩做出上淺下深、上深下淺的方式,到 iOS6 內建使用四種色彩的玻璃折射光澤,都是透過漸層來達成。

如果按鈕已有一個標準色彩,可以使用色彩增值的方式在原本標準色上壓上灰階漸層,能快速做出立體按鈕的效果。
2.jpg

上淺下深的漸層是最基本的作法,能讓按鈕有凸出的效果。
3.jpg
4.jpg

上深下淺的漸層主要運用在希望按鈕在視覺上有凹陷感的時候。
5.jpg

四種色彩的玻璃折射光澤,iOS6 的 TabBar 就是使用這種效果。這個顏色運用在按鈕最下方的反光,會是 4 色按鈕次深的顏色。
6.jpg

最深的顏色,注意色彩的飽和度,若飽和度低易造成按鈕灰灰髒髒的感覺。
7.jpg

較淺的色彩,如果這個App有標準色的話可運用在此。
8.jpg

最淺的顏色,由上往下照射的光線會在此處形成反光,彩度低而明度高,盡量避免使用純白色。
9.jpg

基礎篇3:邊框+漸層+白色內陰影

深色的內陰影可以製作凹陷的效果,若是淺色的內陰影就會變成高光線。
10.jpg

特別篇1:邊框+漸層+白色內陰影+打光

1.這種製作方式能增強玻璃折射的質感,運用各種顏色,讓按鈕更繽紛。新增一個圖層在按鈕上方,框出扁橢圓形,並填上淺色。
11.jpg

2.套用高斯模糊。
12.jpg

3.在模糊的橢圓形圖層上建立遮色片。
13.jpg

4.同樣的方式建立上方的淺色橢圓形,並將它壓得更扁。
14.jpg

5.套用遮色片,調整圖層透明度。完成。
15.jpg

ps.製作橢圓形高光時運用和按鈕不同的色調,就能做出在不同色光照射下的玻璃光澤。
16.jpg

這篇是基本常見的按鈕,可以依此加上材質、斜角什麼的,在大量快速製作和調整個種顏色非常方便。為了做示範我有把效果誇張一點點,可以將數值減少和對比調弱些、按鈕會更精緻。雖說現今扁平化流行,但在台灣這種平均復古5年的審美觀來說,基本篇的風格在有點年紀的客戶眼中接受度較高。

Akane Lee

Akane Lee

如果設計師能和工程師順利合作,那麼老公也就能準時下班了吧!因此努力分享 UI 和 UX 方面的知識、技術、各種踩過的坑與心得。

Comments

wave
comments powered by Disqus

Press ESC to close