設(shè)計一個CTA按鈕,需要考慮的4個因素

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

這四個元素:形狀、尺寸和填充、標(biāo)簽和顏色,是設(shè)計更好的CTA按鈕非常重要的幾點(diǎn)。enjoy~

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

設(shè)計一個滿足每個設(shè)備的屏幕的CTA按鈕這確實是一個挑戰(zhàn),需要在iOS和Android平臺上保持一致性,需要適應(yīng)小到大屏幕。

在這種情況下,設(shè)計一個CTA按鈕需要考慮哪些因素呢?

1. 形狀

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

Image title

2. 尺寸和填充

尺寸和填充幫助用戶更容易與按鈕進(jìn)行交互。按鈕的大小與手指的觸碰面積有關(guān),用戶是需要點(diǎn)擊按鈕。麻省理工學(xué)院實驗室研究得出,平

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

Image title

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

Image title

3. 標(biāo)簽

雖然不是所有的按鈕都有標(biāo)簽(例如一個添加按鈕可以只是視覺上的“+”),標(biāo)簽顯示每個按鈕的功能,明確向用戶顯示他們是做什么的。一個恰當(dāng)?shù)臉?biāo)簽應(yīng)該符合最小意外原則經(jīng)驗法則。

Image title

4. 顏色

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

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

Image title

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

 

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

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

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

譯者:厲嗣傲

本文由 @厲嗣傲 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)作者許可,禁止轉(zhuǎn)載。

題圖來自 Pexels,基于 CC0 協(xié)議

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 紅綠色弱人群有那么多嘛?

    來自北京 回復(fù)
  2. 原來是翻譯的,翻譯水平渣,而且還選了篇沒質(zhì)量的文章

    回復(fù)
  3. “這四個元素:形狀、尺寸和填充、標(biāo)簽和顏色,是設(shè)計更好的CTA按鈕非常重要的幾點(diǎn)?!?br /> tmd,怎么個4個元素,3個還是5個,基本格式不過關(guān)的文章也能放出來?

    回復(fù)
  4. 請問cta按鈕是什么意思?

    回復(fù)
  5. 請問cta按鈕是什么意思

    回復(fù)
    1. all to action

      來自浙江 回復(fù)
    2. call to action,簡單翻譯是行動呼吁,就是用戶點(diǎn)擊會有怎樣的相應(yīng)

      來自廣東 回復(fù)