() translation by (you can also view the original English article)
في هذه المقالة سوف نتحدث عن تصميم مسطح. ربما تكون قد سمعت عنها لأنها واحدة من الاتجاهات الرئيسية في التصميم لبضع سنوات بالفعل. دعونا نلقي نظرة فاحصة على هذا الاتجاه والتعرف على ما هو عليه ، من أين جاء ، وما عليك القيام به لجعل تصميم مسطح نظيفة ، حية وسريعة الاستجابة!
يمكن أن تجد الكثير من أمثلة رائعة من تخطيطات الويب تصميم مسطح ورموز مسطحة، وقوالب ومواد أخرى في الأسواق Envato. تحقق لهم من أجل الحصول على رؤية واضحة ما يشبه التصميم المسطح الحديث!
1-ما هو تصميم مسطح؟
تصميم شقة أسلوب حديث أضيق الحدود لواجهة المستخدم وتصميم الرسوم البيانية، والذي يستخدم الحد ني عناصر ويستبعد أي أنواع من الألوان المعقدة والتدرجات، ويسلط الضوء وأخرى لامعة، محكم، تعقبت آثار.
تصميم مسطح هو عكس المباشر سكيومورفيسم وتصميم الغنية. ومع ذلك ، لا يسعني إلا أن أذكر أن التصميم المسطح ليس بسيطًا كما يبدو. لا يزال بإمكانه تضمين بعض ميزات skeuomorphism ، لكننا سنتحدث عن ذلك بعد قليل.
جميع في كل شيء، تصميم مسطح يساعد على التركيز أكثر على المحتوى، دون تشتيت انتباه المشاهدين من التأثيرات المرئية. وهو يؤكد على بساطة العناصر ويجعل في الوقت نفسه واجهات أكثر استجابة وأسرع وأسهل في الاستخدام.
2-قليلاً من التاريخ
تصميم شقة المعروف أنها استخدمت منذ فترة طويلة قبل أن يصبح اتجاه ضخمة في مجتمع التصميم. كان منتشرا في الثمانينيات بسبب التكنولوجيا التي لم تكن قادرة بعد على خلق ودعم التأثيرات المعقدة والقوام والأشكال. ومع ذلك، حتى في تلك السنوات، تصميم تميل إلى اكتساب معالمه سكيومورفيك أول وأبسط، وتحاول أن تبدو أكثر وفيا للحياة.
بدأ التصميم المسطح ، كما نراه الآن ، يكتسب شعبية بعد أن بدأت مايكروسوفت في إطلاق منتجاتها التي تسمى طراز ميترو. المترو هي لغة تصميم واجهة المستخدم التي أنشأتها مايكروسوفت ، وهي كل شيء عن كونها بسيطة ونظيفة وحديثة.
في عام 2010، أصدرت Microsoft Windows Phone 7، التي تستخدم واجهة مستخدم بسيطة وتصميم مسطحة مع حواف حادة ورسومات واضحة، ورثت من واحد من منتجات مايكروسوفت في وقت سابق (المشغل). في وقت لاحق ، مستوحاة من النجاح ، أصدرت مايكروسوفت نظام التشغيل ويندوز 8 ، على أساس نفس الرسومات تصميم مسطح على غرار مترو.
وأخيراً، تصميم مسطح بلغ ذروته شعبية في عام 2013، عندما كشفت أبل دائرة الرقابة الداخلية 7، عرض التصميم الجديد وتغيير كافة عناصر واجهة المستخدم السابقة، بما في ذلك الرموز والخطوط تماما. لقد أنشأوا إرشادات وصفية للغاية حول تصميم واجهة المستخدم وتصميم الرموز.
قريبا بعد ذلك، تحولت جوجل أيضا النمط من صفحات الويب وتطبيقات لتصميم مسطح، تسمية من "تصميم المواد". يحتوي قسم Google على قسم مخصص لتصميم المواد ، بما في ذلك أهدافه ومبادئه وإرشادات رائعة حول إنشاء رموز المواد وواجهة المستخدم والتخطيطات وما إلى ذلك.
ومنذ ذلك الحين، أصبح تصميم شقة اتجاه رئيسي في تصميم طوال السنوات القليلة الماضية، مما يجعل عناصر المواقع والتطبيقات وتصميم أنيق وأنيق وأنيقة.
خلاصة القول، هناك ثلاثة أمثلة عالمية على نمط تصميم الشقة التي ينبغي أن تذكر في عالم وسائط الإعلام الحديثة:
- مايكروسوفت مترو التصميم
- تصميم أبل دائرة الرقابة الداخلية 7
- التصميم المادي جوجل
3. يبقيه بسيط
من الواضح أن التصميم المسطح يسمّى بسبب عدم وجود عناصر وتأثيرات ثلاثية الأبعاد ، مثل التدرجات ، والقوام ، والإبرازات ، والإيحاءات والظلال. النمط المسطح بطريقة ثنائية الأبعاد من كائن مجموعة المرئيات. وبالإضافة إلى ذلك، كائنات معقدة تميل إلى أن تكون مبسطة ومبسطة جداً. أحيانًا نعرض الصور الظلية أو الخطوط العريضة التي تجعل الكائن الفعلي معروفًا ، دون تفاصيل بسيطة.
تعتبر Minimalism هي الاتجاه العالمي في الوقت الحاضر ، وتؤكد هذه البساطة من الأشكال واستخدام الحواف الحادة على التصميم الأنيق والجذاب. الأشكال البسيطة هي أكثر قابلية للفهم وسهلة الفهم. انها حقا جعل قطعة التصميم تبدو في أضيق الحدود ونظيفة ، وتجنب نظرة مشغول ومشوش.
4-تجعل من الكمال
عندما يتعلق الأمر إلى رموز مسطحة وعناصر واجهة المستخدم، من الضروري لجعلها تبدو هش ودقيقة بكسل مثالية قدر الإمكان. هذا ضروري لكل من خطوط المسح ورسومات مكافحة ناقلات.
في هذه الحالة ، كل شيء واضح مع Adobe Photoshop ، لأنه يعمل مع الرسومات النقطية التي هي على ما يبدو قائمة على البيكسل.
عندما يتعلق الأمر إلى Adobe Illustrator، وهذا هو برنامج رسومات المتجهات، الذي يتعامل مع الخطوط والمنحنيات، وتسمى المتجهات، التي يتم رسمها رياضيا. كيفية إنشاء أنيق الفضاء المسطح أيقونات في أدوبي فوتوشوب الخبر السار هو أن الإصدارات الحديثة من Adobe Illustrator أصبحت أداة رائعة للمصممين للتعامل مع رسومات مثالية للبيكسل.
وعلاوة على ذلك، يعني الرسومات المتجهة أساسا العمل مع الأشكال المسطحة وبسيطة مع ألوان مميزة والشبكات. Adobe Illustrator مرنة جداً من حيث الإعدادات ويسمح لك بتغيير الوحدات وضبط الأدلة والشبكات لتلبية الاحتياجات الخاصة بك، ومحاذاة الكائنات واستخدام أنواع مختلفة من يقدح. كل هذا يجعل من الأسهل بكثير إنشاء تصميمات مثالية للبيكسل والتي تبقى واضحة ونظيفة على أي شاشة. إذا كنت تهدف إلى الحصول على رسومات مثالية للبيكسل ، فاحرص على التحقق من هذا الدليل الرائع حول إنشاء عمل فني مثالي للبيكسل في Adobe Illustrator.
5. لون اللكنات والاتجاهات
واحدة من أهم ميزات التصميم المسطح ، وبصرف النظر عن الأشكال ، هو استخدام اللون. تتكون معظم لوحات الألوان لعناصر النمط المسطح من بضعة ألوان أساسية. ألوان مشرقة وجريئة، ونابضة بالحياة والمشبعة هامة بالنسبة لتصميم مسطح.
نظام الألوان في تصميم شقة لا تقتصر على بعض الألوان خاصة. وهو يتضمن العديد من الصبغات والظلال ، ويعتمد على ما تصوره ، سواء كانت تلك الأيقونات مشرقة أو كائنات على غرار الرجعية في لوحة الرجعية خفية.
إذا كنت مصمم من ذوي خبرة، ولديك عين لألواح الألوان اللون المناسب، يمكنك أن تلعب مع لوحة الألوان Photoshop أو المصور، انتقاء الألوان بمجرد التخمين. ومع ذلك، تتطلب هذه العملية الحدس، والممارسة، والمهارات الجيدة. وهناك بعض الأدوات التي قد تكون مفيدة لبناء لوحة مناسبة.
بعضها مناسب لجميع أنواع التصميم والرسوم التوضيحية ، ليس فقط للتصميم المسطح. تلك هي بعض الخدمات مثل CC لون Adobe، المعروفة سابقا باسم Kuler. يمكنك الآن الوصول إليه من خلال موقع الويب أو مباشرة من منتجات Adobe. هو أداة مرنة للغاية، مما يسمح لك جعل أعلى لوح الألوان الخاصة بك أو استخدام مجموعة واسعة من لوحات الصنع المستخدم من المكتبة.
مولد آخر بسيط ومفيد هو Coolors. فقط اضغط على شريط المسافة، وتختلف الألوان من لوح الألوان الخاصة بك، والتي يمكن تعديلها وتصديرها.
هناك بعض الخدمات المشابهة الأخرى مع اللوحات المخصصة التي يمكن أن تكون مفيدة. ومع ذلك، هناك واحد التي تم إجراؤها خصيصا لتصميم مسطح. FlatUIColors.com من Designmodo هي سلسلة من حوامل الألوان المسطحة مع رموز عرافة ، والتي هي مريحة جدا للعمل مع. أصبحت تحظى بشعبية كبيرة بين مصممي تسعى الألوان للتصاميم بكسل مثالية. تحقق من ذلك!
ويمكنك أيضًا العثور على مجموعة كبيرة ومتنوعة من عينات الألوان ولوحات الألوان في دليل التصميم متعدد الأبعاد من Google.
6-طويلة الظلال
كما ذكر أعلاه ، يميل التصميم المسطح إلى أن يكون بسيطًا وواسعًا - ولهذا السبب يرفض استخدام أي نوع من التأثيرات. ومع ذلك ، هناك تأثير واحد ظهر من التصميم المسطح. وأصبح اتجاها وإحدى السمات الهامة.
نحن نتحدث عن تأثير الظل الطويل. لديه بعض الخصائص النموذجية التي تجعل هذا التأثير قابل للتمييز. هذه زاوية بزاوية 45 درجة وحجم كبير (يجب أن يكون الظل حوالي ضعف طول الجسم). نتيجة لذلك الظلال طويلة حقاً تحقيق المزيد من العمق للتصاميم المسطحة.
مثل هذا تأثير يجعل كائن تبدو أكثر ثلاثي الأبعاد، مع الحفاظ على نظرة مسطحة.
7-العمل مع الخطوط
الطباعة يلعب دوراً كبيرا في تصميم مسطح. في كثير من الأحيان ، يصبح النص العنصر الأساسي للتكوين ، بينما لا تشغل العناصر ذات النمط الثابت المشاهد.
تستخدم الخطوط البسيطة عادة في تصميم مسطح ، مما يجعل كل قطعة التصميم تبدو نظيفة وقابلة للقراءة. يمكن أن تجد الكثير من الخطوط الحرة في Adobe Typekit إذا كنت تستخدم منتجات Adobe. خلاف ذلك ، Font Squirrel هو مصدر رائع للخطوط الحرة التي تناسب أي طعم. فقط تأكد من قراءة التراخيص أولاً، إذا كنت بحاجة لاختيار خط للاستخدام التجاري.
تميل معظم التصاميم في النمط المسطح إلى استخدام حروف وأحجام تباين كبيرة ، مما يجعل النص يبدو أكثر وضوحًا.
اختيار الخط بعناية. وينبغي التأكيد على تصميم كل القطعة وتتوافق معها، دون أن تبدو وكأنها بعض العناصر الغريبة. لا يعني هذا أنه لا يمكنك استخدام خطوط Serif أو بعض الخطوط المعقدة بخط اليد مع دوامات وعناصر إضافية. مجرد التمسك نظرة الحد الأدنى، وإبقاء كل شيء في الميزان. ومع ذلك ، فإن معظم التصاميم المسطحة الناجحة تستخدم خطوط Sans Serif في كثير من الأحيان ، نظرًا لأنها أكثر وضوحًا وصعوبة ، بالإضافة إلى جميع عناصر الرسومات ذات النمط المسطح.
8-إيجابيات & سلبيات النمط المسطح
في حين أصبح التصميم المسطح شائعاً جداً نظراً لمميزاته العديدة ، فإنه لا يزال لديه بعض العيوب التي يواجهها المصممون أثناء العمل مع هذا النمط. دعونا نلخص كل الإيجابيات والسلبيات من تصميم مسطح.
الايجابيات
اتجاه
تصميم مسطح تطورت إلى اتجاه، وجذب الكثير من الاهتمام الإيجابي بين المصممين ومصممي الويب، ولا يبدو أن تفقد موقفها. على العكس من ذلك، وهو ينتشر أكثر وأكثر واكتساب بعض أشكال جديدة والميزات، تتحول تدريجيا إلى شيء حتى أكثر إبداعاً.
بساطة
تصميم مسطح بسيط ، بسيط ، ونظيف. عندما يتعلق الأمر إلى مواقع، تصاميم شقة تساعد حقاً لكم إلى التركيز أكثر على المحتوى، لا على تشتيت التأثيرات المرئية. هذا وتعمل أيضا من أجل واجهات تطبيقات جوال: التصميم الأنيق مع أزرار كبيرة مسطحة جعله مثاليا للعمل على الأجهزة النقالة.
والرسومية
استخدام اللون هو زائد كبير آخر من تصميم مسطح. ألوان زاهية وجريئة تبدو جذابة والنظيفة، وعدم وجود التدرجات يجعل تصميم نظرة حديثة. ما هو أكثر من ذلك، مثل هذه الألوان النظيفة جعلها تبدو أكثر إيجابية وجذابة، خلق مزاج مناسب.
سلبيات
هناك الكثير من المزايا الأخرى للتصميم المسطح ، ولكن لا يوجد تصميم مثالي ، ولا يمكننا جعله مثاليًا. لا تزال هناك بعض العيوب التي يجب علينا أن نذكر:
لا يستجيب
في بعض الأحيان ، يجعل عدم وجود تفاصيل إضافية أو تأثيرات بصرية من الصعب جدًا إنشاء واجهة ملائمة وسهلة الاستخدام ، مما يجعل التصميم بأكمله غير مستجيب. لا يشعر جميع المستخدمين بالراحة فعلاً في هذا التصميم ، لأنه قد يكون من الصعب العثور على عناصر قابلة للنقر على صفحة ويب أو عناصر تحتاج إلى النقر عليها في تطبيق جوال ، لأنها غير تفاعلية.
مشاكل الطباعة
كما ذكر ، ليس كل خط يناسب التصميم المسطح. في بعض الأحيان تبدو قطعة التصميم ذات الخطوط المستقيمة الجريئة والمتوازنة متوازنة وأنيقة. ومع ذلك، قد يؤدي اختيار الطباعة غير صحيح في تخريب تماما التصميم الخاص بك. كنت حقاً بحاجة إلى أن يشعر أي الخطوط المناسبة لتصميم شقة والتي هي الممنوعات. يمكن أن تجعل مهارات الكتابة الضعيفة من الصعب جدًا اختيار الخط المناسب.
صور ضعيفة
بسبب القيود في استخدام التأثيرات والألوان والخطوط، تصميم مسطح قد تبدو بسيطة جداً وغير شهي. يمكن أن تصبح بساطتها أكبر عيبها - كل تلك التصاميم في نهاية المطاف تبدو متشابهة. من الصعب جعل الرموز الخاصة بك أو صفحات ويب تختلف عن تصاميم شخص آخر، لأن نستخدم نفس الأشكال المبسطة وألواح الألوان محدودة والخطوط المتشابهة. ونتيجة لذلك ، قد يبدو التصميم المسطح مملًا خلال الوقت.
9. اتجاهات التصميم المسطح
لا يمكن استدعاء تصميم مسطح تماما المشكلة والمتقدمة. ربما بسبب عيوبها، المذكورة أعلاه، فإنه يميل إلى تحويل وتطوير، الحصول على الميزات الجديدة والتحسينات المرئية.
إذا ألقيت نظرة عن قرب على أحدث الأمثلة على التصميم المسطح ، فقد تلاحظ أنه في الحقيقة يأخذ خطوة إلى جانب أدواته الصارمة ويبدأ بإضافة تأثيرات دقيقة ، مثل التدرجات (غير التباين) والظلال والإبرازات وغيرها من العناصر المرئية التحسينات.
ما يحدث أن هذه الأوسمة فعلا إضافة إلى عمق التصاميم، دون جعلها تبدو محمل بشكل زائد مع التفاصيل، كما تفعل تصاميم سكيومورفيك في بعض الأحيان. هذه التحسينات الطفيفة تجعل التصميم المسطح أكثر استجابة وملاءمة ، كما توفر مظهرًا جديدًا ، مما يجعله أكثر تنوعًا وتنوعًا.
كنتيجة لذلك، لا يبدو تصميم مسطح تفقد خصائصها؛ على العكس من ذلك، فإنه يصبح أكثر إثارة للاهتمام، وأكثر مرونة، فإنه يصبح حقاً أفضل.
10-كيف تبدأ؟
إذاً ، أنت على استعداد للتنقيب عن تصميم مستوٍ ولا يمكنك الانتظار لبدء إنشاء بعض الأصول الثابتة! لا يسعني إلا أن نتفق على أن هذه العملية مثيرة وصعبة، ما إذا كنت سوف يكون إنشاء كائن معزولة أو مشهد شقة كاملة، بما في ذلك مجموعات من العناصر.
إذا كنت ترغب في محاولة جعل الرسوم التوضيحية مسطحة، أود أن أوصى بدء تشغيل مع مجموعة صغيرة من الرموز، والتي ترتبط بموضوع واحد. وعندما كنت تشعر بالراحة مع هذا الأسلوب، الانتقال إلى مثال أكثر تعقيداً أو حاول حقل آخر لتصميم وتطبيق المعرفة الجديدة الخاصة بك الرسومات المسطحة في إنشاء قوالب ويب مسطحة أو لافتات.
في ما يلي بعض البرامج التعليمية التي قد تكون مفيدة لك.
إذا كنت تعمل في Adobe Illustrator ، فراجع هذه البرامج التعليمية للرموز المسطحة:
ناقلإنشاء مجموعة من الرموز Apple Watch في Adobe Illustrator
تصميم أيقونةكيفية إنشاء مجموعة من الرموز الحيوانية شقة في Adobe Illustrator
حاول تقديم مزيد من التفاصيل مثل التدرجات والمظاهر والقوام ، مع إضافة العمق والواقعية:
ناقلكيفية إنشاء كاميرا مسطحة مبسطة، ومحكم في Adobe Illustrator
تصميم أيقونةإنشاء مجموعة من أيقونات الأحجار الكريمة شقة في Adobe Illustrator
حاول تصور الأجسام مسطحة أكثر من أجل إنشاء مشهد مسطح:
Challenge yourself by making a more detailed cityscape:
ربما كنت تعمل في "مصمم تقارب"؟ وإليك بعض الدروس المفيدة لك أيضا! ابدأ بجعل أيقونة بسيطة واحدة:
ثم قم بإنشاء مجموعة كاملة من الرموز:
أو المضي قدما وتصميم ملصق مع عناصر مسطحة على غرار!
كما ذكرت ، فإن الرسومات النقطية تعتمد على البيكسل ، لذا فهي رائعة لتصميم الرموز أيضًا. إذا كنت مرتاحاً أكثر من العمل مع Adobe Photoshop، ثم لا تتردد في استخدامها لتصميم مسطح كذلك!
وأخيرًا ، إذا كنت ترغب في تحسين مهاراتك وإضافة تفاصيل وتأثيرات أكثر تعقيدًا لتصميمك ، فجرّب إنشاء عناصر مساحة العمل المسطحة للدورة فيديو الإعلانات مع وصف تفصيلي وعملية خطوة بخطوة لرسم كل كائن من تبدأ حتى النهاية.
دعونا نلخص
لتلخيص الأمور ، فقد كشفنا عن بعض الحقائق من تاريخ التصميم المسطح ، وتحدثنا عن الألوان والأشكال والطباعة. لقد بدأ في تصميم مسطح من زوايا مختلفة، وناقشنا مزاياه وعيوبه، وسرد بعض النقاط الرئيسية التي لا غنى عنها لجعل التصميم الجيد.
أرجو أن تكون قد اكتشفت بعض المعلومات الجديدة من هذه المقالة أو على الأقل وجدت أنها مثيرة للاهتمام وملهمة. حقاً يجب أن تحاول جعل قطعة تصميم مسطح إذا كنت لم يحاكم من قبل.
جميع في كل شيء، ماذا يمكن ذكر عند الحديث عن تصميم مسطح؟
إذا كنت حقاً في تصميم مسطح، إذا أردت به الأشكال مستقيمة والألوان الزاهية والخطوط هش ونظرة عموما نظيفة وأضيق الحدود، ثم يذهب لذلك!
إنه أمر عصري ، ولكن ، كما هو الحال مع أي نمط آخر من أشكال الرسوم البيانية ، يجب ألا تحدّ من إبداعك لنوع واحد من نفس التقنيات والعناصر المرئية. الاتجاهات الحالية لا يعني أنه لا يمكنك اختيار أي نمط تصميم آخر للمشروع الخاص بك. سكيومورفيسم لا تزال تبدو معقدة، ولا يوجد سبب للتخلي عن الرسم كائنات واقعية مع حفنة من تفاصيل صغيرة والقوام. تذكر فقط أن تصميمك يجب أن يتطابق مع كل مشروع محدد ، مما يعكس مظهره ومظهره ، والحفاظ على سهولة الاستخدام والوظيفة.
