modal-design-in-web-design

روند طراحی پنجره مدال در طراحی وب سایت

روند طراحی پنجره مدال در طراحی وب سایت

روند طراحی پنجره مدال در طراحی وب سایت – مدال ها، پنجره های پاپ آپی هستند که بروی صفحه وب و بجای باز شدن یک صفحه یا تب جدید ظاهر می شوند. مدال ها معمولا سبب ایجاد کمی تیرگی در پس زمینه صفحه می شوند تا در این صورت بتوان توجه کاربر را به پاپ آپ مربوطه جلب کرد.

اغلب سایت ها از مدال ها بعنوان (CTA (Call To Action استفاده می کنند. هرچند از مدال ها می توان برای هرگونه کاربردی بهره گرفت. امروزه در بسیاری از سایت ها از مدال ها جهت ثبت نام اولیه و موارد مشابه می توان استفاده نمود.
در زیر نگاهی به مدال ها و اینکه چگونه کار می کنند می اندازیم و همچنین بررسی می کنیم که چرا باید از آن ها استفاده نمود.

پیش زمینه تیره و مناطق قابل کلیک
پنجره های مدال از یک استراتژی طراحی ساده و بدون پیچیدگی پیروی می کنند. آن ها معمولا از یک پیش زمینه تیره برای صفحه جهت ایجاد توجه در متن مدال استفاده می کنند. هرچند بایستی در این نوع طراحی توجه داشت که فضای پیش زمینه کاملا تیره و سیاه نباشد، زیرا در اینصورت صفحه کمی ترسناک بنظر خواهد رسید. طراحی باید بگونه ای باشد که صفحه پیش زمینه علیرغم دیده شدن تار باشد، که این میزان بنا به نیاز می تواند بین ۵۰ تا ۹۰ درصد باشد.

همچنین کاربر می بایست قادر باشد تا با کلیک بروی صفحه بتواند مدال را حذف کند. بکارگیری این موارد اجباری نیستند، اما بکار نگرفتن آنها نیز باعث ایجاد منظره ای ناخوشایند برای کاربر می شود. معمولا برای مدال یک دکمه بسته شدن در نظر گرفته می شود، اما باید این امکان برای کاربر در نظر گرفته شود تا با کلیک بروی صفحه بتواند مدال را حذف کند. در برخی مدال ها از افکت های انیمیشنی برای ظاهر شدن در صفحه استفاده می شود، استفاده از انیمیشن ها بسیار مناسب است زیرا از بد بودن ظهور ناگهانی یک مدال بروی صفحه می کاهد.

روند طراحی پنجره مدال در طراحی وب سایت

ایجاد پنجره مدال بصورت slide، Fade یا bounce برای دید کاربر مناسب است و بهتر است از انیمیشن های بیرون جهنده استفاده نشود. اکثر کاربران از دیدن مدال ها چشم پوشی می کنند و بنابراین طبعا علاقه ای به دیدن یک مدال انیمیشن با زمان سه ثانیه را هم نخواهند داشت، مدال را سریعا در برابر آنها قرار دهید و بگذارید انتخاب کنند که آنرا بخوانند یا ببندند.
طراحی مدال ها از یک سایت به سایت دیگر متفاوت است، اما در بیشتر موارد از پیش زمینه سفید با متن تیره استفاده می شود، این ساده ترین راه برای طراحی یک مدال است.
موارد گفته شده تا اینجا متداول هستند و در بیشتر موارد بکار گرفته می شوند، اما همواره بیاد داشته باشید که می توان برای طراحی از روش های خلاقانه بسیاری بهره جست.

تکنیک های نمایش

اکثریت قریب به اتفاق مدال های پاپ اپ چند ثانیه پس از لود صفحه فرآخوانی می شوند. بیشتر کاربران حتی برای لحظه ای جهت خواندن مدال ها وقت ندارند. بنابراین، این روش بدترین روش نمایش مدال است مگر آن که برای چیزهایی مانند کوکی ها و یا adblock ها بکار روند.
در زیر به متداول ترین تکنیک ها اشاره خواهد شد:
– مدال های موجود در صورتی که کاربر موس را در صفحه رها کند، ظاهر شوند.
– مدال های زمان دار که بعد از x دقیقه/ ثانیه اجرا می شوند.
– مدال های موقعیتی که هنگامی که کاربر توسط اسکرول به محل مورد نظر می رسد اجرا می شوند.
مقایسه طراحی مدال با CSS و JS
پلاگین های جاوااسکریت دارای استایل و کنترل بسیار زیادی هستند، معمولا این نوع از پلاگین ها جهت استفاده پیشنهاد می شوند. هرچند CSS های خالص هم می توانند دارای سازگاری بیشتری باشند.

در زیر به تعدادی از مدال های جاوااسکریپتی گه همگی رایگان هستند اشاره شده است:
Lean modal
یک پلاگین jQuery، که جهت سفارشی سازی بسیار ساده می باشد. Lean Modalدارای یک کتابخانه کوچک می باشد که آنرا تقریبا برای استفاده در هرگونه سایتی مناسب می سازد، البته Lean Modal از embededd content ها و slide show ها پشتیبانی نمی کند، پس نتیجتا برای محتواهای پویا مناسب نمی باشد.

روند طراحی پنجره مدال در طراحی وب سایت

Remodal

این پلاگین پا را یک قدم فراتر گذاشته و دارای انیمیشن های سفارشی CSS3 نیز می باشد. سبک طراحی این نوع پلاگین بسیار ساده بوده و برای سفارشی سازی مناسب می باشد. این پلاگین یکی از ساده ترین پلاگین ها جهت استفاده است.

روند طراحی پنجره مدال در طراحی وب سایت

Simple Modal

اگر در جستجوی پلاگین کم نظیر در ساخت و طراحی هستید این پلاگین مختص شما خواهد بود. این پلاگین در حال حاضر رایگان می باشد. البته میزان تیرگی پس زمینه صفحه زیاد مناسب نیست که می توان آنرا مطابق دلخواه سفارشی نمود. simple modal با embededd content، iframe، درخواست های Ajax و هرچه که شما نیاز دارید میتواند بخوبی کار کند.

روند طراحی پنجره مدال در طراحی وب سایت

اگر میخواهید از مدال های طراحی شده تنها با CSS استفاده کنید در زیر منابعی برای شما معرفی شده است:
0 پاسخ

دیدگاه خود را ثبت کنید

تمایل دارید در گفتگوها شرکت کنید؟
در گفتگو ها شرکت کنید.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

This site uses Akismet to reduce spam. Learn how your comment data is processed.