أيقونة فاخرة لتطبيق iOS مخصص للجري واللياقة، يظهر فيها عدّاء تجريدي بأسلوب مبسّط وهو في حالة حركة، مكوّن من شرائط متدفقة بتدرجات حيوية تبدأ من المرجاني النشط وتنتقل إلى الماجنتا الزاهية. يوحي الشكل بالسرعة والاندفاع للأمام، مع عناصر ممتدة للخلف تعزّز إحساس الحركة. الخلفية كحلية داكنة مع تدرج شعاعي خفيف أكثر سطوعًا خلف الشخصية. التصميم ديناميكي، نابض بالطاقة، وطموح. إضاءة ناعمة مع توهج بسيط حول الشكل. تنسيق مربع بزوايا مستديرة، 1024x1024px. اتبع المواصفات أدناه وتصاميم الأيقونات المرفقة كمرجع: تحدد هذه المواصفات اللغة البصرية لأيقونات التطبيقات الحديثة والفاخرة كما تظهر في تطبيقات iOS/macOS عالية المستوى. الهدف هو إنتاج أيقونات مصقولة، سهلة التذكر، وتليق بمنتج رئيسي واحترافي. --- ## 1. لوحة التصميم والشكل ### الشكل الأساسي - **التنسيق:** مربع بزوايا مستديرة متصلة بأسلوب iOS “squircle” - **نصف قطر الزوايا:** تقريبًا 22-24% من عرض الأيقونة، بما يحاكي superellipse الخاص بآبل - **نسبة الأبعاد:** 1:1 - **الدقة الموصى بها:** 1024×1024px، بحيث تصغر بسلاسة دون فقدان الوضوح ### منطقة الأمان - اجعل العناصر الأساسية داخل منتصف 80% من مساحة التصميم - يمكن للتأثيرات الخفيفة مثل التوهج والظلال أن تقترب من الأطراف، لكن بدون أن تُقصّ --- ## 2. معالجة الخلفيات ### الخلفيات الصلبة - **داكن/أسود:** أسود صريح (#000000) إلى فحمي داكن (#1C1C1E) — يمنح إحساسًا دراميًا ويبرز العناصر - **ألوان صلبة حيوية:** تعبئة بلون واحد مشبع مثل الأزرق الكهربائي #007AFF أو البرتقالي الدافئ #FF9500 - **خلفيات متدرجة:** تدرجات خفيفة من الأعلى للأسفل أو تدرجات شعاعية تضيف عمقًا ### أنواع التدرجات عند استخدامها | النوع | الوصف | مثال | |------|-------|------| | خطي | انتقال ناعم، غالبًا يكون أفتح في الأعلى | تدرج سماء أزرق | | شعاعي | تأثير توهج من الوسط مع أطراف أغمق | تأثير ضوء كشاف | | زاوي | انتقال لوني ملتف يوحي بالحركة | أسطح لؤلؤية متغيرة | ### الملمس الخفيف - خطوط عمودية أو أفقية دقيقة لإحساس معدني أو قماشي - تحبّب خفيف (Noise grain) بشفافية 1-3% لإضافة دفء عضوي - تجنب الملامس الثقيلة التي تنافس الرمز الأساسي --- ## 3. لوحة الألوان ### خصائص اللوحة الأساسية - **تشبع عالٍ:** الألوان حيوية، لكن ليست نيون مبالغ فيه - **درجات داكنة غنية:** الأسود والكحلي يظهران بشكل واضح - **ألوان زاهية انتقائية:** تُستخدم ألوان التمييز بحذر لإحداث أثر بصري قوي ### عائلات الألوان الموصى بها #### الطيف البارد ``` كحلي/أزرق داكن: #0A1628, #1A2744, #2D4A7C أزرق كهربائي: #007AFF, #5AC8FA, #64D2FF بنفسجي/أرجواني: #5E5CE6, #BF5AF2, #AF52DE تركواز/سماوي: #30D5C8, #5AC8FA, #32ADE6 ``` #### الطيف الدافئ ``` برتقالي: #FF9500, #FF6B35, #FF3B30 وردي/مرجاني: #FF6B8A, #FF2D55, #FF375F خوخي/سلموني: #FFACA8, #FF8A80, #FFB199 ``` #### الألوان المحايدة ``` أسود صريح: #000000 أسود ناعم: #1C1C1E, #2C2C2E أبيض: #FFFFFF أبيض مائل: #F5F5F7, #E5E5EA ``` ### قواعد تناغم الألوان - اجعل الأيقونة تعتمد على 2-3 ألوان مهيمنة كحد أقصى - استخدم علاقات لونية متكاملة أو متقاربة - لون واحد يكون هو المسيطر بنسبة 60%، لون ثانوي 30%، ولون تمييز 10% --- ## 4. الإضاءة والعمق ### مصدر الضوء - **الموقع:** أعلى اليسار أو من الأعلى مباشرة، بزاوية ثابتة تقريبًا 45° - **الطبيعة:** ناعمة ومنتشرة، بدون ظلال حادة - **الناتج:** لمعات خفيفة على الأسطح العلوية وظلال أسفل العناصر ### تقنيات العمق #### اللمعات - تدرج أبيض أو فاتح ناعم على الحواف العلوية للأشكال ثلاثية الأبعاد - انعكاسات لامعة على هيئة نقاط صغيرة ومضيئة، بدون مبالغة - إضاءة حواف على الجهات المواجهة للضوء #### الظلال - **ظلال خارجية:** ناعمة ومنتشرة، بشفافية 10-20%، مع إزاحة بسيطة على محور Y - **ظلال داخلية:** خفيفة جدًا لإضافة إحساس بالغور أو التجويف - **ظلال تماس:** أغمق وأضيق مباشرة تحت العناصر #### الطبقات - يجب أن تبدو العناصر وكأنها تطفو فوق الخلفية - استخدم منظورًا جويًا، بحيث تبدو العناصر البعيدة أهدأ وأقل وضوحًا قليلًا - تراكب الأشكال يصنع تسلسلًا بصريًا طبيعيًا --- ## 5. الرمز ولغة الأيقونة ### أساليب التصميم #### أ. عناصر مجسّمة/ثلاثية الأبعاد - أشكال ناعمة ومستديرة مع حجم واضح - تدرجات خفيفة توحي بالانحناء - أمثلة: طائرة ورقية، كتاب مفتوح، كرات #### ب. تصميم مسطح مع مؤشرات عمق - أشكال مبسطة مع ظلال ولمعات مدروسة - هندسة نظيفة مع تدرجات بسيطة - أمثلة: أيقونة لهب، قرص بوصلة #### ج. تجريدي/هندسي - أشكال شفافة متداخلة - تكوينات مترابطة تضيف جاذبية بصرية - أمثلة: معيّنات متداخلة، تراكيب مثلثة #### د. زجاجي/شفاف Glassmorphic - تأثير زجاج مطفي مع تمويه - أشكال تبدو شبه شفافة - انكسار خفيف وامتزاج لوني بسيط ### خصائص الرمز - **البساطة:** يمكن تمييزه حتى عند حجم 16×16px - **التوازن:** الوزن البصري في المنتصف أو ديناميكي بشكل مقصود - **الأصالة:** تجنب الطابع العام أو إحساس الرسومات الجاهزة clip-art - **الاستعارة:** الرمز يعكس وظيفة التطبيق بوضوح ### حجم الرمز الموصى به - الرمز الأساسي: 50-70% من مساحة الأيقونة - اترك مساحة تنفس حول الأطراف - اعتمد التمركز البصري، وقد يختلف عن التمركز الحسابي --- ## 6. الخامات وجودة الأسطح ### الأسطح المطفية - تدرجات ناعمة بدون لمعات حادة - يمكن إضافة ملمس خفيف جدًا - الألوان تبدو ثابتة وراسخة ### الأسطح اللامعة/العاكسة - لمعات وانعكاسات أوضح - تباين أعلى بين المناطق الفاتحة والداكنة - توحي بالزجاج أو البلاستيك أو المعدن المصقول ### الأسطح المعدنية - تدرجات خطية أو شعاعية تحاكي بريق المعدن - درجات باردة للفضي/الكروم، ودافئة للذهبي/البرونزي - يمكن إضافة خطوط ملمس دقيقة عند الحاجة ### الزجاج/الشفافية - عتامة جزئية (Opacity) تقريبًا 60-85% - تأثير تمويه على العناصر الواقعة خلفها - لون مائل مع حواف مضيئة - توهج داخلي خفيف ### الورق/القماش - ألوان ناعمة وهادئة - ملمس خفيف جدًا - ظلال لطيفة توحي بالمرونة --- ## 7. التأثيرات واللمسات النهائية ### تأثيرات التوهج - **توهج خارجي:** هالة ناعمة حول العناصر المضيئة بشفافية 5-15% - **توهج داخلي:** إضاءة حواف خفيفة تعطي إحساسًا بالحجم - **توهج لوني:** توهج ملوّن يطابق لون العنصر ويخلق أجواء محيطة ### الانعكاسات - انعكاس أرضي خفيف جدًا تحت العناصر العائمة - انعكاسات بيئية على الأسطح اللامعة - لمعات محددة توحي بمصدر الضوء ### التدرجات داخل الأشكال - تدرجات متعددة النقاط لانتقالات لونية أكثر تعقيدًا - تدرجات شعاعية لإحساس كروي - تدرجات شبكية لألوان عضوية وسائلة ### التمويه وعمق المجال - تمويه الخلفية للتكوينات متعددة الطبقات - تمويه غاوسي (Gaussian blur) بقيمة 5-20px لإحساس جوي - استخدم تمويه الحركة فقط إذا كان الهدف إظهار الحركة --- ## 8. مبادئ التكوين ### التوازن البصري - **متمركز:** الرمز في المنتصف بصريًا، يعطي إحساسًا كلاسيكيًا وثابتًا - **ديناميكي:** إزاحة بسيطة تضيف طاقة وحركة - **غير متماثل:** عدم توازن مقصود مع وزن بصري معاكس ### المساحة السلبية - مساحة تنفس وافية حول العناصر - الخلفية جزء من التصميم، وليست مساحة فارغة فقط - يمكن للمساحة السلبية أن تشكل رموزًا ثانوية ### نقطة التركيز - منطقة واحدة واضحة بأعلى تباين أو تفصيل - عين المشاهد يجب أن تقع أولًا على أهم عنصر - العناصر المساندة تتراجع بصريًا ### تباين الأحجام - الجمع بين عناصر كبيرة وصغيرة يخلق جاذبية بصرية - الرمز الأساسي هو المهيمن، والتفاصيل تبقى خفيفة - تجنب الازدحام بعناصر متساوية الحجم --- ## 9. تنويعات الأسلوب ### داكن وبسيط - خلفية سوداء أو شديدة الداكنة - عنصر واحد مضيء أو رمز بلون واحد - تباين عالٍ وإحساس درامي - أمثلة: أيقونة لهب، مخطط أسهم لمحفظة مالية ### تدرج حيوي - خلفيات متعددة الألوان بتدرجات جذابة - رموز بيضاء أو فاتحة فوقها - إحساس حديث ونشط - أمثلة: تطبيق مراسلة، تطبيق كتب أو محتوى ### ناعم وفاتح - خلفيات فاتحة ومريحة مثل الأبيض أو ألوان الباستيل - رموز ملونة مع ظلال ناعمة - إحساس ودود وقريب وسهل التقبّل - أمثلة: تطبيق تتبع الارتفاعات أو الرحلات، أيقونات الإيماءات ### زجاجي Glassmorphic - عناصر شفافة ومطفية مثل الزجاج - أشكال متعددة الطبقات بدرجات عتامة مختلفة - إحساس معاصر وراقي - أمثلة: أيقونة الاختصارات، أشكال متداخلة ### تصميم ثلاثي الأبعاد - عناصر ثلاثية الأبعاد واقعية - إضاءة وخامات معقدة - إحساس فاخر وملموس - أمثلة: كرة، طائرة ورقية، كتاب
