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

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

ما الذي تغطيه هذه المحاضرة مقدمة.• ما هو التصميم المسطح.• ظهور التصميم المسطح.• عناصر التصميم المسطح.• مميزات و عيوب التصميم المسطح.•

مقدمة ف!ي عص!ر تتس!ارع في!ه التقان!ة، وتتعدد الطرق ف!ي الحص!ول عل!ى المعلوم!ة، و م!ع التنوع •

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

أص!بح التص!ميم المس!تجيب لمواق!ع الوي!ب م!ن العوام!ل األس!اسية لزيادة عدد المس!تخدمين •والزائري!ن لم!ا يُوفره م!ن س!هولة ف!ي الوص!ول للمعلوم!ة وعرض محتويات الموق!ع بص!ورة

تتوافق مع شاشة العرض المستخدمة. ف!!ي هذه المحاضرة س!!نتحدث ع!!ن عنص!!ر آخ!!ر اكتس!!ح عال!!م تص!!ميم مواق!!ع الوي!!ب •

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

ما هو التصميم المسطحالتص!ميم المس!طح ه!و أس!لوب أ!و تص!ميم يتص!ف بالجمال والبس!اطة المطلق!ة واالس!تغناء •

عن العناصر غير االساسية من التصميم كالظل، الحواف، الخامات والعناصر ثالثية األبعاد. ال نعن!ي بأ!ن البس!اطة الك!بيرة للتص!ميم المس!طح س!تصبح معه!ا عملي!ة التص!ميم س!هلة •

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

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

األلوان.

ف!ي الس!ابق، كان!ت شرك!ة أب!ل م!ن أول الشركات الت!ي تبن!ت أس!لوب التص!ميم الثالث!ي األبعاد أ!و م!ا • هذا النوع م!ن التص!ميم يهت!م بجع!ل التص!ميم شب!ه حقيق!ي بإضاف!ة Skeuomorphismيعرف بال

الظالل واإلضاءة والخامات الحقيقية.• Skeuomorphism أ!!و التص!!ميم الثالث!!ي األبع!اد ه!!و أس!!لوب تص!!ميم واجهات أكث!!ر واقع!ي!!ة يقوم

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

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

بسهولة التعرف على األيقونة وشكلها على الرغم من تجريدها من التفاصيل والظالل.

ظهور التصميم المسطح عل!ى Zune music player أطلق!ت شرك!ة ميكروس!وفت مشغ!ل الموس!يقى 2006ف!ي العام •

الرغم من أنه لم يكن ناجحا تجاريا إال أن واجهاته أحدثت ثورة كبيرة في عالم التصميم المسطح.م!!ن Allan Grinshtein مص!!طلح التص!!ميم المس!!طح أص!!بح ذو شعبي!!ة بعدم!!ا كت!!ب المص!!مم •

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

المسطح. تعت!بر شرك!ة مايكروس!وفت ف!ي طليع!ة الشركات المس!تخدمة لهذا النم!ط م!ن التص!ميم بع!د ص!دور •

  Win 8نظام تشغيله!ا الثام!ن الذي جاء بتص!ميم مس!طح مبهر. هذا التص!ميم الخاص بنظام التشغي!ل .Metro UIيطلق عليه 

عناصر التصميم المسطحعنصر األلوان:1.

يعت!بر اختيار األلوان المناس!بة للموق!ع عملي!ة مجهدة وص!عبة، كم!ا أ!ن اختيار األلوان المناس!بة للموق!ع تُعط!ي الموق!ع جماليتهُ! وتزي!د م!ن اس!تمرار المس!تخدم ف!ي تص!فح الموق!ع فترة أك!بر. التص!ميم المس!طح يَس!تخدم ألوان مشرقةٌ! براقةٌ! تش!د العي!ن إليها. يمك!ن ل!ك الحص!ول عل!ى األلوان المناس!بة لموقع!ك ع!ن طري!ق اس!تخدام برنام!ج الفوتوشوب، كم!ا توج!د مواق!ع تُسّ!هل عملي!!!!!ة اختيار األلوان وتعين!!!!!ك عل!!!!!ى اختيار األلوان المناس!!!!!بة لموقع!!!!!ك ومنه!!!!!ا

FlatUIColors.comموقع 

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

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

الموقع.

:Vector Graphicالرسومات المتجهة 3.يمث!ل هذا النوع م!ن الرس!ومات اللغ!ة الت!ي يفهمه!ا الجميع. بمعن!ى آخ!ر، تعت!بر الرس!ومات

واألشكال المرس!ومة عل!ى تص!ميم الموق!ع ه!ي العنص!ر الذي يمث!ل البس!اطة ف!ي التص!ميم ( ه!و نوع Scalable Vector Graphicsوالس!هولة ف!ي وص!ول المعلومة. الرس!ومات المتجه!ة )

م!ن الرس!م الذي ال يعتم!د عل!ى التعقي!د وإنم!ا البس!اطة ف!ي الرس!م. توج!د الكثي!ر م!ن ال!برامج .Adobe Illustratorالمستخدمة في رسم الرسوم المتجهة ومن أشهرها

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

جمالية على الصورة.

عناصر كبيرة والكثير من الفراغات فيما بينها:5.نُعّرف هذه العملي!ة بأنه!ا تقوم بجع!ل عناص!ر الموق!ع ك!بيرة م!ع ترك مس!افات ك!بيرة بي!ن ك!ل عنص!ر والعنص!ر الذي يليه. هذه العملي!ة س!ائدة بشك!ل ك!بير ف!ي تص!ميم المواق!ع المس!طحة

والتي تجعل الموقع نظيفاً وأكثر وضوحاً.

:CSS3 و HTML5اضافة الحركة باستخدام 6. يمك!ن أ!ن نعط!ي الموق!ع CSS3 وHTML5باس!تخدام التقنيات الجديدة الت!ي تتمي!ز به!ا لغة

جانبا جماليا، ومن ضمن هذه التقنيات عنصر الحركة لعناصر الموقع بصورة جميلة.

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

( والذي يمك!ن تنزيل!ه UI Kit)تحتوي عل!ى عناص!ر مس!طحة. م!ن هذه األدوات ه!و القال!ببصورة مجانية.

مميزات التصميم المسطح يعتبر التصميم المسطح تصميما عصريا يجعل تجربة المستخدم للتصميم مريحة وممتعة.• حت!ى م!ع عدم وجود! العناص!ر الثالثي!ة األبعاد، التص!ميم المس!طح يعت!بر أفض!ل نظرا لوجود عناص!ر محدودة، وخطوط •

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

(.Responsive Designالمتصفحات واألجهزة المختلفة من دون الحاجة إلى أساليب التصميم المستجيب ) عدم وجود عناصر كثيرة وتفاصيل كبيرة يسرع من عملية تحميل المواقع والتطبيقات.• التص!ميم المس!طح يعط!ي الواجهات تص!ميما حادا خاص!ة عل!ى الشاشات العالي!ة الوضوح. أيض!ا يعت!بر مناس!ب جدا •

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

االتجاه.

عيوب التصميم المسطح المشكل!ة الرئيس!ية م!ع التص!ميم المس!طح ه!ي أن!ه يزي!ل ك!ل العناص!ر الثالثي!ة األبعاد م!ن التص!ميم، •

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