نظرًا لأننا نجهز الفرق لتصميم وترميز واجهات قابلة للاستخدام ومتسقة وجميلة باستخدام أنظمة ، فمن الضروري أن تعتمد الكلمات على أساس قوي للطباعة.

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

الخطوط

قبل البحث في التفاصيل ، لديك للاستقرار على الأساسيات: الخط (الخطوط). من خلال الاستكشاف ، والمقارنة ، والبحث ، وفي كثير من الأحيان - بالنسبة للشركات الكبيرة - إنشاء خط بنفسها ، فإن كل شاشة تتالي وتعتمد على هذا الاختيار.

العائلات والأوزان والملفات الاحتياطية

أثناء يمكن للأنظمة تغيير الخطوط بناءً على السمات ، ومعظمها تعتمد في البداية على تحديد عائلة خطوط serif و / أو sans-serif الأولية. يتم تعزيز كل خط بسلسلة من العناصر الاحتياطية (Hello و Arial و Times) ، وتطرح العديد من الأنظمة خطًا أحادي المسافة لعرض الشفرات (حتى لو كانت خاصة بها).

يمكن لبعض الأنظمة التخلص من مثل قليل من اثنين أو ثلاثة أوزان من محرفهم الأساسي ، سعياً لتحقيق التوازن بين التنوع والمرونة مع الحوكمة ووزن التنزيل.

نصيحة: الوصول إلى الخط الأساسي ليس بالأمر الصعب دائمًا ، ولكن اختيار الأوزان المراد تضمينها عواقب طويلة المدى. من السهل إضافة الخطوط والأوزان. إدارة حجم التنزيل وتغييرها أمر صعب.

الحصول على الخطوط ، سواء عن طريق التنزيل أو الرابط أو CDN

سواء كان برنامج نظام التصميم يمتلك الخطوط أم لا ، مستخدمو التصميم يتوقع النظام أن يوفر النظام الإرشادات اللازمة لاستخدام الخطوط.

من منظور المصمم ، الأمر كله يتعلق بالتنزيلات. تخضع بعض الخطوط للملكية الفكرية بإحكام مع مشاركة محدودة للغاية عن قصد. لذلك ، على الأقل ، يجب أن توفر صفحة الطباعة تنزيلًا مباشرًا أو إرشادات حول كيفية الحصول على الموافقة للحصول عليها. توفر معظم الفرق ملفًا مضغوطًا قابلاً للتنزيل يتضمن جميع الملفات التي تحتاجها لتثبيت الخطوط واستخدامها محليًا.

بالنسبة للمطورين ، يعتمد ذلك على النهج الذي يوفر خيارات مثل:

• مباشر تنزيل الخطوط لخدمة الخطوط نفسها
• إرشادات الارتباط بخدمة مثل خطوط Google
• إشارات CDN التي تشير إليها جميع المنتجات بشكل جماعي
• دعوة للاتصال بـ مهندس تقني ، حيث أن ترخيص الخط مطلوب. تتطلب المؤسسات هذا للتحكم في التكلفة المتكررة وغير التافهة لاستضافة الخط وتقديمه.

الوجبات الجاهزة: يحتاج الأشخاص المختلفون إلى الخطوط بطرق مختلفة. يتوقع مستخدمو النظام أن يشرح النظام كيفية استخدام كل شيء بسهولة ، حتى لو لم تكن مهمة فريق النظام هي إنشاء خطوط مخصصة أو تقديم الخطوط بأنفسهم.

مقياس الطباعة & amp؛ التسلسل الهرمي

تعرض معظم أنظمة التصميم مقياسًا للطباعة في الوثائق كمكدس رأسي. هذا لا يكفي. يجب أن ينشئ نظام الطباعة أيضًا تركيبات مثل النص الأساسي والعناوين واللون والاستجابة واللون والتفاصيل الدقيقة الأخرى.

نص النص

تستفيد الأنظمة من مقياس نوع لتقديم جوهر أحجام النص - غالبًا ما يتم تسميتها ببساطة على أنها نص أو نص - والتي تتضمن صغيرة ومتوسطة وكبيرة ، وإذا كنت بحاجة إليها ، xs و xl وما إلى ذلك. تحتاج معظم الأنظمة إلى ثلاثة أو نحو ذلك (وبالتالي ، أشعر بالراحة عند استخدام أحجام القمصان). ابدأ بقليل منها وقم بالتوسيع حسب الضرورة كتصميمات المكونات - وتركيبات الصفحة في البرية.

قد تقدم نسخة النص أيضًا فقرة "Lead" مميزة (بدلاً من ذلك ، "Lede") لفتح صفحة ، مثل كما في مقال (المزيد عن ذلك لاحقًا). وبالتالي ، قد يحتاج مقياس S / M / L البسيط أيضًا إلى متغيرات أخرى تؤدي. هذا مهم بشكل خاص في الأنظمة التي تقدم أحجامًا متعددة ، نظرًا لأن العميل المحتمل لشاشات العرض الأكبر والأقل كثافة سيكون أكبر من العميل المحتمل بالنسبة للبدائل الأصغر عالية الكثافة.

لون النص

يلعب اللون أيضًا دورًا رئيسيًا في التسلسل الهرمي المطبعي للواجهة ، غالبًا حسب الأنواع المحددة مثل:

• أساسي
• ثانوي
• تفاعلي
• معطل
• خطأ ، أحمر عادةً ، لأعلى تباين مع ما يحيط به

عندما يتعلق الأمر بتسمية ألوان النص بناءً على القصد ، أجد أن أسماء Hudl الموحدة هي الأكثر إثارة للاهتمام: الافتراضي ، والتباين ، والدقيق ، وغير الضروري. مثل هذه الأسماء توازن بين المقايضات بين تحكم أقوى وتجريد أكبر (وبالتالي ، إعادة استخدام أقل وضوحًا).

هذه الأنواع نموذجية ، تمت مواجهتها أثناء تصميمات المكونات المبكرة مثل الزر والإدخال والارتباط. مع نمو المكتبة ، أصبحت متناثرة في جميع أنحاء كتالوج المكونات عبر أدوات مثل الرموز المميزة و mixin. والجدير بالذكر أنها أصبحت ضرورية نظرًا لأن تصميمات المكونات تمتد في الأماكن الفاتحة والداكنة.

على سبيل المثال ، في مكتبة Yoursite.com (التي تتم صيانتها بشكل أقل صرامة ، والأطفال الإسكافيون وجميعهم) ، نستخدم مزيجًا لتلوين النص يتكرر من خلال ألوان الخلفية ، حسب النوع.