مبادئ جوجل التوجيهية لتصميم الماتريال : الشكل أو النمط (Style) – الجزء الثاني

التيبوغرافي

Roboto

منذ إصدار نسخة ايس كريم ساندويتش للاندوريد ،  كان الخط الأساسي هو روبوتو (Roboto). في هذه النسخة تم تعديل وصقل خط Roboto بشكل موسع للعمل علي مجموعة كبيرة من المنصات المعتمدة. فهو مستدير واعرض قليلا، مما يعطيها قدر أكبر من الوضوح.

تحميل خط Roboto

style-typography-roboto-typography.roboto2_specimen_large_mdpi

الأنماط القياسية (Standard Styles)

 مقياس التيبوغرافي والأنماط الأساسية (Typographic Scale & Basic Styles)

الكثير من الأحجام والأنماط في نفس الوقت يمكن أن تحطم وتدمر أي تصميم(layout).مقياس التيبوغرافي هو مجموعة محدودة من أنواع الأحجام التي تعمل بشكل جيد مع بعضها، جنبا إلي جنب مع شبكة التصميم (layout grid) . المجموعة الأساسية من الأنماط تعتمد علي مقياس التيبوغرافي من 12 ، 14 ، 16 ، 20 ، 34 .

style-typography1_large_mdpi

أمثلة لاستخدام نمط العرض (Display Style)

style-typography2_large_mdpi style-typography-8_large_mdpi

أمثلة لاستخدام نمط العنوان الرئيسي (Headline Style)

style-typography4_large_mdpi style-typography5_large_mdpi

من خلال نماذج المعاملات، كل العناوين التي تظهر في شريط التطبيق يجب أن تستخدم نمط (style) العنوان.

أمثلة لاستخدام نمط العنوان (Title Style)

style-typography7_large_mdpi style-typography6_large_mdpi

يوجد بعض الحالات حيث يجب استخدام نمط عنوان فرعي (Subhead) أكبر بدلا من نمط Body الأصغر.بعض هذه الحالات تتضمن عند عرض معلومات كمقتطفات
صغيرة أو عند إرفاق العناوين مع أسطر نص ال Body.

 أمثلة لاستخدام نمط العنوان الفرعي (Subhead style)

style-typography-23_large_mdpi style-typography9_large_mdpi

أمثلة لاستخدام نمط الهيكل ( Body style)

style-typography11_large_mdpi style-typography10_large_mdpi

style-typography13_large_mdpi style-typography12_large_mdpi (2)

أمثلة لاستخدام نمط الزر ( Button Style)

style-typography15_large_mdpi style-typography14_large_mdpi

الألوان الأساسية / تباين اللون (Basic colors/Color contrast)

من المنطقي أن يكون النص الذي يكون لونه نفس لون الخلفية صعب قراءته. ما هو أقل وضوحا أن النص الذي يكون تباينه (contrast) كثير يمكن أن يلمع (dazzle) ويكون صعب للقراءة. وهذا ينطبق خاصة علي الخلفيات المظلمة..

يجب ان يحافظ النص علي نسبة تباين بحد أدني من 4.5: 1 علي الأقل (محسوبة علي أساس قيم السطوع “luminance”) لوضوح القراءة (legibility).ويفضل نسبة 7:1 لقراءة مريحة.

تركيبات الألوان هذه تعتبر أيضا نسب تباين للمستخدمين ذو استجابات غير نمطية (atypical) للون.

style-typography-16_large_mdpi

 

style-typography-18_large_mdpi style-typography-17_large_mdpi

style-typography-20_large_mdpi style-typography-19_large_mdpi

 أمثلة للتوافق والاقتران (Pairing)

style-typography-22_large_mdpi style-typography-21_large_mdpi

style-typography-24_large_mdpi style-typography-23_large_mdpi (1)

ارتفاع الخط (Line Height)

يتم تحديد ارتفاعات الخط (Line heights) علي اساس الحجم الفردي والوزن لكل نمط (style) لتحقيق انقرائية صحيحة و تباعد مناسب.التفاف الخط (Line wrapping) ينطبق فقط علي Body ، والعنوان الفرعي(Subhead) ، العنوان الرئيسي. جميع الأنماط والأشكال الأخري يجب أن تكون كخط واحد.

style-typography-30_large_mdpi style-typography-27_large_mdpi

style-typography-30_large_mdpi

قوانين خرق الخط / الوصل (Line breaking rules / Hyphenation)

style-typography-33_large_mdpi style-typography-32_large_mdpi

 

الحروف لكل طول خط

ضع في عين الاعتبار هذه النصحية للانقرائية وطول الخط من معهد Baymard:

يجب أن يكون في كل سطر حوالي 60 حرف اذا كنت تريد تجربة انقرائية جيدة. وجود كمية مناسبة من الحروف في كل سطر هو المفتاح لسهولة انقرائية النص.

عريض جدا – اذا كان خط النص طويل جدا فعين المستخدم ستجد صعوبة في التركيز علي النص. لأن الطول يجعل من الصعب تكوين فكرة لمكان بداية السطر ونهايته. علاوة علي ذلك يمكن أن يكون من الصعب الاستكمال من السطر الصحيح في النصوص الكبيرة.

ضيق جدا – اذا كان السطر قصير جدا فالعين ستضطر إلي الانتقال في كثير من الأحيان، كسر إيقاع القارئ. الأسطر القصيرة جدا تقوم بإجهاد الناس والقارئين، مما يجعلهم يبدأوا بقراءة السطر التالي قبل الانتهاء من الحالي (وبالتالي تخطي كلمات قد تكون مهمة جدا).

style-typography-34_large_mdpi

التتبع والمسافات بين الحروف

style-typography-36_large_mdpi

 

المصدر

 

مقالات ذات صلة

2 تعليقان

  1. Mohamed Abdelfatah
    2 سبتمبر,2014 في 1:05 ص - Reply

    معلومات غاية في الأهمية .

  2. Mohamed Fayed
    2 سبتمبر,2014 في 1:06 ص - Reply

    جوجل ماتريال طفرة جديدة فعلا