يعرض عرض الشبكة عمودين أو أكثر من الصور التي تمثل عناصر المحتوى، مع نص موجز أسفل كل صورة. وتُعدّ طريقة العرض هذه أفضل خيار عندما يعتمد المستخدمون على الصور بشكل أساسي لتحديد اختياراتهم.
الشبكات قابلة للتمرير رأسيًا ويمكن أن تختلف في الحجم والتباعد وعدد الأعمدة. يمكن أيضًا تجميع المحتوى الموجود في الشبكة في فئات.
علم التشريح
تحتوي الشبكات على نص وعناصر تحكم واجهة المستخدم. ولأنه يجب على المستخدمين الاستجابة لها، فيجب عدم حجبها أبدًا، سواء عن طريق عناصر أخرى أو عند حافة الشاشة.
- عنصر شبكة
- النص الأساسي والثانوي
- خلفية شبكة
المواصفات
شبكة المحتوى (3 أو 4 أعمدة)
شبكة التطبيقات (4 أعمدة)
شبكة تطبيق تحتوي على العناصر الأكثر استخدامًا في الصف العلوي
موضع رمز المؤشر في تخطيط الشبكة
تغيير حجم التخطيطات
توضح هذه التخطيطات المرجعية كيفية تكييف الشبكات لتلائم شاشات ذات عروض وارتفاعات مختلفة. (يتم تحديد فئات العرض والارتفاع في قسم التصميم). تجدر الإشارة إلى أنّ جميع قيم البكسل تكون في وحدات البكسل المعروضة، قبل حدوث أي انخفاض في أخذ العينات أو زيادة العيّنات.
شاشات بعرض عادي
شاشات عريضة
الشاشات العريضة جدًا والكبيرة جدًا
تباعد رأسي لشبكات التطبيق على شاشات ذات ارتفاعات مختلفة
الأنماط
فن الطباعة
| نمط النوع | الخط | الوزن | الحجم (dp) |
|---|---|---|---|
| Body 1 | Roboto | عادي | 32 |
| Body 2 | Roboto | عادي | 28 |
| النص الأساسي 3 | Roboto | عادي | 24 |
اللون
| عنصر | اللون(الوضع اليومي) | الألوان (الوضع الليلي) |
|---|---|---|
| النوع الأساسي / الرموز | بالأبيض | أبيض @ 88٪ |
| النوع الثانوي أو الرموز | أبيض @ 72٪ | أبيض @ 60٪ |
| خط الفاصل | أبيض @ 22٪ | أبيض @ 12٪ |
| خلفية شبكة | أسود | أسود |
| حاجب المحتوى | لا ينطبق | أسود @ 22٪ |
| اقتطاع متدرج | أسود @ 0-100٪ في 10٪ من مساحة النص | أسود @ 0-100٪ في 10٪ من مساحة النص |
مقاسات الشعار
| عنصر | الحجم (dp) |
|---|---|
| رمز التطبيق | 76 |
| الحد الأدنى لخلية التطبيق | 135 |
| الحد الأدنى لخلية المحتوى | 158 |
الارتفاع
| عنصر | اللون | المحور ص | تعتيم |
|---|---|---|---|
| مربّع شبكة | أسود @ 22٪ | 2 | 2 |
أمثلة
