شبکه ها

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

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

نماد فراخوانی
جزء فهرست موارد
فهرست ها روشی جایگزین برای نمایش محتوایی است که به متن توضیحی بیشتری نیاز دارد

آناتومی

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

  1. مورد گرید
  2. متن اولیه و ثانویه
  3. پس زمینه شبکه

مشخصات

نماد فراخوانی
برچسب های چیدمان
تعاریف E، M، KL، P، Flex
نماد فراخوانی
جزء فهرست موارد
مشخصات، دستورالعمل‌های سبک و موارد دیگر

شبکه محتوا (3 یا 4 ستونی)

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

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

قرار دادن نماد نشانگر در طرح بندی شبکه ای


پوسته بندی پوسته ها

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

نماد فراخوانی
چیدمان
حاشیه ها، خطوط کلیدی و بالشتک برای اندازه های مختلف صفحه نمایش
نماد فراخوانی
برچسب های چیدمان
تعاریف E، M، KL، P، Flex

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

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

برای صفحه های عریض، طرح بندی 3 ستونی توصیه می شود. اگر از طرح 4 ستونی استفاده می کنید، حداقل اندازه کاشی 219dp را حفظ کنید.

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

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

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

سبک ها

نماد فراخوانی
دستورالعمل های تایپوگرافی
مرجع مقیاس و شبکه، نمونه های تایپوگرافی، و موارد دیگر
نماد فراخوانی
دستورالعمل های رنگ
پالت ها، مقادیر ارتفاع و کدورت و موارد دیگر

تایپوگرافی

سبک تایپ کنید تایپ فیس وزن اندازه (dp)
بدن 1 ربات منظم 32
بدن 2 ربات منظم 28
بدن 3 ربات منظم 24

رنگ

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

سایز بندی

عنصر اندازه (dp)
نماد برنامه 76
حداقل سلول برنامه 135
سلول محتوای حداقل 158

ارتفاع

عنصر رنگ محور Y محو کردن
کاشی توری مشکی @ 22% 2 2

مثال ها

شبکه برنامه - روز
شبکه برنامه - شب
شبکه محتوا - روز
شبکه محتوا - شب
کاربر برای پیمایش محتوا به بالا یا پایین می کشد