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

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

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

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

　　1. NUJI

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

　　2. IUVO

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

　　3. PAPAYA

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

　　4. CHARLES-AXEL PAUWELS

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

　　5. VISAGE

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

　　6. THE DISTANCE

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

　　7. TRIPPEO

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

　　8. UNION ROOM

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

　　9. CTEMF

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

　　10. 20JEANS

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