التصميم المسطح: التاريخ والمزايا والتطبيق العملي. التصميم المسطح: الماضي والحاضر والمستقبل تاريخ التصميم المسطح

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

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

وطلبنا منهم الإجابة على ثلاثة أسئلة رئيسية:

  • لماذا بدأ العالم يتجه نحو التصميم المسطح على الويب والهاتف المحمول وما هو؛
  • ما الذي سيعطيه هذا لـ Apple وiOS 7؛
  • وكيف سيؤثر ذلك على المصممين من ناحية، والمستخدمين من ناحية أخرى.

دينيس سوديلكوفسكي، كييف
متخصص في تصميم التفاعل، منتج Prodesign.in.ua

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

ماذا ستحصل أبل من هذا؟ سيحتفظ بمكانته في الاتجاه ومئات الآلاف من التعليقات التي تفيد بأن نظام التشغيل iOS الخاص بهم أصبح مشابهًا جدًا لنظام Android.

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

دانييل بروس، ستوكهولم
كبير الإبداع الرقمي، danielbruce.se

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

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

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

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

أما بالنسبة للمستخدمين العاديين، فهم يحبون الألوان الزاهية.

إيفان كليمينكو، كييف
مصمم واجهة الهاتف المحمول، 5tak.com

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

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

ثم في الستينيات بدأ الجميع معجبين بالبلاستيك.

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

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

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

أوليسيا غريتشينا، كييف
مصمم واجهة المستخدم في Componentix، تويتر: elendiel

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

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

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

بافيل جروزيان، كييف
مصمم المنتجات في MacPaw، جروزيان

"تفاحة! اهاهاها، توقف! - المصممون يصرخون. - يا هلا، أصبح الأمر أسهل. - المستخدمون يهتفون." أنا أفهم وجهتي النظر. اليوم، بعد العرض التقديمي من WWDC2013، وقف العديد من زملائي وقالوا: "تبًا لهذه المهنة! يمكن لأي شخص أن يرسم مثل هذا الغباء الآن. وهذه الأيقونات مقابل 30 دولارًا؟!" وللوهلة الأولى، هم على حق، لكن إذا تعمقت أكثر، ستدرك أن هناك آلاف الأشياء التي اختلفت عن بعضها البعض لفترة طويلة فقط في سيناريو الاستخدام، ثم في الشكل، ثم في اللون، وعندها فقط. في التفاصيل الفنية، أتذكر الأوقات التي قال فيها كل هؤلاء الأشخاص في ملفاتهم الشخصية على LinkedIn اليوم، إن UX، مصمم واجهة المستخدم، قام بنسخ تأثير الظل الأبيض للحروف، ثم مواقع الويب الخفيفة والخفيفة مثل Apple، ثم واجهات غنية بالأنسجة والواقعية كان كل عملهم عبارة عن نسخ، حيث لم يكن هناك مفهوم تطوير أصلي وموحد ومناسب للجميع، وهذه هي المهمة التي يحلها التصميم المسطح اليوم ولم يخترعها، وقد تشكلت قبل العصر الرقمي بعشر سنوات، في مجال النشر.

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

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

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

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

تتمتع شركتنا بالفعل بخبرة في إنشاء مواقع الويب بالنمط المسطح، وسنكون سعداء بمساعدتك في إنشاء موقع ويب مسطح!

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

أدناه سنقوم بتحليل وإعطاء أمثلة لبعض المواقع التي تستخدم النمط المسطح.

1. قم بإزالة جميع التأثيرات

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

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

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

2. استخدم عناصر بسيطة

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

3. دعونا نركز على الطباعة

نظرًا لأن الرسومات في التصميم المسطح بسيطة وفقًا للمبدأ السابق، فإن الطباعة هي عنصر مهم للغاية - تصميم النقوش. في التصميم المسطح، تأتي الطباعة في المقدمة مع الأزرار.

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

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

4. دعونا نجذب الانتباه بالألوان

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

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

5. بساطتها

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

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

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

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

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

تم تسهيل تعميم النمط المسطح في التصميم من خلال إصدار نظام التشغيل Windows 8 من Microsoft بأسلوب Metro، بالإضافة إلى iOS 7، حيث تختار Apple أيضًا النمط المسطح. وبعد ذلك يبدأ العصر الحقيقي للتصميم المسطح. قريبا، تتحول خدمات وتطبيقات البحث الكبيرة - Google، Youtube - إلى التصميم المسطح؛ تظهر العديد من المواقع التي تستخدم مبادئ النمط المسطح في تصميمها. في السنوات الأخيرة، أصبح التصميم المسطح رائدًا في اتجاهات تصميم مواقع الويب العالمية.

فوائد التصميم المسطح

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

5 مبادئ لتصميم المواقع المسطحة

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

1 - استخدام الكائنات ثنائية الأبعاد

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

2- الأيقونات والأشياء البسيطة

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

3- الخطوط البسيطة في أسلوب التصميم

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

4- لعبة الألوان

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

5 - بساطتها

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

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

أمثلة على التصميم المسطح

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

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

مستخدمو نظام التشغيل Windows 8 والإصدارات الأحدث على دراية بالفعل بتصميم FLAT، حيث أن أول ما يواجهونه عند تحميل النظام هو هذه الشاشة.

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

FLAT - يتميز التصميم بالميزات التالية:

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

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

الوئام و. يستخدم التصميم عددًا محدودًا من الألوان. فيما يلي مثال على لوحة التصميم FLAT الشهيرة.

استخدام الأيقونات الإعلامية الإبداعية.

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

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

حسنًا، نحن أيضًا سوف نتكيف مع العالم المتغير. في المقالة التالية، سأوضح لك كيف يمكنك إنشاء أيقونات بنمط FLAT باستخدام أشكال بسيطة في Photoshop.

إذا كانت منشوراتي تهمك، فأنا أقترح عليك مواكبة آخر التحديثات على الموقع.

(تمت الزيارة 2,333 مرة، 1 زيارة اليوم)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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



 

قد يكون من المفيد أن تقرأ: