شبکه ها

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

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

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

آناتومی

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

۱. آیتم شبکه‌ای
۲. متن اولیه و ثانویه
۳. پس‌زمینه شبکه‌ای

مشخصات

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

شبکه محتوا (۳ یا ۴ ستون)

شبکه برنامه (۴ ستون)

شبکه برنامه با موارد پرکاربرد در ردیف بالا

قرار دادن آیکون نشانگر در طرح شبکه‌ای

مقیاس‌بندی طرح‌بندی‌ها

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

صفحات نمایش با عرض استاندارد

صفحه نمایش‌های عریض

برای صفحات نمایش عریض، طرح‌بندی ۳ ستونه توصیه می‌شود. اگر از طرح‌بندی ۴ ستونه استفاده می‌کنید، حداقل اندازه کاشی‌ها را ۲۱۹dp نگه دارید.

صفحه نمایش‌های فوق عریض و فوق عریض

فاصله عمودی شبکه‌های برنامه در صفحات با ارتفاع‌های مختلف

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

سبک‌ها

تایپوگرافی

سبک تایپ فونت وزن اندازه (dp)
بدنه ۱ رباتو منظم ۳۲
بدن ۲ رباتو منظم ۲۸
بدنه ۳ رباتو منظم ۲۴

رنگ

عنصر رنگ (حالت روز) رنگی (حالت شب)
نوع اصلی / آیکون‌ها سفید سفید @ ۸۸٪
نوع ثانویه / آیکون‌ها سفید @ 72% سفید @ 60%
خط جداکننده سفید @ 22% سفید @ 12٪
پس‌زمینه شبکه‌ای سیاه سیاه
استریم محتوا ناموجود مشکی @ 22%
گرادیان کوتاه مشکی @ 0-100% در 10% فضای متن مشکی @ 0-100% در 10% فضای متن

اندازه

عنصر اندازه (dp)
آیکون برنامه ۷۶
حداقل سلول برنامه ۱۳۵
حداقل محتوای سلول ۱۵۸

ارتفاع

عنصر رنگ محور Y تاری
کاشی شبکه‌ای مشکی @ 22% ۲ ۲

مثال‌ها

شبکه برنامه - روز
شبکه برنامه - شب
شبکه محتوا - روز
شبکه محتوا - شب
کاربر برای پیمایش محتوا، آن را به بالا یا پایین می‌کشد (می‌کشد).