最新網站設計趨勢-幽靈按鈕(Ghost Buttons)
發布日期:2014-07-15

網站設計中的按鈕,不再使用複雜色彩、套用任何樣式紋理,單純的以線框描繪按鈕範圍,按鈕內容僅標示文字做示意的功能,底色透明或半透明,與網站背景容的設計方式。國外將這種極簡風格設計方法稱之為“幽靈按鈕"(Ghost Buttons)。這種按鈕已有許多大型網站採用,已經逐漸變成最新的網頁設計趨勢。

幽靈按鈕的網站運用範例

幽靈按鈕的網站運用範例

 

這些按鈕通常比網頁上傳統的可點擊按鈕大,也被置於顯要位置,例如螢幕的正中央。各種類型的網站,包括行動裝置APP中,你有仔細觀察過你的iPhone(運行iOS7)上的圓角按鈕嗎?每個設計項目都是幽靈按鈕。它有著多種設計風格,卻幾乎都與單頁網站有關聯,還有目前最受歡迎的極簡風格或近扁平風格的設計方案。這種風格的按鈕在全螢幕照片背景的網站中也大受歡迎,這種簡潔的樣式,最大的用意在於不干擾圖片情境的呈現下又能置入導引按鈕,雙方相互搭配而不造成違合感。

對於設計師來說,使用這樣的設計會更有發揮的空間。不需要再為背景有質感的設計,但卻需放置一個硬生生的按鈕,而是可以相互搭配使用,可針對背景設計,例如模糊程度、對比色強烈等等視覺設計,或是按鈕的線條粗細、文字纖細度等,來調整背景及導引按鈕的配置,即可將這類的設計風格掌握。

幽靈按鈕的網站運用範例

幽靈按鈕的網站運用範例

 

幽靈按鈕有一系列典型的組成元素。儘管這並非完整的使用準則,但使用幽靈按鈕時,多數是符合下列所述的。

  • 按鈕是中空的
  • 它週邊有一圈輪廓,通常只有一點點厚度
  • 它包含了簡短的文字
  • 顏色通常只有黑白
  • 按鈕往往比傳統按鈕更大
  • 幽靈按鈕一般佔據頁面顯要位置
  • 幽靈按鈕可以單獨或成小組出現
  • 通常使用扁平或近扁平的設計方案
  • 幽靈按鈕內部可以使用小的幾何形圖示,不過很少這麼做

 

幽靈按鈕的優勢

 

幽靈按鈕的網站運用範例

幽靈按鈕的網站運用範例

 

那麼,是什麼使得幽靈按鈕如此管用?有必要使用把這項趨勢嗎?

  • 幽靈按鈕給人特別乾淨的外觀和感受。簡單自然的按鈕,能使得頁面的主體設計更加突出。(尤其在大幅圖片上表現更好) 幽靈按鈕幾乎可以搭配任何設計方案,因為他們是透明的。這使得按鈕可以從根本上承接周遭的設計特徵。
  • 幽靈按鈕延續了“2013年度趨勢——扁平設計”的演化。這樣的設計趨勢要成為當下主流,唯一的方法就是繼續演變,接納新的概念。
  • 幽靈按鈕提供了一種帶有視覺驚喜的元素,因為這個按鈕和使用者預想的可不一樣。
  • 設計和創建幽靈按鈕很簡單,切記保持簡約,幽靈按鈕應該精細微妙,而非浮華炫目。
  • 幽靈按鈕無需過分顯眼,就足以創造出有感召力的視覺焦點。
  • 在眾多網頁設計中,幽靈按鈕是螢幕上唯一的大型元素(這就是它如此有效的原因)。正因為如此,它抓住眼球,誘使使用者點擊按鈕。而且這也是優秀使用者介面的特徵。
  • 幽靈按鈕有助於打造高質感的設計風格。在設計中,簡單往往就是高雅。

 

幽靈按鈕的劣勢

 

幽靈按鈕的網站運用範例

幽靈按鈕的網站運用範例

 

雖說幽靈按鈕在設計上體現出諸多優勢,同時有些劣勢也需要考慮。採用任何新趨勢之前,都要評估它的優勢與劣勢,然後決定是否在專案中使用。

  • 幽靈按鈕可能太溶於背景中,使用戶產生困惑。並非所有用戶都瞭解設計;有些人對難以識別非傳統樣式的按鈕,也不會知道它是做什麼的。
  • 幽靈按鈕在高對比或者顏色豐富的圖片上很難處理。這些按鈕往往不是黑色就是白色。假如你用的背景圖是黑白交替的,幽靈按鈕幾乎看不到,也無法閱讀。
  • 為了便於使用,幽靈按鈕依賴特定尺寸與位置。放置按鈕時要格外小心,讓人容易發現它,並且不能遮蓋圖片的關鍵部分。
  • 幽靈按鈕有時會明顯影響與它搭配的圖片 幽靈按鈕的文案比“點擊此處”要複雜。其中的文字,需要足夠清晰的構思與文案,並置於其餘部分的上下文語境中。
  • 幽靈按鈕如今已無處不在。想要使自己看起來跟得上潮流趨勢?選擇時興的事物前,請確保它確實對你的網站有幫助。

 

切記,把握任何趨勢,關鍵是要用好它,而非浮濫使用。

 

幽靈按鈕的網站運用範例

 

幽靈按鈕的網站運用範例

幽靈按鈕的網站運用範例

幽靈按鈕的網站運用範例

幽靈按鈕的網站運用範例

幽靈按鈕的網站運用範例

幽靈按鈕的網站運用範例

幽靈按鈕的網站運用範例

幽靈按鈕的網站運用範例

幽靈按鈕的網站運用範例

幽靈按鈕的網站運用範例

幽靈按鈕的網站運用範例

幽靈按鈕的網站運用範例

幽靈按鈕的網站運用範例

 

原文章參考: Design Trend: Ghost Buttons in Website Design

Previous
News Index
Next
COMPANY公司資訊
地圖
地圖
百崴數位科技股份有限公司 PAVI Digital Tech. Co., Ltd.

104 台北市中山區中山北路三段29號6樓之7 地圖

Room 7, 6F., No.29, Sec. 3, Jhongshan N. Rd., Jhongshan District, Taipei City 104, Taiwan.

T: 02-25979258 / F: 02-25979723
Top