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

ارتفاع (آندروید)

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

مشخصات:
. ارتفاع به همان واحدهایی اندازه گیری می شود که محورهای x و y اندازه گرفته می شوند، عموماً به واحد dp. از آنجا که ارمان های متریال دارای عمق می باشند (کلیه متریال دارای ضخامت 1dp هستند)، ارتفاع، فاصله روی یک سطح تا روی یک سطح دیگر در نظر گرفته می شود.
. ارتفاع سطح یک جسم ولد، نسبتی از ارتفاع سطح یک جسم والد می باشد.
تصاویر و مقادیری که نشان داده شده اند برای برنامه های اندروید می باشند.

whatismaterial_3d_elevation1

ارتفاع ایستا

کلیه اجسام متریال، صرف نظر از اندازه، دارای یک ارتفاع ایستا، یا ارتفاع پیش فرض می باشند که تغییر نمی کند. در صورتی که ارتفاع یک جسم تغییر کند، این ارتفاع در اسرع وقت به ارتفاع ایستای خود باز خواهد گشت.
ارتفاع اجزا:
. ارتفاع ایستا برای یک جزء سازگار با برنامه می باشد (برای نمونه؛ ارتفاع FAB در یک برنامه از 6dp به 16dp در برنامه دیگر تغییر نمی کند)
. اجزا ممکن است دارای ارتفاع های ایستای متفاوتی در پلتفورم های مختلف باشند، بسته به عمق محیط (برای نمونه؛ تلویزیون دارای عمق بیشتری نسبت به موبایل یا مانیتور است)
ارتفاع واکنشی و تعادل ارتفاع دینامیک
برخی از گونه های اجزا دارای ارتفاع واکنشی می باشند، به این مفهوم که این اجزا بسته به ورودی کاربر و یا رویدادهای سیستم تغییر ارتفاع می دهند. این تغییرات ارتفاع به صورت سازگاری به کمک تعادل ارتفاع دینامیک به کار گرفته می شود.
تعادلات ارتفاع دینامیک، ارتفاع مورد نظری می باشند که یک جز به سمت آن حرکت می کند و نسبتی از شرایط ایستای جز می باشد. این تعادلات اطمینان حاصل می کنند که تغییرات ارتفاع در طول عملیات و گونه های گوناگون اجزا، سازگار باشند.
هنگامی که رویداد ورودی کامل یا کنسل شود، جز دوباره به ارتفاع ایستای خود باز می گردد.
جلوگیری از تداخل ارتفاع
اجزای دارای ارتفاع واکنشی ممکن است به هنگام حرکت میان تعادل ارتفاع دینامیک و ارتفاع ایستا، با دیگر اجزا تداخل پیدا نمایند. از آنجایی که متریال نمی تواند از میان متریال دیگر عبور کند، اجزا از تداخل با یکدیگر به هر شیوه ای جلوگیری می کنند، چه تنها برای اصول پایه هر جز و یا با استفاده از طرح کل0ی برنامه.
در سطح جزء، اجزا می توانند پیش از به وجود آمدن برخورد، جا به جا و یا حذف شوند. برای نمونه، یک FAB می تواند پیش از آنکه کاربر یک کارت را انتخاب کند ناپدید و یا از صفحه خارج شود.

مقدار سایه (برحسب dp) کامپوننت
24 Dialog
Picker
16 Nav drawer

Right drawer

Modal bottom Sheet

12 Floating action button (FAB – pressed)
9 Sub menu (+1dp for each sub menu)
8 Menu

Card (picked up state)

Raised button (pressed state)

6 Floating action button (FAB – resting elevation

Snackbar

4 App Bar
3 Refresh indicator

Quick entry / Search bar (scrolled state

2 Card (resting elevation

Raised button (resting elevation

Quick entry / Search bar (resting elevation

1 Switch

whatismaterial_3d_elevation2
در سطح طرح کلی، برنامه خود را به گونه ای طراحی نمایید که احتمال تداخل را به حداقل رساند.
whatismaterial_3d_elevation3
برای نمونه، FAB را در گوشه ای از صفحه قرار دهید که به هنگام کاربری، فرد دچار تداخل نشود.
whatismaterial_3d_elevation4

سایه ها

سایه یک ویژگی بصری بسیار مهم برای عمق و حرکت جهت دار اجسام به وجود می آورد.

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

whatismaterial_3d_elevation_shadow1

بدون سایه هیچ چیز دیگری نمی تواند نشان دهنده یک جسماز سطح یک background جدا باشد.

whatismaterial_3d_elevation_shadow2

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

whatismaterial_3d_elevation_shadow3

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

در حرکت، سایه موجب به وجود آمدن یک ویژگی کاربردی برای جهت حرکت اجسام می باشد و همچنین نشان می دهد که فاصله میان سطوح در حال افزایش می باشد یا کاهش.

whatismaterial_3d_elevation_shadow4

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

whatismaterial_3d_elevation_shadow5

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

whatismaterial_3d_elevation_shadow6

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

 

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

App bar: 4dp
whatismaterial_3d_elevation_component06
Raised button :
وضعیت ایستا:2dp
وضعیت فشرده:8dp

whatismaterial_3d_elevation_component02

FAB:

وضعیت ایستا: 6dp

وضعیت فشرده:12dp

whatismaterial_3d_elevation_component08

Card:
وضعیت ایستا: 2dp
وضعیت انتخاب شده:8dp

whatismaterial_3d_elevation_component03
منوها و زیر منوها:
منوها: 8dp
زیر منوها: 9dp (برای هر منو یک dp اضافه می شود)
whatismaterial_3d_elevation_component09
دیالوگ ها: 24dp
whatismaterial_3d_elevation_component12
نوار مسیریاب و نوار سمت راست: 16dp
whatismaterial_3d_elevation_component10

Modal bottom sheet: 16db

whatismaterial_3d_elevation_component11

Refresh indicator: 3dp
whatismaterial_3d_elevation_component05
نوار جستجو:
وضعیت ایستا: 2dp
وضعیت اسکرول شده: 3dp
whatismaterial_3d_elevation_component04
Snackbar: 6db
whatismaterial_3d_elevation_component07
سوئیچ: 1db
whatismaterial_3d_elevation_component01

روابط اجسام

سلسله مراتب اجسام
اینکه شما چگونه اجسام و یا مجموعه اجسام را شناسایی می کنید در یک برنامه نشان می دهد که این اجسام در ارتباط با یکدیگر چگونه حرکت می کنند. اجسام می توانند به صورت جداگانه از هم حرکت نمایند و یا توسط اجسامی که در سلسله مراتب دارای ارتفاع بیشتری هستند محدود شوند.
کلیه اجسام بخشی از یک سلسله مراتب می باشند که بر اساس یک رابطه ولد-والد تعریف می شوند. ولد در هر یک از این روابط معرف ارمانی می باشد که تابع یک ارمان والد باشد. اجسام می توانند ولد یک سیستم و یا یک جسم دیگر باشند.
ویژگی های والد-ولد:
. هر جسم یک والد دارد
. هر جسم می تواند تعدادی ولد داشته باشد
. اجسام ولد ویژگی های قابل تغییر را از والد خود کسب می کنند، مانند جایگاه، دوران، مقیاس و ارتفاع
. اجسام ولدی که در یک سطح از سلسله مراتب قرار دارند به عنوان هم نیا در نظر گرفته می شوند
موارد استثنا
ایتم هایی که والد می باشند، مانند ارمان های UI، مستقل از دیگر اجسام حرکت می نمایند. برای نمونه، جسمهای FAB با محتوا اسکرول نمی شوند. از دیگر ارمان ها می توان به موارد زیر اشاره کرد:
. نوار مسیریاب کنار برنامه
. نوار عملیات
. دیالوگ ها
روابط
اینکه اجسام در ارتباط با یکدیگر چگونه واکنش نشان می دهند توسط جایگاه آن ها در سلسله مراتب والد-ولد تعیین می شود.
برای نمونه:
. ولدها حداقل تفکیک محور z را از والد خود دارند؛ دیگر اجسام میان والد و ولد قرار نمی گیرند
. در مجموعه اسکرولینگ کارت، کارت ها هم نیاز یکدیگر می باشند، بنابراین همه پشت سر هم و همراه هم حرکت می کنند.
ارتفاع
اینکه شما چگونه باید ارتفاع اجسام – جایگاه آن ها در فضای z – را مشخص نمایید بسته به آن است که سلسله مراتب محتوایی که فصد ارائه آن را دارید چگونه است و آیا نیاز از یک جسم جدا از دیگر اجسام حرکت کند.


همزمان با اینکه صفحه والد اسکرول می شود، جس مدرون آن (ولد آن) نیز در صفحه اسکرول می شود.
همزمان با اینکه مجموعه کارت اسکرول می شود، کارت های ولد آن نیز اسکرول می شوند، اما جسمFAB در جای خود باقی می ماند چرا که والد آن در حال اسکرول شدن نیست.

طراحی و ترجمه توسط اقای متریال