السلام عليكم ورحمة الله تعالى وبركاته موضوعنا اليوم عن مفهوم الماتريال ديزاين حيث أن
أغلب تطبيقات الاندرويد يتم تحديثها لتعمل بالماتيريال ديزاين
وفي ناس تسالت ليه الماتيريال ديزاين بالتحديد وليخ اغلب التطبيقات تحدث للماتريال ديزاين
عشان كذا كتبت هذه المقاله لتوضيح هذا المفهوم للناس .
اول شي الماتيريال ديزاين عباره عن لغة تصميم مرئيه ويعني تكون خاصه بواجهات التطبيقات
تم تطويرها من قبل قوقل Google والغرض الاساسي لتطوير هذه لغه تفاعليه ذات مظهر جميل وباسلوب تفاعل واقعي
وتقريبا بدات قوقل في تحديث اغلب البرامج الخاصه بها لتعمل بواسطه الماتريال ديزاين ولعلكم لاحظتم ذلك
بدايه Google now , تطبيق Play Music و تطبيق Play Store وتطبيق Hangouts, ومن المنتظر أن يصبح الـ Material Design معمما على باقي تطبيقات الأندرويد.
ومن الاساسيات في هذه اللغه هو مفهوم الطبقات يعني تقسيم الواجهه الى طبقات
وبتفصيل اكثر الواجهه مكونه من اكثر من طبقه وكل طبقه لديها خصائص معينه ومن ضمن هذه الخاصئص
اسلوب الحركه والظل والاضاءه والفائده من الطبقات ان المستخدم لمن يتفاعل مع التطبيق يكون التفاعل مع طبقه معينه من الواجهه
والفائده من ذلك ان يتم التركيز على الجزء الذي يتفاعل فيه المستخدم مع اعطاء الراحه التامه اثناء تفاعله مع التطبيق .
ولابد من تتحرك الطبقات بصوره اكثر جماليه لكي يتفاعل المستخدم مع التطبيق بكل راحه ويكون اكثر تفاعل على التطبيق وعندما يتم تصميم تطبيق بواسطه الماتيريال ديزاين يزيد الاقبال على التطبيق لتاثيره على المستخدم وجذبه الى مثل هذه التطبيقات .
بحيث يكون البعد z-axis بصوره عموديه
في بيئه الموارد يكون هناك ظل خاص بكل مورد ناتجه من الاضواء الافتراضه للموارد "بمعني ان لكل مورد اضاءه خاصه وهذه الاضاءه تنتج ظل محدد" يظهر هذا الظل نتيجه لتغيير وضعية الطبقه وتحركها لاي حدث كان
هنا الظل ناتج من الاضواء الرئيسيه والاضواء المحيطه بها
هنا الظل ناتج من الاضواء المحيطه بها
هذه الصوره خاطئه لتصميم الظلال للطبقه العليا على حسب القواعد المذكوره لان الظل بهذه الطريقه لايعطي انطباع واضح حول حركة الطبقه عند تحريكها
اما هذه الصوره فالظل يظهر فيها بصوره صحيحه حيث يوضح الطبقة العليا من الطبقه السفلي وتكون الحركه واضحه عند تحريك احد الطبقات ويمكن ايضا زياده الظل او نقصانه لاضافه تاثير اكثر عن ظهور الطبقة و اختفاءها
ان ادراك شي ملموس للكائن "للطبقه" يساعد في فهم طريقة التعامل من ذلك الكائن ,.
حركه الطبقه لديها دور فعال ليوضح طبيعة الطبقه وخفتها ، مرنه ام جامده ، صغيره ام كبيره . الحركه في عالم التصميم المادي ليست فقط جميله ، بل توضح ايضا علاقات الطبقات مع بعضها البعض ووظائفها والقصد من هذا النظام .
من ضمن مفاهيم الطبقات والحركه نصل الى هذا المفهوم الذي يتعلق بالحركه بان ليس جميع الطبقات لها نفس الحركه وليس كل الاشياء تتحرك بنفس الطريقه . فمثلا الاجسام الصغيره / الخفيفه تتسارع او تتباطأ بشكل اسرع من الاجسام الكبيره / الثقيله لانها لا تتطلب قوه اكبر لتحريكها عكس الاجسام الكبيره/الثقيله تتحتاج الى قوه اكبر وتحتاج ايضا المزيد من الوقت لتقوم بذلك فيكون التفكير في كيفية التطبيق على مختلف واجهة المستخدم في التطبيق الخاص بك وكيف يتم التوافق بين اسلوب الحركه .
في هذا الموضوع راح اتوقف عند هذا الحد لكي يستطيع ان يستوعب الموضوع من اي شخص يقراه وباذن الله راح اكمل بصوره مفصله اكثر لمن اراد ان يطور تطبيقات وبواسطه الماتريال ديزاين في موضوع اخر ، وطريقة البرمجه مع اضافه بعض الاكواد لتكون الصوره اكثر وضوحا بالنسبه لمطوري التطبيقات .
طبعاً جوجل ترغب بأن تكون التصاميم البصرية موحدة ضمن نظام التشغيل وهذا الأمر يشمل جميع التطبيقات حتى تلك المطوّرة من قبل شركات الطرف ثالث والمطوّرين؛ لذلك نشرت قائمة مهمة جدًا خاصة بالمطوّرين توضح فيها اساسيات مفهوم
Material Design من اجل الإنتقال او بناء تطبيقات اندرويد وفق هذا المفهوم الجديد،العديد من النقاط تتعلق بالتصميم مع الكود الخاص بكل واحدة مثل الألوان، شريط التطبيق، التبويبات، القوائم.. وغيرها من الامور والأساليب المتعلقة بالتصميم الجديد.
وهنالك العديد من القواعد التي تم وضعها من قبل Google و Android وتفاصيل كثيره موجوده في موقع الشركه عن طريقه البرمجه والاكواد موجوده في هذه الروابط : رابط Google , رابط Android
أغلب تطبيقات الاندرويد يتم تحديثها لتعمل بالماتيريال ديزاين
وفي ناس تسالت ليه الماتيريال ديزاين بالتحديد وليخ اغلب التطبيقات تحدث للماتريال ديزاين
عشان كذا كتبت هذه المقاله لتوضيح هذا المفهوم للناس .
اول شي الماتيريال ديزاين عباره عن لغة تصميم مرئيه ويعني تكون خاصه بواجهات التطبيقات
تم تطويرها من قبل قوقل Google والغرض الاساسي لتطوير هذه لغه تفاعليه ذات مظهر جميل وباسلوب تفاعل واقعي
وتقريبا بدات قوقل في تحديث اغلب البرامج الخاصه بها لتعمل بواسطه الماتريال ديزاين ولعلكم لاحظتم ذلك
بدايه Google now , تطبيق Play Music و تطبيق Play Store وتطبيق Hangouts, ومن المنتظر أن يصبح الـ Material Design معمما على باقي تطبيقات الأندرويد.
ومن الاساسيات في هذه اللغه هو مفهوم الطبقات يعني تقسيم الواجهه الى طبقات
وبتفصيل اكثر الواجهه مكونه من اكثر من طبقه وكل طبقه لديها خصائص معينه ومن ضمن هذه الخاصئص
اسلوب الحركه والظل والاضاءه والفائده من الطبقات ان المستخدم لمن يتفاعل مع التطبيق يكون التفاعل مع طبقه معينه من الواجهه
والفائده من ذلك ان يتم التركيز على الجزء الذي يتفاعل فيه المستخدم مع اعطاء الراحه التامه اثناء تفاعله مع التطبيق .
ولابد من تتحرك الطبقات بصوره اكثر جماليه لكي يتفاعل المستخدم مع التطبيق بكل راحه ويكون اكثر تفاعل على التطبيق وعندما يتم تصميم تطبيق بواسطه الماتيريال ديزاين يزيد الاقبال على التطبيق لتاثيره على المستخدم وجذبه الى مثل هذه التطبيقات .
مفهوم 3D World :
تكون الموارد موضوعه بصوره ثلاثيه الابعاد ويعني ذلك ان اي كائن "object" في الواجهه يكون لديه ثلاث ابعاد X , Y , Zبحيث يكون البعد z-axis بصوره عموديه
مفهوم الظلال light and shadow :
في بيئه الموارد يكون هناك ظل خاص بكل مورد ناتجه من الاضواء الافتراضه للموارد "بمعني ان لكل مورد اضاءه خاصه وهذه الاضاءه تنتج ظل محدد" يظهر هذا الظل نتيجه لتغيير وضعية الطبقه وتحركها لاي حدث كان
هنا الظل ناتج من الاضواء الرئيسيه والاضواء المحيطه بها
هنا الظل ناتج من الاضواء المحيطه بها
خصائص الموارد Material properties :
نتكلم في هذا الموضوع عن الخصائص الفيزيائيه "physical properties"
لابد ان تكون حركه الظلال متناسقه تماما مع حركة الطبقه او الكائن لكي يدل الظل على حركه الطبقه بصوره واقعيه وبطريقة اكثر جمالا ولفهم هذه النقطه بصوره اكثر شاهد المقطع التالي "مقطع فيديوا بسيط جدا يوضح الحركه"
هذه الصوره خاطئه لتصميم الظلال للطبقه العليا على حسب القواعد المذكوره لان الظل بهذه الطريقه لايعطي انطباع واضح حول حركة الطبقه عند تحريكها
اما هذه الصوره فالظل يظهر فيها بصوره صحيحه حيث يوضح الطبقة العليا من الطبقه السفلي وتكون الحركه واضحه عند تحريك احد الطبقات ويمكن ايضا زياده الظل او نقصانه لاضافه تاثير اكثر عن ظهور الطبقة و اختفاءها
مفهوم الحركه Authentic motion :
ان ادراك شي ملموس للكائن "للطبقه" يساعد في فهم طريقة التعامل من ذلك الكائن ,.
حركه الطبقه لديها دور فعال ليوضح طبيعة الطبقه وخفتها ، مرنه ام جامده ، صغيره ام كبيره . الحركه في عالم التصميم المادي ليست فقط جميله ، بل توضح ايضا علاقات الطبقات مع بعضها البعض ووظائفها والقصد من هذا النظام .
ناتي الان الى Making Adjustments :
من ضمن مفاهيم الطبقات والحركه نصل الى هذا المفهوم الذي يتعلق بالحركه بان ليس جميع الطبقات لها نفس الحركه وليس كل الاشياء تتحرك بنفس الطريقه . فمثلا الاجسام الصغيره / الخفيفه تتسارع او تتباطأ بشكل اسرع من الاجسام الكبيره / الثقيله لانها لا تتطلب قوه اكبر لتحريكها عكس الاجسام الكبيره/الثقيله تتحتاج الى قوه اكبر وتحتاج ايضا المزيد من الوقت لتقوم بذلك فيكون التفكير في كيفية التطبيق على مختلف واجهة المستخدم في التطبيق الخاص بك وكيف يتم التوافق بين اسلوب الحركه .
في هذا الموضوع راح اتوقف عند هذا الحد لكي يستطيع ان يستوعب الموضوع من اي شخص يقراه وباذن الله راح اكمل بصوره مفصله اكثر لمن اراد ان يطور تطبيقات وبواسطه الماتريال ديزاين في موضوع اخر ، وطريقة البرمجه مع اضافه بعض الاكواد لتكون الصوره اكثر وضوحا بالنسبه لمطوري التطبيقات .
طبعاً جوجل ترغب بأن تكون التصاميم البصرية موحدة ضمن نظام التشغيل وهذا الأمر يشمل جميع التطبيقات حتى تلك المطوّرة من قبل شركات الطرف ثالث والمطوّرين؛ لذلك نشرت قائمة مهمة جدًا خاصة بالمطوّرين توضح فيها اساسيات مفهوم
Material Design من اجل الإنتقال او بناء تطبيقات اندرويد وفق هذا المفهوم الجديد،العديد من النقاط تتعلق بالتصميم مع الكود الخاص بكل واحدة مثل الألوان، شريط التطبيق، التبويبات، القوائم.. وغيرها من الامور والأساليب المتعلقة بالتصميم الجديد.
وهنالك العديد من القواعد التي تم وضعها من قبل Google و Android وتفاصيل كثيره موجوده في موقع الشركه عن طريقه البرمجه والاكواد موجوده في هذه الروابط : رابط Google , رابط Android