تم تاریک
مودال Modal
مودال (Modal) یک لایهی موقت و متمرکز روی محتواست که برای نمایش اطلاعات مهم، دریافت تایید کاربر یا انجام یک اقدام مشخص بدون ترک کردن صفحهی فعلی استفاده میشود. زمانی که مودال باز میشود، تمرکز کاربر روی همان وظیفه یا پیام قرار میگیرد و تعامل با سایر بخشهای صفحه تا زمان بستن یا تکمیل عملیات محدود میشود.
مودالها برای سناریوهایی مانند تایید یا حذف اطلاعات، نمایش پیامهای موفقیت یا خطا، دریافت ورودی از کاربر و انجام جریانهای کوتاه و متمرکز استفاده میشوند. محتوای مودال باید واضح، مختصر و مرتبط با اقدام اصلی باشد تا کاربر بتواند بدون سردرگمی تصمیمگیری یا تعامل موردنظر را انجام دهد.
نمونه زنده
انواع
| نوع | کاربرد |
|---|---|
Default | برای سناریوهای عادی و مثبت، مثل تایید، ذخیرهسازی یا ادامه دادن یک عملیات. |
Danger | برای سناریوهای حساس یا مخرب، مثل حذف، لغو قطعی یا اقدامهای غیرقابل بازگشت. |
در حالت Default، دکمهی اصلی مودال با ظاهر دکمه اصلی مثبت و نوشتار مثبت نمایش داده میشود؛ مقدار پیشفرض آن «تایید» است. در حالت Danger، دکمهی اصلی با ظاهر دکمه اصلی مخرب و نوشتار منفی نمایش داده میشود؛ مقدار پیشفرض آن «حذف» است.
اگر مودال از محتوای داخلی پیشفرض استفاده کند، تغییر بین Default و Danger روی محتوای بدنه نیز اثر میگذارد؛ در حالت Default، آیکون و رنگ محتوا بهصورت موفقیت نمایش داده میشود و در حالت Danger، آیکون و رنگ محتوا به حالت خطا تغییر میکند.
آناتومی
با هاور روی شمارههای روی مودال (یا آیتمهای لیست کنار آن)، توضیح هر بخش بهشکل تولتیپ نمایش داده میشود.
1
متن عنوان آزمایشی 2
این یک متن آزمایشی به عنوان زیرنویس است 3
4
5
6
یک متن آزمایشی 7
8
9
10
- 1Header
- 2Title
- 3Caption
- 4Close Button
- 5Body
- 6Icon
- 7Description
- 8Footer
- 9Primary CTA
- 10Cancel Button
- هدر: بخش بالایی مودال است که عنوان اصلی، کپشن اختیاری و دکمه بستن در آن قرار میگیرد.
- عنوان: عنوان اصلی مودال است و باید موضوع یا هدف مودال را بهشکل واضح بیان کند.
- کپشن: متن کوتاه و اختیاری زیر عنوان است که توضیح تکمیلی درباره محتوای مودال ارایه میدهد.
- دکمه بستن: دکمهای برای بستن مودال بدون انجام اقدام اصلی است.
- بدنه: بخش محتوای اصلی مودال است و میتواند از محتوای پیشفرض یا محتوای سفارشی استفاده کند.
- آیکون: آیکون اختیاری داخل بدنه است که وضعیت محتوا را مثل موفقیت یا خطا نشان میدهد.
- توضیحات: متن توضیحی اصلی مودال است که پیام، هشدار یا اطلاعات موردنیاز را به کاربر منتقل میکند.
- فوتر: بخش پایینی مودال است که اقدامهای اصلی و ثانویه در آن قرار میگیرند.
- اقدام اصلی: دکمه اقدام اصلی مودال است و بسته به حالت
DefaultیاDangerمیتواند مثبت یا مخرب باشد. - دکمه لغو: دکمه لغو عملیات است و برای بستن مودال یا انصراف از انجام اقدام استفاده میشود.
ساختار
کامپوننت مودال از سه بخش اصلی هدر، بدنه و فوتر تشکیل شده است. بخش هدر شامل عنوان، کپشن اختیاری و دکمه بستن است. در بخش بدنه میتوان از محتوای پیشفرض یا محتوای سفارشی استفاده کرد و فوتر شامل اقدام اصلی و دکمه لغو عملیات است.
عرض مودال بسته به سایز انتخابشده تغییر میکند، اما ساختار داخلی و فاصلهگذاری عناصر در تمامی حالتها یکپارچه باقی میماند.
با هاور روی بخشهای مودال (یا روی آیتمهای لیست زیر آن)، اندازهی مرتبط با هر بخش نمایش داده میشود.
متن عنوان آزمایشی
24px
این یک متن آزمایشی به عنوان زیرنویس است
16px
32px32px
8px
72px
24px
16px
16px
48px48px
یک متن آزمایشی
16px
8px
40px
40px
16px
16px
16px
- 24pxTitle Height
- 32pxClose Button Height
- 16pxCaption Height
- 8pxHeader Gap
- 72pxHeader Height
- 24pxTitle Right Spacing
- 16pxHeader Inner Padding
- 48pxIcon Size
- 16pxFooter Buttons Gap
- 40pxButton Height
- 16pxFooter Vertical Padding
- 8pxCorner Radius
- 16pxBody Gap
- AllAll Sizes
اندازه
مودال در سه اندازهی Small، Medium و Large قابل استفاده است. تغییر سایز فقط روی عرض مودال اعمال میشود و ساختار داخلی، فاصلهگذاری بخشها و چیدمان عناصر در همه اندازهها یکسان باقی میماند.
| اندازه | مقدار |
|---|---|
Small | 456px |
Medium | 600px |
Large | 800px |
چیدمان
چیدمان مودال به نوع محتوا و هدف نمایش آن بستگی دارد:
- در سناریوهای اطلاعرسانی یا تایید عملیات، محتوای اصلی در بدنه قرار میگیرد و اقدامها در فوتر نمایش داده میشوند تا مسیر تصمیمگیری کاربر واضح باشد.
- در سناریوهای حساس یا مخرب، پیام اصلی باید کوتاه، شفاف و در مرکز توجه باشد و دکمه اقدام اصلی با تاکید مناسب از دکمه لغو قابل تشخیص باشد.
- در مودالهای دارای محتوای سفارشی، ساختار هدر و فوتر ثابت میماند، اما محتوای بدنه میتواند بسته به نیاز جایگزین شود.
همترازی
مودال بهشکل پیشفرض در مرکز صفحه نمایش داده میشود تا توجه کاربر روی محتوای آن متمرکز شود.
محتوای داخلی مودال، شامل عنوان، توضیحات و اقدامها، باید بر اساس ساختار صفحه و نوع محتوا تراز و گروهبندی شوند تا خوانایی و درک محتوا حفظ شود.
در مودالهای دارای محتوای کوتاه یا پیامهای تاییدی، محتوا بهشکل مرکزی نمایش داده میشود. در محتوای طولانیتر یا فرمها، تراز متنی و ساختار محتوا میتواند بهصورت راستچین و چندبخشی نمایش داده شود.
نوشتار
هدر
- عنوان مودال باید کوتاه، واضح و مستقیم باشد و هدف یا نتیجهی مورد انتظار را بهصورت شفاف بیان کند.
- در سناریوهای حساس یا مخرب، عنوان باید کاربر را از نتیجهی اقدام آگاه کند و از عبارتهای مبهم یا کلی پرهیز شود.
- کپشن اختیاری است و در صورت استفاده، باید توضیح کوتاه و تکمیلی دربارهی موضوع مودال ارایه دهد، نه تکرار عنوان.
بدنه
- متن بدنه باید مختصر، قابل اسکن و متمرکز بر اقدام اصلی مودال باشد.
- در مودالهای تاییدی یا هشدار، متن باید بهوضوح توضیح دهد چه اتفاقی قرار است رخ دهد و نتیجهی اقدام کاربر چیست.
- در سناریوهای مخرب، پیام باید شفاف، بدون ابهام و همراه با لحن مناسب هشداردهنده نوشته شود تا کاربر بتواند با اطمینان تصمیم بگیرد.
- در متون طولانی، از ساختار خوانا و فاصلهگذاری مناسب استفاده کنید تا فهم محتوا دشوار نشود.
نکات تکمیلی
- متن دکمه اقدام اصلی باید بهشکل کامل همراستا با هدف مودال باشد و نتیجهی اقدام را شفاف بیان کند.
- از استفاده از متنهای کلی مثل «باشه» یا «ادامه» برای دکمه اقدام اصلی پرهیز کنید، مگر زمانی که زمینهی پیام واضح باشد.
- در مودالهای دارای اقدام مخرب، متن دکمه اقدام اصلی باید مستقیم و صریح باشد؛ مانند «حذف» یا «غیرفعالسازی».
- در شرایطی که مودال دارای محتوای سفارشی است، عنوان، متن و اقدامها باید از نظر لحن و ساختار نوشتاری با یکدیگر یکپارچه باشند.
آیکون
در بخش بدنه مودالها میتوان از آیکون برای تقویت مفهوم پیام و درک سریعتر وضعیت استفاده کرد.
آیکون باید ساده، قابل تشخیص و همراستا با نوع پیام باشد. رنگ آیکون نیز باید وضعیت مودال را بهشکل واضح منتقل کند؛ برای مثال رنگ سبز برای سناریوهای موفقیتآمیز و رنگ قرمز برای پیامهای خطا یا اقدامهای مخرب استفاده میشود.
از استفاده همزمان چند رنگ یا آیکونهای تزئینی و غیرضروری پرهیز کنید تا تمرکز کاربر روی پیام اصلی حفظ شود.