2014年即將(jiāng)過(guò)去，在已經(jīng)過(guò)去的大半年中，一些全新的設計趨勢逐漸成(chéng)熟，并且會在即將(jiāng)到來的2015年成(chéng)爲主流。在這(zhè)些設計趨勢當中，令人印象最深刻的，應該是“幽靈按鈕”。

　　2009年重啓的的新《星際迷航》中，企業号中控系統的UI就使用了近似幽靈按鈕的設計元素

　　那麼(me)先溫故一下，什麼(me)是幽靈按鈕幽靈按鈕，也就是Ghost Buttons，是一個透明的按鈕，通常是矩形或者圓角矩形，僅保留基本的形制，使用細線來标識邊界；按鈕内的文字通常使用纖細的非襯線體字體的純文本，來指明按鈕功能(néng)。

　　幽靈按鈕有時候也被(bèi)稱爲“空按鈕”，通常會被(bèi)設計得比普通的按鈕更大一些。而它們之所以被(bèi)命名爲“幽靈”，是應爲這(zhè)種(zhǒng)按鈕如同鬼魂一樣(yàng)透明，但是獨特的造型會立刻吸引用戶的注意力——正如同故事(shì)中鬼魂一樣(yàng)抓人眼球。

　　雖然你可能(néng)在大量的網站中看到幽靈按鈕，但是并非所有的網站都(dōu)和幽靈按鈕相得益彰。真正适合幽靈按鈕的是那些使用極簡風和扁平風的網站和APP，使用大圖背景的網站也與之非常搭。

　　雖然很難爲幽靈按鈕找到單一起(qǐ)源，但是我們能(néng)夠爲之确定幾個具有重要影響意義的源頭。由于幽靈按鈕的廣泛應用，甚至有用戶在Tumblr上單獨爲之開(kāi)了個博客，專門搜集相關的設計作品。

　　Head-Up Display，也就是HUD，是利用光學(xué)反射原理，將(jiāng)信息投射在玻璃上，高度大概與眼睛平齊。早在60年代就已經(jīng)開(kāi)始運用，當時是應用在飛機上，現在很多汽車上也有這(zhè)一功能(néng)。随著(zhe)HUD走進(jìn)大衆，這(zhè)一功能(néng)也在影視和遊戲中，成(chéng)爲了流行文化的排頭兵。

　　由于HUD中所展示的信息需要借助透明的材質與視野相交疊，所以信息的呈現風格應該是輕量級的，通常是單色的或者幾種(zhǒng)簡單的色彩。盡管許多HUD的UI并沒(méi)有嚴格意義上的按鈕，但是你會發(fā)現其中使用的元素大多線條清晰，邊界明了，并且以文本爲主。

　　好(hǎo)萊塢的FX團隊就特别著(zhe)迷于這(zhè)種(zhǒng)幽靈風格的UI。《少數派報告》中手勢操作和透明屏幕上的界面(miàn)，《鋼鐵俠》中MK系列盔甲頭盔中的HUD交互界面(miàn)，《安德的遊戲》中戰艦的操作界面(miàn)，《星際迷航》中每一個控制面(miàn)闆，都(dōu)將(jiāng)這(zhè)種(zhǒng)隐喻未來的界面(miàn)風格發(fā)揮到極緻。在我看來，這(zhè)種(zhǒng)一脈相承的科幻風爲今天幽靈按鈕的流行奠定了基調，提供了靈感。

　　如果是電影中炫酷的展示和日常網頁中的偶爾運用是開(kāi)始的話，iOS7和蘋果式扁平化的推進(jìn)，就是讓幽靈按鈕這(zhè)樣(yàng)的設計趨勢流行開(kāi)來的催化劑。盡管一開(kāi)始，iOS7并未得到廣泛的認可，但是随著(zhe)用戶接受度的提高，其中使用簡約線條的圖标和高對(duì)比度的幽靈按鈕逐漸爲大衆所接受，并且逐漸“傳染”到越來越多的界面(miàn)中去了。

　　随後(hòu)，Google這(zhè)樣(yàng)的巨頭也開(kāi)始使用幽靈按鈕。雖然Android的設計指南中并爲將(jiāng)其标準化（Well，Material Design本身也扁平的很有性格不是麼(me)），但是2013年Nexus 7的官方網站中也開(kāi)始運用幽靈按鈕。下圖中，幽靈按鈕的白色線條與黑色的背景對(duì)比強烈又沒(méi)有喧賓奪主。

　　另外一個爲幽靈按鈕的流行作出巨大貢獻的就是來自Twitter的Bootstrap。2013年8月，Bootstrap 3 發(fā)布，當時官網首頁上所展示的網頁設計原型就正好(hǎo)使用了幽靈按鈕。

　　由于Bootstrap在網站開(kāi)發(fā)上的簡單易用，越來越多的網站開(kāi)發(fā)者和設計師開(kāi)始使用它，連帶著(zhe)扁平化風格和幽靈按鈕越來越流行。

　　Bootstrap 簡單自然，單色背景爲幽靈按鈕留下了足夠的施展空間。

　　接下來，我們總結一下幽靈按鈕的優缺點：

　　幽靈按鈕有許多優勢，能(néng)爲你的設計加分不少：
　　諸如PS和AI這(zhè)樣(yàng)的繪圖軟件可以輕松繪制幽靈按鈕
　　盡管設計幽靈按鈕很容易，但是它并不會顯得過(guò)于單薄或者易被(bèi)忽視，事(shì)實上，它們往往能(néng)讓設計更加優雅成(chéng)熟。
　　幽靈按鈕常常顯得清晰而微妙，它總能(néng)讓浏覽者感覺自由而放松。使用幽靈按鈕的頁面(miàn)常常不會讓人覺得沉重，它能(néng)讓設計視覺更加輕量，同時喚起(qǐ)秩序感。
　　由于幽靈按鈕通常是中空的，所以它也很容易與其他的設計元素來搭配使用，白搭随心。
　　毫無疑問，幽靈按鈕是2014年的熱門設計趨勢，如果你巧妙運用能(néng)讓你的網站看起(qǐ)來更加時尚。

　　事(shì)物總需要一分爲二來看，幽靈按鈕自然也有它的局限性，當你設計的時候需要仔細考慮一下這(zhè)些因素。

　　缺點

　　雖然幽靈按鈕已經(jīng)非常流行了，但是它們并非是萬金油。使用它們可能(néng)會分散按鈕應有的聚焦感，你需要精心設計，讓按鈕不被(bèi)埋沒(méi)，也不喧賓奪主。
　　幽靈按鈕的存在已經(jīng)打破了傳統網頁設計中按鈕固有的形象和體驗，你讓它産生類似現實中按鈕的體驗是不可能(néng)的，尤其是當你沒(méi)有用好(hǎo)它的時候，這(zhè)種(zhǒng)存在感和體驗會更加薄弱。
　　幽靈按鈕的透明度會導緻可讀性降低的問題。大圖背景和不合理的配色會讓這(zhè)種(zhǒng)糟糕體驗雪上加霜。我們會在後(hòu)續看到反例。

　　幽靈按鈕置于網站正中央，吸引用戶去點擊，以發(fā)現更多的内容。但是在我看來，幽靈按鈕并沒(méi)有得到很好(hǎo)的安置。爲了對(duì)比度，幽靈按鈕的邊框和文字均使用了白色，可是背景中的女孩也是一身白，這(zhè)使得按鈕中的單詞“imagemaking”并不完全符合對(duì)比度的需求，影響了可讀性。當然，積極的一面(miàn)在于，你可以通過(guò)刷新看到其他的圖片。

　　比起(qǐ)簡單設置一個圖片背景，他們選擇了更有逼格的方式——使用半色調的視頻來作爲背景。他們的服務展示是通過(guò)網頁中的這(zhè)套扁平風的動效和界面(miàn)來實現的。如果你想對(duì)他們的服務了解更多的話，點擊底部的幽靈按鈕就可以了。

　　不同于上一個例子，UnionRoom的網站背景色調更暗，使得内容顯得更加突出。這(zhè)個幽靈按鈕符合它該有的所有特色，不突兀也不多餘，合理和均衡。

　　這(zhè)個與文件備份有關的網站是通過(guò)簡單的藍白雙色來呈現的，對(duì)比強烈。其中使用了兩(liǎng)個橢圓形的幽靈按鈕。兩(liǎng)個按鈕識别度也做的非常不錯，沒(méi)有與背景混淆也易于被(bèi)發(fā)現，這(zhè)個網站的設計師還(hái)是非常稱職的。

　　結語

　　文章不長(cháng)内容不多，但是句句是幹貨。當然，最重要的還(hái)是在實踐中掌控幽靈按鈕，不是麼(me)？