أزرار CTA ومناطق الانتباه

1) دور CTA والمبادئ

1. خطوة رئيسية لكل شاشة. يجب أن تكون CTA الأولية واضحة وفريدة من نوعها.
2. السياق → العمل. هناك دائمًا تفسير موجز «ماذا سيحدث بعد ذلك» لاتفاقية التجارة التفضيلية.
3. الرؤية بدون عدوان. على النقيض ≥ AA، الحجم الكافي والنص القابل للقراءة - بدلاً من التأثيرات البراقة.
4. الاتساق. نفس CTAs تتصرف بنفس الطريقة على جميع الشاشات.
5. الأمن. CTAs المحفوفة بالمخاطر مصحوبة بالتأكيد أو التراجع.

2) التسلسل الهرمي لـ CTA

Primary - key page action («Place a bet», «Top up», «Confirm»). 1 كمبيوتر شخصي.
الخطوة الثانوية - البديلة أو المساعدة («التفاصيل»، «طريقة التغيير»).
ثالثي - أزرار نصية/أشباح بأقل وزن بصري.
نمط مدمر - منفصل (رمز اللون/التحذير) + تأكيد/التراجع.

القاعدة: إذا كان هناك أكثر من CTA «قوي» على الشاشة، فمن المحتمل أن يكون هناك خيار بدون هدف. إعادة تصميم التدفق.

3) كتابة CTA

الفعل + كائن، 2-4 كلمات: «ضع رهانًا»، «جدد التوازن»، «ضع حدًا».
التفاصيل: «إخراج 2000 ₴» أفضل من «إرسال».
تجنب النفي المزدوج («لا تلغي») والاستعارات الغامضة.
للإجراءات المحفوفة بالمخاطر - العنوان الفرعي 1: «بدون تأكيد، يمكنك إلغاء 5 ثوانٍ».

4) الأبعاد والشكل والتباين

الحد الأدنى لمنطقة النقر: ≥ 44 × 44 px (اللمس)، ≥ 32 × 32 px (سطح المكتب).
ارتفاع الزر: 40-48 بكسل ؛ دائرة نصف قطرها 10-12 بكسل ؛ int. المسافات الأفقية 16-20 px.
التباين بين النص والخلفية: WCAG AA ؛ لا تعتمد فقط على اللون - استخدم أيقونة/ملصق.
أرقام الجدول للكميات/المعامل: 'الخط-المتغير-الرقم: الجدول-nums ؛ '.

5) الدول والتعليقات

Hover/Focus/Active - مرئي وقابل للتمييز (حلقة التركيز لا تختبئ).
مشغول (التحميل): استجابة فورية ≤ 100 مللي ثانية، دوار/هيكل عظمي بدلاً من «الصمت».
معاق: ليس فقط «رمادي» - شرح سبب عدم توفره (تلميح الأدوات/inline).
التراجع/تأكيد: بالنسبة لـ CTAs المدمرة - إما وسيلة تأكيد أو لوحة مع Undo 5-10 ثانية.

html
<button class =" btn btn--primary" aria-busy = "false" id = "cta "> Bid </button>
<script>
const cta = document. getElementById('cta');
cta. addEventListener('click', async () => {
cta. setAttribute('aria-busy','true'); cta. disabled = true ;//instant try {
const r = await fetch('/api/bet', {method:'POST', headers:{'Idempotency-Key':crypto. randomUUID()}});
if(!r.ok) throw new Error();
//success toast/navigation
} catch {
//show reason and suggest Retry
} finally {
cta. disabled = false; cta. setAttribute('aria-busy','false');
}
});
</script>

6) مناطق الانتباه (سطح المكتب) ومناطق الإبهام (متنقلة)

أنماط النظرة: نمط F/Z، النقاط الساخنة: أعلى اليسار (العنوان)، أعلى اليمين (الثانوي)، أسفل الشاشة (النهاية).

مضيف Primary-CTA:

فوق المنعطف للشاشات القصيرة أو في أسفل النموذج عند خط الرؤية،
لوحة «لزجة» في أسفل الهاتف المحمول (منطقة الإبهام).
«الإبهام» المتحرك: 1/3 السفلي من الشاشة أكثر ملاءمة، والحافة اليمنى/اليسرى تعتمد على اليد المهيمنة (افتراضيًا - الوسط السفلي/اليمين).

لوحة تأكيد لزجة (جوال):

html
<footer class = "sticky-cta" role = "region" aria-label = "Action">
<div class = "sum"> Bid: 200 ₴</div>
<button class =" btn btn--primary "> Confirm </button>
</footer>

<style>
.sticky-cta{position:sticky; bottom:0; display:flex; gap:12px; align-items:center;
padding:12px 16px; background:var(--bg-elevated); box-shadow:0 -8px 24px rgba(0,0,0,.12)}
.sticky-cta. btn{flex:1}
</style>

7) التنسيب والمسافات

فصل CTA الأولي عن العناصر الثانوية ذات المساحة البيضاء (16-24 px).
لا تضع اثنين أساسيين بجانب بعضهما البعض - أحدهما سيكون خيارًا «خاطئًا».
على النماذج: CTA بعد الحقل الأخير ؛ ثانوي - يسار/تحت CTA («عودة»، «إلغاء»).
على البطاقات/البلاط: CTA أسفل اليمين ؛ للقوائم الطويلة - inline-CTA على كل بطاقة.

8) الرسوم المتحركة وأنماط الحركة

المدخلات/المخرجات: 120-180 مللي ثانية، «التعتيم/التحويل» (بدون مخفوقات تخطيط).
تأثير الصحافة: التخفيض إلى 96-98٪ + الظل → «النقر محسوس».
من أجل «النجاح»: كشوف دقيقة قصيرة ≤ 400 مللي ثانية ؛ لتقليل الحركة - رمز ثابت.
تجنب تأثيرات الوميض التي لا نهاية لها (نمط مضاد للعب المسؤول).

9) A11y ولوحة المفاتيح

«role =» زر «» ليست مطلوبة مع الأصلي «<زر>».
حلقة التركيز مرئية ؛ ترتيب علامة التبويب منطقي. أدخل/الفضاء تفعيل CTA.
الحذاء المشغول بالأسلحة بالنسبة للمركز، استخدم "role =" status "في المنطقة الحية.
نص الزر متاح SR ؛ الأيقونات - مع أغنية مخفية =» حقيقية» وليست الناقل الوحيد للمعنى.

10) المقاييس والتجارب

CTR CTA، التحويل بعد النقر، الوقت للنقر من المظهر إلى النقر.
نقرة → عمق التمرير: نسبة النقرات التي حدثت «فوق المنعطف «/» تحت المنعطف ».
مناطق الخرائط الحرارية (الحواسيب المكتبية/العصابات) ؛ وصول الإبهام (الغوغاء).
إلغاء/التراجع عن سعر CTAs المحفوف بالمخاطر.
A/B: نص، لون/تباين، حجم، موقع، لوحة لزجة مقابل وضع ثابت.

11) رموز نظام التصميم (مثال)

json
{
"cta": {
"height": { "sm": 40, "md": 44, "lg": 48 },
"radius": 12,
"px": { "sm": 14, "md": 16, "lg": 20 },
"gap": 8,
"icon": 18,
"focusRing": { "width": 2, "offset": 2 },
"motion": { "pressMs": 90, "hoverMs": 160, "inMs": 160, "outMs": 120 }
},
"sticky": { "enabled": true, "shadow": "0 -8px 24px rgba(0,0,0,.12)" },
"a11y": { "contrastAA": true, "tabularNums": true }
}

يحدد CSS مسبقًا:

css
.btn{height:44px; padding:0 16px; border-radius:12px; display:inline-flex; gap:8px; align-items:center; justify-content:center}
.btn--primary{background:var(--accent); color:var(--on-accent); font-weight:600}
.btn--ghost{background:transparent; border:1px solid var(--border); color:var(--fg)}
.btn[aria-busy="true"]{pointer-events:none; opacity:.85}
.btn:focus-visible{outline:2px solid var(--focus-ring); outline-offset:2px}

12) أنماط iGaming

قم بالرهان (الابتدائي): أظهر الكمية والمعامل جنبًا إلى جنب ؛ عند التأخير> 3 ث - «في انتظار التأكيد»... + إعادة تجربة آمنة.
الإيداع: شاشة متنقلة لاصقة - CTA («تجديد»)، ثانوية - «طريقة التغيير» ؛ اللجان/المواعيد النهائية المرئية القريبة.
النقود: يتم التقاط CTA على شاشة المباراة/القسيمة ؛ يبين دائما مبلغ النقود الحالي ؛ قبل التنفيذ.
وضع حد: CTA ليس عدوانيًا ؛ في مكان قريب - «سيدخل حيز التنفيذ في».... تباين AAA، لا وميض.
البطولات: CTA «انضم» على بطاقة البطولة + «القواعد/الجوائز» الثانوية.

13) أنتيباترن

اثنان من CTAs الأولية القريبة (Bet and Buy Bonus) هما منافسة معرفية.
«الرمادي» معطل بدون تفسير.
انتباه لا نهاية له الرسوم المتحركة والغمز.
زر يغير الترميز ويأخذ التركيز بعيدًا.
CTA أقل من «الديكور» الكبير الذي ينحني.
أيقونة بدلاً من النص (بدون تسمية) في الأماكن الحرجة.

14) مقتطفات التحليلات

js function trackCTA(name, meta={}) {
window. dataLayer?.push({ event:'cta_click', name,...meta });
}
//example document. querySelector('#deposit'). addEventListener('click', ()=>{
trackCTA('deposit_click', { placement:'sticky_footer', amount:getAmount() });
});

15) قائمة QA المرجعية

المعنى والتسلسل الهرمي

يوجد بالضبط CTA أساسي واحد على الشاشة ؛ الثانوية لا تتعارض في الوزن.
نص الاتفاقية واضح دون نفي مزدوج ؛ في مكان قريب - ماذا سيحدث بعد ذلك.

التوافر

Focus-ring see; إدخال/عمل الفضاء ؛ «مشغول» في الحذاء.
تباين النص/الخلفية ≥ AA ؛ الأيقونة ليست حامل المعنى الوحيد.

السلوك

رد فوري ≤ 100 مللي ثانية ؛ الدولة المشغولة وريتري على الإخفاقات.
بالنسبة للمخاطر، التأكيد أو التراجع.
يلتصق Sticky-CTA بشكل صحيح على الهاتف المحمول، ولا يتداخل مع المحتوى.

الإقامة

CTA في منطقة الإبهام (الغوغاء) أو على خط البصر (سطح المكتب).
المسافة الفاصلة الكافية (16-24 بكسل) من العناصر المجاورة.

المقاييس

تمت إزالة CTR، التحويل بعد النقر، الوقت للنقر، معدل التراجع.
هناك تجارب النص/اللون/الحجم/الموقع.

16) التوثيق في نظام التصميم

Компоненты: "ButtonPrimary" و "ButtonSecondary" و "ButtonGhost' و" StickyCTA "و" UndoBar ".
رموز الحجم/التباين/الرسوم المتحركة، أمثلة على كتابة الإعلانات.
الأنماط: «واحد أساسي لكل شاشة»، «لزج على الهاتف المحمول»، «تأكيد/التراجع عن المخاطر».
افعل/لا تفعل المعرض مع الشاشات الحقيقية والخرائط الحرارية.

موجز موجز

تعمل CTA عندما يكون لها غرض ومكان ومعنى: خطوة واحدة رئيسية، نص واضح، تباين كافٍ، موقع صحيح في منطقة الانتباه/الإبهام، وتعليقات صادقة. التقط هذا في نظام التصميم، وقياس السلوك - وتحول النقرات إلى إجراءات واثقة ومتعمدة دون أخطاء وتهيج.

أزرار CTA ومناطق الانتباه

التوافر

السلوك

الإقامة

المقاييس

موجز موجز

اتصل بنا

اتصال سريع

سيتم تحديث الفيديو قريبًا

نحن مشغولون جدًا بالمشاريع في الوقت الحالي