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

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

5 مكونات مميزة للتصميم المسطح الحديث:

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

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

3. الطباعة البسيطة
يعتمد اختيار الخط المسطح على معيار واحد: سهولة القراءة. تُستخدم عادةً خطوط Sans serif ذات عرض حد ثابت.

4. زر شفاف
أحد العناصر الشائعة في تصميم الويب الحديث. والسبب هو أنه لا يجذب الكثير من الاهتمام، ولكن يمكن التعرف عليه بوضوح كزر.

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

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

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

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

بناءً على كتاب اتجاهات تصميم الويب.

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

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

قليلا من التاريخ

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

التشكل

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

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

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

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

تصميم شقة

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

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

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

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

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

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

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

تصميم المواد

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

من خلال تسمية مادة التصميم بـ "علامة تجارية"، أعني أنها تحتوي على مجموعة كاملة من التوصيات والمبادئ المحددة بوضوح والتي يتبعها كل مصمم يحترم نفسه. من الواضح تمامًا سبب تقديم Google للتصميم متعدد الأبعاد: كانت هناك حاجة لتوحيد التصميم بحيث تبدو التطبيقات متماثلة على أي من أجهزة Android العديدة.

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

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

إيجابيات وسلبيات التصميم المسطح

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

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

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

• لديه مالك (شركة جوجل). ولذلك، ينبغي توجيه أي أسئلة واقتراحات للتحسين إلى المالك.
• نظرًا للمحور Z، قد تستغرق عملية التصميم وقتًا أطول حتى تكتمل.
• تتطلب العناصر المتحركة المزيد من الموارد.
• يمكن أن يؤدي الالتزام الصارم بالمبادئ التوجيهية إلى الحد من أصالة التصميم.

لخص

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

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

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

إذا وجدت خطأً مطبعيًا، فقم بتمييزه ثم اضغط على Ctrl + Enter! للاتصال بنا يمكنك استخدام .

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

كيف لا ترسم أيقونات مسطحة

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

المثال هو مجرد ألوان زاهية لا تتناسب مع بعضها البعض + أيقونات ذات جودة رديئة (أخذت المثال من مجموعة مدفوعة، ولكن دائمًا ما يستخدم المستقلون أيقونات تم تنزيلها مجانًا من مجموعات مختلفة والتي لا تتناسب أيضًا مع بعضها البعض) .

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

مثال على الأيقونات المسطحة الجيدة:

لا ينبغي دمج الألوان والأيقونات مع بعضها البعض فحسب، بل يجب أيضًا أن تشكل كلًا واحدًا.

مشاكل التصميم المسطح منخفض الجودة

1. الملاحة وسهولة الاستخدام

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

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

2. لفافات قدم مسطحة طويلة

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

3. أزرار مربكة

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

4. أيقونات مرسومة بشكل سيء

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

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

5. التركيز على المحتوى الزائف

يفترض تصميم موقع الويب المسطح التركيز على المحتوى. حسنا، من الواضح - إذا لم يكن التركيز على الرسومات، ثم على المعلومات. ولكن إذا نظرت بعناية إلى الصفحات المقصودة "الحديثة" ذات النمط المسطح التي تقدمها استوديوهات الويب الروسية، فلن يتم إيلاء سوى القليل من الاهتمام للمحتوى. يسمى:

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

فهل التصميم المسطح ضروري لمواقع الويب على الإطلاق؟

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

لا يفهم معظم العملاء جودة الرسومات، وعند الموافقة على تصميم موقع ويب، يسترشدون بذوقهم الشخصي (إعجاب/عدم إعجاب). وهنا تلعب الموضة دورًا.

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

مثال على التصميم المسطح عالي الجودة:

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

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

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

يمكنك العثور على أمثلة جيدة للتصميم المسطح على http://market.envato.com/. هناك الكثير من التخطيطات والأيقونات والقوالب التي ستمنحك فهمًا واضحًا لما يبدو عليه التصميم الحديث .

1. ما هو التصميم المسطح؟

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

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

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

2. القليل من التاريخ

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

بدأ التصميم المسطح بالشكل الذي نراه الآن يكتسب شعبية بعد أن بدأت شركة Microsoft في إنتاج منتجات بما يسمى بأسلوب المترو. Metro هو تصميم لواجهة مستخدم من Microsoft يتميز بأسلوبه وبساطته.

في 2010 أصدرت شركة مايكروسوفت نظام التشغيل Windows Phone 7، الذي استخدم تصميمًا مسطحًا بحواف حادة ورسومات بسيطة موروثة من أحد منتجاتها السابقة.مايكروسوفت (زون). لاحقًا، مستوحاة من النجاح، أصدرت Microsoft نظام التشغيل Windows 8 استنادًا إلى نفس نمط Metro المسطح.

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

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

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

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

تصميم مترو مايكروسوفت

تصميم أبل iOS 7

تصميم المواد من جوجل

3. تذكر أن تكون نظيفاً

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

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

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

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

4. اجعله يصل إلى الكمال

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

Adobe Photoshop واضح هنا: فهو يعمل مع الرسومات النقطية، التي تعتمد على وحدات البكسل.

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

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

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

5. اللون

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

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

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

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

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

هناك العديد من الخدمات المشابهة الأخرى ذات اللوحات المخصصة التي قد تكون مفيدة. ومع ذلك، هناك أداة واحدة تم إنشاؤها خصيصًا للتصميم المسطح، وهي FlatUIColors.com من Designmodo - وهي خدمة تحتوي على مجموعة من الألوان "المسطحة"، وهي مناسبة جدًا للعمل. أصبح هذا الموقع شائعًا جدًا بين المصممين الذين يبحثون عن حلول ألوان جيدة لتصميم مثالي. جربها!

ويمكنك أيضًا العثور على مجموعة أكبر من الألوان واللوحات دليل تصميم المواد من جوجل.

6. الظلال الطويلة

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

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

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

7. العمل مع الخطوط

تلعب الطباعة دورًا كبيرًا في التصميم المسطح. غالبًا ما يصبح النص هو العنصر الرئيسي في التكوين.

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

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

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

8. إيجابيات وسلبيات التصميم المسطح

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

الايجابيات

شعبية

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

بساطة

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

سطوع

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

عيوب

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

عدم تجاوب

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

مشاكل مع الطباعة

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

مرئيات ضعيفة

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

9. اتجاهات التصميم المسطح المستقبلية

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

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

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

وبالتالي، فإن المسطحة لا تفقد ميزاتها، ولكنها تصبح أكثر إثارة للاهتمام ومرونة- انه يتحسن حقا.

الاستنتاجات

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

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

بعد كل شيء، ما الذي يمكن ذكره أيضًا حول التصميم المسطح؟

إذا كنت حقًا تحب المسطح بحوافه الحادة، وألوانه الغنية وخطوطه الواضحة، ونظافته وبساطته، فابحث عنه!

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

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

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

جزيرة الجزيرة

يناير الإبداعي

الحد الأدنى من القرد

ما هو التصميم المسطح؟

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

ما هو ليس التصميم المسطح؟

• التصميم المسطح ليس تصميمًا سكيومورفيسمًا أو تصميمًا يحاكي شكل وملامح "الواقع".
• التصميم المسطح لا يتضمن أزرار لامعة
• التصميم المسطح لا يشمل الزخارف
• في التصميم المسطح لن تجد أفكارًا تقليدية عن “العمق”
• التصميم المسطح لا يناسب جميع المشاريع

هل التصميم المسطح مجرد تصميم فعال؟

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

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

هل تحب التصميم المسطح؟ فيما يلي بعض العناصر التي يمكن استخدامها لتصميم "مسطح".

حزمة أيقونة مسطحة