نمونه کاربرد قابلیت نسبت ابعاد
در طراحی رابط کاربری، فقط نمایش درست عناصر مهم نیست؛ پایداری چیدمان هنگام بارگذاری محتوا نیز اهمیت زیادی دارد.
یکی از مشکلات رایج در صفحههایی که از تصاویر آنلاین استفاده میکنند، پرش محتوا است.
این مشکل معمولاً زمانی دیده میشود که تصویرها با تأخیر بارگذاری شوند و تا قبل از لود کامل، فضای مشخصی برای آنها در نظر گرفته نشده باشد. در نتیجه، متنها و ویجتهای پایینتر ابتدا در یک موقعیت نمایش داده میشوند و بعد از دریافت تصویر، ناگهان جابجا میشوند.
در این آموزش، با دو موضوع مهم آشنا میشوید:
- چگونه با استفاده از نسبت ابعاد از پرش محتوا جلوگیری کنید
- چگونه نسبت ابعاد تصویر را بهدرستی محاسبه کنید
پرش محتوا چیست؟
پرش محتوا یعنی بخشی از صفحه ابتدا در یک موقعیت نمایش داده شود و بعد از بارگذاری یک عنصر دیگر، جای آن تغییر کند.
برای مثال، فرض کنید بالای یک کارت خبری، یک تصویر آنلاین قرار دارد و زیر آن عنوان و توضیحات نوشته شده است. اگر فضای تصویر از قبل مشخص نشده باشد، عنوان و توضیحات ابتدا بالاتر دیده میشوند. بعد از لود شدن تصویر، فضای آن اضافه میشود و متنها به پایین منتقل میشوند.
این رفتار باعث میشود کاربر هنگام خواندن یا لمس صفحه، با جابجایی ناگهانی عناصر روبهرو شود.
چرا پرش محتوا اتفاق میافتد؟
وقتی یک تصویر آنلاین هنوز بارگذاری نشده است، سیستم نمایش تا قبل از دریافت اطلاعات لازم، ممکن است اندازه دقیق آن را نداند.
اگر برای تصویر یا container آن فضای مشخصی تعریف نشده باشد، صفحه نمیداند چه مقدار فضا باید برای آن رزرو کند.
در نتیجه:
- ابتدا متنها و ویجتهای دیگر نمایش داده میشوند
- تصویر با تأخیر بارگذاری میشود
- فضای جدیدی به صفحه اضافه میشود
- عناصر پایینتر جابجا میشوند
این جابجایی همان چیزی است که به صورت پرش در محتوا دیده میشود.
نسبت ابعاد چگونه این مشکل را حل میکند؟
اگر نسبت ابعاد تصویر را از قبل بدانید، میتوانید پیش از بارگذاری خود تصویر، جای آن را در چیدمان رزرو کنید.
یعنی حتی اگر فایل تصویر هنوز دریافت نشده باشد، از همان ابتدا مشخص است که این بخش چه نسبتی از فضا را اشغال خواهد کرد. در این حالت، متنها و دکمههای پایین از ابتدا در محل درست خود قرار میگیرند و با رسیدن تصویر، دیگر جابجایی ناگهانی اتفاق نمیافتد.
مثال ساده
فرض کنید در یک لیست، چند کارت خبری دارید و هر کارت یک تصویر آنلاین در بالای خود دارد.
اگر نسبت ابعاد مشخص نشده باشد:
[عنوان]
[توضیحات]
[دکمه]
بعد از لود شدن تصویر، کارت به این شکل تغییر میکند:
[تصویر]
[عنوان]
[توضیحات]
[دکمه]
در این حالت، متن و دکمه به پایین هل داده میشوند.
اما اگر نسبت ابعاد از ابتدا مشخص شده باشد، از همان لحظه اول فضا رزرو میشود:
[فضای رزروشده برای تصویر]
[عنوان]
[توضیحات]
[دکمه]
و بعد از بارگذاری:
[تصویر]
[عنوان]
[توضیحات]
[دکمه]
در این حالت، فقط محتوای داخل فضای رزروشده کامل میشود و دیگر پرش بصری رخ نمیدهد.
این موضوع در چه جاهایی مهمتر است؟
استفاده از نسبت ابعاد برای رزرو فضا در این موارد بسیار مهم است:
- لیست خبرها یا مقالات
- کارتهای محصول
- گالری تصاویر
- اسلایدرها و بنرها
- صفحههایی که تعداد زیادی تصویر آنلاین دارند
- صفحههایی که کاربر هنگام بارگذاری در حال اسکرول یا خواندن متن است
مزایای رزرو فضا با نسبت ابعاد
استفاده درست از نسبت ابعاد چند مزیت مهم دارد:
- از جابجایی ناگهانی متنها و دکمهها جلوگیری میکند
- تجربه کاربری روانتر میشود
- ظاهر صفحه حرفهایتر دیده میشود
- احتمال لمس اشتباه به دلیل جابجایی عناصر کمتر میشود
- ساختار کارتها و لیستها منظمتر میماند
نسبت ابعاد چیست؟
نسبت ابعاد، رابطه بین عرض و ارتفاع یک تصویر یا ویجت است.
این نسبت معمولاً به صورت عرض:ارتفاع نوشته میشود.
برای مثال:
1:1یعنی عرض و ارتفاع برابر هستند16:9یعنی عرض 16 واحد و ارتفاع 9 واحد است4:3یعنی عرض 4 واحد و ارتفاع 3 واحد است3:2یعنی عرض 3 واحد و ارتفاع 2 واحد است
نسبت ابعاد اندازه واقعی تصویر را مشخص نمیکند، بلکه فقط تناسب بین عرض و ارتفاع را نشان میدهد.
برای نمونه، همه اندازههای زیر نسبت یکسان 16:9 دارند:
1600×900
1280×720
1920×1080
نحوه محاسبه نسبت ابعاد تصویر
برای محاسبه نسبت ابعاد، باید عرض و ارتفاع تصویر را داشته باشید.
سپس نسبت را به شکل زیر مینویسید:
عرض : ارتفاع
مثال اول
فرض کنید اندازه تصویر این باشد:
عرض: 1200
ارتفاع: 800
نسبت خام تصویر میشود:
1200:800
حالا برای سادهسازی، هر دو عدد را بر بزرگترین مقسومعلیه مشترک تقسیم میکنیم:
1200 ÷ 400 = 3
800 ÷ 400 = 2
پس نسبت نهایی برابر است با:
3:2
مثال دوم
عرض: 1600
ارتفاع: 900
نسبت خام:
1600:900
اگر هر دو عدد را بر 100 تقسیم کنیم:
16:9
مثال سوم
عرض: 500
ارتفاع: 500
نسبت:
1:1
این یعنی تصویر مربعی است.
محاسبه نسبت به صورت عددی
گاهی نسبت ابعاد را بهجای فرم عرض:ارتفاع به صورت یک عدد اعشاری هم در نظر میگیرند.
برای این کار، کافی است عرض را بر ارتفاع تقسیم کنید.
مثال:
1200 ÷ 800 = 1.5
این مقدار همان نسبت 3:2 را نشان میدهد.
مثال دیگر:
1920 ÷ 1080 = 1.777...
این عدد تقریباً معادل نسبت 16:9 است.
از کجا عرض و ارتفاع تصویر را پیدا کنیم؟
برای محاسبه نسبت ابعاد، ابتدا باید اندازه اصلی تصویر را بدانید. این اطلاعات معمولاً از یکی از این راهها به دست میآید:
- مشخصات فایل تصویر
- اطلاعات برگشتی از API
- متادیتای تصویر
- جزئیات فایل در سیستم
- ابزارهای طراحی یا ویرایش تصویر
اگر تصاویر یک بخش از یک منبع مشخص میآیند، بهتر است از ابتدا ابعاد استاندارد آنها را بدانید تا بتوانید نسبت مناسب را یکبار تعیین و در کل صفحه استفاده کنید.
اگر اندازه تصویر تغییر کند چه میشود؟
اگر تصویر را با حفظ تناسب کوچک یا بزرگ کنید، نسبت ابعاد آن تغییر نمیکند.
برای مثال، این اندازهها همگی نسبت 16:9 دارند:
1600×900
800×450
320×180
اما اگر فقط عرض یا فقط ارتفاع را تغییر دهید و تناسب حفظ نشود، تصویر ممکن است کشیده یا فشرده نمایش داده شود.
روش عملی برای استفاده در طراحی
اگر با تصاویر آنلاین کار میکنید، این روند ساده را در نظر بگیرید:
- عرض و ارتفاع اصلی تصویر را پیدا کنید
- نسبت ابعاد را محاسبه کنید
- در صورت نیاز، نسبت را ساده کنید
- همان نسبت را برای ویجت تصویر یا container آن تنظیم کنید
- اجازه دهید صفحه از ابتدا فضای لازم را برای تصویر رزرو کند
مثالهای کاربردی
تصویر محصول
1000×1000 ← 1:1
اگر همه تصاویر محصول مربعی هستند، بهتر است برای همه کارتها نسبت 1:1 در نظر بگیرید.
تصویر بنر
1200×675 ← 16:9
این نسبت برای بنرها و تصاویر عریض بسیار رایج است.
تصویر مقاله
900×600 ← 3:2
اگر کارتهای مقاله با این نوع تصویر ساخته میشوند، استفاده از همین نسبت باعث میشود همه کارتها ظاهر منظمتری داشته باشند.
نکات کاربردی
1. برای تصاویر تکرارشونده از نسبت ثابت استفاده کنید
اگر در یک لیست یا گالری، همه تصاویر از یک نوع هستند، بهتر است نسبت آنها را ثابت نگه دارید. این کار باعث میشود کل ساختار صفحه منظمتر باشد.
2. برای کارتها قبل از لود تصویر فضا رزرو کنید
اگر تصویر بالای کارت قرار دارد، حتماً بهتر است فضای آن از ابتدا مشخص باشد تا عنوان و توضیحات پایین کارت جابجا نشوند.
3. نسبت ابعاد را با اندازه واقعی اشتباه نگیرید
نسبت ابعاد فقط تناسب را مشخص میکند، نه اندازه نهایی نمایش را.
ممکن است دو تصویر با اندازههای متفاوت، نسبت یکسانی داشته باشند.
4. نسبتهای استاندارد خواناتر هستند
اگر نسبت تصویر را میدانید، بهتر است آن را به فرم ساده و قابل فهم بنویسید.
برای مثال، این فرم:
16:9
از این فرم خواناتر است:
1600:900
5. در صفحههای دارای محتوای زیاد، این موضوع مهمتر میشود
هرچه تعداد تصویرهای آنلاین بیشتر باشد، اهمیت رزرو فضا با نسبت ابعاد هم بیشتر میشود. در غیر این صورت، ممکن است کاربر بارها با جابجایی صفحه روبهرو شود.
جمعبندی
نسبت ابعاد فقط برای حفظ ظاهر تصویر نیست؛ یکی از کاربردهای مهم آن، جلوگیری از پرش محتوا هنگام بارگذاری تصاویر آنلاین است.
اگر نسبت تصویر را از قبل بدانید، میتوانید فضای آن را در چیدمان رزرو کنید. با این کار:
- متنها و دکمهها جابجا نمیشوند
- ساختار صفحه پایدارتر میماند
- تجربه کاربر بهتر میشود
- ظاهر صفحه حرفهایتر دیده میشود
برای محاسبه نسبت ابعاد هم کافی است:
- عرض و ارتفاع تصویر را پیدا کنید
- نسبت را به صورت عرض:ارتفاع بنویسید
- در صورت نیاز آن را ساده کنید
این کار ساده، در طراحی صفحههای دارای تصویر، تأثیر زیادی در کیفیت تجربه کاربری دارد.