首頁 部落格 客製化網站按鈕設計理念和靈感
Jericho
May 26, 2022
網路、科技、滿滿的新知在浩瀚的網路上,想要得到他嗎?沒問題,永遠抱持著謙卑的態度,自然會找到方案!

客製化網站按鈕設計理念和靈感

設計師有句俗話說:越不起眼的東西,越能夠影響網站的表現,其中一個就是介面設計了。對於使用者來說,也許只有「好用的介面」與「不好用的介面」兩種差異,但對設計師來說可就不同了。

以我們今天要分享的UI介面設計的元素之一:按鈕來說,他是用戶與系統互動的觸發橋梁,並透過按鈕,用戶可以做出他們的選擇,系統則根據這個選擇來採取行動。從主頁選單、留言表單、線上客戶服務、會員工具欄...每個頁面都可以看到按鈕的存在。

按鈕和連結常常被混為一談,因為文章的文字超連結提供與按鈕一樣的功能,但定位卻完完全全的不同。網站按鈕設計用於執行一些重要的事件,例如:運行一個重要的功能,做出一個重大的決定...而文章內的連結用於頁面之間的移動,是提供用戶參考資訊的正確做法。
 
也因為按鈕的意義重大,所以設計介面的工作中,按鈕總是會下更多的功夫,一個好的按鈕,可以提醒用戶做出重要的決定,而不會忽略重要的事情。然而不好的按鈕,可能會引起用戶的猜忌,或是否定網站所提供的重要訊息,重要性不言而喻。

 

網站按鈕設計原則

我們在下面詳細介紹了一些優秀的按鈕設計,以及過往常見的不良網頁按鈕設計以供參考:

 

1. 良好的網站按鈕設計

清晰:按鈕的文字和顏色必須清晰、清晰且易於閱讀。近年來,扁平化按鈕設計一直是流行的網頁設計趨勢,所以這是一種安全的嘗試風格。

簡潔:近年「簡易設計」與「扁平設計」風氣影響,在按鈕上,使用最少的文字是理想的。這個想法是只使用一兩個字。再多就會變得不方便和令人困惑。

關聯:按鈕的功能是什麼?它究竟有什麼作用?難以理解的按鈕不會被點擊。如果您有一個「立即購買」按鈕,它應該會將訪問者帶到他們可以輸入信用卡訊息的頁面,而不是討論他們想要購買的商品的頁面。

互動:過去的按鈕是靜態的,無法與用戶的行為作出互動,如今透過新的技術,設計師可以做出許多如同實體按鈕的視覺效果,例如:選擇時出現細微的色差、微幅移動的文字、或是圖樣的變化等等,讓用戶明白這個地方是可以點擊的。

 

2. 糟糕的網站按鈕設計

胡亂用色:明亮、粗體的按鈕吸引目光的效果很好,有些人尤其是沒有設計基礎的人,會迷上這樣的效益,使用很古怪的配色以吸引用戶點擊。或許你會因此吸引到用戶目光,但按鈕與整體網站的色調格格不入,會減低網站的整體形象價值,也可能會干擾閱讀,影響電子商務的表現。

訊息錯誤:任何網站使用是基於信任才成立,但如果訊息不實就會影響這個基礎,舉例來說,一些網頁按鈕會提示你切勿錯過本次的優惠,事實上這個優惠是一整年都在進行的,這就是一個錯誤訊息的呈現。

RWD:在網頁設計方面,行動體驗是鐵則,不過有些設計師忽略了一些小細節,例如按鈕就是一例,最好是上線前,手動仔細檢查它們是否也符合RWD響應式網頁設計標準。這個步驟不太容易透過自動檢查的方式進行,如果網頁按鈕設計對於行動裝置來說太大或太小,就會影響網頁的效益。

圖片化:過去網頁設計時,很流行將按鈕製作成一張圖片,而不是使用CSS或是程式語法製作圖片。圖片化的按鈕可以做出一些很真實的效果,例如立體感極佳的視覺感受,但以今日網頁設計的趨勢來看,這做法不太明智,主要是因為按鈕一旦過多,用戶就需要大量下載內容,造成網頁速度品質下滑,這可是會影響到網站效能表現與網站自然排名。

如何在網頁設計中使用網格的圖像
如何在網頁設計中使用網格的圖像
Jericho
Jericho
Jun 30, 2022
為什麼人們喜歡翻頁效果的網頁設計?
為什麼人們喜歡翻頁效果的網頁設計?
Jericho
Jericho
Jun 24, 2022
網頁設計中使用圓形CTA(行動呼籲設計)按鈕
網頁設計中使用圓形CTA(行動呼籲設計)按鈕
Jericho
Jericho
Jun 23, 2022