2014年(nián)即将過去(qù™")，在已經過去(qù)的(de)大(dà)半年(nián)λ'中，一(yī)些(xiē)全新的(de)設計(jì)趨勢逐漸成熟，并且會(huìαδ≠↕)在即将到(dào)來(lái)的(de)2015年(nián)成為(wèi)主流。在這(zh'≤è)些(xiē)設計(jì)趨勢當中，令→λ人(rén)印象最深刻的(de)，應該是(shì)“幽靈按ε☆÷鈕”。

　　2009年(nián)重啓的(de)的(de)新《星際'$σ迷航》中，企業(yè)号中控系統的(de)UI就'$λ(jiù)使用(yòng)了(le)近(π→ππjìn)似幽靈按鈕的(de)設計(jì)元素

　　那(nà)麽先溫故一(yī)下(xià)，什(shén)麽是(shδ↓ì)幽靈按鈕幽靈按鈕，也(yě)就(jiù)是(shì)Ghost Buttons，是(s®₽hì)一(yī)個(gè)透明(míng)的(de)按鈕，通(tōng)常是(shì)矩 ★↑‌形或者圓角矩形，僅保留基本的(de)形制(zhì)，使用(yò€δ®γng)細線來(lái)标識邊界；按鈕內(nèi)的(de)文(¥®σεwén)字通(tōng)常使用(yòng)纖細的(de)¥÷&非襯線體(tǐ)字體(tǐ)的(de)純文(wén)本，來(lái)指明(míng)按鈕功能(né☆​✘ng)。

　　幽靈按鈕有(yǒu)時(shí)候也(yě)被稱為(wèi)“空(kōng)按鈕”，$♥✘通(tōng)常會(huì)被設計(j죕)得(de)比普通(tōng)的(de)按鈕更大(dà)一(yī)些(xiē)。↑♦÷而它們之所以被命名為(wèi)“幽靈”，是(shì)應為(wèi)這(zhè)種按鈕如(rú"•∑α)同鬼魂一(yī)樣透明(míng)，但(dàn)是(shì)獨特的(de)造©♥→"型會(huì)立刻吸引用(yòng)戶的(de)注意力——正 ₹β<如(rú)同故事(shì)中鬼魂一(yī)樣抓人(rén)眼球。

　　雖然你(nǐ)可(kě)能(néng)在大(dà)量的(de)網站(zhàn)中看(kàn)到‌λε(dào)幽靈按鈕，但(dàn)是(shì)并非所有(yǒu)的(d>δ↓®e)網站(zhàn)都(dōu)和(hé)幽靈按鈕相(xiàng)得(de)益彰。真正£♦§‌适合幽靈按鈕的(de)是(shì)那(nà)些(xiē)使用(yòα "♥ng)極簡風(fēng)和(hé)扁平風(fēng)的(de)¥φ↓網站(zhàn)和(hé)APP，使用(yòng)大(dà)圖背景的λ♣(de)網站(zhàn)也(yě)與之非常搭。

　　雖然很(hěn)難為(wèi)幽靈按鈕找到(♠∑dào)單一(yī)起源，但(dàn)是(shì)我們能(néng)夠為(wèi)之确定幾個(↕↑gè)具有(yǒu)重要(yào)影(yǐng)響意義的(de)源頭。由于幽靈¶♥•δ按鈕的(de)廣泛應用(yòng)，甚至有(yǒu)用(yòng)戶在Tumbl↕♠☆r上(shàng)單獨為(wèi)之開(kāi)了(le)個(gè)博客，專門(mén)搜集相($☆∞xiàng)關的(de)設計(jì)作(zuò)品。

　　Head-Up Display，也(yě)就(jiù)是(sh↓‌∑ì)HUD，是(shì)利用(yòng)光(guāng)學反射原理(lǐ)，§€β£将信息投射在玻璃上(shàng)，高(gā₩•"o)度大(dà)概與眼睛平齊。早在60年(n¶π₩ián)代就(jiù)已經開(kāi)始運用(y™‍λòng)，當時(shí)是(shì)應用(yòng♦™σ')在飛(fēi)機(jī)上(shàng)，現(xiàn)在很×Ω>(hěn)多(duō)汽車(chē)上(shàng)也(yě​‌)有(yǒu)這(zhè)一(yī)功能(néng)。随著(zhe)HUD走進大(dà)>€$™衆，這(zhè)一(yī)功能(néng)也(yě)在影(yǐng)視(★​εδshì)和(hé)遊戲中，成為(wèi)了(le)流行(xíng)文(wén)化(h‍φ≤uà)的(de)排頭兵(bīng)。

　　由于HUD中所展示的(de)信息需要(yào)借助透明(míng)的(de)材質與&¶ 視(shì)野相(xiàng)交疊，所以信息的(de)呈現(xiàn)風(fēng)格應該是↕★(shì)輕量級的(de)，通(tōng)常是(shì)單色的(de)或者幾種簡單的(de)色彩<β。盡管許多(duō)HUD的(de)UI并沒有(yǒu)嚴格意義上≤∑$∞(shàng)的(de)按鈕，但(dàn)是(shì)你(nǐ)會(huì)發現(xià↓↓™©n)其中使用(yòng)的(de)元素大(dà)多(duō)線條清晰，邊界明(míng)了€→(le)，并且以文(wén)本為(wèi)主。

　　好(hǎo)萊塢的(de)FX團隊就(jiù≤€)特别著(zhe)迷于這(zhè)種幽靈風(fēng)格的‌↔↑§(de)UI。《少(shǎo)數(shù) ←₽派報(bào)告》中手勢操作(zuò)和(hé)透明(míng)屏幕上(shàng)的(de$Ω )界面，《鋼鐵(tiě)俠》中MK系列盔甲頭盔中的(de)HUD交互界面，《安德的(de)遊戲》‍β<™中戰艦的(de)操作(zuò)界面，《星際迷航》中每一(yī)個(gè)控制(zhì)"£φ♣面闆，都(dōu)将這(zhè)種隐喻未來ε‌≈₹(lái)的(de)界面風(fēng)格發揮到( ✘dào)極緻。在我看(kàn)來(lái)，這(zhè)種一(yī)脈相(xiδ¥±àng)承的(de)科(kē)幻風(fēn $γ÷g)為(wèi)今天幽靈按鈕的(de)流行(xíng)奠定了( γle)基調，提供了(le)靈感。

　　如(rú)果是(shì)電(diàn)影(yǐng)中"₽炫酷的(de)展示和(hé)日(rì)常網頁中的(de)偶爾運用(yòng)‌©是(shì)開(kāi)始的(de)話(huà)，iOS7和(hé)蘋果式σ®₹扁平化(huà)的(de)推進，就(jiù)是(λ<shì)讓幽靈按鈕這(zhè)樣的(de)✔♣設計(jì)趨勢流行(xíng)開(kāi)來(lái)的(de)催化(huà)β¶Ω>劑。盡管一(yī)開(kāi)始，iOS7并未↔∏∏得(de)到(dào)廣泛的(de)認可(kě)，但(dàn)是(shì'♥&λ)随著(zhe)用(yòng)戶接受度的(de)提高(g®↓εāo)，其中使用(yòng)簡約線條的(de)圖标和(hé)高(gāo)對(duì)比度的(de)←σ幽靈按鈕逐漸為(wèi)大(dà)衆所接受，并且↕£™逐漸“傳染”到(dào)越來(lái)越多(duō)的(de)界面中去(qù)了(le)。

　　随後，Google這(zhè)樣的(de)巨頭也(yě)開(kāi)始使用(yòng)幽→÷€​靈按鈕。雖然Android的(de)設計(jì)指南(nán)中并為(wèi)将其标 →準化(huà)（Well，Material Design本身(shēn)也(yě)扁平的(de ∞↕')很(hěn)有(yǒu)性格不(bù)是(shì) ε☆ε麽），但(dàn)是(shì)2013年(nián)Nexγ≈∞>us 7的(de)官方網站(zhàn)中也(yě)開(kāi)始運用(yòng)幽靈按鈕。下π$÷(xià)圖中，幽靈按鈕的(de)白(bái)色線條與黑(hēi)色的(de)背景✔÷≤↔對(duì)比強烈又(yòu)沒有(yǒu)喧賓奪主。

　　另外(wài)一(yī)個(gè)為(wèi)幽靈按鈕的(de)流行★>(xíng)作(zuò)出巨大(dà)貢獻的(de)就(jiù)是(shì)來(lái)自(♥>zì)Twitter的(de)Bootstrap¥✘。2013年(nián)8月(yuè)，Boo♠®≥tstrap 3 發布，當時(shí)官網首頁上(shàng)所展示的(de)網頁σβα¥設計(jì)原型就(jiù)正好(hǎo)使用(yòng)了(le)幽靈按鈕。←₹≥✔

　　由于Bootstrap在網站(zhàn)開(kāi)發上(shàng)的(de)簡單↕™α易用(yòng)，越來(lái)越多(duō)的(deΩ​>→)網站(zhàn)開(kāi)發者和(hé)設計(jì)師(shī)開★π (kāi)始使用(yòng)它，連帶著(zhe)扁平化(huà)風(fēng)格和(hé)幽靈™δ按鈕越來(lái)越流行(xíng)。

　　Bootstrap 簡單自(zì)然，單色背景為(wèiλφπσ)幽靈按鈕留下(xià)了(le)足夠的(de)施展空(kōng)間(jiān)。

　　接下(xià)來(lái)，我們總結一(yī)下(‍βxià)幽靈按鈕的(de)優缺點：

　　幽靈按鈕有(yǒu)許多(duō)優勢，能(n÷↔éng)為(wèi)你(nǐ)的(de)設計(jì)加分(fēn)不(bù)少(shǎ©¶​o)：
　　諸如(rú)PS和(hé)AI這(zhè)樣的(de)繪圖軟件(jiàn)可‌ (kě)以輕松繪制(zhì)幽靈按鈕
　　盡管設計(jì)幽靈按鈕很(hěn)容易，但(dàn)是(shì)★₽​它并不(bù)會(huì)顯得(de)過于單薄或者易被忽視(shì)，事(shì)實上÷Ω(shàng)，它們往往能(néng)讓設計(jì)更加優雅成熟。
　　幽靈按鈕常常顯得(de)清晰而微(wēi)妙，它總能₽♦∏<(néng)讓浏覽者感覺自(zì)由而放(fàng)松。使用(yòng)幽靈按鈕的(©€∑¥de)頁面常常不(bù)會(huì)讓人(rén)覺得(de)沉重，它δ<能(néng)讓設計(jì)視(shì)覺更加輕量，同時(shí)喚起秩序感''。
　　由于幽靈按鈕通(tōng)常是(shì)中空(kōng)的(de)，<​π所以它也(yě)很(hěn)容易與其他(tā)的(de)設計÷↓✘✔(jì)元素來(lái)搭配使用(yòng)，白(bái)搭随心。
　　毫無疑問(wèn)，幽靈按鈕是(shì)2014年(nián)的(de)熱(rè≥↕¶)門(mén)設計(jì)趨勢，如(rú)果你(nǐ)巧妙運用(yòng)能(n★ éng)讓你(nǐ)的(de)網站(zhàn)看(k  ☆δàn)起來(lái)更加時(shí)尚。

　　事(shì)物(wù)總需要(yào)一(yī)♣₹分(fēn)為(wèi)二來(lái)看(kàn)，幽靈按鈕自(zì)然也(yě)有(γ‌yǒu)它的(de)局限性，當你(nǐ)設計(jì)的(de)ε↕✘±時(shí)候需要(yào)仔細考慮一(yī)下(xià)這(zαβλhè)些(xiē)因素。

　　缺點

　　雖然幽靈按鈕已經非常流行(xíng)了(le)，但(dà↓σ•n)是(shì)它們并非是(shì)萬金(jīn)油。使用(yòngγπ')它們可(kě)能(néng)會(huì)分(fēn)散按鈕應有(yǒu)的(de)聚焦感，  ≠你(nǐ)需要(yào)精心設計(jì)，讓按鈕不(bù)被埋沒，也(yě)不(bù)喧賓奪主Ω≤δ。
　　幽靈按鈕的(de)存在已經打破了(le)傳統網頁設計(★∑&jì)中按鈕固有(yǒu)的(de)形象和(hé)體(tǐ)驗，你(nǐ)讓它産生(s₽≥÷§hēng)類似現(xiàn)實中按鈕的(de)✘β$體(tǐ)驗是(shì)不(bù)可(kě)能(néng)的(de)，尤ε₹∑其是(shì)當你(nǐ)沒有(yǒu)用(yòng)好(hǎo)它的(d✘©↕e)時(shí)候，這(zhè)種存在感和(hé)≥ ✔‍體(tǐ)驗會(huì)更加薄弱。
　　幽靈按鈕的(de)透明(míng)度會(huì)導緻可(kě)讀(dú)性降低(dī)的(de&δ)問(wèn)題。大(dà)圖背景和(hé)不(bù)α∏合理(lǐ)的(de)配色會(huì)讓這(zhè)種糟糕←δ體(tǐ)驗雪(xuě)上(shàng)加霜。我們會(huì)在後續£δ←☆看(kàn)到(dào)反例。

　　幽靈按鈕置于網站(zhàn)正中央，吸引用(yòng)戶去(qù)點擊，以發現(↔βεxiàn)更多(duō)的(de)內(n$∏σèi)容。但(dàn)是(shì)在我看(kàn)來(lái)，幽靈按鈕并沒有(yǒu)得(←✔de)到(dào)很(hěn)好(hǎo)的(de)φβ∑安置。為(wèi)了(le)對(duì)比度，幽靈按鈕的("π​de)邊框和(hé)文(wén)字均使用(yòng)了(l§→e)白(bái)色，可(kě)是(shì)背景中的(de)女(nǚ)孩也(yě)是(shì)一•☆‍→(yī)身(shēn)白(bái)，這(zhè)使得(de)按鈕中的($$ de)單詞“imagemaking”并不(bù)完全符合對(duì)比度的(de)需φ™δ₽求，影(yǐng)響了(le)可(kě)讀(dú)性。當然，積極的(de)一(yī)面在于，你(✔​nǐ)可(kě)以通(tōng)過刷新看(kàn)到(dào>>→)其他(tā)的(de)圖片。

　　比起簡單設置一(yī)個(gè)圖片背景，他(tā)們選擇了(le)更有(y₽₽βǒu)逼格的(de)方式——使用(yòng)半色調的(de)視(shì)頻(pín)來(lá₩γ↑♣i)作(zuò)為(wèi)背景。他(t¥↕®≥ā)們的(de)服務展示是(shì)通(tōng)過網頁中的(de)≥∏♠"這(zhè)套扁平風(fēng)的(de)動效和(hé)界面來(lái)實現(xiàn)的>​£(de)。如(rú)果你(nǐ)想對(duì)他(tā)們的(de)服務了§✔(le)解更多(duō)的(de)話(huà)，點擊底部的(de)幽靈按鈕就(jΩ♣★★iù)可(kě)以了(le)。

　　不(bù)同于上(shàng)一(yī)個(gè)例子(zǐ)，UnionRoom的(×₹®×de)網站(zhàn)背景色調更暗(àn)，使得(de)內(nèi)容顯得(de)更加突出。這(≥∑zhè)個(gè)幽靈按鈕符合它該有(yǒu)的(d∑ ' e)所有(yǒu)特色，不(bù)突兀也(yě)不(bù)多(duō)餘，合理(lǐ∏"↔)和(hé)均衡。

　　這(zhè)個(gè)與文(wén)件(jiàn)備份有(yǒu₽≈'¥)關的(de)網站(zhàn)是(shì)通(tōγ →ng)過簡單的(de)藍(lán)白(bái)雙色來(lái)呈現(xiàn)的(de)，對(d←§∞♠uì)比強烈。其中使用(yòng)了(le)兩個(gè)橢圓形<βλ的(de)幽靈按鈕。兩個(gè)按鈕識别度也(yě)做(zu∑↓∏ò)的(de)非常不(bù)錯(cuò)，沒有(yǒu)與背景混淆也(yě×$)易于被發現(xiàn)，這(zhè)個(gè)網站(zhàn)的(de)設計(jì)師( ±→♥shī)還(hái)是(shì)非常稱職的(de)。

　　結語

　　文(wén)章(zhāng)不(bù)長(cháng)內(nèi)容不>φ&¥(bù)多(duō)，但(dàn)是(shì)句句是(shì)幹貨。當然，最÷'重要(yào)的(de)還(hái)是(shì)在 ↓↓實踐中掌控幽靈按鈕，不(bù)是(shì)麽？