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

 

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

 

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

 

سنذكر لكم القواعد التي تحدثنا عنها والتي سنتحدث عنها.

 

• إسقاط الإضاءة من الجهة العلوية ( مثلما يأتي ضوء الشمس من السماء).

• الأبيض والأسود يأتيان بالمرتبة الأولى.

•  أظهر اللون الأبيض.

• طُرق وضع النص على الصورة.

• جعل النص منبثقاً وغير منبثق.

• فقط استخدم خطوط جيدة.

• اسرق مثل فنان.

 

 

• القاعدة الرابعة:

?  طُرق وضع النص على الصورة:

 

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

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

 

• تطبيق النص على الصورة مباشرة:

هل يبدو هذا مقبولاً؟ من الناحية التقنية يمكن القيام بذلك ووضع النص على الصورة مباشرة ليبدو ذلك مناسباً.

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

 

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

 

• تطبيق النص كاملاً على الصورة:

 

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

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

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

 

• وضع النص ضمن مربع خاص به:

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

نحن لا نقول بأنه لا يمكنك استخدام الألوان ولكن استخدمها بشكل عقلاني.

 

• جعل  الصورة ضبابية:

يوجد طريقة رائعة لجعل النص المتراكب مقروءاً. وهي جعل الصورة ضبابية قليلاً لإظهار النص. مثل النظام الضبابي iOS 7 للهواتف المحمولة.

 

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

أن يكون مقروء وواضح

 

• الخلفية المتلاشية Floor fade:

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

 

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

 

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

 

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

 

نصيحة: قم بدمج التأثير الضبابي  مع الخلفيةالمتلاشية.. بهذه الحالة ستكون ابتكرت الأرضية العاتمة – Floor Blur.

 

• تقنية scrim:

يمكننا أخذ مدونة Elastica كمثال، حيث تقوم بوضع العناوين فوق الصور أو الصفحة المتحركة. والصورة لا تكون مظلمة وتحتوي على نوع من التباين.

 

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

يوجد حول العنوان مربع ظل خفيف، يمكننا ملاحظة ذلك بسهولة خاصة بوجود خلفية زرقاء خلف النص.

تبدو هذه الطريقة جيدة لإظهار النص بشكل واضح في تصميم واجهة المستخدم.

 

• القاعدة الخامسة:

? جعل النص مميزاً وواضحاً للقارئ Up-pop أو غير مميز Down-pop:

 

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

يعدّ تنسيق النص من أصعب المهام التي يواجهها مصمم واجهة المستخدم، وهذا لا يعني عدم الإلمام أو الخبرة بقواعد العمل.

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

ابتداءً من …

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

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

• التسطير: وهنا تعني الروابط ولا شيء آخر غير ذلك.

• لون الخلفية الخاصة بالنص: ربما يكون مثيراً للاهتمام تأثير التأرجح، ولا يجب استخدامه في الأنماط الشائعة.

• يتوسطه خط: أصبح هذا الخيار غير محبذ أبداً.

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

دعنا نشرح أكثر ما الذي نقصده بــ Up-pop أو Down-pop:

يمكن تقسيم جميع الطرق في تنسيق النص إلى مجموعتين:

• التنسيقات التي تزيد من وضوح النص /كبيرة- غامقة- بأحرف كبيرة..الخ/ أي Up-pop.
• التنسيقات التي تقلل من وضوح النص /صغير- تباين أقل- هوامش أقل ..الخ/ أي Down-pop.

لن نطلق على هذه الأنماط اسم (العرض أو الوزن البصري visual weight)، الأصح أن نقول عن هذه الأساليب تجعلُ النص مميزاً أكثر للقارئ أو غير مميز (up-pop” and “down-pop). كما يفضل المصممون أن يطلقوا عليه.

يظهر أسلوب ال pop-up في العناوين بالصورة المرفقة أعلاه، حيث تتماشى تماماً مع أسلوب وعناصر التصميم، العنوان كبير وواضح في أعلى الواجهة، ومكتوب بلون غامق جداً.

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

ننتقل الآن إلى الجزء الأهم..

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

يمكننا أخذ مثال آخر من موقع Blue Homes الذي يستند تصميمه على العناوين الكبيرة، لكن الكلمة التي يريدون للقارئ التركيز عليها، تم كتابتها بحالة الأحرف الصغيرة. لأن كثرة التشديد على موضوع ما سيكون غير محبذ بالتصميم.

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

كما يمكنك ملاحظة الكلمات أسفل الأرقام بالرغم من أن حجمها صغير ولكن تم كتابتها بأحرف كبيرة ولون داكن. كل هذه الأمور تخلق توازن في التصميم.

(مجلة كونتينت Contents Magazine) مثال جيد للــ up/down-pop.

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

يكون التباين منخفض التأثير كما في “ALREADY OUT” ولا يشدّ الانتباه، ولكن الحجم الكبير للأحرف والمسافات بينها والهوامش الواضحة يجعلها ملفتة للانتباه أكثر. 

أنماط متأرجحة ومختارة..

يعد تصميم العناصر المحددة والمتحركة من أصعب الأمور في التصميم.

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

هذا ما يجعلك تقف أمام:

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

لديك خيار واحد يعمل في كل الأوقات:

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

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

• القاعدة السادسة:

?فقط استخدم خطوط جيدة:

لا توجد استراتيجيات لدراستها في هذا القسم ولكن سنقوم بوضع بعض الخطوط المجانية الرائعة لتقوم بتنزيلها واستخدامها:

المواقع المميزة تستخدم خطوطاً مميزة، ولكنك كمصمم واجهة مستخدم تحتاج شيء بسيط ونظيف لذلك يمكنك استخدام  Wisdom Script.

كما ننصح باستخدام الخطوط المجانية المتوفرة، مثل free fonts خاصة للأشخاص المبتدئين. 

بعض أنواع الخطوط:

• Work Sans: يناسب التصاميم البسيطة مع لمسة من المرح. حيث أنه مثالي وخفيف وحروفه ملتوية واستخدامه محدود في تصميم واجهة المستخدم.

• * لا يمكنك الكتابة بشكل مائل عند استخدام هذا النمط عند تحميله خطوط غوغل – Google Fonts بالرغم من أن التنسيق (العادي) موجود ضمنها وهذا ما يدفع المصممين لعدم استخدامه كخط أساسي.
• * يتميز Work Sans بحروفه العريضة مما يجعلها  مميزة للقارئ حتى وإن كانت صغيرة الحجم وهذا ما يجعله خياراً رائعاً لتطبيقات الهواتف الذكية
• * يمكنك تحميلة من  Google Fonts (لكنك لن تتمكن من الكتابة به بخط مائل) أو من Font Squirrel (مع وجود خاصية الخط المائل)

 

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

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

• Metropolis: منذ إنشاء الانترنت انتشرت خطوط مثل Gotham و Proxima Nova بشكل كبير، كما هو الحال في كل من اتجاهات المصممين، ستشعر بأن استخدامه رائع ولطيف.

لسوء الحظ أنها ليست مجانية تماماً إلا ضمن free with Adobe Fonts، ولكن هناك بديل مجاني لها وهو Metropolis. ولكن هناك بدائل أخرى مجانية اطلع عليها.

نصيحة من المحترفين: 

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

• Source Sans Pro: من الأشياء المحببة في هذا الخط، هو أنك لا تستطيع مقاومة استخدامه خاصة إن كنت من محبي Open Sans و Lato المشابهة له، فجميعهم تجمعهم نفس نقاط القوة بكونهم محايدين – neutral character ويتمتع باللمسة البشرية البعيدة عن أشكال الأحرف الهندسية الحادة والخالية من الروح. كما يمكنك الإطلاع على مشابهاته  Source Serif و  Source Code Pro. يمكنك الحصول عليها في  Google Fonts.

• IBM Plex Sans: بعد عقود من استخدام شركة IBM لنمط خطوط  Helvetica، أصدرت الشركة نمط Plex خاص بها. يتميز بكونه غريباً بعض الشيء وهو ماتتميز به هذه الشركة.

وهناك أيضاً Plex Serif و Plex Mono  لتكتمل مجموعتك، احصل عليها من  Google Fonts.

 

•  Feather Icons: في حين أن العديد من مجموعات الأيقونات مثل ahem, Font Awesome والتب تحوي أشكالاً دائرية أو فقاعية لا تعطيك تصميماً بسيطاً وواضحاً جاء هذا النمط ليوفر لك المميزات السابقة مع أنه لايحظى بالتقدير الجيد.

لكن مبتكر هذه المجموعة من الأيقونات لم يوفِرّها كحزمة واحدة إلا أن أحدهم، وضع حزمة مشابهة للأصلية في Github وهذه المجموعة تعمل بشكل جيد، ولكن إن كنت لا تستعمل منها سوى 20 أيقونة فلا داعي لتنزيل المجموعة الكاملة. يمكنك الحصول عليها من  SVG set, partial icon font.

سأتركك الآن مع بعض المصادر لأنواع الخطوط بتصميم واجهة المستخدم:

• تتميز Beautiful Google Web fonts بالجودة وقدرتها على الإلهام.

• تتميز FontSquirrel بأنها تضم الخطوط للاستخدام التجاري بالإضافة إلى انها مجانية بالكامل.

• إن كنت تستخدم Adobe Creative Cloud سيكون لديك امتيازات وتصريح دخول لعدد غير محدود من الخطوط، التي تعد من أفضل الخطوط حتى أنها أفضل من التي أوصينا بها سابقاً مثل Proxima Nova, Adelle Sans, DIN, Freight Text, والعديد من الأنماط المميزة الأخرى.

• القاعدة السابعة:

? اسرق مثل فنان:

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

لذلك سأرفق لك أهم المصادر التي يمكنك الاعتماد عليها:

• موقع  Dribbble:  يمكنك العثور على أمثلة جيدة لتصميم واجهات المستخدم. وليس فقط أخبار المصممين، كما يمكنك متابعة أفضل المصممين عليه.

مثل:

– المصمم Jamie Syke يهتم بتصميم واجهات المستخدم بشكل أساسي، لديه الكثير من الخبرة والتصاميم.

– الأخوان Balkan Brothers يمتلكان مهارة رائعة بالتعامل مع تدرجات الألوان واستخدام الظلال.

– المصمم Elegant Seagulls إن كنت تبحث عن التشويق والإثارة ستجدها في تصاميمهم.

– المصمم Cosmin Capitanu صحيح أنه لا يركز على تجربة المستخدم، لكن تصميماته خارج الصندوق بتفردها وتميزها.

 

• موقع . Flat UI Pinboard: يمتلكون أمثلة جيدة لتباين واجهات المستخدم لتبدو جميلة.

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

 

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

 

في الختام ..

تكلمنا عن سبع قواعد بمقال من جزئين لمساعدتك و إلهامك بتصاميمك القادمة، كما تبقى عملية التعلم عملية مستمرة مهما وصلت درجة احترافك. 

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

 

المراجع: ترجمة_وبتصرّف_للمقال

7 Rules for Creating Gorgeous UI – Part 2 (Updated for 2022)