點擊吸引力 - 為什麼按鈕要這樣設計

更新於 發佈於 閱讀時間約 5 分鐘

大家都知道,現代人每天最常做的事,就是上網、滑手機,但當你仔細觀察之後,會發現在這樣的行為模式裡,有一個很重要的視覺元件,它無所不在,卻極度容易被設計師與人們所忽略。

你猜出來了嗎?...它,就是「按鈕」!

其實「按鈕」在設計當中,擁有了非常重要的地位,不管是手機介面或網頁、EDM,甚至是ATM機台、電玩遊戲...等,任何跟操作流程、人機互動有關係的視覺畫面,都脫離不了按鈕的設計。

而一個好的「按鈕設計」,可不是一般人所想的那麼簡單,它其實是由美學、心理學、色彩學...等,非常多的相關知識所融合創造而成的,但除了一些平常人們會討論的排版、美感、字體...等設計話題之外,卻很少有設計師,願意認真專注在學習「按鈕設計」這件事情上!

所以接下來,我們就要告訴你,有關於「按鈕」的設計重點,讓你好好重新認識一下「按鈕」:

1. 尺寸

按鈕的尺寸越大,點擊的錯誤次數也就越低,所以適當的按鈕尺寸,能夠讓使用者在點擊按鈕時,操作更加的精確。如果是在使用滑鼠游標的情況下,按鈕尺寸就需要顯眼,並方便快速點擊,若在手機上,則要考量到手指頭點擊螢幕的寬度與高度,根據MIT觸控實驗室研究指出,手機按鈕的感應區至少要有10X10mm以上,才是最方便點擊的尺寸。

2. 顏色

按鈕的顏色要盡量使用搶眼的對比色,或是常用的警告色系,讓使用者可以更快的注意到它,不需要浪費時間去尋找。然而,顏色也會影響到人類想要點擊的心理,所以可以在相同的畫面中,換上不同顏色的按鈕來進行測試,找出目標客群最喜歡點擊的按鈕顏色。

這邊要特別注意,如果是不重要的按鈕,例如:「取消」,就會使用不顯眼的顏色,去減少使用者的點擊。

3. 位置

根據科學家研究統計,畫面下方的三個按鈕,左邊的點擊率最低,中間的比左邊高一些,而右邊的點擊率最高,所以要盡量將重要或必點的按鈕,放在畫面右下角的位置。

假設你需要放「確定」與「取消」的按鈕,「確定」比「取消」來得重要,所以應該要放在右邊位置並強調凸顯。

4. 文字

文字需在按鈕正中間,四邊要與按鈕邊界有一定留白的距離,產生視覺聚焦的效果,字距與字體大小需調整適當,讓使用者方便閱讀,字義則要清楚表達,不可以意思曖昧模糊。

5. 圓角

直角按鈕帶有嚴肅的感覺,圓角則會給使用者舒適的感覺,而且圓角可以讓視覺聚焦到按鈕的中央,也就是文字的位置,加強訊息的傳遞。

6. 風格

● 擬物化設計

因為大自然的光線,都是從天空上面照下來,所以人類在認知上,會覺得視覺畫面的光源,也應該是從上面照下來,因此在設計擬物化風格的立體按鈕時,顏色要從淡到深,並往下製作自然陰影。這種呈現方式,在視覺上會比扁平化設計更加顯眼,而且接近真實物品的設計風格,會增加人類點擊的慾望。

● 實感設計

為了使視覺畫面更簡潔,讓系統運作更省效能,所以現在有很多網站、系統的按鈕,都改成了扁平化的設計風格,但由於扁平化的設計風格會降低點擊的可視性,有時會讓使用者不易分辨按鈕是否可以點擊,於是將扁平化設計的按鈕加上自然陰影,強調物件層級前後的關係,進階成了實感設計的按鈕。

按鈕風格,主要考量的重點,是美學的一致性,整體畫面風格是否適合這種按鈕,並沒有一定選誰是最好的。

7. 狀態

讓按鈕在進行點擊、完成的動作時,產生不同的狀態,可以幫助使用者判斷點擊動作是否成功。

8. 手指

在網路廣告的按鈕右下角,加上一個手指圖案,感覺就像市場攤販喊著:「快來買喔~來看看喔!」,這種方式不只可以讓使用者知道這個按鈕可以點擊之外,更能加快使用者下決定的速度,並且引發人類模仿手指點擊的行為,進而使點擊率大幅提升。

設計是用來解決問題的,所以「按鈕」的每一個設計步驟、細節,都有知識理論所支撐!

現在你可以知道,一個設計優良的「按鈕」,不僅可以使介面風格提升,讓使用者行為更流暢,更能大幅增加廣告、EDM的點擊率,因此設計出一個棒又有效的「按鈕」,絕對是大家必須認真看待的一門重要學問與技巧。

留言
avatar-img
留言分享你的想法!
avatar-img
CJC 設計實驗室的沙龍
91會員
30內容數
2019/10/14
當我們在設計商業廣告時,時常會遇到以照片為主的廣告,而這種類型的廣告,通常是以大面積的照片,搭配上一些簡單的字句,作為主要傳遞情境氛圍的方式,所以照片該如何擺放,在整體的排版構圖上,就顯得非常重要。
Thumbnail
2019/10/14
當我們在設計商業廣告時,時常會遇到以照片為主的廣告,而這種類型的廣告,通常是以大面積的照片,搭配上一些簡單的字句,作為主要傳遞情境氛圍的方式,所以照片該如何擺放,在整體的排版構圖上,就顯得非常重要。
Thumbnail
2019/06/10
我們之前說過Content SEO,策略導向的優化,也就是透過各種行銷方式,讓搜尋引擎在進行搜尋結果運算時,認為該網頁是符合關鍵字的高人氣優質內容,進而使網頁的排名更前面。 所以SEO的決勝重點,就在於Content SEO,行銷的思考策略!
Thumbnail
2019/06/10
我們之前說過Content SEO,策略導向的優化,也就是透過各種行銷方式,讓搜尋引擎在進行搜尋結果運算時,認為該網頁是符合關鍵字的高人氣優質內容,進而使網頁的排名更前面。 所以SEO的決勝重點,就在於Content SEO,行銷的思考策略!
Thumbnail
2019/06/06
說真的,你花了那麼多時間設計網頁,卻沒被搜尋引擎收錄,不是很可惜嗎? 所以接下來,我們就要告訴你,有關於「Technical SEO」的語法重點,讓你的網頁也能快速又有效率的被搜尋引擎收錄進去。
Thumbnail
2019/06/06
說真的,你花了那麼多時間設計網頁,卻沒被搜尋引擎收錄,不是很可惜嗎? 所以接下來,我們就要告訴你,有關於「Technical SEO」的語法重點,讓你的網頁也能快速又有效率的被搜尋引擎收錄進去。
Thumbnail
看更多
你可能也想看
Thumbnail
「欸!這是在哪裡買的?求連結 🥺」 誰叫你太有品味,一發就讓大家跟著剁手手? 讓你回購再回購的生活好物,是時候該介紹出場了吧! 「開箱你的美好生活」現正召喚各路好物的開箱使者 🤩
Thumbnail
「欸!這是在哪裡買的?求連結 🥺」 誰叫你太有品味,一發就讓大家跟著剁手手? 讓你回購再回購的生活好物,是時候該介紹出場了吧! 「開箱你的美好生活」現正召喚各路好物的開箱使者 🤩
Thumbnail
在當今這個以使用者為中心的設計領域,產品思維不僅是設計師的一項附加技能樹,而是成為塑造成功產品的核心因素。
Thumbnail
在當今這個以使用者為中心的設計領域,產品思維不僅是設計師的一項附加技能樹,而是成為塑造成功產品的核心因素。
Thumbnail
文案設計是一種重要的視覺傳達技巧,透過文字、圖形、色彩等元素的搭配,傳達出品牌或產品的訊息。其中,色彩是文案設計中不可或缺的元素,它可以影響人們的視覺感受、情緒和心理。學會利用色彩在文案設計中,可以讓你的設計更加吸引人,一眼就被看見。以下將介紹7種常見顏色在文案設計中的魔力,以及它們適合用在哪裡
Thumbnail
文案設計是一種重要的視覺傳達技巧,透過文字、圖形、色彩等元素的搭配,傳達出品牌或產品的訊息。其中,色彩是文案設計中不可或缺的元素,它可以影響人們的視覺感受、情緒和心理。學會利用色彩在文案設計中,可以讓你的設計更加吸引人,一眼就被看見。以下將介紹7種常見顏色在文案設計中的魔力,以及它們適合用在哪裡
Thumbnail
視覺筆記以圖像、圖表、圖示和視覺元素為基礎,這些視覺元素往往能夠引起觀眾的興趣,因為它們比純文字更具吸引力。 在這個數位創新時代,創作者們經常面臨許多競爭,想要讓自己的數位商品脫穎而出,不僅需要具備獨特的亮點,還需要吸引人的商品介紹、超值的內容以及完善的售後服務。
Thumbnail
視覺筆記以圖像、圖表、圖示和視覺元素為基礎,這些視覺元素往往能夠引起觀眾的興趣,因為它們比純文字更具吸引力。 在這個數位創新時代,創作者們經常面臨許多競爭,想要讓自己的數位商品脫穎而出,不僅需要具備獨特的亮點,還需要吸引人的商品介紹、超值的內容以及完善的售後服務。
Thumbnail
本文將總結網頁設計的重點,包括設計的基本要素、使用者體驗設計、色彩運用、版面設計,以及設計如何幫助提升轉換率等等。以下將提供一些關於網頁設計的技巧和建議,協助你設計出一個具有吸引力、易用性的網頁,並提高網頁的流量和轉換率,讓您更好地了解網頁設計的要素和技巧,設計出一個成功的網頁!
Thumbnail
本文將總結網頁設計的重點,包括設計的基本要素、使用者體驗設計、色彩運用、版面設計,以及設計如何幫助提升轉換率等等。以下將提供一些關於網頁設計的技巧和建議,協助你設計出一個具有吸引力、易用性的網頁,並提高網頁的流量和轉換率,讓您更好地了解網頁設計的要素和技巧,設計出一個成功的網頁!
Thumbnail
吸睛又吸金的銷售頁三大重點,以及如何透過CANVA 製作吸睛的一頁式網站!
Thumbnail
吸睛又吸金的銷售頁三大重點,以及如何透過CANVA 製作吸睛的一頁式網站!
Thumbnail
網頁設計風格代表你的品牌形象,同時首頁是接觸用戶的最前線,如何在首頁吸引用戶留下,繼續瀏覽網頁是最關鍵的一步,要如何留下他們甚至要轉換成你的客戶?請檢查一下你的網頁有沒有以下10點網頁必備元素,打造出最強的landing Page吧。
Thumbnail
網頁設計風格代表你的品牌形象,同時首頁是接觸用戶的最前線,如何在首頁吸引用戶留下,繼續瀏覽網頁是最關鍵的一步,要如何留下他們甚至要轉換成你的客戶?請檢查一下你的網頁有沒有以下10點網頁必備元素,打造出最強的landing Page吧。
Thumbnail
很多時候我們都在專注於擁有一個網站、追求能被搜尋引擎認可,但卻忘了到頭來網站視覺還得經的起使用者考驗。別說是使用者,今天若有兩種不同網頁設計視覺在你眼前,一個精緻但後台可能有問題,另一個粗糙卻有完整的後台功能,你會怎麼選?
Thumbnail
很多時候我們都在專注於擁有一個網站、追求能被搜尋引擎認可,但卻忘了到頭來網站視覺還得經的起使用者考驗。別說是使用者,今天若有兩種不同網頁設計視覺在你眼前,一個精緻但後台可能有問題,另一個粗糙卻有完整的後台功能,你會怎麼選?
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News