حصريًا: تصميم المواد هو أداة تصميم جديدة وطموحة من Google

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

حصريًا: تصميم المواد هو أداة تصميم جديدة وطموحة من Google

كشفت الشركة اليوم في مؤتمر Google I / O عن إصلاح شامل لها تصميم المواد لغة بأداة جديدة تسمى Material Theming.

يعد Material Theming ، على المستوى الأساسي ، مكونًا إضافيًا لتطبيق النماذج الأولية الشهير ، Sketch. يتيح للمصممين إضافة قدر هائل من التنوع لعملهم مع الاستمرار في استخدام نظام التصميم الحالي من Google. يمكن لمصممي التطبيقات استخدام أدوات وشرائح التمرير البسيطة للمكوِّن الإضافي لتخصيص عملهم ، بدءًا من إنشاء أنواع جديدة من الأزرار وتطبيق ألوان مخصصة بسهولة إلى استيراد أي محرف وتوسيع نطاقه بشكل مثالي. على طول الطريق ، ستوازن Material Theming كل هذه العناصر المنفصلة تلقائيًا ، بحيث يكون كل شيء مقروءًا ولا يبدو أي شيء مبتذلًا.

[صورة: Google]

قد تبدو هذه التغييرات طفيفة ، لكنها تضخ مرونة وتخصيصًا جديدين في تطبيقات Android والمواقع الإلكترونية وحتى التصميمات المادية التي تم استيرادها إلى iOS. هذا هو المفتاح ، لأن Material Theming مصممة لمعالجة أكبر عيب في التصميم متعدد الأبعاد: أنه أصبح رتيبًا. كان من الصعب أحيانًا التمييز بين تصميم تطبيق وآخر. كل شيء بدا وكأنه Google ، بغض النظر عمن صنعه. يسمح المكون الإضافي Material Theming لـ Google بأن تبدو مختلفة عن المطورين ، كما يقر Matías Duarte ، نائب رئيس Material Design في Google. لكنهما وجهان لعملة واحدة. لذلك بالنسبة للمطورين ، أعتقد أنه من المهم أن يشعروا بالحماس لاتخاذ ما يمكنهم فعله لجعل التصميم متعدد الأبعاد لهم.

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

لا تطأني الأصل

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

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

[صورة: Google]

بن وجيري ساندرز بيرني

مشكلتان كبيرتان في التصميم متعدد الأبعاد

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

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

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

[صورة: Google]

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

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

[صورة: Google]

هي الغابة المطيرة لا تزال مشتعلة

المواد Theming

الفكرة الأساسية وراء Material Theming هي القدرة على تعديل اللون والطباعة وشكل التصميم الخاص بك من خلال علامات تبويب بسيطة وشرائح في المكون الإضافي Sketch الذي تطلقه الشركة اليوم. تؤثر التغييرات التي تجريها على بعضها البعض بفضل الخوارزمية التي طورتها Google والتي تضع تصميمًا جيدًا بشكل أساسي على القضبان. بعد ذلك ، يتم وضع تعليقات توضيحية على كل شيء تصممه وربطه بمكتبة تصميم المواد في Google على Github للمطورين ليتمكنوا من البرمجة بسهولة.

[لقطة شاشة: بإذن من المؤلف]

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

[لقطة شاشة: بإذن من المؤلف]

من حيث النوع ، تم إطلاق Material Design في الأصل مع دعم افتراضي لمحرف Roboto - محرف Google الخاص. الآن ، يتيح لك محرر السمات استيراد أي محرف من جهاز الكمبيوتر الخاص بك مباشرة إلى تطبيقك ، وسوف يقوم بتوسيع نطاقه بشكل مناسب للاستخدام في الرؤوس والنسخة الأساسية.

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

عندما سألت دوارتي عما حدث لجميع المواد الموعودة في التصميم متعدد الأبعاد - في عام 2014 ، سخر أن التصميم المادي كان يبدأ بالورق كمكون أساسي له ، ولكنه سرعان ما يتنوع ليشمل بدائل مثل القماش أو الخشب - يضحك ويلمح إلى أن الكثير لا يزال سيأتي من Material Theming. ستكون المادة نظامًا رائعًا جدًا ، أليس كذلك؟ هو يقول. لا تعلن Google عن أي مواد جديدة اليوم ، ولكن من السهل أن ترى كيف يمكن للشركة وضعها في Material Theming كخيار تخصيص آخر.

كيفية استخدام مبولة أنثوية

[صورة: Google]

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

لاحظ أن دوارتي قال بدءًا من اللون والشكل والنوع. في الواقع ، هذه الأنظمة ليست سوى البداية لمصمم المواد. كل شهر ، ستطلق Google محتوى جديدًا للتخصيص ، بما في ذلك الأنظمة الجديدة بالكامل. يقول دوارتي إن الرسوم المتحركة يمكن أن تكون نظامًا. [آخر] نتحدث عنه هو التمسيد والتظليل. نموذج الإضاءة والتظليل الكامل هو نظام. قد تقول ، 'أريد أن أعيش في عالم به الكثير من الظلال' ، أو 'عالم ناعم وعضوي' ، أو ، 'أريد أن أعيش في عالم مسطح.' ردا على ذلك ، سوف ينشر Theming الظلال المسقطة أو السكتات الدماغية بشكل مناسب.

[صورة: Google]

تصميم أفضل من خلال الخوارزميات

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

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

إذا كان التصميم متعدد الأبعاد هو الفلسفة التي أوضحت الاستعارة الكاملة لواجهة مستخدم Google المثالية ، فقد تكون Material Theming هي الأداة لإتقان هذا الاستعارة من خلال سلسلة من التنبيهات والهمهمات.