5 طرق لكيفية تحسين الطباعة على شبكة الإنترنت

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

ولكن أولاً ، ما هو النص؟

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

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

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

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

حجم الخط

منذ بضع سنوات ، كان من الشائع استخدام حجم 10 أو 12 بكسل للنص الأساسي. في الوقت الحاضر ، نستخدم شاشات FHD أو UHD ، لذا يتعين علينا زيادة أحجام الخطوط أيضًا. استخدام حجم الخط الافتراضي الكبير سيزيد من وضوح محتوى النص الخاص بك. من الأفضل استخدام حجم الخط من 16 إلى 22 بكسل لجسمك (أو

) لتسهيل قراءة المحتوى الخاص بك. ثم عندما تقوم بتصميم موقع متجاوب لأحجام الشاشة الأصغر ، يمكنك تقليل حجم النص الافتراضي إلى أحجام من 14 إلى 18 بكسل.

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

حجم النص الأساسي الأمثل هو من 16 إلى 22 بكسل لزيادة وضوح محتوى النص الخاص بك.

ولكن لا تنسى ، يعتمد حجم الخط الأمثل لديك دائمًا على محرف الذي حددته لمشروع الويب الخاص بك. هنا على الصورة أدناه ، يمكنك أن ترى الفرق بين x-height (المسافة بين خط الأساس لخط من النوع وقمم الجزء الرئيسي من الأحرف الصغيرة) من Helvetica Neue و Futura.

يمكنك أن ترى الفرق بين Helvetica Neue و Futura بنفس الأحجام.

تباعد الأسطر معروف أيضًا باسم ارتفاع الخط

في الطباعة ، يطلق عليها أيضًا اسم بادئة ، فقد استخدموا شرائط معدنية لفصل الخطوط الفردية.

أثناء التصميم للويب ، يجب عليك استخدام ما لا يقل عن 1.5 مضاعف من حجم نص جسمك لارتفاع الخط الخاص بك ، وهو الأمثل ويوصى باستخدام حوالي 1.1 أو 1.2 مضاعفة في تباعد الأسطر لعناوينك الرئيسية.

يجب عليك استخدام ارتفاع الخط على الأقل 1.5 مضاعفة من حجم النص الأساسي.

ماذا يعني؟ من الناحية العملية ، عند استخدام حجم الخط 16px لمحتوى جسمك ، يجب أن يكون ارتفاع الخط حوالي 24px (كما ترون في المثال التالي).

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

يمكنك رؤية Aktiv Grotesk مع ارتفاع الخط بحجم 1.5 مضاعف للنص الأساسي.

طول الخط

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

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

لذلك ، يجب أن يكون طول السطر محدودًا وأن يكون العدد الأمثل للحروف في كل سطر من 60 إلى 80 لجعل تجربة المستخدم إيجابية للقراء. عندما تقوم بتصميم مواقع سريعة الاستجابة ، يجب عليك ضبط طول الخط إلى أحجام الشاشة الأصغر - للجوال ، يجب عليك استخدام ما بين 30 إلى 40 حرفًا في كل سطر.

الخطوط التي تزيد عن 80 حرفًا هي أيضًا مشكلات كبيرة للأشخاص الذين يعانون من عسر القراءة.

في الصورة ، يمكنك رؤية الفرق بين الخطوط المثالية والخطوط العريضة جدًا.

تناقض

التباين مهم من وجهة نظر قابلية الاستخدام ، لكنه يؤثر أيضًا على الوضوح وسهولة القراءة.

النص الذي لا يتعارض بشكل كافٍ يصعب قراءته وإلغاء تحديد الموقع هو جحيم ليس فقط للأشخاص الذين يعانون من إعاقات بصرية. يمكن أن يقلل التحويلات أو متوسط ​​مدة الجلسة أو يمكن أن يسبب معدل الارتداد.

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

يجب أن يسترشد تباين المحتوى مقابل الخلفية بقاعدة 4.5: 1.

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

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

إيقاع عمودي

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

ولكن كيف يعمل الإيقاع العمودي؟

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

عندما تقوم بتحديد خط الأساس الخاص بك وإنشاء شبكة أساسية خاصة بك ، فإن النقطة الأساسية التي يجب أن تبدأ منها هي تحديد حجم النص الأساسي (

) والمتعددة لارتفاع الخط (خاصية ارتفاع الخط في CSS) ثم قياس كل شيء صعودا.

كما ترون على الصورة التالية ، أنا أستخدم حجم خط 16 بكسل للنص الأساسي وارتفاع خط 24px ، مما يعني أن 24px هو خط الأساس بالنسبة لي (لتوجيه أفضل وإعداد جميع الخطوط إلى خط الأساس الخاص بي ، اعتدت على التقسيم هذا الرقم بنسبة 2 ، 3 أو 4 في الغالب للحصول على المزيد من الأدلة على شاشتي). استنادًا إلى هذا التعريف ، يجب أن تكون جميع المسافات (بما في ذلك الحدود أو الحشوات أو الهوامش) متعددة أو قابلة للقسمة بمقدار 6 بكسل. لجعل التناسق المرئي بين الفقرات والعناوين الرئيسية ، قررت إنشاء مسافات كمضاعفات للرقم 6 - وأخيراً استخدمت 24 أو 36 بكسل. أحجام الخطوط ، ارتفاعات الخط هي مضاعفات 6 بكسل أيضًا.

يمكنك هنا معرفة كيفية عمل الإيقاع العمودي في تصميماتك.

بعض الكلمات كما خاتمة

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