十款精美的網(wǎng)頁(yè)按鈕設(shè)計(jì)

大氣的模糊網(wǎng)頁(yè)背景，加上精巧的幽靈按鈕設(shè)計(jì)，瞬間使網(wǎng)頁(yè)設(shè)計(jì)變身高大上，“薄”和“透”是這種設(shè)計(jì)的最大特色。不設(shè)底色不加紋理，按鈕僅有一層薄薄的線框標(biāo)明邊界，確保了它作為按鈕的功能性，又達(dá)成了“纖薄”的視覺(jué)美感。置于按鈕之后的背景往往相對(duì)素雅，或加以純色，或高斯模糊，或色調(diào)沉郁，這使得即使有按鈕也不影響觀看全圖，背景得以呈現(xiàn)又不影響按鈕的視覺(jué)表達(dá)，雙方相互映襯而達(dá)成微妙的平衡。

下面是整理的十款精美的網(wǎng)頁(yè)按鈕設(shè)計(jì)案例：

1. NUJI

這款iOS APP的首頁(yè)設(shè)計(jì)并未設(shè)計(jì)復(fù)雜的背景和紋理，僅是將iOS界面中的雨傘圖片高度模糊化疊于底層，襯托出左側(cè)的文字和透明按鈕，以及右側(cè)的iPhone與UI。幾乎與文案同寬的大號(hào)透明按鈕在此極為明顯，如果用戶對(duì)此APP有點(diǎn)興趣，就不會(huì)錯(cuò)過(guò)按鈕所鏈接的演示視頻。

2. IUVO

IUVO的網(wǎng)頁(yè)中不僅有多個(gè)線框按鈕，而且配以多個(gè)使用線條勾勒出的簡(jiǎn)約線框圖標(biāo)，極大地豐富了頁(yè)面設(shè)計(jì)。虛化了的遠(yuǎn)景和凝實(shí)清晰的近景相得益彰，也使得按鈕和圖標(biāo)格外突出。同時(shí)，左側(cè)的導(dǎo)航欄還使用了轉(zhuǎn)場(chǎng)動(dòng)畫，使得整個(gè)頁(yè)面活起來(lái)了。

3. PAPAYA

PAPAYA是一個(gè)功能型網(wǎng)站，你可以在此預(yù)訂各種活動(dòng)的門票。網(wǎng)頁(yè)被橫向一分為三，用以展示三個(gè)不同的活動(dòng)，暗色調(diào)的背景使得黃色的時(shí)間和白色的事件顯得明顯而突出，視線下移就可以自然而然地看到購(gòu)票按鈕。上下字體一致，透明按鈕框纖細(xì)而不喧賓奪主，贊。

4. CHARLES-AXEL PAUWELS

這個(gè)網(wǎng)頁(yè)的設(shè)計(jì)正如上文所說(shuō)，背景虛化，明度較低，突出了網(wǎng)站的前景視覺(jué)元素。線框Logo置于頂部，經(jīng)過(guò)虛線分隔，突出中間的網(wǎng)站名稱。大小字體對(duì)比，強(qiáng)化名稱，而又說(shuō)明了網(wǎng)站功能。最下方三個(gè)透明按鈕則在你明確主題之后，提供了路徑功能，讓你作出選擇，可謂一氣呵成。

5. VISAGE

設(shè)計(jì)師在設(shè)計(jì)這個(gè)網(wǎng)頁(yè)的時(shí)候，也遵循了文章開頭所說(shuō)的原則，不同的是，他所設(shè)計(jì)的透明按鈕上添加了轉(zhuǎn)場(chǎng)動(dòng)畫。當(dāng)你將鼠標(biāo)移動(dòng)到按鈕上的時(shí)候，按鈕會(huì)自動(dòng)放大，并且填充上相應(yīng)的色彩，并且文字顏色出現(xiàn)反轉(zhuǎn)，吸引用的眼球。這種對(duì)透明按鈕的巧妙運(yùn)用，值得學(xué)習(xí)。

6. THE DISTANCE

這個(gè)首頁(yè)并沒(méi)有使用虛化或者明度太低的背景，但是背景構(gòu)圖和整體色調(diào)非常簡(jiǎn)單整齊，下面三個(gè)霓虹色的透明按鈕和背景里的店招相互輝映，活潑自然。

7. TRIPPEO

整個(gè)網(wǎng)頁(yè)色調(diào)明亮清新，除了漸變的背景就是內(nèi)容。高飽和度的藍(lán)色背景里有點(diǎn)狀的世界地圖作為紋理點(diǎn)綴，使之不顯得單調(diào)。大小錯(cuò)落的內(nèi)容靠左對(duì)齊，最下方是透明按鈕。

8. UNION ROOM

這個(gè)網(wǎng)站使用了視頻作為背景，訪問(wèn)者只需要通過(guò)變化的背景就可以明白組織的工作流程。通過(guò)調(diào)色之后的背景視頻并不影響前景的Logo、文字和透明按鈕，整個(gè)網(wǎng)站顯得巧妙而優(yōu)雅。

9. CTEMF

雖然設(shè)計(jì)師選擇了讓文本來(lái)填充圖片之外的地方，但是他依然讓透明按鈕置于頁(yè)面的正下方最容易被發(fā)現(xiàn)的地方，這使得整個(gè)網(wǎng)頁(yè)內(nèi)容豐富，但是結(jié)構(gòu)簡(jiǎn)單直觀。

10. 20JEANS

這個(gè)網(wǎng)頁(yè)的處理方式比較均衡，右側(cè)的人物和灰色的墻體構(gòu)成了背景，沒(méi)有虛化沒(méi)有淡化，黑色的字體和透明按鈕在左側(cè)與右側(cè)的人物相互照應(yīng)，與之前的網(wǎng)不一樣的地方在于它并沒(méi)有過(guò)度偏重內(nèi)容，并且看起來(lái)很時(shí)尚。