رفتن به محتوا
پیوند
سه برگ کاغذ رنگ‌شده با گواش که پله‌پله روی هم چیده شده‌اند و هر کدام سایه نرمی روی برگ زیرین انداخته است؛ خطی از مرکب مثل پلکان از روی هر سه می‌گذرد، آدم بزرگی بالای پله دست کودکی را می‌گیرد و لوزی طلایی روی پله آخر است.سه برگ کاغذ رنگ‌شده با گواش که پله‌پله روی هم چیده شده‌اند و هر کدام سایه نرمی روی برگ زیرین انداخته است؛ خطی از مرکب مثل پلکان از روی هر سه می‌گذرد، آدم بزرگی بالای پله دست کودکی را می‌گیرد و لوزی طلایی روی پله آخر است.

سطح و ارتفاع

لایه‌های رابط مثل برگ‌های کاغذ روی هم می‌نشینند و هر کدام با خط دور و سایه‌اش از برگ زیرین جدا می‌شود.

شش سطح

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

از کنار، شش سطح پیوند پله‌پله بالا می‌روند: سطح‌های ۰ و ۱ روی صفحه‌اند و سطح‌های ۲ تا ۵ بالای صفحه. از روبه‌رو، همان شش سطح در تم روشن و تیره کنار هم دیده می‌شوند.
تم نمونه‌ها

سطح‌های ۱ تا ۵ فقط در سایه با هم فرق دارند. صفحه تون surface دارد و سرفیس این سطح‌ها همیشه surface-container-lowest است و خط دور دارد. در تم روشن، این دو تون تقریبا یکی‌اند و لبه سرفیس را خط دورش نشان می‌دهد. در تم تیره، سرفیس یک پله روشن‌تر از صفحه است. سایه در این تم پررنگ‌تر است ولی کمتر دیده می‌شود، پس تون و خط دور، بیشتر از سایه، سرفیس را از صفحه جدا می‌کنند.

سطح هر کامپوننت

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

روی صفحه

این دو سطح بخشی از خود صفحه‌اند و همراه آن اسکرول می‌شوند.

سطح‌های روی صفحه
نمونهسطحکاربرد
سطح ۰level0خود صفحه و هر سرفیس بی‌سایه‌ای که رویش است، مثل کارت outlined و filled، کادر متن و هشدار.
سطح ۱level1دکمه outlined، دکمه آیکون‌دار outlined و کارت elevated. دکمه‌ها با فشردن سایه‌شان را از دست می‌دهند و هم‌سطح صفحه می‌شوند.

بالای صفحه

این چهار سطح روی محتوا می‌نشینند. سرفیس‌های سطح ۲ تا ۴ هر وقت لازم باشد باز می‌شوند و از همان راهی که آمده‌اند برمی‌گردند. level5 فقط برای صحنه‌هاست.

سطح‌های بالای صفحه
نمونهسطحکاربرد
سطح ۲level2منو و پاپ‌اور. کارت elevated هم در حالت هاور سایه این سطح را می‌گیرد و سر جایش می‌ماند.
سطح ۳level3مدال، باتم‌شیت، دراور و توست.
سطح ۴level4منو یا پاپ‌اوری که روی مدال باز می‌شود. کم پیش می‌آید.
سطح ۵level5صحنه‌های بزرگ، مثل لندینگ کمپین و صفحه تشکر.

توکن‌ها سایه هفتمی به نام rim هم دارند که سطح نیست. rim خط روشن یک‌پیکسلی روی لبه بالای دکمه filled و دکمه آیکون‌دار filled است، وقتی تون دکمه primary، action یا error باشد. این خط کمی برجسته‌اش می‌کند و با فشردن دکمه برداشته می‌شود.

دو لایه در یک نما

در هر نما حداکثر دو لایه سایه‌دار هم‌زمان دیده می‌شود.

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

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

قواعد سطح

دسته قاعده‌ها

۶ قاعده، هر کدام با نمونه درست و نادرست کنار هم؛ همه‌شان کمک می‌کنند همیشه معلوم باشد کدام سرفیس روی کدام است.

  • هر نما حداکثر دو لایه سایه‌دار دارد

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

    درست
    level1level2
    نادرست
    level1level2level3

  • منوی روی مدال یک سطح بالاتر است

    مدال روی level3 است، پس منو یا پاپ‌اوری که رویش باز می‌شود level4 می‌گیرد. اگر منو level2 بگیرد، سایه‌اش از سایه مدال کم‌رنگ‌تر است و انگار زیر مدال رفته است.

    درست
    level3level4
    نادرست
    level3level2

  • هر سرفیس بالای صفحه خط دور دارد

    منو، مدال و توست خط دور یک‌پیکسلی به رنگ outline-variant دارند و سایه فقط عمق را اضافه می‌کند. بدون این خط، لبه سفید سرفیس روی کاغذ صفحه محو می‌شود و در حالت کنتراست بالا اثری از آن نمی‌ماند.

    درست
    outline-variantlevel2
    نادرست
    border: nonelevel2

  • در تم تیره، سرفیس از صفحه روشن‌تر است

    در تم تیره، هر سرفیسی که بالای صفحه می‌آید surface-container-lowest می‌گیرد، یک پله روشن‌تر از صفحه. سرفیسی که تیره‌تر از صفحه باشد، مثل حفره‌ای در آن دیده می‌شود.

    درست
    surface-container-lowest
    نادرست
    surface-dim

  • محتوای صفحه سایه نمی‌گیرد

    متن، تصویر و بخش‌های صفحه روی level0 می‌مانند و با خط دور یا فاصله از هم جدا می‌شوند. سایه یعنی این سرفیس بالای بقیه است؛ اگر همه‌جا باشد، دیگر چیزی نمی‌گوید.

    درست
    level0outline-variant
    نادرست
    level2

  • کارت در حالت هاور سر جایش می‌ماند

    در حالت هاور، سایه کارت elevated با فید از level1 به level2 می‌رسد و خود کارت جابه‌جا نمی‌شود. کارتی که بالا می‌پرد کنار کارت‌های دیگر ناآرام دیده می‌شود.

    درست
    level1level2
    نادرست
    translateY(-4px)level3

توکن‌ها

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

سطح‌ها و سایه‌های شش ارتفاع، و ترتیب لایه‌هایی که روی هم می‌آیند.