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

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

مبادئ التصميم المسطح

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

الآن دعنا نلقي نظرة على العوامل التي تخلق تصميمًا مسطحًا. هناك خمس خصائص محددة للغاية لمبادئ التصميم المسطح، وفي هذه المقالة نلقي نظرة على كل منها ونقدم مقدمة للتصميم المسطح “تقريبًا”.

لا توجد تأثيرات إضافية

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

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

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

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

عناصر بسيطة في التصميم المسطح

التصميم المسطح
التصميم المسطح
التصميم المسطح

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

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

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

هل تحتاج إلى مساعدة للبدء؟ تقدم Designmodo مجموعة متنوعة من مجموعات واجهة المستخدم المستخدمة في التصميم المسطح؛ من Square UI Free و Flat UI Free ، مجموعة أدوات PSD / HTML UI بسيطة مع مكونات بسيطة، إلى Square UI و Flat UI Pro، حزمة واجهة مستخدم PSI / HTML كاملة لمشاريع تصميم التطبيقات والمواقع الإلكترونية.

ركز على التايبوجرافي

نظرًا لطبيعة العناصر البسيطة في مبادئ التصميم المسطح، فإن التايبوجرافي مهمة جدًا.

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

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

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

ركز على اللون

التصميم المسطح

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

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

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

نهج الحد الأدنى (Minimalist approach) في التصميم المسطح

التصميم المسطح

طبيعة التصميم المسطح بسيطة وتعمل بشكل جيد مع نهج التصميم البسيط الشامل.

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

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

التصميم الشبه المسطح

التصميم المسطح

التصميم “شبه المسطح” الذي يوافق معظم المصممين على استخدامه هو التصميم المسطح “تقريبًا”.

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

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

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

منشور ذات صلة
تصميم UX للهاتف الجوال 8 Minutes

9 مبادئ لتصميم UX للجوال

أمير مقدم

أصبح تصميم UX للجوال أحد أهم مجالات العمل لمصممي الواجهة وتجربة المستخدم. ف المحمول على مجموعة واسعة من المنتجات الرقمية المستخدمة.

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

السلة