لتحصل على التصميم الذي تريده من الذكاء الاصطناعي، صف خمسة أشياء بدقة: الطابع العام بثلاث كلمات، الألوان بأكوادها (مثل #0F5132)، الخط العربي والإنجليزي، كثافة المسافات وشكل العناصر (زوايا، ظلال)، وقواعد RTL. ابدأ ببرومبت يحدد نظام التصميم كاملاً، ثم عدّل كل شاشة على حدة برسائل قصيرة تصف ما تراه وما تريد تغييره.
- برومبت تصميم واجهة تطبيق
- كيف اوصف التصميم للذكاء الاصطناعي
- تصميم تطبيق بالذكاء الاصطناعي
- برومبت هوية بصرية بالعربي
- افضل خط عربي للتطبيقات
كيف تصف التصميم الذي تريده للذكاء الاصطناعي؟
لتصف التصميم الذي تريده للذكاء الاصطناعي، حوّل الذوق إلى قرارات: ثلاث كلمات للطابع، ألوان بأكوادها، خط محدد، مسافات وأشكال واضحة، وقواعد RTL. جملة «أبغاه فخم وعصري» تعني لكل شخص شيئاً مختلفاً، أما «طابع هادئ وفاخر ومريح، خلفية بيج فاتح #F7F3EC، لون أساسي أخضر داكن #0F5132، خط IBM Plex Sans Arabic، مسافات واسعة وزوايا دائرية خفيفة» فتعطي الوكيل ما ينفذه حرفياً.
الخبر الجيد أنك لا تحتاج أن تكون مصمماً. تحتاج فقط بعض المفردات، وطريقة منظمة: نظام تصميم أولاً، ثم الشاشات واحدة واحدة، ثم مراجعة. هذا المقال يعطيك الثلاثة مع برومبتات جاهزة.
الذكاء الاصطناعي لا يقرأ ذوقك؛ يقرأ كلماتك. فاجعل كلماتك دقيقة.
مفردات تصميم بسيطة لغير المصممين
هذه أكثر الكلمات فائدة عند طلب تعديلات في الواجهة. استخدمها بالعربي أو بالإنجليزي، فالنموذج يفهم الاثنين.
| ما تقصده | الكلمة الأدق | مثال في برومبت |
|---|---|---|
| الصفحة مزدحمة | مسافات بيضاء (whitespace) | زد المسافات بين الأقسام وقلل العناصر في الشاشة الأولى |
| لا أعرف أين أنظر | تسلسل بصري (hierarchy) | اجعل العنوان والسعر أبرز من الوصف |
| الصندوق حول المنتج | بطاقة (card) | بطاقات بزوايا 12px وظل خفيف |
| الجزء الأول الكبير | قسم البطل (hero) | قسم بطل بصورة كاملة وعنوان وزر واحد |
| الزر المهم | زر الإجراء (CTA) | زر «اطلب الآن» بلون أساسي وعرض كامل على الجوال |
| النص غير واضح | التباين (contrast) | ارفع تباين النص الرمادي على الخلفية الفاتحة |
| يتغير على الجوال | تصميم متجاوب (responsive) | عمود واحد على الجوال، ثلاثة على الحاسوب |
برومبت نظام التصميم: الهوية في رسالة واحدة
قبل أن تعدّل أي شاشة، ثبّت نظام التصميم: الألوان، الخطوط، المسافات، والأشكال. حين يكون النظام واضحاً، كل صفحة جديدة يبنيها الوكيل تأتي متسقة معه تلقائياً. إن كان عندك شعار، استخرج ألوانه بأكوادها من ملف الهوية أو من المصمم.
طبّق نظام التصميم التالي على كامل التطبيق: الطابع: هادئ، فاخر، موثوق. الألوان: الخلفية #F7F3EC، اللون الأساسي #0F5132 للأزرار والروابط، لون مساعد ذهبي #B08D57 للتمييز فقط، النص الأساسي #1F2933، النص الثانوي #52606D، الأخطاء #B42318. الخطوط: IBM Plex Sans Arabic للعربي وInter للإنجليزي، حجم النص الأساسي 16px على الجوال، والعناوين بوزن 600. المسافات: نظام من مضاعفات 8px، مسافات واسعة بين الأقسام. الأشكال: زوايا دائرية 12px للبطاقات و10px للأزرار، ظلال خفيفة جداً، بلا تدرجات لونية. الاتجاه: عربي RTL أولاً، والإنجليزي LTR عند تبديل اللغة. أضف وضعاً داكناً بنفس الهوية. لا تغيّر المحتوى أو المنطق؛ التصميم فقط.
جرّبه في فنّانملاحظة عن الخطوط: خطوط عربية شائعة ومجانية مثل IBM Plex Sans Arabic وNoto Kufi Arabic وTajawal وCairo مصممة للشاشات وتعمل جيداً مع الإنجليزية. اختر خطاً واحداً للعربي وآخر متناسقاً للإنجليزي، ولا تخلط أكثر من خطين.
كيف تختار الألوان إن لم يكن عندك هوية؟
- لون أساسي واحد للأزرار والروابط، يتكرر في كل الصفحات.
- لون مساعد للتمييز فقط (شارة خصم، أيقونة)، لا يُستخدم للنصوص الطويلة.
- ألوان محايدة للخلفيات والنصوص: أبيض أو بيج فاتح، ورمادي داكن للنص بدل الأسود الصريح.
- ألوان الحالات: أخضر للنجاح، أحمر للأخطاء، أصفر للتنبيه، وتبقى ثابتة في كل التطبيق.
وإن كنت تخطط لحملات موسمية مثل اليوم الوطني أو رمضان، فاطلب ألوان الحملة في بانرات وصفحات مؤقتة، ولا تغيّر نظام التصميم الأساسي كل موسم.
قواعد RTL والعربية التي يجب ذكرها
كثير من الأدوات تبني بالإنجليزي أولاً ثم «تقلب» الاتجاه، فتظهر تفاصيل تجعل التطبيق يبدو غريباً على العين العربية. اذكر هذه القواعد صراحة:
- الأيقونات الاتجاهية (أسهم الرجوع والتالي، أيقونة السلة المتحركة) تُعكس في العربي، أما الشعارات وأيقونات التشغيل والساعة فلا تُعكس.
- لا تباعد بين الحروف (letter-spacing) في النص العربي؛ يكسر اتصال الحروف.
- لا خط مائل (italic) للعربي؛ استخدم الوزن الأثقل للتمييز.
- النص العربي يحتاج حجماً أكبر قليلاً وارتفاع سطر أوسع من الإنجليزي ليُقرأ براحة.
- الأرقام وأرقام الجوال والأسعار تبقى بترتيب صحيح داخل الجملة العربية.
- الحقول الخاصة بالبريد الإلكتروني ورقم البطاقة تُكتب من اليسار حتى داخل واجهة عربية.
للأخطاء الشائعة بتفصيل أكبر اقرأ تجربة مستخدم عربية أولاً: أخطاء RTL.
برومبتات لكل شاشة: الهدف أولاً ثم الترتيب
بعد النظام، عدّل الشاشات المهمة واحدة واحدة. صيغة ناجحة: هدف الشاشة، ترتيب العناصر من الأعلى، ما يجب أن يبرز، وما يجب حذفه.
- 1الصفحة الرئيسية
«هدف الصفحة: أن يبدأ الزائر الطلب خلال ثوانٍ. من الأعلى: قسم بطل بصورة وعنوان قصير وزر اطلب الآن، ثم الأقسام كبطاقات أفقية، ثم الأكثر مبيعاً. احذف الشريط النصي المتحرك.»
- 2صفحة المنتج
«الصور أولاً بعرض كامل، ثم الاسم والسعر بخط كبير، ثم الخيارات كأزرار لا قائمة منسدلة، ثم زر أضف للسلة ثابت أسفل الشاشة على الجوال.»
- 3صفحة الدفع
«خطوة واحدة قدر الإمكان: العنوان، طريقة الدفع بأيقونات مدى وApple Pay وTabby، الملخص، وزر الدفع. بلا روابط تشتت.»
- 4لوحة التحكم
«أربع بطاقات أرقام في الأعلى (طلبات اليوم، المبيعات، قيد التجهيز، الملغاة)، ثم جدول الطلبات الأخيرة. ألوان هادئة، والأحمر للتنبيهات فقط.»
المراجع والصور: كيف تستفيد منها دون نسخ؟
المراجع البصرية تختصر كلاماً كثيراً، لكن «اجعله مثل التطبيق الفلاني» وحدها تترك الوكيل يخمّن ما أعجبك تحديداً. سمِّ الشيء الذي أعجبك، ولا تطلب نسخ هوية علامة أخرى.
- «مثل تطبيق التوصيل المشهور»
- «ألوان حلوة مثل إنستغرام»
- «أبغى شكل احترافي»
- «صفحة دفع من خطوة واحدة، والملخص ثابت في الأسفل»
- «تدرج من البرتقالي إلى الوردي في الأزرار الأساسية فقط»
- «مسافات واسعة، صور كبيرة، نص قليل، لون أساسي واحد»
ولا تنسَ أسلوب الصور، فهو جزء من الهوية مثل الألوان. حدد ما تريده: صور منتجات حقيقية على خلفية سادة، أو رسومات توضيحية بسيطة، أو صور أشخاص مناسبة لثقافة جمهورك. واطلب من الوكيل أماكن واضحة للصور مع نص بديل، حتى تستبدلها بصورك الحقيقية لاحقاً دون أن يتغير التصميم.
إن كان عندك رسم على ورقة أو لقطة شاشة لتصميم مبدئي، يمكنك تحويلها إلى وصف دقيق أو استخدامها مرجعاً؛ الطريقة في من لقطة شاشة أو رسم يدوي إلى تطبيق يعمل.
قائمة مراجعة التصميم قبل الإطلاق
- كل شاشة مجربة على جوال حقيقي بالعربي والإنجليزي.
- التباين كافٍ للنص الرمادي والأزرار، خصوصاً في الشمس.
- الوضع الداكن لا يُخفي شعاراً أو أيقونة.
- الأزرار كبيرة بما يكفي للمس بالإصبع، والنماذج تعرض رسائل خطأ واضحة.
- الصور مضغوطة وتظهر بسرعة على شبكة الجوال.
- نفس الألوان والخطوط والأشكال في كل الصفحات، بلا استثناءات عشوائية.
يمكنك أن تطلب هذه المراجعة من الوكيل نفسه: «راجع التصميم في كل الصفحات مقابل نظام التصميم، واذكر أي اختلاف قبل أن تعدّل». ولمعايير سهولة الوصول راجع سهولة الوصول في التطبيقات العربية.
الخلاصة
- ابدأ بنظام تصميم واحد (ألوان، خطوط، مسافات، أشكال) قبل تعديل الشاشات.
- الألوان بأكوادها، والطابع بثلاث كلمات محددة، أفضل من «فخم وحلو».
- للعربية قواعد خاصة: خط أكبر قليلاً، بلا تباعد بين الحروف، وأيقونات اتجاهية معكوسة.
- صف كل شاشة بهدفها وترتيب عناصرها، وعدّلها واحدة واحدة.
- راجع على الجوال أولاً، وتحقق من التباين والوضع الداكن وسهولة الوصول.
أسئلة شائعة
كيف اوصف التصميم للذكاء الاصطناعي إذا ما عندي خبرة تصميم؟
ما افضل خط عربي للتطبيقات؟
هل أبدأ بتصميم كل الشاشات في برومبت واحد؟
لماذا يبدو تطبيقي العربي غريباً رغم أنه RTL؟
هل يمكن أن أطلب تصميماً مثل تطبيق مشهور؟
كيف اغير تصميم تطبيقي بعد بنائه؟
اسأل مساعدك الذكي عن هذا الموضوع
انسخ هذا الطلب والصقه في مساعد الذكاء الاصطناعي الذي تستخدمه، ثم أضف تفاصيل حالتك.
أقرأ هذا الدليل: «كيف تصف التصميم الذي تريده: برومبتات للواجهة والهوية» https://fanann.com/ar/blog/prompts-for-ui-design/ سؤالي: برومبت تصميم واجهة تطبيق اعتمد على هذه الصفحة كمصدر واشرح لي الإجابة خطوة بخطوة بما يناسب حالتي، واذكر ما يجب أن أتحقق منه قبل أن أبدأ، واذكر رابط الصفحة كمرجع.