行动号召按钮位于页面顶部
Posted: Mon Feb 10, 2025 10:13 am
为了说明本节，我们以 Ozon 和 Pinterest 网站为例。他们的登陆页面上的 CTA 元素的设计非常相似。
登陆页面设计
登陆页面设计2
CTA 元素采用“严格”的蓝色，具有经典的按钮形状（带有阴影和体积效果）。为了突出按钮的对比，我们在按钮下方使用了中间色调的“衬里”。此外，在这个区域，还设置了用户行动号召：“选择”和“搜索”。
CTA 元素上的铭文清晰明确，采用统一的风格，仅在突出显示方面有所不同。文字颜色与按钮颜色形成对比，并与背景颜色相匹配。
请注意 Ozon 页面的配色方案，它做得相当“适度”，没有过多的色彩。这种“心理”技巧是故意为之——用户认为它有一定的可靠性，而开发人员并不想用鲜艳的装饰来吸引注意力。通过图 危地马拉移动数据库 像展示服务运行情况，可以使信息更容易被感知。
也讀吧！
“畅销标题：20 个实例”
阅读更多
如何创建行动号召按钮
选择按钮所在的位置
每个网站所有者都希望 CTA 元素能够脱颖而出并迅速吸引访问者的注意力。为了实现此效果，您需要在按钮周围使用负空间。页面内容和 CTA 元素之间应该留有一些空间。有时此规则不是必需的，例如“添加到购物车”按钮的情况，但它通常会提高效率。
记住平衡很重要。如果我们的目标是将 CTA 元素和内容组合成一个单一的构图，那么负空间应该与按钮的大小成比例。可能需要多次尝试才能获得可接受的结果。
建议：
考虑 CTA 元素周围的空间量。设计不应该由杂乱的元素组成。
要确定负空间的大小，请使用黄金分割率或三分法则。
负空间应该使 CTA 元素从页面的其余内容中脱颖而出。
确定尺寸和颜色
CTA元素的大小是一个重要参数。如果按钮太小，它将会淹没在页面上的其他信息中而无法发挥其功能。如果 CTA 元素太大，它将会遮盖页面上的其他内容。理想的情况是，按钮在其他元素的背景下引人注目，但同时又不会掩盖其他元素。
颜色的选择取决于按钮的大小。如果计划将 CTA 元素设置得较大，则需要选择一种与整体配色方案差别不大，但与背景形成对比的颜色。对于小按钮，与主配色方案形成对比的明亮颜色会效果很好。但即使在这种情况下，CTA 元素的颜色也不应该在页面设计中过于突出，而应该与其他元素相结合。
建议：
CTA 元素应该是页面上最大的元素。
一个小按钮需要对比的色调。
对比度较低的颜色适合较大的 CTA 元素。
CTA 元素应该引人注目，但不会影响整体外观。
编写文本
整个 CTA 元素的有效性取决于其上的文本措辞。例如，“立即购买”这句话可能会给用户带来压力并且造成侵扰。更加中性的“添加到购物车”缺乏这种负面含义。还值得注意的是文本的大小。较短的“试用”消息比较长的“免费试用服务”消息更好。
CTA 元素上的文本不应复杂且令人困惑。页面访问者应该一眼就明白点击按钮后会发生什么。如果文本可以用两种方式理解，这将对转换产生负面影响。 CTA元素上最好使用大字体，但要与按钮大小协调，易于阅读。
建议：
文字必须清晰。
最好选择更大、更显眼的字体。
CTA 元素上的文本必须真正唤起行动。
登陆页面设计
登陆页面设计2
CTA 元素采用“严格”的蓝色，具有经典的按钮形状（带有阴影和体积效果）。为了突出按钮的对比，我们在按钮下方使用了中间色调的“衬里”。此外，在这个区域，还设置了用户行动号召：“选择”和“搜索”。
CTA 元素上的铭文清晰明确，采用统一的风格，仅在突出显示方面有所不同。文字颜色与按钮颜色形成对比，并与背景颜色相匹配。
请注意 Ozon 页面的配色方案，它做得相当“适度”，没有过多的色彩。这种“心理”技巧是故意为之——用户认为它有一定的可靠性，而开发人员并不想用鲜艳的装饰来吸引注意力。通过图 危地马拉移动数据库 像展示服务运行情况，可以使信息更容易被感知。
也讀吧！
“畅销标题：20 个实例”
阅读更多
如何创建行动号召按钮
选择按钮所在的位置
每个网站所有者都希望 CTA 元素能够脱颖而出并迅速吸引访问者的注意力。为了实现此效果，您需要在按钮周围使用负空间。页面内容和 CTA 元素之间应该留有一些空间。有时此规则不是必需的，例如“添加到购物车”按钮的情况，但它通常会提高效率。
记住平衡很重要。如果我们的目标是将 CTA 元素和内容组合成一个单一的构图，那么负空间应该与按钮的大小成比例。可能需要多次尝试才能获得可接受的结果。
建议：
考虑 CTA 元素周围的空间量。设计不应该由杂乱的元素组成。
要确定负空间的大小，请使用黄金分割率或三分法则。
负空间应该使 CTA 元素从页面的其余内容中脱颖而出。
确定尺寸和颜色
CTA元素的大小是一个重要参数。如果按钮太小，它将会淹没在页面上的其他信息中而无法发挥其功能。如果 CTA 元素太大，它将会遮盖页面上的其他内容。理想的情况是，按钮在其他元素的背景下引人注目，但同时又不会掩盖其他元素。
颜色的选择取决于按钮的大小。如果计划将 CTA 元素设置得较大，则需要选择一种与整体配色方案差别不大，但与背景形成对比的颜色。对于小按钮，与主配色方案形成对比的明亮颜色会效果很好。但即使在这种情况下，CTA 元素的颜色也不应该在页面设计中过于突出，而应该与其他元素相结合。
建议：
CTA 元素应该是页面上最大的元素。
一个小按钮需要对比的色调。
对比度较低的颜色适合较大的 CTA 元素。
CTA 元素应该引人注目，但不会影响整体外观。
编写文本
整个 CTA 元素的有效性取决于其上的文本措辞。例如，“立即购买”这句话可能会给用户带来压力并且造成侵扰。更加中性的“添加到购物车”缺乏这种负面含义。还值得注意的是文本的大小。较短的“试用”消息比较长的“免费试用服务”消息更好。
CTA 元素上的文本不应复杂且令人困惑。页面访问者应该一眼就明白点击按钮后会发生什么。如果文本可以用两种方式理解，这将对转换产生负面影响。 CTA元素上最好使用大字体，但要与按钮大小协调，易于阅读。
建议：
文字必须清晰。
最好选择更大、更显眼的字体。
CTA 元素上的文本必须真正唤起行动。