تصميم الأيقونات التكيفية

يقدم Android O تنسيق رمز التطبيق الجديد: الرموز التكيفية. يمكن أن تجعل الرموز التكيفية الأجهزة أكثر تماسكًا من خلال توحيد شكل جميع رموز التطبيقات وفتح الباب أمام المؤثرات المرئية المثيرة للاهتمام. يشرح هذا المنشور كيفية عملهم ويستكشف بعض التقنيات لتصميمها.

للحصول على نظرة إلى الوراء من أين جاءت هذه الميزة ، راجع:

أساسيات

الحجم والشكل

يبلغ حجم الرموز التكيفية 108dp * 108dp لكن يتم حجبها بحد أقصى 72dp * 72dp. يمكن للأجهزة المختلفة توفير أقنعة مختلفة يجب أن تكون محدبة الشكل وقد تصل إلى 33dp كحد أدنى من الوسط في الأماكن.

أمثلة من أقنعة مختلفة الشكل يتم تطبيقها

نظرًا لوجود الحد الأدنى من الوصول إلى القناع ، يمكنك اعتبار دائرة قطرها 66dp مركزًا كمنطقة آمنة ، وضمان عدم قصها.

منطقة آمنة داخل قناع مربع مدور

Keylines

أيقونة الخطوط الرئيسية

الأشكال الأساسية هي أساس شبكة الرموز التي تساعد الأبعاد البصرية لأيقوناتك على أن تكون متوافقة مع رموز التطبيقات الأخرى. الأشكال الرئيسية هي:

  • الدوائر: 52dp و 36dp القطر
  • مربع: 44dp * 44dp ، دائرة نصف قطرها الزاوية 4dp
  • المستطيلات: 52dp * 36dp و 36dp * 52dp ، 4dp نصف قطر الزاوية

انظر القوالب المضمنة في نهاية هذه المقالة.

طبقات

تتكون الأيقونات التكيفية بالفعل من طبقتين ؛ مقدمة وخلفية. كلا الطبقتين 108dp * 108dp ؛ يجب أن تكون الخلفية معتمة بالكامل بينما قد تتضمن المقدمة الشفافية. هذه الطبقات مكدسة فوق بعضها البعض.

يوفر توفير عناصر في طبقتين منفصلتين أكبر من الحجم المعروض (أي المقنع) الفرصة للمعالجات المرئية والرسوم المتحركة المثيرة للاهتمام. بالضبط ما الآثار التي يمكن تطبيقها ومتى لا يزال شيء من مسألة مفتوحة ؛ الأمر متروك لصناع الجهاز وقاذفة لاتخاذ قرار. فيما يلي بعض الأمثلة البسيطة التي يمكن أن تتخيلها: المنظر أو النبض من خلال ترجمة كل طبقة أو قياسها بشكل مستقل قبل تطبيق القناع.

نظرًا لأن أيقونات 108dp * 108dp مخفية حتى 72dp * 72dp ، يمكن اعتبار 18dp الخارجي على كل جانب المحتوى "الإضافي" ، الذي يتم كشفه فقط أثناء الحركة.

متطلبات التصميم

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

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

قصاصة

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

رسو الخلفية

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

تؤكد العناصر الموجودة على طبقات مختلفة على الطبقات

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

أقنعة ملثمين

أعتقد أنه قد تكون هناك فرص مثيرة للاهتمام لوضع عناصر التقنيع في المقدمة - وهي عناصر صلبة ذات مناطق مقطوعة. ضع في اعتبارك رمزًا محتملًا لمتجر Google Play ، فقد يتم بناؤه بطريقة "واضحة" ، وهي تضع المثلث الملون في المقدمة على خلفية بيضاء.

مقدمة

بدلاً من القيام بذلك ، قد نستخدم خلفية ملونة ومقدمة بيضاء مع المثلث الذي تم طرحه لإنتاج نفس الناتج الثابت:

خلفية ملونة بديلة مع اخفاء المقدمة

سيسمح هذا الإعداد للألوان "الظاهرة" بالتحرك بشكل مستقل عن القناع الذي يكشف أجزاء مختلفة من الخلفية عند ترجمتها أو تحجيمها.

اليسار هو تكوين منتظم. الحق مع مقدمة اخفاء

الضوء والظلال

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

مثال على الظل الأمامي ومصدر الضوء (مبالغ فيه) المصبوب على الخلفية

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

ترك وراءه

يمكنك وضع عناصر في طبقة الخلفية التي تحجبها بالكامل الطبقة الأمامية وتكشف فقط تحت الحركة.

عناصر كشفت فقط تحت الحركة

الموارد والأدوات

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

لقد حمّلت أيضًا قالب Adobe Illustrator إذا كان هذا هو أكثر شيء لديك.

بالإضافة إلى ذلك ، تحقق من هذه الموارد الأخرى التي صادفتها:

  • أداة معاينة الأيقونة التكيفية
  • تقارب مصمم القالب
  • تتضمن قوالب Bjango أيقونات قابلة للتكيف
  • قالب Figma (يتطلب تسجيل الدخول)
  • قالب أدوبي XD

ملعب أيقونة التكيف

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

قم بتجربة الأقنعة وتأثيرات الحركة المطبقة على أيقوناتك

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

يمكنك تنزيل ملف APK أو الخروج من المصدر على جيثب:

الخروج والتكيف

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

إذا كنت مطورًا يتطلع إلى إنشاء رمز قابل للتكيف ، فقم بالانضمام إلي في الجزء 3: تطبيق الرموز التكيفية.