那些“勾引”人的幽靈按鈕設計

來源:互聯網
上載者:User

   一個小小的按鈕在一個網頁中擔當著很重要的角色,它帶領我們從一個頁面到達另一個頁面,是我們瀏覽網站時的有力橋樑。一座好的橋樑不僅能為使用者帶來舒適的過渡,也許還能為你的網站加分不少。AnyForWeb曾在《2014年全球網站設計的15個趨勢》中提到,扁平化和極簡主義的設計風格是最近較為流行的設計趨勢。試想一下,如果將這兩種時下大熱的設計理念共同運用到小小的網站按鈕設計中去,究竟會呈現出怎樣的效果?

  透明的按鈕設計其實在國外的網頁設計中很早就出現了,還被國外的設計師們俏皮的稱為“幽靈按鈕”(Ghost Buttons)。說到幽靈,我們的第一印象就是輕薄且透明,這也正是“幽靈按鈕”的精髓所在。沒有底色和紋理的渲染,只有一層簡單到極致的線框與外界劃分,若再加以高斯模糊的大圖背景,這兩者似乎是天造地設的組合搭配。

  “幽靈按鈕”在國外的網站中十分普遍,但在國內的運用並不多見,而國內知名的線上業務解決方案服務商AnyForWeb在設計中融入了“幽靈按鈕”的理念,以下是AnyForWeb的“幽靈按鈕”作品。

  1.AnyForWeb將透明線框的極簡理念首先融入了搜尋方塊中,優美的線條和漸層的色彩,讓整個介面更優雅。“搜尋”按鍵更是掙脫了所有線框的束縛,搭配海洋和島嶼的背景大圖,讓頁面看起來自由美好。

  2.模糊的背景介面和“幽靈按鈕”之間擦出來不一樣的火花。以下案例是由AnyForWeb自主研發的Kangaroo CMS的登陸頁面。繁忙的城市背景被蓋上一層朦朧的色彩,再疊加清晰的透明線框按鈕,讓頁面整體妙不可言。

  3.這是AnyForWeb為Shang Yoga設計的官方網站的一小部分。網站的整體基調與瑜伽的感覺十分吻合,“幽靈按鈕”的設計體現了瑜伽運動的恬靜簡單。

  另外,AnyForWeb同時也為大家匯總了國外網站中的“幽靈按鈕”典型案例,供點評參考。

  1.這個網站的登入方式全部採用了“幽靈按鈕”的手法,輸入框與“sign up”字樣融合在一起,頂部的第三方登入按鈕甚至去除了邊框的限制,背景也選擇了十分簡單的畫面,把極簡主義風格發揮到每一處細節。

  2. Huemor Designs無論是從創始人身上或是網站本身,都不難發現他們天馬行空的特性。由此可見,創造性的機構也能選擇“幽靈按鈕”,再配合網站的視差滾動技術和一些精緻可愛的效果,讓網站在小清新中還透出俏皮。

  3.Lander的網站證實了全域扁平化的設計和“幽靈按鈕”的配搭的確達到了我們預期的效果。網站整體感覺就好比一個快樂的孩童,充滿童真,活潑乖巧。純色背景和透明線框按鈕互相映襯,形成了一種微妙的平衡舒適感。

  4.EXPOSURE使用了比較懷舊的高清大圖作為背景,白色的文字和按鈕配合偏黑色系的背景,形成鮮明的對比反差,帶給瀏覽者一種舒適的視覺衝擊。

  5.JET EDGE是一家私人航空公司,背景理所當然的使用了從飛機舷窗內拍攝的照片。但與大多情況不同的是,背景圖片並沒有被虛化,這也使整個網頁顯得更豐富,而網站中的“幽靈按鈕”設計則增添了瀏覽者的點擊慾望。

  6.Reader MX是一個線上文章閱讀取最佳化的分享工具,以悠閑生活、愜意閱讀為理念,並且將這一理念也融入了網站中。右側的按鈕甚至拋棄了僅有的線框,把“幽靈按鈕”的輕薄透的特質發揮到極致。

  7.Adventive所用的背景圖片既使用了不夠簡單乾淨的圖片,並且加入了紋理的點綴,也沒有進行虛化,但看起來仍然沒有十分繁瑣複雜的感覺,這都要歸功於按鈕和字型的協助。字型顏色選用了與圖片色調同一色系的白色和藍色,重點內容加粗顯示,按鈕設計與文字內容盡量靠近,這樣的布局方法也讓網頁省去了空間。

  8.以下這個案例採用了比較保守的做法,用全黑作為背景,加以明亮色的“幽靈按鈕”設計,讓按鈕在整個網頁中顯得格外突出,整體感覺時尚中不失優雅。

  9. Involvio是一個為跟蹤瞭解各大校園中發生的事件而建立的網站,使用者當然以學生為主。所以網站很貼切的使用了校園景象的視頻作為背景,全域使用扁平化設計和透明線框按鈕的手法,再加以清新的色彩,更加襯托出了學生們青春活潑的特點。

  “幽靈按鈕”設計手法在國外的網站設計中並不少見,這樣的設計既高大上,又是未來大勢所趨,並且能夠簡單操作,難道你還不心動嗎?

相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。