کوتاه در مورد Responsive breakpoints

در مقاله‌ی کوتاه در مورد تفاوت طراحی Responsive و Adaptive من باب طراحی واکنشگرا ( Responsive ) صحبت کردم.

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

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

این ابعاد مرجع با مرزهایی از هم جدا می‌شوند که به آنها Breakpoint گفته می‌شود.

در مقاله‌ی اسکرول بینهایت در مقابل صفحه‌بندی گفتم که پیمایش عمودی معمول‌تر است. لذا در قالب‌بندی صفحات عرض صفحه پارامتر مهمتری نسبت به ارتفاع است و برای در نظر گرفتن Breakpoints تنها به عرض صفحه توجه می‌کنیم.

منابع مختلف پیشنهادات متفاوتی برای این موضوع ارائه می‌دهند.

android breakpoints
android breakpoints

به عنوان مثال تصویر بالا نقاط شکست طراحی بر اساس طراحی متریال اندروید است که در گسسته‌ترین حالت 13 حالت و در کمترین حالت 4 مدل طراحی را پیشنهاد می‌دهد.

Responsive web design Cheatsheet
Responsive web design Cheatsheet

سایت UXPin هم با ارائه‌ی تصویر بالا بین 4 تا 9 حالت را پیشنهاد می‌دهد.

جهانس هول هم با انتشار این عکس 5 نقطه شکست را برای طراحی معرفی کرده است.

فراوانی ابعاد نمایشگر در ایران
فراوانی ابعاد نمایشگر در ایران

با این توضیحات، من برای یک پروژه‌ی VOD و با توجه به فراونی ابزارهای هوشمند موجود در ایران و تحلیل‌های در ادامه به مدل 5تایی زیر رسیدم.

  1. درصد فراوانی موبایل‌های هوشمند کمتر از 320px به قدری کم است که نیازی به طراحی نیست.
  2. هر چند فراوانی نمایشگرهای 320px کمتر از 3% است اما چون iPhone 3,4,4s را شامل می‌شود و معمولا احتمال خرید در کاربران iOS بیشتر است، ارزش طراحی دارد.
  3. برای طراحی هر بازه بهتر است از رویکرد Small size 1st استفاده شود در نتیجه حداقل ابعاد هر بازه برای طراحی انتخاب شد.
  4. با توجه به شلوغی طرح تصمیم گرفته شد قابلیت rotate در اپلیکیشن برای ابعاد کمتر از 360px محدود شود.
  5. برای هماهنگی بیشتر بین اپلیکیشن و وب‌سایت، از ویژگی hover کردن صرف نظر شد.


همچنین رویکرد دیگر طراحی واکنشگرا استفاده از Variable breakpoints برای هر قسمت سایت است.


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


https://www.youtube.com/watch?v=eXMiN7Qg7I0&list=PLT4L2_8BD6pmYfYtecPltD0JAB7yRpppb&index=16


در این ویدئوی یوتیوب توضیحاتی تکمیلی در مورد گریدبندی و ریسپانسیو ارائه کردم که پیشنهاد می‌کنم در ادامه ببینید.



از این دست کوتاه مقاله‌ها: