رابط کاربری responsive در طراحی متریال

رابط کاربری responsive در طراحی متریال

تاریخ انتشار: 10 بهمن 1394

تعداد بازدید: 0 نفر

رابط کاربری responsive

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

نقاط انفصال :

برای ایجاد بهترین تجربه برای کاربر، رابط های کاربری در متریال دیزاین باید ساختارها را با نقاط انفصال در پهنای 480، 600، 840، 960، 1280، 1440 و 1600dp ، سازگار نمایند.


  1. نمایش محتوا به صورت خلاصه و با جزئیات در ساختارها :
    • ساختارها با پهنای کمتر از 600dp صفحه را با یک سطح واحد از سلسله مراتب محتوا پر میکنند. (یا به صورت خلاصه یا با جزئیات، ولی هر دو با هم نه)
    • ساختارها با پهنای بالای 600dp میتوانند دو سطح از سلسله مراتب محتوا را در صفحه قرار دهند. (هم خلاصه و هم جزئیات)
  2. حداکثر پهنای صفحه نمایش
ساختارها با پهنای بیشتر از 1600dp اجازه میدهند که ساختار تا حد ماکسیمم پهنا بزرگ شود. در این حالت، شبکه یکی از کارهای زیر را انجام میدهد :
  • وسط نویس  میشود با حاشیه های افزایش یافته.
  • در حالت چپ نویس باقی میماند در حالی که حاشیه راست آن افزایش می یابد.
  • زمانی که محتوای اضافی ایجاد میشود به بزرگ شدن ادامه میدهد.

سیستم نقاط انفصال :

این نقاط انفصال، مشخصات ستون های ستونی و پهنای صفحه نمایش ها، دستگاه ها و راستاهای مختلف را مشخص میکنند.
برای بعضی اندازه ها، حتی اگر دستگاه چرخانده شود، مقدار بدون تغییر باقی میماند. به همین دلیل کوچکترین پهنا برای هر راستا مقدار تعریف شده میباشد :
  • 16dp زمانی که کوچکترین پهنا برای دستگاه کوچکتر از 600 (<600) میباشد.
  • در desktop نقاط انفصال، 16dp پایین تر از مقادیر موجود در لیست میباشند(جهت سازگار شدن با انواع مختلف در مرورگر chrome).
نقطه انفصال (dp) گوشی/تبلت
عمودی
گوشی/تبلت
افقی
پنجره ستون ها فضای خالی بین ستون ها (gutter)
0 گوشی کوچک بسیار کوچک 4 16
360 گوشی متوسط بسیار کوچک 4 16
400 گوشی بزرگ بسیار کوچک 4 16
480 گوشی بزرگ گوشی کوچک بسیار کوچک 4 16
600 تبلت کوچک گوشی متوسط کوچک 8 16/24
720 تبلت بزرگ گوشی بزرگ کوچک 8 16/24
840 تبلت بزرگ گوشی بزرگ کوچک 12 16/24
960 تبلت کوچک کوچک 12 24
1024 تبلت بزرگ متوسط 12 24
1280 تبلت بزرگ متوسط 12 24
1440 بزرگ 12 24
1600 بزرگ 12 24
1920 بسیار بزرگ 12 24

ادامه مطلب -> شبکه (grid)

اشتراک گذاری:
021-41658