اصول طراحی بخش اسلایدر سایت

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

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

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

۱. تصاویر تمام عرض با ارتفاع خودکار

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

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

۲. تصاویر تمام عرض با ارتفاع ثابت

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

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

۳. تصاویر با ارتفاع ثابت و عرض خودکار

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

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

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

۴. استفاده از چند تصویر برای چند سایز

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

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

در تیم طراحی ما، از شش ابعاد استاندارد خود استفاده می‌کنیم:

• سایز xs با عرض 360
• سایز sm با عرض 640
• سایز md با عرض 768
• سایز lg با عرض 1024
• سایز xl با عرض 1280
• سایز xxl با عرض 1536

به‌طور پیش‌فرض، ابعادی که برای طراحی‌های اصلی ما در نظر گرفته شده است، برای ایجاد ریسپانسیویی کلی در تمام بخش‌های وب‌سایت ما مورد استفاده قرار می‌گیرد. اما در مورد طراحی اسلایدر صفحه اصلی یا بنرهای Hero، معمولاً به سایت‌هایی که حساسیت بالایی دارند امکان آپلود ۳ تصویر ارائه می‌شود که کافی است. به این ترتیب، نیازی به طراحی تصاویر برای هر ۶ سایز وجود ندارد و می‌توان با این ۳ سایز، رضایت کاربران را جلب کرده و تجربه خوبی را فراهم کرد. برای بیشتر سایت‌ها نیز ممکن است تنها ۲ تصویر کافی باشند.

اصولاً، جدا کردن تصویر مناسب برای موبایل و تصویر مناسب برای دسکتاپ به تنهایی به اندازه‌ای مهم است که به تجربه کاربری بهبود می‌بخشد و تا حد زیادی می‌تواند تجربه مطلوبی را برای کاربران فراهم کند.

سخن پایانی

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

در پایان، بهترین روش برای طراحی تصاویر برای وب‌سایت‌ها، توجه دقیق به نیازهای ویژه و نوع سایت مورد نظر است. انتخاب ابعاد مناسب و توجه به ریسپانسیویی و تجربه کاربری می‌تواند به بهبود عملکرد وب‌سایت کمک کند.

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