激情六月丁香婷婷|亚洲色图AV二区|丝袜AV日韩AV|久草视频在线分类|伊人九九精品视频|国产精品一级电影|久草视频在线99|在线看的av网址|伊人99精品无码|午夜无码视频在线

高校合作1：010-59833514 ?咨詢電話：400-810-1418 服務(wù)與監(jiān)督電話：400-810-1418轉(zhuǎn)接2

如何做好一個(gè)小按鈕

發(fā)布時(shí)間：2024-04-03 18:00:25 瀏覽量：200次

在UI設(shè)計(jì)中，我們經(jīng)常會(huì)做到一些按鈕的設(shè)計(jì)。我們一般做得比較多的按鈕，就是下面這種普普通通、處處都很常見(jiàn)的一種按鈕。但它給人的點(diǎn)擊欲卻并不是很強(qiáng)。

我們可以看一下大廠做的按鈕，就會(huì)發(fā)現(xiàn)他們做的都比較立體，無(wú)論是凸起程度、還是通透程度，blingbling的處處都是細(xì)節(jié)，讓人想控不住不住戳一戳。

那么要如何做出這種點(diǎn)擊欲更強(qiáng)的按鈕呢？

其實(shí)就是要讓它更具有立體感，下面我就分享一下如何繪制這種按鈕效果。

設(shè)計(jì)步驟：

一、繪制基礎(chǔ)形

先用圖形工具繪制一個(gè)圓形，然后確定它的一個(gè)主光源方向（以光線是右上方為例），給它添加一個(gè)由右上到左下的漸變色。

接下來(lái)在圓形上繪制一個(gè)環(huán)境光的區(qū)域，將它填充為亮橘色，并將它的羽化值拉大，讓兩個(gè)區(qū)域的顏色融合過(guò)渡。

用同樣的方式，給按鈕右上角繪制一個(gè)高光亮區(qū)，同樣是使用圖形工具繪制一個(gè)橢圓，然后填充更亮的顏色，并將羽化值拉大。



二、添加質(zhì)感

在按鈕上繪制一個(gè)比按鈕小一點(diǎn)的圓形，將它改為漸變填充（由40%不透明度白色---0%不透明度的白色），方向?yàn)椋鹤笙峦疑稀?/span>

接著再繪制一個(gè)相同的圓形，位置偏右上，同樣使用漸變色填充（40%不透明度白色---0%不透明度的白色），方向?yàn)椋河疑贤笙拢?再將剛剛繪制的兩個(gè)圖層的不透明度都改為60%。

接下來(lái) 在右上角再繪制一個(gè)橢圓形作為高光，將羽化值拉大，用蒙版的形式切割掉多余部分。


這樣我們就得到一個(gè)透氣點(diǎn)的按鈕了。

三、增加細(xì)節(jié)

先選擇最開(kāi)始繪制的圓形，給它添加一個(gè)描邊效果，描邊粗細(xì)不用很大，然后給描邊添加一個(gè)由上到下的漸變色，并給圓形加上一個(gè)內(nèi)陰影的效果，讓按鈕更有凸出感。

接下來(lái)再?gòu)?fù)制這個(gè)圓形，將描邊改為外描邊，數(shù)值增大，添加一個(gè)由上到下的漸變色，再給它添加一個(gè)投影的圖層樣式，讓整個(gè)按鈕立體起來(lái)。

最后是添加文字，給文字加一個(gè)投影效果及漸變色效果，這樣我們的按鈕就算基本完成。

為了更精細(xì)些，可以給它表面加上一些小圓點(diǎn)，作為高光點(diǎn)綴，會(huì)有blingbling? ? ?的感覺(jué)。

到這里我們的按鈕就做好了，我們也可以通過(guò)調(diào)整顏色，做出不同的感覺(jué)。

總結(jié)：

一個(gè)好的按鈕，其最重要的就是能激起用戶的點(diǎn)擊欲，讓人忍不住去戳戳戳。

增強(qiáng)按鈕的點(diǎn)擊欲的方式，其實(shí)就是讓它變得立體且豐富。

1、光影：讓按鈕富有變化，更立體和吸引人；

2、層次：?jiǎn)为?dú)的一個(gè)色塊，會(huì)很單薄，增加層次增加其在造型上的豐富度；

3、厚度：厚度可以讓按鈕變得更立體；

4、點(diǎn)綴：增加高光點(diǎn)，會(huì)使得整個(gè)按鈕變得更精致。

作者 | 阿桂 零一設(shè)計(jì)中心設(shè)計(jì)師

熱門(mén)課程推薦

熱門(mén)資訊

請(qǐng)綁定手機(jī)號(hào)

獲取驗(yàn)證碼
x

同學(xué)您好！

您已成功報(bào)名0元試學(xué)活動(dòng)，老師會(huì)在第一時(shí)間與您取得聯(lián)系，請(qǐng)保持電話暢通！
確定