أنواع التصميم الفلات

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

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

إذن .. ماهو الفلات ديزاين ؟

"هو الحد الأدنى من طرق التصميم الذي يحقق قابلية الإستخدام"
ماذا نقصد بالحد الأدنى ؟

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

لاحظ في الصورة المقبلة الفرق بين ال skeuomorphic وال flat design تجد الألوان الحادة والشكل الكبير نسبيًا يجذب الإنتباه ومعاني الأيقونات تُدرك بسهولة .

You can see in the next picture the difference between the skeuomorphic and the flat design, you will find sharp colors and relatively large shapes that attract the attention and the meanings of the icons are realized easily.

بيانات

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

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

من كل هذا يتضح لنا مزايا الفلات ديزاين

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

أما الأساسيات التي يقوم عليها الفلات ديزاين تتلخص في :

  • العناصر البسيطة وتتمثل في الأزرار والأيقونات والأشكال البسيطة التي يميل لها المصممون دائمًا مثل المستطيلات والدوائر والمربعات كما يمكن تشكيل الحواف بزوايا وانحناءات ومراعاة عناصر واجهة المستخدم والتعامل معها كالأزرار التي تنقل المستخدم لصفحة جديدة فيجب أن تُصَمم بطريقة تحفز المستخدم للنقر عليها وتكون بألوان مميزة وخطوط واضحة .
  • التايبوجرافي : فيجب أن يكون الخط عريض وواضح ويُصاغ ببساطة وال typefaces أيضًا تكون متوافقة حيث يُفضل في الفلات ديزاين إستخدام ال sans serif حيث يكون أكثر توافقًا مع أوزان الخطوط المختلفة ،المهم هو تحقيق تناغم حرفي وبصري حتى لو كلفلك الأمر بعمل خط جديد غير متوقع .
  • الألوان : لوحات الألوان الخاصة بالفلات ديزاين تحتوي على عدد كبير من الألوان لكنها تستخدم من 6 الى 8 ألوان فقط ، ف الألوان الأساسية والثانوية لها شعبية كبيرة بالإضافة الى أنواع معينة تستخدم في الفلات ديزاين ولها شعبية خاصة مثل الأرجواني والأخضر والأزرق والأصفر والبرتقالي والفضي والسماوي والتدرجات ايضًا والتي نحصل عليها بنقاء شديد بدون تخفيف وبدون تخفيف في درجة اللون ، بعكس لوحات الألوان في المشاريع الأخرى والتي تركز على لونين أو ثلاثة فقط .
بيانات

الفيلات 2 (flat 2.0)

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

دعونا نرى كم الإختلافات

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

حسنًا .. دعونا نرى الإتجاهات التي اتجه إليها ال flat 2.0

الحد الأدنى

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

الظل

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

بيانات

التايبوجرافي

يستخدم في ال flat 2.0 ال sans serif أيضًا لكن بسُمك موحد حتى لا يلفت الإنتباه ويكون التركيز الأكبر على الجرافيك ولسهولة القراءة أيضًا .

بيانات

الأزرار الطيفية (ghost buttons)

كان هناك اعتراض على الأسلوب التقليدي في ال (clickable elements) مثل الروابط املونة بالأزرق والأزرار المكشوطة والتأثيرات ثلاثية الأبعاد على الأزرار، من هنا ظهرت الghost buttons ف عند دمجها في تصميمك يمكن إستخدامها كـ CTA (أي وسيل للتفاعل مع المستخدم) بأسلوب جذاب .

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

بيانات

ديناميكية الألوان

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

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

بيانات

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

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

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

مرحى!

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

تسجيل الدخول