藍(lán)藍(lán)設(shè)計(jì)( www.payeee.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

來(lái)源：優(yōu)設(shè)網(wǎng)

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

優(yōu)設(shè)曾在過(guò)去的文章《網(wǎng)頁(yè)設(shè)計(jì)新趨勢(shì)！你聽(tīng)說(shuō)過(guò)“幽靈按鈕”嗎？》中對(duì)幽靈按鈕進(jìn)行過(guò)詳細(xì)的描述，也搜集過(guò)許多高大上的設(shè)計(jì)案例《向高手學(xué)習(xí)！20個(gè)使用“幽靈按鈕”的優(yōu)秀網(wǎng)站案例》。沒(méi)錯(cuò)，幽靈按鈕已經(jīng)成熟，今天我們就好好總結(jié)這一設(shè)計(jì)趨勢(shì)。

2009年重啟的的新《星際迷航》中，企業(yè)號(hào)中控系統(tǒng)的UI就使用了近似幽靈按鈕的設(shè)計(jì)元素

那么先溫故一下，什么是幽靈按鈕

幽靈按鈕，也就是Ghost Buttons，是一個(gè)透明的按鈕，通常是矩形或者圓角矩形，僅保留基本的形制，使用細(xì)線(xiàn)來(lái)標(biāo)識(shí)邊界；按鈕內(nèi)的文字通常使用纖細(xì)的非襯線(xiàn)體字體的純文本，來(lái)指明按鈕功能。

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

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

幽靈按鈕的起源

雖然很難為幽靈按鈕找到單一起源，但是我們能夠?yàn)橹_定幾個(gè)具有重要影響意義的源頭。由于幽靈按鈕的廣泛應(yīng)用，甚至有用戶(hù)在Tumblr上單獨(dú)為之開(kāi)了個(gè)博客，專(zhuān)門(mén)搜集相關(guān)的設(shè)計(jì)作品。

HUD

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

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

好萊塢的FX團(tuán)隊(duì)就特別著迷于這種幽靈風(fēng)格的UI。《少數(shù)派報(bào)告》中手勢(shì)操作和透明屏幕上的界面，《鋼鐵俠》中MK系列盔甲頭盔中的HUD交互界面，《安德的游戲》中戰(zhàn)艦的操作界面，《星際迷航》中每一個(gè)控制面板，都將這種隱喻未來(lái)的界面風(fēng)格發(fā)揮到。在我看來(lái)，這種一脈相承的科幻風(fēng)為今天幽靈按鈕的流行奠定了基調(diào)，提供了靈感。

IOS

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

隨后，Google這樣的巨頭也開(kāi)始使用幽靈按鈕。雖然Android的設(shè)計(jì)指南中并為將其標(biāo)準(zhǔn)化（Well，Material Design本身也扁平的很有性格不是么），但是2013年Nexus 7的官方網(wǎng)站中也開(kāi)始運(yùn)用幽靈按鈕。下圖中，幽靈按鈕的白色線(xiàn)條與黑色的背景對(duì)比強(qiáng)烈又沒(méi)有喧賓奪主。

Bootstrap

另外一個(gè)為幽靈按鈕的流行作出巨大貢獻(xiàn)的就是來(lái)自Twitter的Bootstrap ,2013年8月，Bootstrap 3 發(fā)布，當(dāng)時(shí)官網(wǎng)首頁(yè)上所展示的網(wǎng)頁(yè)設(shè)計(jì)原型就正好使用了幽靈按鈕。

由于Bootstrap在網(wǎng)站開(kāi)發(fā)上的簡(jiǎn)單易用，越來(lái)越多的網(wǎng)站開(kāi)發(fā)者和設(shè)計(jì)師開(kāi)始使用它，連帶著扁平化風(fēng)格和幽靈按鈕越來(lái)越流行。

Bootstrap 簡(jiǎn)單自然，單色背景為幽靈按鈕留下了足夠的施展空間。

相關(guān)閱讀《利用Bootstrap教你快速構(gòu)建一個(gè)美觀且高品質(zhì)的網(wǎng)站》

接下來(lái)，我們總結(jié)一下幽靈按鈕的優(yōu)缺點(diǎn)：

幽靈按鈕的優(yōu)缺點(diǎn)

優(yōu)點(diǎn)

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

事物總需要一分為二來(lái)看，幽靈按鈕自然也有它的局限性，當(dāng)你設(shè)計(jì)的時(shí)候需要仔細(xì)考慮一下這些因素。

缺點(diǎn)

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

幽靈按鈕的使用實(shí)例

Bilderphoto.com

第一個(gè)例子就是 Bilderphoto.com，典型的大圖背景設(shè)計(jì)。

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

UnionRoom

接下來(lái)的這張圖片來(lái)自于UnionRoom的網(wǎng)站，這是一家網(wǎng)頁(yè)設(shè)計(jì)和開(kāi)發(fā)公司。

比起簡(jiǎn)單設(shè)置一個(gè)圖片背景，他們選擇了更有逼格的方式——使用半色調(diào)的視頻來(lái)作為背景。他們的服務(wù)展示是通過(guò)網(wǎng)頁(yè)中的這套扁平風(fēng)的動(dòng)效和界面來(lái)實(shí)現(xiàn)的。如果你想對(duì)他們的服務(wù)了解更多的話(huà)，點(diǎn)擊底部的幽靈按鈕就可以了。

不同于上一個(gè)例子，UnionRoom的網(wǎng)站背景色調(diào)更暗，使得內(nèi)容顯得更加突出。這個(gè)幽靈按鈕符合它該有的所有特色，不突兀也不多余，合理和均衡。

Worldbackupday

最后這個(gè)案例是worldbackupday.com，使用了典型的扁平化設(shè)計(jì)。

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