إن إنشاء أيقونات المنتج ليس بالأمر الصعب كما قد يبدو للوهلة الأولى. اكتشف المزيد حول تصميم أول أيقونة لتطبيق Android من البداية!
بغض النظر عن السوق أو الخدمة التي يتم توزيع التطبيق من خلالها، فإن رمز التطبيق الخاص به هو أول ما يلاحظه المستخدم المحتمل. الانطباعات الأولى لها أهمية قصوى عند محاولة جذب مستخدمين جدد، مما يعني أن الرموز هي المكونات الأساسية لأي تطبيق. وبغض النظر عن الغرض من التطبيق، فإن إنشاء رمز تطبيق جميل يجب أن يكون جزءًا مهمًا من مرحلة تطوير كل تطبيق. على الرغم من أن العديد من مطوري التطبيقات التقنية يتركون الرسومات لمصممين متخصصين، إلا أنهم يفهمون طبيعة الرسومات أساسيات التصميم وتطبيقها هو شيء يمكن لأي شخص القيام به، مع موهبة التجريب والخبرة تحليل. أيقونات التطبيقات ليست استثناء!
يتناول هذا الدليل كيفية إنشاء أيقونة قابلة للتكيف لنموذج تطبيق Android باستخدام برنامج مفتوح المصدر. على الرغم من أن النتيجة النهائية قد لا تكون بالتنسيق الذي قد تحتاجه، إلا أن الكثير من نصائح التصميم التي تمت مناقشتها هنا ستكون صحيحة عبر منصات متعددة.
بعد إصدار "الأيقونات التكيفية" مع Android Oreo، يمكن أن تتكون أيقونة التطبيق من ثلاث طبقات أساسية: طبقة طبقة خلفية غير شفافة, طبقة المقدمة مع دعم الشفافية، و أ قناع الذي يحدد شكل الأيقونة. يبلغ حجم كل هذه الطبقات 108 × 108 بكسل، على الرغم من أن الطبقة الداخلية فقط التي تبلغ 72 × 72 بكسل يمكن رؤيتها للمستخدم؛ يتم استخدام المنطقة الأخرى، المقطوعة بالقناع الموجود في الأعلى، للتأثيرات الخاصة داخل واجهة المستخدم لجعل الرمز يبدو ديناميكيًا. لغير المطلعين ، موانئ دبي أو بكسل مستقل عن العرض تقف كوحدة قياس لواجهة Android بأكملها، ويتم تعريفها بأنها تساوي حجم بكسل واحد على شاشة 160 نقطة في البوصة.)
يتحدث Nick Butcher من Google عن دائرة ذات 66 dp في وسط الأيقونة التي لا يمكن لأي قناع قصها، تسمى "المنطقة الآمنة". هذا هو المكان الذي ستوضع فيه العناصر الأساسية لتصميم الأيقونة الخاص بنا لاحقًا، عندما نصل إلى التصميم الفعلي. قد لا يكون أي شيء يتجاوز نصف القطر 33 dp هذا مرئيًا في الأيقونة أثناء وجود قناع الشكل عليها.
نظرًا لأن الأيقونات من الأفضل أن تكون صورًا متجهة بسبب تحجيم واجهة المستخدم، فسنحتاج إلى محرر رسومات متجهة لإنشاء أيقوناتنا. إنكسكيب هو مفتوح المصدر وبديل رائع للبرامج الأكثر تكلفة، لذلك سيكون خيارنا لأغراض هذا البرنامج التعليمي. لقد قمت أيضًا بتصميم ملف المشروع متاح هنا يحتوي على المنطقة الآمنة والخط الرئيسي للتصميم الخاص بـ Google، وقناع طبقة أنيق يتيح لنا معاينة شكل الرمز.
مع فتح ملف المشروع في Inkscape وملف ملء والسكتة الدماغية (إزاحة+Ctrl+F)، تصدير صورة PNG (Shift+Ctrl+E)، و طبقات (Shift+Ctrl+L) مفتوحة، ونحن على استعداد للبدء. لوحة الطبقات هي المكان الذي يوجد فيه جوهر المشروع، مع المقدمة و خلفية الطبقات المخصصة لإيواء مكوناتها الفخرية، و القواعد الارشادية و قناع من المفترض أن يتم تشغيلها وإيقافها (من خلال النقر على أيقونة العين الصغيرة بجانبها) كمرجع.
الأيقونة هي تعبير عن هوية التطبيق. على هذا النحو، يجب أن يتضمن كلاً من طابع شخصية التطبيق وإرشادات التصميم الخاصة بالنظام الأساسي، مثل تلك الموجودة في نظام Android. يجب أن تقدم لغة تصميم المواد. لأغراض العرض التوضيحي، لنفترض أننا نعمل على تطبيق طقس يستخدم العناصر المادية. يمكننا استخدام فكرة الشمس والسحب الكلاسيكية لإعلام المستخدم بالغرض من التطبيق، ووضع القليل من قم بتدوير هذا التصميم الأساسي باستخدام الظلال المسقطة والهندسة لجعله يندمج جيدًا في بيئة Android.
خلفية
لنبدأ بإعداد الخلفية، والتي ستتكون من سماء زرقاء وشمس صفراء في المنتصف. تحول قناع غير مرئي، أقوم بتحديده وجعله مرئيًا طبقة الخلفية، املأ اللوحة القماشية بأكملها بـ إنشاء المستطيلات والمربعات الأداة (F4)، ثم قم بتعيين لون تعبئة المستطيل ملء والسكتة الدماغية إلى 64B5F6FF (أزرق فاتح) وفقًا لـ لوحة الألوان المادية. ثم أقوم باختيار إنشاء الدوائر، والقطع الناقص، والأقواس باستخدام أداة (F5)، مع الضغط على Shift وCtrl، ارسم دائرة من مركز الخط الرئيسي إلى ثاني أكبر دائرة، واضبط لونها على FFEE58FF، مما يمنحنا شمسًا دافئة صغيرة. من الجيد دائمًا الالتزام بالهندسة الأساسية في أي نوع من التصميم، ولغة تصميم Android على وجه الخصوص تشجع البساطة. للامتثال لإرشادات المواد، أقوم أيضًا بإعطاء الشمس ظلًا خفيًا المرشحات ← الظلال والتوهجات ← الظل المسقط.
المقدمة
القادمة ل المقدمة, أرسم مجموعة من السحب حول الشمس عن طريق رسم دوائر من محيط دوائر أخرى، وأعطيها جميعًا لون تعبئة EEEEEEFF. ثم أقوم بتجميع الدوائر بشكل مناسب عن طريق النقر بزر الماوس الأيمن على كائنات متعددة وتحديدها مجموعة، وقم بتشغيل مولد الظل المسقط على الشكلين النهائيين اللذين حصلت عليهما في النهاية. تحول القواعد الارشادية غير مرئية وتبديل المقدمة و خلفية وبدلاً من ذلك، يمكن رؤية الطبقات المكونة لأيقونة تطبيق الطقس الخاص بنا. إذا تم سحب أيقونة التطبيق عبر الشاشة الرئيسية، فسوف تتتالي السحب مقابل شمس ثابتة!
نتيجة
قناع يمكن الآن أن يصبح مرئيًا وتعديله تحرير المسارات حسب العقد (F2) لمحاولة محاكاة الأقنعة ذات الأشكال المختلفة. كما يمكن تصدير الطبقتين بشكل منفصل باستخدام ملف تصدير صورة PNG لوحة للاستخدام في أندرويد ستوديو، ومعا ل أيقونة جوجل بلاي.
أثناء إنشاء رمز منتج، من الممارسات الجيدة دائمًا محاولة فهم غرض التطبيق، واستخلاصه إلى شكله المرئي الأكثر تجريدًا، وتمثيل ذلك باستخدام هندسة بسيطة. كلما كان أي مكون في التصميم أبسط، كلما كان عمله أفضل وأكثر موثوقية، وهذا ينطبق على التصميم الجرافيكي أيضًا. بالنسبة لمعظم الأغراض، يمكن استخدام شكل كائن في المقدمة ولون خالص أو نمط في الخلفية (أو والعكس صحيح) يعمل بشكل جيد، ولكن كما هو الحال في مثالنا، يمكن استخدام طبقة أخرى من الكائنات إذا شعرت بها ضروري؛ الكثير من التراص أو استخدام الظلال المسقطة لن يؤدي إلا إلى تعقيد تصميم الأيقونة.
يمكنك قراءة المزيد حول تصميم الأيقونات في واجهات المواد على الموقع الرسمي موقع المواد، واحصل على أيقونات النظام المجانية لاستخدامها في تصميم الأيقونات من نفس الموقع.