رفتار (behavior)-طراحی متریال

رفتار (behavior)-طراحی متریال

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

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

رفتار (behavior) :

برگه های تحتانی میتوانند از طریق لمس کردن یک کنترل واضح مانند x در نوار اپلیکیشن یا لمس کردن دکمه back در سیستم (Android).
برگه های تحتانی شرطی همچنین میتوانند با لمس کردن ناحیه بیرونی برگه، بسته شوند.


از طریق کشیدن برگه به سمت پایین آن را ببندید.


برگه را از طریق لمس کردن ناحی خارجی آن ببندید


از طریق لمس کردن دکمه عملیاتی x برگه را ببندید (در صورت وجود نوار اپلیکیشن)

مشخصات :

مشخصات زیر برای برنامه های موبایل فراهم شده اند :

فونت و رنگ :

  • متن : Robot Regular 16sp, #000 87%
  • عنوان (انتخابی) : Robot Regular 16sp, #000 54%
  • رنگ پیش فرض برای پس زمینه برگه : FFF#
  • رنگ پوشش (overlay) شفاف : 000#

برگه تحتانی به سیک لیست :

  • حاشیه های  چپ و راست لبه صفحه نمایش : 16dp
  • حاشیه های بالا و پایین : 8dp
  • ارتفاع آیتم لیست : 48dp
  • آیکون های لیست : 24x24dp ، تنظیم در وسط در راستای عمودی
  • متن همراه با آیکون : padding  افقی 32dp


خط قرمز برای برگه تحتانی به سبک لیست در  یک برنامه موبایل


برگه تحتانی به سبک لیست در یک برنامه موبایل

 

برگه به سبک لیست به همراه header :

  • حاشیه های  چپ و راست لبه صفحه نمایش : 16dp
  • فضای پایین لیست بالایی : 7dp
  • خط جداکننده : 1dp
  • فضای بالای دومین برگه تحتانی : 8dp
  • ارتفاع آیتم لیست : 48dp
  • آیکون های لیست : 24x24dp ، تنظیم در وسط در راستای عمودی
  • متن همراه با آیکون : padding  افقی 32dp
  • ارتفاع عنوان لیست : 56dp


خط قرمز برای برگه تحتانی به سبک لیست به همراه header


برگه تحتانی به سبک لیست به همراه header

برگه تحتانی به سبک شبکه ای (grid) همراه با آیکون :

  • حاشیه های  چپ و راست لبه صفحه نمایش : 24dp
  • فضای عمودی بین لیست های شبکه : 16dp
  • آیکون های لیست شبکه ای : 48x48dp ، تنظیم در وسط در راستای عمودی، به طور مساوی در شبکه تقسیم شده
  • ناحیه متن در لیست شبکه ای : 16dp طول، زیر هر آیکون در وسط تنظیم شده
  • padding در زیر شبکه : 24dp


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


برگه تحتانی به سبک شبکه که حاوی مجموعه ای استاندارد از عملیات ها برای برنامه های دیگر است.


برگه های تحتانی از انتهای صفحه نمایش بالا می آیند و قسمتی از صفحه را پوشش میدهند.
ارتفاع یک برگه تحتانی متناسب است با ارتفاع آیتم های لیست (یا ردیف های شبکه) که حاوی آن ها میباشد. یک برگه تحتانی در کل نباید ارتفاعی بیشتر از نرخ تصویر خودش یعنی 16:9 داشته باشد. برگه های تحتانی میتوانند به سمت بالا کشیده شوند تا کل ارتفاع صفحه را بپوشانند به همراه محتوا که به صورت داخلی scroll میشود.


ارتفاع اصلی برگه تحتانی نباید بیشتر از خط اصلی نرخ تصویر خودش یعنی 16:9 باشد.


حداقل ارتفاع یک برگه تحتانی متناسب است با ارتفاع آیتم های لیستی که حاوی آن میباشد.
 

مشخصات برای برنامه های desktop و تبلت :

برگه های تحتانی شرطی و persistent در تبلت و desktop پهناهای ماکسیمم و مینیمم اشاره شده در جدول زیر را استفاده میکنند.
 
پهنای صفحه حداقل فاصله از لبه صفحه (واحد افزایشی) حداقل پهنای برگه (واحد افزایشی)
960dp 1 واحد افزایشی 6 واحد افزایشی
1280dp 2 واحد افزایشی 8 واحد افزایشی
1440dp 3 واحد افزایشی 9 واحد افزایشی

پهنای برگه های تحتانی از طریق ساخنار کلی رابط (interface) مشخص میشود که معمولاً بر پایه میزان افزایش ها میباشد (واحد افزایش یا همان increment). در یک شبکه (grid) پهنای ماکسیمم برگه تحتانی متناسب با شبکه و محتوای آن میباشد.
برای مثال، در یک صفحه نمایش با پهنای 960dp اگر ارتفاع نوار اپلیکیشن (64dp) را به عنوان واحد افزایشی استفاده کنید، به طور کلی موجب افزایش پهنا به اندازه 15 واحد افزایشی میشود.
حداقل یک واحد افزایشی باید برگه تحتانی را از لبه صفحه نمایش جدا سازد و خود برگه تحتانی باید حداقل 6 واحد افزایشی پهنا داشته باشد.


نقاط انفصال برای سایزهای مختلف desktop

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