دکمه‌های فراخوان CTA Buttons

هدف از این الگو، یکپارچه‌سازی رفتار و ظاهر دکمه‌های اصلی (Call to Action) در تمامی محصولات آروان است. با رعایت این استاندارد، کاربران در هر لحظه مهم‌ترین اقدام صفحه را تشخیص داده و از سردرگمی ناشی از تعدد اکشن‌های هم‌سطح جلوگیری می‌شود.

قوانین سلسله‌مراتب اکشن‌ها

در سیستم طراحی سرخآب، اولویت بصری دکمه‌ها مستقیم با مکان قرارگیری آن‌ها در ساختار صفحه مرتبط است.

دکمه اصلی

این دکمه نمایانگر هدف نهایی صفحه است و سنگین‌ترین وزن بصری را دارد.

• محل قرارگیری: فقط و فقط در کامپوننت Subheader و بالای صفحه صفحه مجاز است.
• محدودیت: در هر صفحه تنها یک دکمه Primary مجاز است.
• کاربرد: فرآیندهای ایجادی یا نهایی (مانند: ساخت دامنه جدید، ایجاد سرور، ذخیره نهایی).

قانون طلایی: استفاده از دکمه Primary در بدنه (Body) صفحه و خارج از Subheader ممنوع است.

دکمه ثانویه (مشکی)

برای اکشن‌های کلیدی که در بدنه صفحه قرار دارند و وزن بصری بالایی نیاز دارند.

• محل قرارگیری: داخل سکشن‌ها، انتهای فرم‌ها یا کنار جداول.
• کاربرد: اقداماتی که در کانتکس محلی صفحه اصلی هستند (مانند: افزودن رکورد، ارسال درخواست).

راهنمای طراحی

بایدها

• تمرکز کاربر: همیشه کاربر را به سمت مهم‌ترین اقدام (CTA) هدایت کنید.
• استفاده از UI Kit: حتما از کامپوننت‌های رسمی دکمه در UI Kit سرخآب استفاده کنید تا ویژگی‌های Hover و Active یکسان باقی بمانند.
• متن کوتاه: عنوان دکمه باید یک فعل دستوری و کوتاه باشد (مثلا ایجاد به جای برای ایجاد کلیک کنید).

نبایدها

• تضاد بصری: از قرار دادن دو دکمه Primary در کنار هم خودداری کنید. این کار باعث فلجِ تصمیم‌گیری (Decision Paralysis) در کاربر می‌شود.

رفتار در حالت‌های خاص

• Loading: در هنگام پردازش، دکمه باید به حالت Loading تغییر کرده و غیرفعال (Disabled) شود تا از کلیک‌های تکراری جلوگیری شود.
• Disabled: اگر پیش‌شرطی برای انجام عملیات وجود دارد (مثلا فرم ناقص است)، دکمه را غیرفعال نمایش دهید.