網(wǎng)頁(yè)設(shè)計(jì)新趨勢(shì)！你聽說過“幽靈按鈕”嗎？

@陳子木 透明按鈕，顧名思義，也就是在設(shè)計(jì)網(wǎng)頁(yè)中的按鈕之時(shí)，不再設(shè)計(jì)復(fù)雜色彩、樣式和紋理，而是外僅以線框示意輪廓，內(nèi)只用文字示意功能，背景透出，與整個(gè)頁(yè)面/背景合而為一的設(shè)計(jì)方式。國(guó)外的設(shè)計(jì)師稱之為“幽靈按鈕”（Ghost Buttons），盛贊這種按鈕通透簡(jiǎn)約，貼合整體風(fēng)格又不失神韻，別具魅力。這種按鈕的設(shè)計(jì)早已有之，但是在iOS和安卓雙雙風(fēng)格轉(zhuǎn)向之后，它攜了扁平之風(fēng)雷，成了網(wǎng)頁(yè)設(shè)計(jì)的新趨勢(shì)，擁有類似設(shè)計(jì)的網(wǎng)頁(yè)設(shè)計(jì)作品入雨后春筍一般，映入眼簾。

網(wǎng)頁(yè)按鈕設(shè)計(jì)中的“幽靈”

說透明按鈕是“幽靈”并沒有錯(cuò)，“薄”和“透”是這種設(shè)計(jì)的最大特色。不設(shè)底色不加紋理，按鈕僅有一層薄薄的線框標(biāo)明邊界，確保了它作為按鈕的功能性，又達(dá)成了“纖薄”的視覺美感。置于按鈕之后的背景往往相對(duì)素雅，或加以純色，或高斯模糊，或色調(diào)沉郁，這使得即使有按鈕也不影響觀看全圖，背景得以呈現(xiàn)又不影響按鈕的視覺表達(dá)，雙方相互映襯而達(dá)成微妙的平衡。有意思的是，設(shè)計(jì)師在使用這種搭配之時(shí)，比起以往有了更多的自由。一則方式簡(jiǎn)單，二者處理起來并不復(fù)雜，得心應(yīng)手。二則易于調(diào)整，想突出背景，只需強(qiáng)化圖片清晰度和色彩明暗飽和，將按鈕挪到視覺焦點(diǎn)之外，按鈕內(nèi)用以更加纖細(xì)的字體即可；若想突出功能，引導(dǎo)用戶，只需加強(qiáng)背景模糊程度，降低明度，將標(biāo)題、文案、按鈕置于焦點(diǎn)，按鈕中的字體可以適當(dāng)加粗，色彩可以用得更加跳脫，稍加調(diào)整就可臻于高大上。

更多網(wǎng)頁(yè)設(shè)計(jì)干貨：
《熱門網(wǎng)站設(shè)計(jì)趨勢(shì)！10個(gè)創(chuàng)意杰出的視差滾動(dòng)網(wǎng)站欣賞》
《眼前一亮！25個(gè)令人心動(dòng)不已的全屏網(wǎng)站欣賞》
《碉堡了！20個(gè)炒雞棒的HTML5網(wǎng)站欣賞》

所以，用此來做網(wǎng)頁(yè)設(shè)計(jì)，不難，而作為大勢(shì)所趨，你也可以輕易拿下，不是么？閑話少敘，先上案例。

1. NUJI

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

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è)面活起來了。

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

5. VISAGE

設(shè)計(jì)師在設(shè)計(jì)這個(gè)網(wǎng)頁(yè)的時(shí)候，也遵循了文章開頭所說的原則，不同的是，他所設(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è)并沒有使用虛化或者明度太低的背景，但是背景構(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)站使用了視頻作為背景，訪問者只需要通過變化的背景就可以明白組織的工作流程。通過調(diào)色之后的背景視頻并不影響前景的Logo、文字和透明按鈕，整個(gè)網(wǎng)站顯得巧妙而優(yōu)雅。

9. CTEMF

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

10. 20JEANS

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

11. NZK

比起之前的網(wǎng)頁(yè)，NZK的頁(yè)面背景圖被濃重的灰色遮罩著，背景圖片中的實(shí)物僅余輪廓，整個(gè)背景都拿來突出前景的文字。文字內(nèi)容和透明按鈕的尺寸比例比之前的都要大，內(nèi)容為王的設(shè)計(jì)在此體現(xiàn)的淋漓盡致。

12. THE OFFSHORE PARTNERS

同前面的案例一樣，黑暗的背景和白色的文字之間形成鮮明的對(duì)比，透明按鈕和內(nèi)容顯得非常突出。

13. RICHARD OUTRAM

和很多網(wǎng)站一樣，大圖背景，文字內(nèi)容，透明按鈕，一個(gè)都沒有少。但是為了突出透明按鈕，設(shè)計(jì)師給文字添加了黑色的背景，相比之下，整個(gè)頁(yè)面最突出的就是透明按鈕，很有特色。單擊按鈕之后，就可以看到下面的內(nèi)容了。

14. KANGOMEDIA

為了吸引瀏覽者的注意力，設(shè)計(jì)師不惜將文字內(nèi)容放到最大，相對(duì)小巧的透明按鈕實(shí)際上比起其他網(wǎng)站還是要大一點(diǎn)。

15. EQUINOX IN AUSTIN

稀疏的大寫標(biāo)題和纖細(xì)的透明按鈕在高飽和度背景下相互輝映，擁有別樣的美感。

16. STUDIO UP

這個(gè)網(wǎng)站相對(duì)其他看起來更加現(xiàn)代，這可能是多邊形的藍(lán)色背景和白色文字結(jié)合起來早就的效果。粗細(xì)大小錯(cuò)落文字內(nèi)容和透明按鈕居中，使得頁(yè)面看起來非常清爽，讓人有瀏覽下去的欲望。

17. GUILLAUME MARQ

這個(gè)頁(yè)面使用了非常懷舊的背景圖片，白色的文字和按鈕與偏白的照片配合在一起，看起來并不易讀，但是這不正符合這樣的風(fēng)格么？

18. JASPUR

毫無疑問這是一個(gè)簡(jiǎn)約時(shí)尚的個(gè)人頁(yè)面，頗具喜感的人物角色，小塊的文本，擁有綠色邊框的透明按鈕。非常俏皮，不是么？

19. VERBAL PLUS VISUAL

灰色的背景和白色的內(nèi)容相互映襯，這與之前的網(wǎng)頁(yè)沒有太大的差別。有意思的是，除了“View Our Work”按鈕會(huì)讓用戶注意到之外，頂上的橙色V按鈕也會(huì)讓用戶有點(diǎn)擊的欲望。

20. NOIS3

這個(gè)網(wǎng)頁(yè)的圖文混拍在形式感上，比起以上的頁(yè)面來的更強(qiáng)，字體的大小、粗細(xì)、間距都經(jīng)過細(xì)致的調(diào)整，左重右輕的設(shè)計(jì)也別具匠心，看起來一點(diǎn)都不單調(diào)。這種精致的設(shè)計(jì)，值得學(xué)習(xí)。

結(jié)語(yǔ)

透明按鈕在網(wǎng)頁(yè)中的運(yùn)用并不難，但是要結(jié)合其他的元素、需求，要做的出彩，就不是那么容易了，以上20個(gè)案例就是明證。不過我相信，多看多做，你能成功的。加油！

原文地址：onextrapixel
優(yōu)設(shè)網(wǎng)翻譯：@陳子木

本文由優(yōu)設(shè)網(wǎng)原創(chuàng)翻譯，請(qǐng)尊重版權(quán)和譯者成果，轉(zhuǎn)摘請(qǐng)附上優(yōu)設(shè)鏈接，違者必究。謝謝各位編輯同仁配合。

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是一個(gè)分享網(wǎng)頁(yè)設(shè)計(jì)、無線端設(shè)計(jì)以及PS教程的干貨網(wǎng)站。
【特色推薦】
設(shè)計(jì)師需要讀的100本書：史上最全的設(shè)計(jì)師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量70萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機(jī)上、被窩里獲取設(shè)計(jì)教程、經(jīng)驗(yàn)分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) 微信號(hào)：【youshege】?jī)?yōu)設(shè)哥的全拼
您也可以通過掃描下方二維碼快速添加：