يتم توضيح التسلسل الهرمي من خلال الاختلافات في سُمك الخط وحجمه وارتفاع السطر والمسافة بين الأحرف. يصنّف مقياس الكتابة المعدَّل الأنماط إلى ستة أدوار تمت تسميتها لوصف أغراضها: العرض والعنوان والتسمية والنص الأساسي والرقم والقوس. لا تعتمد الأدوار الجديدة على حجم الشاشة، ما يتيح استخدامها بسهولة في مجموعة متنوعة من حالات الاستخدام.
أنماط العرض
يُستخدم العرض للسلاسل النصية الكبيرة والقصيرة التي تعرض معلومات أساسية يمكن الاطّلاع عليها بسرعة، أو مقاييس مهمة، أو لحظات تعبّر عن الثقة أو العلامة التجارية.
- DisplayLarge هو العنوان الأكبر. تُعدّ العروض أكبر نص على الشاشة، وهي مخصّصة لعرض معلومات رئيسية قصيرة يمكن الاطّلاع عليها بسرعة، أو مقاييس مهمة، أو لحظات تعبّر عن العلامة التجارية وتستفيد من حجم وأسلوب بارزين.
- DisplayMedium هو ثاني أكبر عنوان. تُعدّ العروض التقديمية أكبر نص على الشاشة، وهي مخصّصة لعرض معلومات رئيسية قصيرة وسهلة القراءة، أو مقاييس مهمة، أو لحظات ثقة أو تعبيرية للعلامة التجارية تستفيد من مقياس وأسلوب بارزين.
- DisplaySmall هو أصغر عنوان رئيسي. تُعدّ العروض أكبر نص على الشاشة، وهي مخصّصة لعرض معلومات رئيسية قصيرة يمكن الاطّلاع عليها بسرعة، أو مقاييس مهمة، أو لحظات تعبّر عن العلامة التجارية وتستفيد من حجم وأسلوب بارزين.
العنوان
العنوان هو نص هرمي يُستخدم كآلية لتحديد المسار، مثل صفحة أو عنوان قسم أو عنوان قسم فرعي (في حالة TitleSmall).
- TitleLarge هو العنوان الأكبر. تكون العناوين أصغر من الشاشات. ويتم عادةً استخدامها للنصوص التي تتضمّن مستوى متوسطًا من التركيز، والتي تكون أقصر طولاً، ولا يُنصح باستخدامها مع المكوّنات التفاعلية، بل مع عناوين الصفحات أو العناوين الفرعية.
- TitleMedium هو عنوان الوسيط. تكون العناوين أصغر من الشاشات. ويتم عادةً استخدامها للنصوص التي تتضمّن مستوى متوسطًا من التركيز، والتي تكون أقصر طولاً، ولا يُنصح باستخدامها مع المكوّنات التفاعلية، بل مع عناوين الصفحات أو العناوين الفرعية.
- TitleSmall هو أصغر عنوان. تكون العناوين أصغر من الشاشات. ويتم عادةً استخدامها للنصوص التي تتضمّن مستوى متوسطًا من التركيز، والتي تكون أقصر طولاً، ولا يُنصح باستخدامها مع المكوّنات التفاعلية، بل مع عناوين الصفحات أو العناوين الفرعية.
التصنيف
يُستخدَم التصنيف للنص على مستوى المكوّن الذي يصف إجراءً سيحدث عند التفاعل معه. إنّ التطبيق الأكثر شيوعًا واستخدامًا للتسمية هو النص المضمّن في زر.
- LabelLarge هو أكبر تصنيف. تُستخدَم التصنيفات لعرض النصوص البارزة، مثل التصنيف على أزرار العناوين، ويتم تطبيقها على المكوّنات التفاعلية.
- LabelMedium هو التصنيف المتوسط والأكثر استخدامًا. تُستخدم التصنيفات لعرض النصوص، مثل التصنيف الأساسي على الأزرار، ويتم تطبيقها على المكوّنات التفاعلية.
- LabelSmall هي التسمية الصغيرة. تُستخدَم التصنيفات لعرض النصوص، مثل التصنيف الثانوي على الأزرار والتصنيفات على الأزرار المدمجة، ويتم تطبيقها على المكوّنات التفاعلية.
الجسم
يتم حجز القسم "النص الأساسي" لنص المحتوى، مثل فقرات النص الأساسي والنص المستخدَم في العرض المرئي المعقّد للبيانات والطوابع الزمنية والبيانات الوصفية.
- BodyLarge هو أكبر نص أساسي. تُستخدم نصوص الفقرات عادةً للكتابة الطويلة لأنّها مناسبة لأحجام النصوص الصغيرة. بالنسبة إلى المقاطع النصية الأطول، يُنصح باستخدام خط طباعي serif أو sans serif.
- BodyMedium هو ثاني أكبر نص أساسي. تُستخدم نصوص الفقرات عادةً للكتابة الطويلة لأنّها مناسبة لأحجام النصوص الصغيرة. بالنسبة إلى المقاطع النصية الأطول، يُنصح باستخدام خط طباعي serif أو sans serif.
- BodySmall هو ثالث أكبر نص أساسي. تُستخدم نصوص الفقرات عادةً للكتابة الطويلة لأنّها مناسبة لأحجام النصوص الصغيرة. بالنسبة إلى المقاطع النصية الأطول، يُنصح باستخدام خط طباعي serif أو sans serif.
- BodyExtraSmall هو أصغر حجم للنص. تُستخدم نصوص الفقرات عادةً للكتابة الطويلة لأنّها مناسبة لأحجام النصوص الصغيرة. بالنسبة إلى المقاطع النصية الأطول، يُنصح باستخدام خط طباعي serif أو sans serif.
الرقم
تُستخدم أنماط النصوص الرقمية للأرقام، وعادةً ما تقتصر على بضعة أحرف. يمكن أن تتضمّن خصائص أكثر تعبيرًا بأحجام العرض الأكبر. توفّر مرونة لتوسيع محور العرض مع أقل قدر من المشاكل المتعلّقة بالتوافق مع اللغات المختلفة وتغيير حجم الخط.
- NumeralsExtraLarge هو أكبر دور للأرقام. تستخدم الأرقام مسافات جدوليّة تلقائيًا. وهي تعرض أرقامًا موجزة لا تتجاوز حرفين أو ثلاثة أحرف، ولا تتطلّب ترجمة، مثل شاشة الشحن أو أداة اختيار الوقت.
- NumeralsLarge هي ثاني أكبر دور للأرقام. تستخدم الأرقام مسافات جدوليّة تلقائيًا. وهي سلاسل أرقام كبيرة الحجم تقتصر على شاشات عرض الوقت الكبيرة التي لا تتطلّب ترجمة، مثل عدّاد تنازلي أو أداة اختيار الوقت.
- NumeralsMedium هي ثالث أكبر دور للأرقام. تستخدم الأرقام مسافات جدوليّة تلقائيًا. وهي أرقام متوسطة الحجم تقتصر على سلاسل قصيرة من الأرقام، ولا تتطلّب أي ترجمة، مثل عدد الخطوات أو أداة اختيار الوقت.
- NumeralsSmall هو رابع أكبر دور للأرقام. تستخدم الأرقام مسافات جدوليّة تلقائيًا. وهي مخصّصة للأرقام التي يجب إبرازها على نطاق أصغر، حيث لا يلزم توفير ترجمة، مثل أدوات اختيار التاريخ والوقت.
- NumeralsExtraSmall هو أصغر دور للأرقام. تستخدم الأرقام مسافات جدوليّة تلقائيًا. وهي مخصّصة للأرقام التي تتطلّب سلاسل أطول من الأرقام، ولا يلزم فيها توفير ترجمة، مثل مقاييس التمارين.
قوس
يُستخدم نص عنوان Arc للنص المنحني الذي يشكّل علامات الإرشاد في واجهة المستخدم، مثل نص الوقت والتصنيفات المنحنية. محور خط مخصّص يعمل على تحسين نوع الخط بشكل خاص على طول منحنى، وذلك لاستيعاب المسافات المختلفة التي تظهر بين الأحرف عند وضعها في أعلى الشاشة المنحنية مقارنةً بأسفلها.
أهم
- يُستخدم ArcLarge لعناوين الأقواس. يُستخدم Arc لعرض نص على مسار منحني على الشاشة، وهو مخصّص لسلاسل نصية قصيرة في أعلى الشاشة أو أسفلها، مثل تراكبات التأكيد.
- يُستخدم ArcMedium لعناوين الأقواس. يُستخدم Arc لعرض النص على طول مسار منحني على الشاشة، وهو مخصّص لسلاسل نصية قصيرة خاصة بالعناوين في أعلى الشاشة أو أسفلها، مثل عناوين الصفحات.
- يُستخدم ArcSmall لسلاسل نصية محدودة على شكل أقواس. يُستخدم Arc لعرض نص على مسار منحني على الشاشة، وهو مخصّص لسلاسل النصوص المنحنية القصيرة في أعلى الشاشة، مثل نص الوقت.
أسفل
- يُستخدم ArcLarge لعناوين الأقواس. يُستخدم Arc لعرض نص على مسار منحني على الشاشة، وهو مخصّص لسلاسل نصية قصيرة في أعلى الشاشة أو أسفلها، مثل تراكبات التأكيد.
- يُستخدم ArcMedium لعناوين الأقواس. يُستخدم Arc لعرض النص على طول مسار منحني على الشاشة، وهو مخصّص لسلاسل نصية قصيرة خاصة بالعناوين في أعلى الشاشة أو أسفلها، مثل عناوين الصفحات.
- يُستخدم ArcSmall لسلاسل نصية محدودة على شكل أقواس. يُستخدم Arc لعرض النص على مسار منحني على الشاشة، وهو مخصّص لسلاسل النص المنحني القصيرة في أسفل الشاشة، مثل عبارة الحث على اتخاذ إجراء.
تنضيد الحروف
تعتمد الطباعة العمودية على المساحة المتروكة ومربّعات حدود التظليل والخطوط الأساسية لضمان وضوح النص بأي حجم. ضَع في اعتبارك الاعتبارات الهندسية والاتفاقيات الخاصة بمنصتك عند اتخاذ قرارات بشأن الطباعة وتغيير حجم النص والكثافة واستخدام النص في التصاميم التكيّفية.
استخدام البيانات الأساسية
خط الأساس هو الخط غير المرئي الذي يستند إليه سطر النص. في Material Design، يشكّل خط الأساس مواصفة مهمة في قياس المسافة العمودية بين النص وأحد العناصر.
التحقّق من سهولة القراءة
لتحسين إمكانية قراءة الخطوط المعروضة في تطبيقك، أكمِل عمليات التحقّق التالية من إمكانية القراءة.
الأرقام الجدولية والأحادية
استخدِم الأرقام الجدولية (المعروفة أيضًا باسم الأرقام أحادية المسافة) بدلاً من الأرقام النسبية في المواضع التي قد تتغيّر فيها القيم بشكل متكرر أو تتحرّك أو تتضمّن قيمًا تتغيّر بسرعة، مثل مؤقتات العد التنازلي أو أدوات الاختيار أو مقاييس اللياقة البدنية المستمرة.
استخدِم أرقامًا جدولية ذات مسافات متساوية للحفاظ على محاذاة القيم بصريًا من أجل تسهيل المسح الضوئي والمحاذاة، وتجنُّب تحرُّك الأرقام أو النص المجاور.
ارتفاع السطر
ارتفاع السطر هو المسافة بين كل سطر من النص، وهو مرتبط بشكل مباشر بحجم الخط. على Watch، المساحة العمودية محدودة، لذا يتم تحسين ارتفاع السطر لضمان سهولة القراءة، مع زيادة عدد أسطر النص المرئية ضمن إطار العرض إلى أقصى حد.
ارتفاع السطر الإضافي
في Jetpack Compose وعلى Android، تكتسب الكتابة تلقائيًا ارتفاعًا إضافيًا للسطر الأخير لمنع تداخل الأحرف الأطول. وهذا هو السبب في أنّ بعض اختبارات لقطات الشاشة لا تتطابق تمامًا.
ورقة الغش الخاصة بارتفاع الأسطر الإضافي
| النمط التلقائي (حجم النص / ارتفاع السطر) | ارتفاع السطر التلقائي في كل سطر | ارتفاع السطر الإضافي في السطر السفلي فقط | العملية الحسابية |
|---|---|---|---|
| 60 / 60 | 0 (100%) | + 15 (125%) | 60 / 75 (15/125%) (60+15) |
| 50 / 50 | 0 (100%) | + 13 (126%) | 50 / 63 (13/126%) (50+13) |
| 40 / 44 | 4 (110%) | + 7 (127.5%) | 40 / 51 (11/127.5%) (44+7) |
| 30 / 34 | 4 (113%) | + 3 (123.3%) | 30 / 37 (7/123.3%) (34+3) |
| 24 / 26 | 2 (108%) | + 4 (125%) | 24 / 30 (6/125%) (26+4) |
| 20 / 22 | 2 (110%) | + 3 (125%) | 20 / 25 (5/125%) (22+3) |
| 18 / 20 | 2 (111%) | + 3 (125%) | 18 / 23 (5/125%) (20+3) |
| 16 / 18 | 2 (112.5%) | + 2 (125%) | 16 / 20 (4/125%) (18+2) |
| 15 / 18 | 3 (120%) | + 1 (126.6%) | 15 / 19 (4/126.6%) (18+1) |
| 14 / 16 | 2 (114%) | + 2 (128.5%) | 14 / 18 (4/128.5%) (16+2) |
| 13 / 16 | 3 (123%) | + 0 (123%) | 13 من 16 (3/123%) (16+0) |
| 12 / 14 | 2 (116.6%) | + 1 (125%) | 12 / 15 (3/125%) (14+1) |
| 10 / 12 | 2 (120%) | + 0 (120%) | 10 / 12 (2/120%) (12+0) |