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

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

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

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

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

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


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

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

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

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

ومن الواضح أن الالتزامات تشير إلى رمز زر إغلاق علامة التبويب "تصميم المواد 2" و"ثوابت الألوان الأساسية المطلوبة لتصميم المواد 2 من Google".

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

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

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

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

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

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


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

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

لا يقتصر التصميم متعدد الأبعاد على الطبقات والمكونات والعناصر وكيفية سلوكها فيما يتعلق ببعضها البعض. من العناصر الأساسية في تصميم Google هي السمات عالية التباين والألوان الزاهية والإبرازات الجريئة - وهي ما يجعل التطبيقات المتوافقة مع التصميم متعدد الأبعاد متميزة عن الآخرين.

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

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

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


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

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