لماذا تبدو طباعة واجهتك مبتدئة: 6 حلول بقيم دقيقة
ستة أخطاء طباعية تجعل الواجهة تبدو مبتدئة، والحل الاحترافي لكل منها بالأرقام الدقيقة: سلم خطوط، عائلة واحدة، رمادي مقروء، الأحرف الكبيرة، ارتفاع السطر والتسلسل الهرمي.
الطباعة المبتدئة نادرًا ما تكون خطأً واحدًا كبيرًا. إنها ستة أخطاء صغيرة، يُحسم كلٌّ منها بالإحساس: حجم بدا مناسبًا، وخط بدا ممتعًا، ورمادي بدا أنيقًا. الطباعة الاحترافية تبدو هادئة لأن كل خيار من هذه الخيارات يتبع قاعدة. إليك الستة بالأرقام.
1. استخدم سلم خطوط
✕ مبتدئ: أحجام اختيرت بالإحساس
✓ محترف: نسبة واحدة، 1.25 من 16
في اليسار، كل حجم اختير بمعزل عن غيره: 31 و27 و22 و17 و15 و13. الخطوات بينها غير متساوية، فتبدو بعض المستويات متطابقة تقريبًا وتقفز أخرى. في اليمين، كل حجم هو السابق مضروبًا في 1.25: 16 و20 و25 و31 و39. الخطوات متساوية، فيختلف كل مستوى بوضوح عن التالي.
نسبة بين 1.2 و1.333 تناسب معظم الواجهات. اختر واحدة، ودوّنها، ولا تكتب أبدًا حجمًا ليس في القائمة. في CSS هذه مجموعة قصيرة من المتغيرات، وفي Figma مجموعة أنماط نصية. يشرح دليلنا عن سلم الخطوط المعياري كيفية اختيار النسبة.
:root {
--text-sm: 0.8rem; /* 12.8px */
--text-base: 1rem; /* 16px */
--text-lg: 1.25rem; /* 20px */
--text-xl: 1.563rem; /* 25px */
--text-2xl: 1.953rem; /* 31px */
--text-3xl: 2.441rem; /* 39px */
}
2. عائلة واحدة، وزنان
عطلة نهاية الأسبوع في لشبونة
يوميات سفر صغيرةثلاثة أيام، وحيّان، ورحلة ترام طويلة جدًا.
اقرأ المزيد✕ مبتدئ: أربعة خطوط في بطاقة واحدة
عطلة نهاية الأسبوع في لشبونة
يوميات سفر صغيرةثلاثة أيام، وحيّان، ورحلة ترام طويلة جدًا.
اقرأ المزيد✓ محترف: عائلة واحدة، عادي وعريض
كل خط جديد يحمل شخصيته الخاصة، وأربع شخصيات في بطاقة واحدة تتشاجر. لا يستطيع القارئ أن يعرف أيها هو العلامة التجارية. عائلة واحدة بوزنين، عادي للقراءة وعريض للعناوين، تكفي لبناء كل مستوى تحتاجه الشاشة.
إذا أردت عائلة ثانية، أعطها مهمة واحدة، مثل العناوين فقط، وأبقها هناك في كل مكان. لا تضف خطًا أبدًا لجعل عنصر واحد "مميزًا".
3. رمادي يمكنك قراءته
طلبك في الطريق
الوصول من 14:20 إلى 14:40.سنرسل لك رسالة عندما يقترب المندوب.
✕ #B0B0B0 على الأبيض: صعب القراءة
طلبك في الطريق
الوصول من 14:20 إلى 14:40.سنرسل لك رسالة عندما يقترب المندوب.
✓ #6B6B6B على الأبيض: سهل القراءة
يبدو الرمادي الفاتح راقيًا في ملف التصميم على شاشة ساطعة. أما على هاتف في الخارج فيختفي. وقت الوصول في اليسار هو أنفع سطر في البطاقة وأصعبها قراءة.
#6B6B6B ما زال يبدو هادئًا بجانب العنوان الأسود، ويظل مقروءًا. كقاعدة، يجب ألا يكون النص الثانوي على الأبيض أفتح من نحو #767676، وهو أفتح رمادي يجتاز الحد الأدنى لإمكانية الوصول للنص الأساسي.
4. الأحرف الكبيرة للتسميات فقط
We've updated our terms. Please review the changes before your next order.
✕ مبتدئ: جملة بأحرف كبيرة
UPDATE
We've updated our terms
Please review the changes before your next order.
✓ محترف: تسمية بأحرف كبيرة ونص بحالة الجملة
الأحرف الكبيرة تُزيل أشكال الكلمات. في الأحرف الصغيرة تمنح الحروف الطويلة والقصيرة كل كلمة ملامح تتعرف عليها عينك؛ أما في الأحرف الكبيرة فكل كلمة مستطيل، فتُقرأ الجملة حرفًا حرفًا. لهذا تبدو الفقرة بالأحرف الكبيرة كأنها صراخ وتستغرق وقتًا أطول في القراءة.
تصلح الأحرف الكبيرة لما صُنعت له: تسميات قصيرة من كلمة إلى ثلاث كلمات، مثل وسم قسم أو حالة أو زر. وكل ما هو أطول يُكتب بحالة الجملة.
5. عناوين محكمة، ونص متنفس
المسافات جزء من الطباعة
ارتفاع السطر الضيق يحوّل الفقرة إلى جدار. امنح النص الأساسي مساحة ليتنفس وأبقِ العناوين محكمة.
✕ مبتدئ: عنوان مرتخٍ ونص مزدحم
المسافات جزء من الطباعة
ارتفاع السطر الضيق يحوّل الفقرة إلى جدار. امنح النص الأساسي مساحة ليتنفس وأبقِ العناوين محكمة.
✓ محترف: العنوان 1.1 والنص 1.5
لارتفاع السطر مهمتان متعاكستان بحسب الحجم. العناوين الكبيرة فيها أصلًا مساحة وفيرة داخل حروفها، فالعنوان بارتفاع 1.1 يتماسك كشكل واحد. أما النص الصغير فيحتاج مسافة بين السطور ليجد العين بداية السطر التالي، فيأخذ 1.5.
النسخة المبتدئة تفعل العكس، وغالبًا لأن ارتفاع سطر واحد طُبق على كل شيء. اضبط قيمتين واستخدمهما في كل مكان: نحو 1.1 إلى 1.2 للعناوين، و1.4 إلى 1.6 للنص الأساسي.
6. الحجم والوزن واللون والمسافة
الطلب #2841
تم التسليماليوم، 14:203 عناصرالإجمالي $42.80
✕ مبتدئ: كل شيء عريض، وحجم واحد
● تم التسليم
الطلب #2841
اليوم، 14:20 · 3 عناصرالإجمالي $42.80
✓ محترف: أربع أدوات، ترتيب واضح واحد
حين يكون كل شيء عريضًا، لا يكون شيء كذلك. البطاقة المبتدئة فيها خمسة أسطر بالحجم والوزن نفسيهما، فيضطر القارئ إلى قراءتها كلها ليجد المهم.
البطاقة الاحترافية تستخدم أربع أدوات، كلٌّ منها بقدر قليل: رقم الطلب أكبر، والحالة تأخذ لونًا ونقطة، والتفاصيل تنخفض إلى الرمادي، والمسافة تفصل الإجمالي. لا تُدفع أي أداة بقوة، ولهذا تبدو هادئة. المزيد في التسلسل الهرمي الطباعي.
الحلول الستة في جدول واحد
| مبتدئ | محترف | القيمة |
|---|---|---|
| أحجام اختيرت بالإحساس | سلم خطوط واحد | 1.25 من 16: 20 و25 و31 و39 |
| عدة خطوط | عائلة واحدة، وزنان | عادي وعريض |
| نص رمادي فاتح | رمادي مقروء | #6B6B6B على الأبيض، ولا أفتح من #767676 |
| جمل بأحرف كبيرة | أحرف كبيرة للتسميات القصيرة | من كلمة إلى ثلاث كلمات |
| ارتفاع سطر واحد للجميع | ارتفاعا سطر | العناوين 1.1، والنص 1.5 |
| كل شيء عريض | أربع أدوات للتسلسل الهرمي | الحجم والوزن واللون والمسافة |
الأسئلة الشائعة
ما هو سلم الخطوط الجيد للواجهات؟
نسبة بين 1.2 و1.333 انطلاقًا من أساس 16 px. النسبة 1.25 تعطي 16 و20 و25 و31 و39 px، وهي مستويات تكفي معظم الشاشات.
كم خطًا ينبغي أن تستخدم الواجهة؟
عائلة واحدة تكفي، بوزنين. أضف عائلة ثانية فقط بمهمة ثابتة واحدة، مثل العناوين، واستخدمها بالطريقة نفسها في كل مكان.
ما ارتفاع السطر المناسب للنص الأساسي؟
نحو 1.5 للنص الأساسي ونحو 1.1 إلى 1.2 للعناوين الكبيرة.
أي رمادي يُقرأ على الأبيض؟
#767676 هو أفتح رمادي يجتاز الحد الأدنى في WCAG للنص الأساسي على الأبيض. و#6B6B6B يمنح هامشًا أكبر قليلًا ويظل يبدو ثانويًا.
هل ينبغي أن يكون نص الواجهة بأحرف كبيرة كلها؟
فقط للتسميات القصيرة من كلمة إلى ثلاث كلمات. النص الأطول بالأحرف الكبيرة أبطأ في القراءة لأن الكلمات تفقد شكلها.
المصادر
- سلم الخطوط: 16 × 1.25ⁿ = 20 و25 و31.25 و39.06، معروضة مقرّبة.
- التباين على الأبيض، محسوب بصيغة WCAG 2:
#B0B0B0بنسبة 2.2 إلى 1، و#767676بنسبة 4.5 إلى 1، و#6B6B6Bبنسبة 5.3 إلى 1. تطلب WCAG نسبة 4.5 إلى 1 للنص الأساسي (1.4.3 Contrast (Minimum)). - نُشر أولًا كشرائح على UX Brainy.
Want type that looks this calm across your whole product? Our team builds UI and design systems with the typography decided once.
Get Started
