طقم أيقونات متناسق بالذكاء الاصطناعي: أيقونة رئيسية واحدة، وإحدى عشرة شقيقة، وأسلوب واحد
اثنتا عشرة أيقونة تبدو عائلة واحدة: اكتب القواعد، واصنع أيقونة رئيسية، واشتق منها البقية، واختبرها بحجم صغير، ثم أعد رسم الطقم بالمتجهات.
اطلب من نموذج صور أيقونة جرس وستحصل على جرس جميل. اطلب بعدها قفلًا وستحصل على قفل جميل، لكنه يبدو كأن يدًا أخرى رسمته: خطوط أسمك، وزوايا أحدّ، وميل خفيف، ولمسة ظل لم تكن في الجرس. ضعهما جنبًا إلى جنب في شريط التبويبات وسيبدو التطبيق كأنه مجمّع من ثلاث حزم مجانية. طقم الأيقونات يُحكم عليه كطقم، والقارئ يلاحظ الأيقونة الشاذة قبل أن يلاحظ الأيقونة الجيدة بوقت طويل.
يبني هذا الدليل اثنتي عشرة أيقونة لتطبيق ملاحظات متخيَّل اسمه Quillbox: الرئيسية، والبحث، والإشعارات، والتقويم، والرسائل، والكاميرا، والمفضلة، والفلاتر، والقفل، والبريد، والمجلد، والحذف. والطريقة نفسها تصلح لأي قائمة. حدد القواعد، واصنع أيقونة رئيسية واحدة تلتزم بها، واشتق كل أيقونة أخرى من تلك الرئيسية، وافحصها بالحجم الذي سيراها به الناس فعلًا، واختم بإعادة الرسم بالمتجهات.
اكتب القواعد قبل الأمر الأول
التناسق مجموعة صغيرة من الأرقام تشترك فيها كل أيقونة. اكتبها على بطاقة واحدة وأبقها مفتوحة طوال الوقت:
- الشبكة. لوحة مربعة، لنقل 24 في 24 وحدة، مع حشوة من وحدتين لا يتجاوزها شيء إلا عن قصد. كل أيقونة تُصمَّم على هذه الشبكة ولا يتغير حجمها إلا في النهاية.
- الخط. سُمك واحد، مثلًا وحدتان، بأطراف مستديرة ووصلات مستديرة. الأيقونات الخطية والأيقونات المصمتة لا تجتمع في طقم واحد، فاختر نوعًا واحدًا.
- نصف قطر الزوايا. نصف قطر واحد لكل مستطيل، مثل 3 وحدات على الزوايا الخارجية. تقويم بزوايا ناعمة بجانب أيقونة بريد بزوايا حادة هو أكثر ما يفضح الطقم.
- الأشكال الإرشادية. دائرة ومربع ومستطيل عريض تملأ تقريبًا المساحة نفسها، كي تبدو الأيقونة المستديرة والأيقونة المربعة بالحجم نفسه للعين.
- اللوحة اللونية. لون خط واحد للطقم، ولون مميز واحد على الأكثر للحالة النشطة. لا تدرجات، ولا ظلال، ولا لون خط ثانٍ للزينة.
- المنظور. مسطح ومن الأمام مباشرة. لا زوايا ثلاثة أرباع، ولا ميل متساوي القياس.
اطلب أيقونة رئيسية واحدة، واحدة فقط
اختر الأيقونة الرئيسية بعناية: أيقونة بسيطة تستخدم معظم القواعد معًا. البيت خيار جيد، لأن فيه خطًا مستقيمًا وزاوية ووصلة وشكلًا داخليًا صغيرًا. اكتب البطاقة في الأمر بكلمات بسيطة، واطلب أيقونة واحدة على خلفية سادة، ولا شيء غير ذلك.
A single flat line icon of a house, outline only, uniform medium stroke with rounded line ends and rounded corners, centred on a plain white square background with generous empty space around it, one colour only, dark charcoal lines, no fill, no shading, no gradient, no shadow, no text, no mock-upنوعان من النماذج في الكتالوج يناسبان هذا. Recraft 20B SVG موصوف بأنه يصنع صور SVG متجهة للرسوميات القابلة للتكبير والأيقونات، وRecraft V4.1 Text to Vector بأنه يصنع صورًا بأسلوب المتجهات قابلة للتعديل من أمر نصي. وإن فضّلت البدء من رسم نقطي مقصوص بنظافة، فإن Ideogram V3 Generate Transparent يعيد صورًا بخلفية شفافة. شغّل الأمر مرات كثيرة وقيّم النتائج وفق البطاقة لا وفق الذوق. الأيقونة الرئيسية التي تحتفظ بها هي الأكثر التزامًا بالقواعد، حتى لو كانت مسودة أخرى أجمل.
اشتق الشقيقات من الأيقونة الرئيسية
هنا تنهار معظم الأطقم: أحد عشر أمرًا جديدًا تعطي أحد عشر تفسيرًا جديدًا. بدلًا من ذلك اجعل الأيقونة الرئيسية مرجعًا لكل ما يليها. في الكتالوج طريق مباشر لهذا. Recraft V4 Create Style يحوّل الصور المرجعية إلى معرّف أسلوب قابل لإعادة الاستخدام، وRecraft V4 Style Text to Vector يرسم رسمًا متجهًا من أمر نصي مع معرّف الأسلوب ذاك أو مع الصور المرجعية مباشرة. أعطه أيقونتك الرئيسية، وحين تحصل على شقيقتين أو ثلاث جيدة أضفها كمراجع أيضًا، كي يُتعلَّم الأسلوب من عائلة صغيرة لا من رسم واحد.
اجعل أمر كل شقيقة مملًا. الجملة نفسها التي كتبتها للرئيسية، ولا يتغير إلا الشيء المرسوم: جرس، عدسة مكبرة، قفل. قاوم الصفات التي تسحب الأسلوب بعيدًا، مثل لطيف أو مفصّل أو واقعي. صف الشيء بأبسط أشكاله: القفل مستطيل مستدير الزوايا تحت حلقة نصف دائرية، مع خط قصير لثقب المفتاح.
- الأشياء الصعبة أولًا. الكاميرا والفلاتر والتقويم فيها أكثر الأجزاء وتنحرف أكثر من غيرها. إن صمدت فسيصمد الباقي.
- الاستعارات تبقى بسيطة. الإشعارات جرس، والمفضلة قلب، والحذف سلة. الاستعارة الذكية قرار تصميم مستقل، لا تجربة في الأمر.
- شيء واحد في كل أيقونة. مجلد عليه نجمة أيقونتان. أضف الشارة لاحقًا بالمتجهات، بالطريقة نفسها لكل أيقونة تحتاجها.
- إصلاحات صغيرة لا رسم جديد. إن كان في شقيقة جيدة تفصيل خاطئ واحد، مثل زاوية حادة في كاميرا صحيحة فيما عدا ذلك، فإن Ideogram V4.5 Edit يقبل قناعًا، فيمكنك تغيير ذلك الجزء فقط.
تثبيت الأسلوب يضيّق التفاوت لكنه لا يلغيه. توقع بضع جولات قبل أن تنسجم الاثنتا عشرة معًا، وتوقع أن تصحح الباقي بيدك في الخطوات التالية.
صفّها معًا وافحصها بحجم صغير
ضع الاثنتي عشرة على ورقة واحدة في شبكة 4 في 3، على الخلفية نفسها، بالحجم نفسه. ثم صغّر الورقة حتى تصبح كل أيقونة تقريبًا بحجمها في التطبيق: 24 بكسل لشريط الأدوات، و16 لقائمة أو لائحة مزدحمة. انظر إليها على هاتف حقيقي، لا على شاشة كبيرة فقط. ثم راجع القائمة:
- اختبار التحديق. أغمض عينيك قليلًا. يجب أن يكون للاثنتي عشرة الثقل الرمادي نفسه. الأيقونة التي تبدو أغمق فيها خط أسمك أو خطوط كثيرة.
- اختبار الحجم. يجب أن تبدو الأيقونات المستديرة والمربعة بالحجم نفسه. إن بدت أيقونة البحث أصغر من أيقونة البريد فوسّعها حتى الدائرة الإرشادية.
- اختبار التفاصيل. عند 16 بكسل تنغلق أي فجوة أضيق من الخط. ثقب المفتاح في القفل وحلقة العدسة في الكاميرا هما الضحيتان المعتادتان، فاحذفهما أو وسّعهما.
- اختبار التخمين. اعرض الورقة الصغيرة على شخص لم يرها واسأله عن معنى كل أيقونة. أي أيقونة يتردد فيها تحتاج إلى شكل أبسط أو إلى تسمية بجانبها في التطبيق.
- اختبار الحالة. جرّب كل أيقونة باللون المميز على التبويب النشط. إن كانت النسخة المصمتة جزءًا من نظامك، فيجب أن تُملأ بالطريقة نفسها في الاثنتي عشرة.
نظّفها إلى متجهات
حتى حين يعيد النموذج ملف SVG، افتحه قبل أن تثق به. المسارات المولّدة غالبًا متكتلة: عشرات النقاط حيث تكفي ثلاث، وخطوط محفوظة كأشكال مصمتة بعروض مختلفة قليلًا، وزوايا نصف قطرها متقارب لكنه ليس متطابقًا. في الطقم أنظف طريق هو إعادة رسم كل أيقونة على شبكتك بخطوط حقيقية، مع استخدام الملف المولّد دليلًا تحتها فقط. يشرح دليلنا من أفكار الشعارات بالذكاء الاصطناعي إلى المتجهات التتبع اليدوي وتبسيط الأشكال، والعادات نفسها تنطبق هنا.
ما يخص الأيقونات تحديدًا هو البناء المشترك. اضبط سُمك الخط ونصف قطر الزوايا مرة واحدة كنمط في برنامجك وطبّقه على الاثنتي عشرة، فيغيّر أي تعديل لاحق على الخط الطقم كله. حاذِ النقاط على الشبكة لتقع الخطوط على بكسلات كاملة في الحجم الأساسي. احتفظ بالملف الرئيسي وكل أيقونة على لوح رسم خاص بها، مسماة بمعناها، مثل icon-search لا magnifier، وصدّر منه بالصيغ التي يطلبها مطوروك.
إن كان على الأيقونات أن تعيش ضمن هوية أوسع، فيمكن أن تأتي اللوحة اللونية ومعرّف الأسلوب من المصدر نفسه الذي تأتي منه بقية العلامة، كما في لوحة الهوية البصرية لمحمصة بن متخيَّلة. وفكرة تثبيت أصل رئيسي واحد وبناء كل شيء حوله هي نفسها التي تجمع طقم القرطاسية.
ما يبقى من عملك أنت
النموذج يعطيك مسودات واتجاهًا. الطقم النهائي هو إعادة الرسم: خطوط متناسقة، وشبكة حقيقية، واختبار بالأحجام الحقيقية. تأكد أن أي أيقونة ليست نسخة شبه مطابقة لرمز معروف لشركة أخرى، واتبع إرشادات المنصة حين يكون لمتجر أو نظام تشغيل قواعده الخاصة لأيقونات التطبيقات. وحين تصمد الاثنتا عشرة، تصبح إضافة الثالثة عشرة سهلة: البطاقة والأيقونة الرئيسية ومعرّف الأسلوب موجودة بالفعل. تصفح نماذج المتجهات والتصميم في /models وابدأ أيقونتك الرئيسية في الاستوديو.
أسئلة
هل يستطيع الذكاء الاصطناعي صنع طقم أيقونات كامل دفعة واحدة؟
يستطيع رسم الأيقونات، لكن التناسق يأتي من قواعد تضعها أولًا ومن اشتقاق كل أيقونة من أيقونة رئيسية واحدة. استخدم أسلوبًا مبنيًا من تلك الرئيسية، ثم أعد رسم الطقم بالمتجهات كي تتطابق الخطوط والزوايا فعلًا.
هل تعطيني نماذج المتجهات أيقونات SVG جاهزة؟
تعطيك نقطة بداية متجهة. افتح الملف، وافحص المسارات وعروض الخطوط، وتوقع أن تعيد الرسم على شبكتك، لأن المسارات المولّدة نادرًا ما تكون نظيفة أو متجانسة كأيقونة مبنية باليد.
بأي حجم صغير أختبر أيقوناتي؟
بالحجم الذي سيراها به الناس، عادة 24 بكسل في شريط الأدوات و16 في لائحة مزدحمة، على شاشة حقيقية. أعد الاختبار بعد إعادة الرسم بالمتجهات، لأنها النسخة التي تصل إلى المستخدمين.