يتم تجديد واجهة المستخدم لتصميم المواد من Google بألوان جديدة وإيقونوغرافية وتركيز على اللمس

Material Design هي لغة التصميم الموحدة التي أطلقت جنبًا إلى جنب مع Android Lollipop ، وتتميز بألواح ألوان مسطحة وألوان فاتحة وعمق وإضاءة ناعمة وفيزياء واقعية. إنه يهدف إلى تقليد براعة الأشياء في العالم الحقيقي دون اللجوء إلى الشكل الكونيوم ؛ تصفها Google بأنها توليفة من "المبادئ الكلاسيكية" مع "[الابتكار] وإمكانية" التكنولوجيا.

منذ ظهور Material Design لأول مرة في عام 2014 ، ينتشر عبر نظام Android البيئي مثل wildfire — ناهيك عن تطبيقات Google مثل YouTube و Chrome و Gmail و Hangouts وتقويم Google. تم توفير أزرار حركة عائمة وألوان لطيفة وتقنيات الارتفاع كجزء من مكتبة مكونات المواد على GitHub (متابعة لمكتبة دعم التصميم في Android و Material Design Lite التي تركز على الويب من Google) ، مما يضفي جودة المواد على Android في شكل طرق العرض المخصصة ، وعلى الويب في شكل حزم يمكن استيرادها واستخدامها مثل علامات HTML القياسية.

الآن ، عشية الذكرى السنوية الرابعة لتصميم المواد ، يبدو أن Google تستعد للجيل القادم من جمالية مستوحاة من الورق والحبر: Material Design 2 . تتوفر القليل من المعلومات الثمينة للجمهور حول Material Design 2 ، التي اكتشفنا وجودها هذا الأسبوع في أعمال جديدة في Chromium Gerrit. لا ندعي أنه خلف مناسب لأحدث إطار عمل لتصميم المواد ، لكن الالتزامات تشير إلى تغيرات ملحوظة ، وإن كانت دقيقة ، في لوحات الألوان والأيقونات وسلوك شاشة اللمس.


المواد تصميم 2 يظهر في الكروم Gerrit

في أوائل فبراير ، نفذت تطبيقات جديدة على Chromium Gerrit تطبيق واجهة المستخدم "Material Design 2" في شريط علامات تبويب Chrome - علامات التبويب القابلة للسحب التي تحتوي على عناوين صفحات الويب ، و favicons ، وزر "إغلاق التبويب" أعلى شريط عناوين Chrome.

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

مجموعة من علامات تبويب Chrome.

وكشف النقاب عن ذلك ، تشير التعيينات إلى أيقونة زر إغلاق علامة التبويب "تصميم المواد 2" و "ثوابت اللون الأساسية اللازمة لتصميم المواد من Google 2".

يُظهر التعمق في رمز الالتزام لوحات ألوان جديدة "Material Design 2" لمظاهر Chromium باللون الرمادي والأحمر والأحمر الداكن ، وألوان جديدة لشريط أدوات Chrome المعتاد وشريط أدوات التصفح المتخفي. استخدمنا جدول بحث سداسي عشري لإنشاء حوامل RGB:

اللون الأحمر للتصميم المادي 2 أغمق قليلاً من اللون الأحمر الحالي لـ Design Material's Red (# C62828) و Red 600 (# E53935) ، في حين أن ظلال اللون الرمادي الجديدة (# 3C4043 ، # 5F6368 ، # BDC1C6 ، # F1F3F4) تحتوي على لون أفتح لون. يتميز تصميم المواد بالألوان الرمادية التقليدية ، حيث R = G = B ، بينما هنا ، B> G> R في كل ظل (ولكن فقط من 1-4 من 255).

الإصدارات المتوافقة مع تصميم المواد 2 - سيحتوي Chrome أيضًا على شريط أدوات أكثر إشراقًا من البنيات الحالية - إنه أبيض تقريبًا مقارنة بنظام الألوان الرمادي الحالي.

إليك نموذجًا بالحجم الطبيعي سريعًا لكيفية ظهور شريط الأدوات مع الألوان الجديدة المطبقة:

أخيرًا ، يضيف الالتزام علامة IsTouchOptimizedMaterial () جديدة إلى MaterialDesignController ، والتي قد تشير إلى عناصر 2 من مواد التصميم التي تعمل باللمس. لقد كتبنا في أوائل كانون الثاني (يناير) عن الجهود التي بذلتها Google لتحسين دعم شاشة اللمس لمتصفح Chrome على أجهزة Chrome OS ، ويبدو أنه استمرار لها.

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


أهمية اللون في تصميم المواد

//www.xda-developers.com/files/2018/02/palette-perfect-how-material-design-makes-color-easy.mp4

إذن ماذا تعني الألوان الجديدة في السياق الأوسع لتصميم المواد؟

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

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

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

مما نعرفه عن لوحة الألوان الخاصة بـ Material Design 2 ، فإن عددًا قليلاً على الأقل من العينات الموجودة في "500 الأساسي" من Google ، مثل Red 600 و 800 ، أغمق من سابقاتها في تصميم المواد. لكن البعض الآخر ، مثل الرمادي ، يحصلون على العلاج المعاكس - كل من العينات الرمادية والأبيض المعروضة في نموذج علامة تبويب Chrome لها قيم باللون الرمادي والأزرق .


في الوقت الحالي ، هذا هو كل ما نعرفه حقًا عن Material Design 2. لكن الالتزامات قد تكون علامة على حدوث شيء ما وراء الكواليس ، وإذا كان هذا صحيحًا ، فقد نتعلم أكثر في وقت أقرب من ذلك. من المتوقع أن تنزع Google الأغطية عن Android P ، الإصدار الرئيسي التالي من Android ، في أقرب وقت في مارس ، ويبدأ Google I / O 2018 في 8 مايو. كلاهما فرصتان رئيسيتان لإخراج الأغطية من Material Design 2.

التحديث 2/4/2018: بعد وقت قصير من نشر هذا المقال ، تم جعل الالتزام خاصًا ، مما يعني أنه من المحتمل أن يكون الغرض منه هو الحفاظ على السرية. سنستمر في التحقق من Chromium Gerrit لمعرفة التغييرات ، وتحديث هذه المقالة إذا وجدنا أيًا منها.