۹ قاعده اصلی برای گالری تصاویر واکنشگرا

طراحی واکنشگرا یکی از مهم‌ترین و ضروری‌ترین قسمت‌های پروسه توسعه وب به حساب می‌آید. یکی از بزرگ‌ترین مشکلاتی که طراحی وب واکنشگرا به همراه دارد، تصاویر است. بسیاری از افراد در رابطه با بهترین راه حل برای نمایش تصاویر روی وبسایت واکنشگرا صحبت می‌کنند، اما در رابطه با گالری تصاویر چه نظری دارید؟

ویژگی‌های گالری‌های تصاویر بسیار پیچیده‌تر از تنها یک عکس هستند، در اینجا حتی متغیرها و موارد بسیار بیشتری برای فکر کردن در این رابطه که چه زمانی یک گالری تصاویر را به صورت کامل واکنشگرا ایجاد کنیم وجود دارد. بیایید نگاهی به نکات کمکی برای پیاده‌سازی یک گالری تصاویر واکنشگرا بیاندازیم:

۱. اسلاید‌شو: اگر امکان دارد قسمت ناوبری را مخفی کنید

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

2. از تصاویر عمودی زیاد، دوری کنید

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

۳. از قدرت اشارات تاچ در موبایل و تبلت استفاده کنید

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

۴. از لایت‌باکس در موبایل دوری کنید

وقتی دوست دارید که جزئیات یک تصویر را به کاربر نمایش دهید استفاده از لایت‌باکس می‌تواند مفید و ارزنده باشد، اما وقتی که این موضوع به صفحاتی در اندازه موبایل و یا تبلت می‌رسد بهتر است که آن را غیرفعال کنید. این مورد باعث مشکلات بسیاری در تجربه کاربری می‌شود. اگر اتفاقی بیافتد و لایت‌باکس به درستی نمایش داده نشود، در نهایت تصویر نیز به درستی توسط کاربر مشاهده نمی‌شود. 

۵. هنگام استفاده از المان ناوبری آن را ساده کنید

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

۶. تصاویر و ویدیوها را با همدیگر ترکیب نکنید

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

۷. مطمئن شوید که تصاویر از حداکثر عرض‌شان تجاوز نمی‌کنند

این موضوع مهمی است به این دلیل که شما می‌توانید تصاویر را براساس اندازه‌شان مقیاس‌دهی کنید و در فضای مربوط به خود قرار‌شان دهید. در دستگاه‌های موبایل تصاویر معمولا باید کل عرض صفحه را بگیرند اما در صفحات بزرگ تر این مورد باید با دقت بیشتری قرار بگیرد. سعی کنید که اندازه تصاویر را به نسبت اندازه مرورگر تغییر دهید.

۸. مقیاس‌دهی به تصاویر

اگر موضوع مقیاس‌پذیری تصاویر را داشته باشید، مطمئن شوید که آن‌ها به صورت درست مقیاس‌دهی می‌شوند. بسیار نکته مهمی است که بتوانید بهترین ابعاد را برای تصاویرتان انتخاب کنید. بسیاری از اوقات یک مقدار درصدی برای یکی از ابعاد استفاده می‌شود و دیگر ابعاد به صورت auto مقداردهی می‌شوند. 

۹. استفاده از متن برای تصاویر (Caption) ممنوع!

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

در پایان

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

منبع