如何打造吸引人的網站按鈕設計？

在網站設計中，最流行的 UI 元素之一就是網站按鈕。它們允許用戶與系統交互，並會在訪問者點擊後將他們引導至特定的頁面。如果你的按鈕設計良好，用戶將更有可能執行你希望他們執行的操作。為了幫助你提高網站轉化率，我們將在這篇文章中向你展示如何製作精良的網站按鈕設計。

文章綱要：

1. 如何區分好與不好的網站按鈕設計？

2. 網站按鈕設計技巧

3. 透過Strikingly製作優質網站按鈕

4. 文章總結

1. 如何區分好與不好的網站按鈕設計？

良好的網站按鈕設計必須具備以下這些元素：

清晰：按鈕的文字和顏色必須清晰且易於閱讀。近年來，扁平按鈕設計已成為流行的網頁設計趨勢，因此這是一種你可以完全放心使用的風格。注意：避免使用可能導致讀者分心的複雜、華麗的按鈕。
簡潔：理想的按鈕設計應該盡量避免冗長的文本，你最好只在按鈕中置放一兩個詞。問問自己，“我希望讀者現在在頁面上做什麼？”，這時候你想到的第一個詞幾乎肯定是動詞，你可以將其轉化為簡短的按鈕措辭。
連接上下文：按鈕的功能是什麼？它究竟是做什麼的？難以理解的按鈕不會被點擊。如果你有一個“立即購買”按鈕，它應該將訪問者帶到一個他們可以輸入信用卡資訊並完成交易流程的頁面，而不是一個無關緊要的產品介紹頁面。

糟糕的網站按鈕設計涉及以下這些元素：

不響應：在網頁設計方面，網站是否適配行動設備將成為用戶評估你網站表現的最大因素之一。因此在發布你的網站更新之前，你需要手動檢查你的網站按鈕設計是否也適用於行動設備。如果你跳過此步驟，你的網頁按鈕設計對於行動設備來說可能太大或太小，從而影響你的點擊率。幸運的是，大多數 CMS 解決方案都提供了一個切換按鈕，允許你在多種螢幕類型中預覽網頁元素，從而允許你相應地更改按鈕設計。
沒有顏色：明亮，粗體的按鈕可以很好地用作 CTA （行動呼籲按鈕），因為它們可以將訪問者的注意力吸引住。請記住，用戶瀏覽你的網站就像在探索一個旅程，而你在其之上設定的按鈕就像地圖，應該具備醒目的號召能力。因此，如果你不使用全彩按鈕，你的讀者可能難以發現它。
錯位：在類似的問題上，訪問者可能會對錯位的按鈕感到困惑。如果你的按鈕沒有放置在正確的位置上，你的訪問者將不明白自己為何該點擊它們。

2. 網站按鈕設計技巧

圖片取自Strikingly用戶網站

保持簡單

這一切都歸結為設計中的一句古老格言：“保持簡單或顯得笨拙”，網站按鈕的設計也不例外。記住！優秀的網站按鈕設計不必非常複雜。它的意義應該一眼就讓人明了。因此，在考慮按鈕和網頁設計理念時，請記住這一點——不要想太多。

確保有很多對比

如果你將按鈕置放在不顯眼的位置（沒有其他對比來幫助可用戶立即辨別），那用戶將無法立即找到它們。你可以透過使用大量的顏色和空間對比將你的網站按鈕設計與螢幕上的其他項目區分開來。

利用顏色

圖片取自Strikingly用戶網站

你有沒有註意到大部分網站按鈕設計的主要顏色都是紅或橙？這是因為明亮的顏色會吸引人們注意這些元素並激發行動。為此，你應該考慮為你的按鈕加上鮮豔的色調。

準確的文案

不要犯這種錯誤：將“點擊此處”字樣寫在按鈕上（這聽起來不像垃圾郵件嗎？），按鈕設計的主要用處應該讓用戶清楚地了解當他們點擊它時會發生什麼。它可能是點擊按鈕後“提交”資訊，或點擊“了解更多”的按鈕來進入產品介紹頁面。不管它是什麼。準確的按鈕文案可以幫助建立用戶信任來增加轉化。

放大到足以點擊

圖片取自Strikingly用戶網站

按鈕應具有直徑至少為 10 毫米的可點擊區域，這個建議來自麻省理工學院觸控實驗室的一項研究，該研究著眼於指墊與觸控設備的關係。在電腦鍵盤上，典型的按鍵尺寸為 15 毫米 x 15 毫米。這是一個很好的目標。（請記住，不同的螢幕寬度會導致你的按鈕在小型設備上消失。）如果你必須使用小按鈕，請嘗試為它們提供較大的點擊半徑。