باختصار: شكل واحد، لون أو لونين، بدون كلام
الأيقونة الناجحة شكل واحد واضح بلون أو لونين، بدون كلام، بتباين قوي على أي خلفية، ولا شي مهم قريب من الزوايا. لازم تطلع من نظام الشعار مو تنخترع لحالها، ولازم تنجرب على تلفون حقيقي جنب التطبيقات اللي بتقعد جنبها فعلاً. في الشاشة الرئيسية بالكويت هذولا الجيران غالباً Talabat وKNET وInstagram وSnapchat وتطبيق البنك، وأيقونتك لازم تنلقى بينهم بنظرة.
هذي كل القواعد في فقرة وحدة. باقي الدليل يشرح ليش كل قاعدة موجودة، وشنو تطلب Apple وGoogle، وكيف تختبر المسودة قبل ما تروح للمبرمج. ولو تبي الجانب الخدمي، شوف صفحة هوية التطبيقات.
ليش حجم 60 بكسل هو المهم
الأيقونة تنصمم على مساحة كبيرة وتنحكم عليها بحجم صغير جداً. في أغلب التلفونات أيقونة الشاشة الرئيسية حوالي 60 بكسل، وتصغر أكثر في الإشعارات وقائمة الإعدادات ونتائج البحث وقائمة المشاركة. أي تفصيل ما يبين إلا على المساحة الكبيرة ضايع، والخطوط الرفيعة والكلام الصغير يصيرون ضباب.
وهي كذلك أكثر قطعة من العلامة يشوفها الناس. العميل يمكن يشوف شعارك الكامل على كيس أو لوحة بين فترة وفترة، لكن الأيقونة موجودة كل مرة يفتح فيها التلفون. علشان كذا تستاهل اهتمام بقد ما تنشاف، مو بقد حجمها.
عادة مفيدة إنك تصمم بالحجم الصغير أول. ارسم الشكل كمربع صغير قبل ما تفتح المساحة الكبيرة، ولا تضيف أي تفصيل إلا إذا كان يبين لما ترجع تصغّر لحجم التلفون. بهذي الطريقة تحمي الأيقونة من التفاصيل اللي تعجبك على الشاشة الكبيرة وتختفي في الجيب.
فكر في الأيقونة كأنها العلامة بعد ما تنختصر لأقوى عنصر فيها. وإذا هويتك ما فيها هذا العنصر، فالمشكلة في نظام الشعار مو في الأيقونة، ويستاهل تنحل من أصلها؛ شغلنا في تصميم الشعارات يبني هذا العنصر من البداية.
القواعد، وليش كل وحدة موجودة
شكل واحد. العين تلقى الأيقونات بالشكل الخارجي أول. شكل واحد قوي، حرف أو رمز أو شي بسيط، ينعرف قبل ما ينقرا. عنصرين أو ثلاثة يتنافسون يلغون بعض بالحجم الصغير.
لون أو لونين. اللون ثاني طريقة يلقى فيها الناس التطبيق، وأحياناً أسرع من الشكل. لون علامة واضح للخلفية ولون مقابل للشكل يكفي عادة. التدرج اللوني ممكن ينجح إذا كان ناعم وبسيط، مثل ألوان Weseelik المتدرجة، لكن لا تخليه يحمل معنى يختفي في الوضع الداكن أو الملوّن.
بدون كلام. النظام يكتب اسم التطبيق تحت الأيقونة من الأساس. تكراره داخلها يضيع المساحة ويصير ما ينقرا. الحرف الواحد، عربي أو لاتيني، شي ثاني: يشتغل كشكل مو ككلمة.
التباين والشمس. التلفونات في الكويت تنستخدم برا في شمس قوية أغلب السنة، في السيارة وفي الطوابير. ألوان الباستيل الهادية اللي تبين راقية على الشاشة الكبيرة ممكن تختفي على شاشة تلفون في الصيف. جرب الأيقونة على أعلى إضاءة وأقل إضاءة.
بعيد عن الزوايا. المنصتين يحطون قناعهم الخاص، زوايا دائرية في iOS وأشكال مختلفة في Android، فأي شي قريب من الأطراف ممكن ينقص. خل الجزء المهم من الشكل داخل النص بمسافة كافية.
متطلبات المنصات: Apple وGoogle وShopify
Apple تطلب أيقونة مربعة كبيرة وحدة بمقاس 1024 في 1024 بكسل، بدون شفافية وبدون زوايا دائرية منك؛ النظام يحط القناع ويطلع المقاسات الأصغر. والإصدارات الجديدة من iOS تخلي المستخدم يعرض الأيقونات بنمط داكن أو ملوّن، وApple قدمت صيغة أيقونات بطبقات، فجهّز نسخة من الشكل تشتغل حتى لما النظام يغير ألوانها.
Google Play يطلب أيقونة للمتجر بمقاس 512 في 512 بكسل، وتطبيقات Android تستخدم الأيقونات المتكيفة اللي تتكون من طبقة أمامية وطبقة خلفية، والجهاز يقصها دائرة أو مربع بزوايا ناعمة أو شكل ثاني حسب الشركة المصنعة. الطبقة الأمامية لازم تبقى داخل منطقة آمنة في النص، لأن الأطراف ممكن تنقص أو تنستخدم لتأثيرات الحركة.
مواصفات المنصات تتغير، فالمبرمج والمصمم لازم يراجعون إرشادات Apple ووثائق Android وقت البناء. وإذا تطبيقك على Shopify App Store مثل تطبيقنا Chaching Bundles، فالأيقونة مع الاسم لازم تمشي زين كذلك في صفحة التطبيق جنب صور العرض الموجهة للتجار. أنواع الملفات وليش كل وحدة مهمة موجودة في دليلنا عن صيغ ملفات الشعار.
الحروف العربية في الأيقونة
سؤال يتكرر عند العلامات الكويتية: هل الأيقونة تستخدم حرف عربي؟ تقدر، وغالباً لازم إذا العملاء يعرفون العلامة باسمها العربي. القاعدة نفسها مثل الحروف اللاتينية: حرف واحد، مرسوم كشكل، بسماكة تكفي علشان يعيش بالحجم الصغير. الضربات الخطية الرفيعة والنقاط اللي بعيدة عن الحرف الأساسي غالباً تختفي.
والحرف لازم يصمد حتى عند اللي ما بيقراه كعربي، لأن الأيقونة موجودة على تلفونات بكل اللغات. Weseelik اختار طريق ثاني: مفتاح الربط يشكّل جزء من حرف في شعاره الثنائي اللغة، والأيقونة تستخدم هذا الشكل، فتنقرا كرمز لخدمة السيارات سواء تقرا عربي أو لا. اختيار الخطوط لهذا النوع من العلامات مشروح في دليل الخطوط العربية للعلامات الثنائية اللغة.
فحص عملي: اطبع الحرف بحجم الأيقونة على ورقة وابعدها عنك بطول ذراعك. إذا الحرف يتغير لما تختفي نقطة، مثل الباء اللي ممكن تنقرا تاء أو نون، اختر حرف ثاني أو رمز بداله. والحروف اللي لها شكل مميز بدون نقاط، مثل الواو أو الميم أو العين، غالباً تصمد أكثر بالحجم الصغير.
من وين تيي الأيقونة الزينة: من نظام الشعار
الأيقونات اللي تنجح تقريباً دايماً تكون قرار داخل نظام الشعار مو شي ينرسم بعده. لما نصمم هوية، نسأل بدري أي عنصر بيصير الأيقونة، ونصممه علشان يعيش بحجم 60 بكسل. حرف H المبتسم بالأخضر والأزرق في Hybrid Delivery هو هذا العنصر: نفس العلامة على الفانات والزي الموحد واللوحات الإعلانية وشاشة البداية في التطبيق.
علامات البرامج تحتاج نفس التفكير بأحجام أصغر بعد. في Ordenaire، علامة برنامج طلبات المطاعم، كان التسليم يشمل الشعار الكتابي وأيقونة المتصفح مع نظام التصميم Ordemark، وتبويب المتصفح اختبار أصعب من الشاشة الرئيسية. العملية كاملة موجودة في استوديو الهوية عندنا.
وإذا التطبيق منتج جديد لعلامة موجودة، فالأيقونة لازم تحمل اللون والشكل اللي يعرفه العملاء من محلك في السالمية أو حسابك في Instagram أو أكياس التوصيل. أيقونة جديدة تتجاهل العلامة هي علامة جديدة، سواء قصدت أو لا.
جربها جنب Talabat وKNET وInstagram
هذا اختبار تقدر تسويه اليوم. صدّر المسودة بالحجم الحقيقي، وحطها على تلفون حقيقي بين Talabat وKNET وInstagram في الشاشة الرئيسية. قفل التلفون وافتحه، وحاول تلقى أيقونتك. إذا ما لقيتها خلال ثانيتين تقريباً، بسّطها: شيل تفصيل، أو زيد التباين، أو خلها بلون واحد.
بعدين عيد الاختبار في الوضع الداكن، وداخل مجلد فيه ثلاث تطبيقات ثانية، مع صورة مزحومة كخلفية، ومع إضاءة الشاشة نازلة. شوفها في إشعار وفي نتائج البحث بالمتجر جنب التطبيقات المنافسة. واطلب من أحد ما شافها قبل إنه يأشر عليها.
هذا الطريق الصادق للشغل الذاتي، ولتطبيق تجريبي يكفي: الحرف الأول من شعارك على لون العلامة، مختبر بهذي الطريقة، أيقونة أولى محترمة.
واحتفظ بالنسخ اللي ترفضها. مقارنة ثلاث مسودات جنب بعض على نفس التلفون غالباً تكشف أكثر من الحكم على وحدة لحالها، وتعطيك شي ملموس تعرضه على المصمم إذا سلّمته الشغل بعدين. وسجّل ملاحظاتك بكلمات بسيطة: وين ضاعت الأيقونة، ومتى بانت، وأي لون شد العين.
متى تحتاج الأيقونة مصمم
الأيقونة أكثر قطعة تنشاف من العلامة وأصعب قطعة تنضبط بالحجم الصغير. تنجح لما تطلع من نظام الشعار مو بعده، علشان الشكل اللي على التلفون هو نفسه اللي على الكيس واللوحة والإعلان. وأول ما تبدأ تدفع على التحميلات في Instagram أو Snapchat أو TikTok، الأيقونة تصير جزء من اللي يقرر إذا فلوس الإعلان بتتحول لتطبيق مفتوح.
هني الوقت المناسب إنها تتصمم صح كجزء من العلامة. نصمم الأيقونات داخل شغل الهوية، ونسلّم خلال أسبوعين إلى ثلاثة أسابيع، ونفس الفريق يقدر يبني التطبيق ويدير حملات الإطلاق بعدين.
والمصمم كذلك يتكفل بالأجزاء اللي سهل تنسى: الطبقات المتكيفة، والنسخ الداكنة والملوّنة، والأيقونة الصغيرة بلون واحد اللي يعرضها Android في شريط الإشعارات، وصور المتجر المطابقة، علشان توصل الأيقونة كمجموعة كاملة مو ملف PNG واحد. وهذي التفاصيل هي الفرق بين أيقونة حلوة على المساحة الكبيرة وأيقونة تشتغل فعلاً في كل مكان تطلع فيه.
الأسئلة الشائعة
كم لازم يكون مقاس أيقونة التطبيق؟+
صممها على مربع 1024 في 1024 بكسل لـ Apple، وجهّز أيقونة متجر 512 في 512 بكسل مع طبقة أمامية وخلفية متكيفة لـ Google Play. وبعدين احكم عليها بحجم 60 بكسل تقريباً، الحجم اللي يشوفه الناس فعلاً.
أقدر أحط كلام الشعار على الأيقونة؟+
غالباً لا. النظام يكتب اسم التطبيق تحت الأيقونة، والكلمات الكاملة ما تنقرا بحجم الأيقونة. استخدم حرف واحد أو رمز واحد من الشعار بدالها.
لازم أيقونة تطبيقي تستخدم حرف عربي؟+
إذا العملاء يعرفونك باسمك العربي، فهو خيار قوي. ارسمه كشكل واحد عريض، وخل النقاط قريبة من الحرف، وتأكد إنه يبين كعلامة واضحة حتى لللي ما يقرا عربي.
كيف أختبر أيقونة التطبيق؟+
حطها على تلفون حقيقي بين Talabat وKNET وInstagram. إذا ما لقيتها خلال ثانيتين تقريباً، بسّطها. وبعدين شيّك على الوضع الداكن والمجلد والإشعار ونتائج البحث في المتجر.
تقدرون تصممون أيقونة إذا عندي شعار من قبل؟+
إي. ندور العنصر في شعارك اللي يعيش بالحجم الصغير، أو نعدّله علشان يعيش، ونسلّم الأيقونة مع ملفات المتجر وشاشة البداية كجزء من هوية التطبيق.