設計一個CTA按鈕，需要考慮的4個因素

7 評論 15679 瀏覽 26 收藏 4 分鐘

這四個元素：形狀、尺寸和填充、標簽和顏色，是設計更好的CTA按鈕非常重要的幾點。enjoy~

設計CTA按鈕是非常具有挑戰性的，更重要的是要考慮到屏幕適應和功能流暢性。多年來，UI設計師一直在處理CTA按鈕，總是需要在整個app中訪問。

設計一個滿足每個設備的屏幕的CTA按鈕這確實是一個挑戰，需要在iOS和Android平臺上保持一致性，需要適應小到大屏幕。

在這種情況下，設計一個CTA按鈕需要考慮哪些因素呢?

1. 形狀

按鈕的形狀不僅僅是正方形，圓形或三角形；它需要看起來像按鈕。甚至自定義形狀也可以，但要記得越是不尋常的形狀，用戶理解按鈕的風險越大。

Image title

2. 尺寸和填充

尺寸和填充幫助用戶更容易與按鈕進行交互。按鈕的大小與手指的觸碰面積有關，用戶是需要點擊按鈕。麻省理工學院實驗室研究得出，平

均手指觸碰面積為10-14mm，指尖的面積為10*10mm，這是最小接觸面積的大小。

Image title

按鈕的填充可以區分不同的控制和足夠的空間，例如主要和次要的按鈕。

Image title

3. 標簽

雖然不是所有的按鈕都有標簽（例如一個添加按鈕可以只是視覺上的“+”），標簽顯示每個按鈕的功能，明確向用戶顯示他們是做什么的。一個恰當的標簽應該符合最小意外原則和經驗法則。

Image title

4. 顏色

在按鈕的顏色是非常重要的，它幫助用戶瀏覽，更清楚理解交互。你不應該用紅色和綠色設計按鈕，因為色盲的用戶看不出區別。這里有一些按鈕設計中選擇顏色的建議：

  1. 使用顏色和對比度來幫助用戶區分按鈕。
  2. 最主要的CTA按鈕要和其他的區分開。

Image title

總之，這四個元素：形狀、尺寸和填充、標簽和顏色，是設計更好的CTA按鈕非常重要的幾點。不要讓用戶混淆按鈕的功能。一旦用戶使用按鈕，那么接下來按鈕的設計完全會按照你所期望的來引導用戶。

 

原文地址：https://medium.muz.li/malachidigest-e5b0244209a4

作者鏈接：https://medium.muz.li/@stefanomalachi

譯文地址：http://www.ui.cn/detail/254935.html

譯者：厲嗣傲

本文由 @厲嗣傲 授權發布于人人都是產品經理，未經作者許可，禁止轉載。

題圖來自 Pexels，基于 CC0 協議

更多精彩內容，請關注人人都是產品經理微信公眾號或下載App
白桃汽水不加冰
重度拖延癥
1096篇作品 16280434總閱讀量
05-084945 瀏覽
免費升級套餐，到底藏著多少坑？
04-072757 瀏覽
AI技術殺入攝影圈
07-096507 瀏覽
公司團建為啥招人罵
06-302674 瀏覽
珠寶直播帶貨熱火：利潤率最低50%，但套路無處不在
04-121574 瀏覽
AIGC時代，如何平衡與拿捏其尺度？
評論
評論請登錄

  1. 紅綠色弱人群有那么多嘛？

    來自北京 回復

  2. 原來是翻譯的，翻譯水平渣，而且還選了篇沒質量的文章

    回復

  3. “這四個元素：形狀、尺寸和填充、標簽和顏色，是設計更好的CTA按鈕非常重要的幾點。”
    tmd，怎么個4個元素，3個還是5個，基本格式不過關的文章也能放出來？

    回復

  4. 請問cta按鈕是什么意思？

    回復

  5. 請問cta按鈕是什么意思

    回復

    1. all to action

      來自浙江 回復

    2. call to action，簡單翻譯是行動呼吁，就是用戶點擊會有怎樣的相應

      來自廣東 回復