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

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

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

مستوى عالٍ من الوضوح

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

حجم الخط

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

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

فوصلة السطور

كما عَرّفنا في المقالة السابقة “فن الطباعة في عالم التصميم الرقمي“، تعتبر فوصلة السطور هي المسافة بين الخطوط الأساس للنص، عادةً ما تكون فوصلة السطور في واجهة الهاتف أصغر مقارنة مع نسخة الحاسوب المكتبي.

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

طول الخط

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

المساحة البيضاء

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

مستويات أقل في التسلسل المطبعي

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

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

بساطة الخطوط

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

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

علاوة على ذلك، يجب اختيار أنواع خطوط تناسب بساطة التصميم وتنظيمه، فالخطوط المبتكرة والمزخرفة قد تبدو صعبة القراءة في الشاشات الصغيرة، ودائماً ما يقوم المصممون بالجمع بين خطي serif و sans-serif لخلق ما يكفي من التباين بين عناصر النص في واجهة التصميم.

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

تباين دقيق

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

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

إعداد طباعة عملية

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

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

محتوى ذو أولوية

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

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

تصفيف واضح للنص

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

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

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

الطباعة ذات الأداء الوظيفي

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

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

ملاحظات يجب عليك تدوينها

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

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

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

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

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

ترجمة بتصرف لمقال Mobile Typography: 8 Steps Toward Powerful UI

مقترحات للقراءة

فن الطباعة في عالم التصميم الرقمي (دليل للمبتدئين)

النسبة الذهبية لتحقيق التوازن في تصميم واجهة المستخدم

مجالات تخصص مصمم الويب Web Designer

كتب بواسطة

يونس بن عمارة

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

إنضم إلى مئات المشتركين لتحصل على أهم المقالات التي نقوم بنشرها اسبوعياً

أساسيات معمارية المعلومات Information Architecture للمصممين

تحتوي الشبكة المعلوماتية العالمية على قدرٍ هائلٍ من المعلومات التي يصعب تصورها غير منظمة ومن دون هيكلية لأن العقل البشري حينئذ لن يكون قادراً على استيعاب شيء منها، حيث

اقرأ المزيد

فن الطباعة في عالم التصميم الرقمي (دليل للمبتدئين)

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

اقرأ المزيد

مجالات تخصص مصمم الويب Web Designer

بات من المعروف أن مجال تصميم مواقع الإنترنت منقسم ضمن إختصاصي أساسيين مصمم الويب Web Designer ومطور الويب Web Developer، ولكن مع تطور التقنيات المستخدمة ضمن تصميم المواقع وبرمجتها أصبح كل إختصاص

اقرأ المزيد