|EN
最新消息

NEWS最新消息

最新網站設計趨勢-幽靈按鈕(Ghost Buttons)

百崴編輯部

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

幽靈按鈕的網站運用範例

幽靈按鈕的網站運用範例

 

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

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

幽靈按鈕的網站運用範例

幽靈按鈕的網站運用範例

 

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

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

 

幽靈按鈕的優勢

 

幽靈按鈕的網站運用範例

幽靈按鈕的網站運用範例

 

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

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

 

幽靈按鈕的劣勢

 

幽靈按鈕的網站運用範例

幽靈按鈕的網站運用範例

 

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

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

 

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

 

幽靈按鈕的網站運用範例

 

幽靈按鈕的網站運用範例

幽靈按鈕的網站運用範例

幽靈按鈕的網站運用範例

幽靈按鈕的網站運用範例

幽靈按鈕的網站運用範例

幽靈按鈕的網站運用範例

幽靈按鈕的網站運用範例

幽靈按鈕的網站運用範例

幽靈按鈕的網站運用範例

幽靈按鈕的網站運用範例

幽靈按鈕的網站運用範例

幽靈按鈕的網站運用範例

幽靈按鈕的網站運用範例

 

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