/

🎨🖌️عمل تصميم تطبيقات بالذكاء الاصطناعي 🤖

  • 13
    Replies
  • 3151
    مشاهدات
  • JokerZida's Avatar
    Level 52
    السلام عليكم

    هذا المقال موجه الى المبرمجين ومصممي التطبيقات، أغلبنا يعرف كيف يقيم التصاميم ولكن لا يعرف أن يصمم، مثل أي شخص يعرف أن يقيم الطعام ولكن ليس كل شخص يمكنه أن يطبخ 😅.

    اليكم اسهل طريقة لعمل التصاميم بالذكاء الاصطناعي:

    كل ما عليك فعله هو أن تسأل ChatGPT أو أي برامج الذكاء الاصطناعي النصية لتساعدك في تكوين رؤية تصميمية متكاملة، ثم استخدام تلك الرؤية في برامج تحويل النص إلى صورة لتوليد شاشات وعناصر التطبيق. لنفصل هذه العملية خطوة بخطوة.

    الخطوة الأولى: من فكرة إلى رؤية تصميم متكاملة (استخدام ChatGPT)
    هذه هي أهم خطوة. جودة تصميم التطبيق الذي ستحصل عليه تعتمد 90% على جودة الوصف الذي تقدمه. لا تقل للذكاء الاصطناعي "أريد تصميم تطبيق لمجتمع لاعبين"، فالنتيجة ستكون عامة ومخيبة للآمال.

    بدلاً من ذلك، كن مهندسًا معماريًا لرؤيتك. صف كل جزء من التطبيق بالتفصيل.

    مثال سيء: "أريد تصميم تطبيق لمجتمع."

    مثال ممتاز: "أريد رؤية تصميم لواجهة مستخدم (UI/UX) لتطبيق مجتمع Legion.

    الهوية العامة: تصميم عصري ومستقبلي موجه للاعبين، يعتمد على الوضع المظلم (Dark Mode). الألوان الأساسية هي الأسود والرمادي الداكن، مع استخدام اللون الأحمر الخاص بعلامة Legion كلون مميز للأزرار والروابط المهمة.

    الشاشة الرئيسية: يجب أن تعرض موجزًا (feed) للمنشورات بشكل رأسي. في الأعلى، يوجد قسم بارز متحرك يعرض الفعاليات الحالية مثل "مسابقة كأس العالم للرياضات الإلكترونية".

    تصميم العناصر: الأزرار يجب أن تكون ذات حواف حادة مع تأثير توهج خفيف عند تمرير الفأرة. "البطاقات" التي تعرض المنشورات يجب أن تكون بخلفية شبه شفافة. الخطوط يجب أن تكون حديثة وسهلة القراءة (Sans-serif).

    صفحة الملف الشخصي: يجب أن تعرض صورة المستخدم الرمزية، ومستواه في المجتمع على شكل شريط تقدم، بالإضافة إلى قسم يعرض الشارات (Badges) التي حصل عليها."

    بهذه الطريقة، سيقوم ChatGPT بتحويل فكرتك إلى "مستند تصميم" مفصل يمكنك استخدامه في الخطوة التالية.

    الخطوة الثانية: من وصف إلى تصميم مرئي (استخدام أدوات AI للصور)
    هنا، لن تطلب من الأداة تصميم التطبيق كاملاً مرة واحدة، بل ستقوم بتصميمه شاشة تلو الأخرى، وعنصرًا تلو الآخر.

    إنشاء الشاشات الرئيسية: استخدم الوصف الذي أعددته لكل شاشة. على سبيل new:

    اطلب: "صمم واجهة مستخدم للشاشة الرئيسية لتطبيق مجتمع لاعبين مستقبلي. الوضع مظلم مع لمسات باللون الأحمر، ويحتوي على موجز منشورات وقسم للفعاليات في الأعلى."

    سيقوم الذكاء الاصطناعي بتوليد تصميم مرئي كامل للشاشة يمكنك تقييمه.

    إنشاء العناصر المخصصة: يمكنك طلب تصميم عناصر معينة بشكل منفصل:

    اطلب: "صمم مجموعة شارات (Badges) لإنجازات اللاعبين داخل تطبيق. تصميم مستقبلي بألوان الأحمر والأسود والرمادي."

    اطلب: "صمم شكل 'بطاقة المنشور' لواجهة مستخدم تطبيق اجتماعي للاعبين."

    التجميع والتكرار: بعد توليد صور للشاشات الرئيسية والعناصر المختلفة، يمكنك الآن أنت كمبرمج أن تستخدمها كمرجع دقيق ومصدر إلهام لبناء الواجهات الفعلية في بيئة التطوير الخاصة بك. إذا لم تعجبك شاشة معينة، يمكنك ببساطة تعديل وصفها وطلب تصميم جديد منها.

    الخلاصة
    لم يعد تصميم واجهات المستخدم المعقدة حكرًا على المصممين المحترفين. بفضل أدوات الذكاء الاصطناعي، أصبح بإمكانك كمبرمج أن تبني نموذجًا أوليًا مرئيًا (Visual Prototype) لتطبيقك بالكامل قبل كتابة سطر برمجي واحد. أنت الآن لم تعد مجرد متذوق للتصاميم، بل أصبحت قادرًا على "هندسة وطبخ" تجربة المستخدم الكاملة بنفسك. جرب هذه الطريقة في مشروعك القادم، وستندهش من السرعة والإبداع الذي يمكنك تحقيقه.






    - - - Updated - - -

    تصميم آخر
    https://imgur.com/a/2SJD672
    We are the new LEGENDS. This is New Age
  • 13 Replies

  • Abdelsalam's Avatar
    Level 52
    الذكاء الاصطناعي بقى مفيد اوي في البرمجة مش بس بيكتب كود ده كمان بيساعد في التصميم ويوفر وقت ومجهود
    Not all those who wander are lost
  • mohamed_5090's Avatar
    Level 52
    ai مش هيخلي وظيفه الا لما ياخد مكانها 😅
  • Shifaa's Avatar
    Level 28
    @mohamed_5090 معاك حق الوضع خرج عن السيطره!
  • mazen18's Avatar
    Level 52
    الكل مركز علي الذكاء الاصطناعي من كام سنه. وتتطور كتير عن الاول ،ولسه كمان في المستقبل هيوصل لمرحلة جديده
  • NermeenAbdelmoez1's Avatar
    Level 43
    اعتقد الموضوع مش بالبساطة دى بس هو مفيد

    - - - Updated - - -
    @mazen18 حقيقي

    - - - Updated - - -
    @mohamed_5090 مش بالسرعة دى و اكيد هيخلق وظايف جديدة

    - - - Updated - - -
    @Abdelsalam بس محتاج تراجع وراه و ممكن تكتب انت الكود بشكل أذكى منه فى بعض الأحيان او مختصر اكتر
  • UnapologeticDino's Avatar
    Community Manager
    رأيي انه بينفع جداً في المذاكرة لكن في حاجات بجد خطر فيها استخدامه.
  • Abdogamal's Avatar
    Level 39
    هو الشغل دا مش سهل اوي بس ممكن اي حج يعمله لو بيعرف يستخدم ال AI
  • NermeenAbdelmoez1's Avatar
    Level 43
    @UnapologeticDino موافقة جدا مينفعش تستخدمه فى كل حاجة و هو كمان بيعمل أخطاء أحيانا

    - - - Updated - - -
    @Abdogamal بالعكس لازم تكون فاهم كويس
  • Abdogamal's Avatar
    Level 39
    @NermeenAbdelmoez1
    ما اكيد يكون فاهم و الاهم من كدا تكون عارف تدي امر صح لل AI دا 90% من انه يطلعلك اللي انت عاوزه