جدول المحتويات:
2025 مؤلف: John Day | [email protected]. آخر تعديل: 2025-01-13 06:56
سنرى كيف يمكننا جعل تطبيقك على AI2 يبدو جماليًا:)
لا يوجد رمز هذه المرة ، فقط نصائح لتطبيق سلس مثل المثال الرابع في الأعلى!
اللوازم
الخطوة 1: مقدمة
هذا Instructable مخصص لكل شخص يتعلم أو يستخدم App Inventor 2 ، وهو برنامج تم تطويره بواسطة MIT.
MIT AI2 عبارة عن تطوير مجاني وبسيط ومذهل لتطبيقات الهواتف الذكية ، وهو مثالي لكل أجهزة اردوينو أو جهاز إلكتروني. لكن بساطته تجعله محدودًا أيضًا ، خاصةً عندما تحاول جعل تطبيقك يبدو جماليًا.
الغرض من Instructable هذا هو إعطائك بعض النصائح لإنشاء واجهة رائعة لتطبيقك المستقبلي ، والتي ستبدو بسيطة وأنيقة ، كما يجب أن تكون كل واجهة.
سنرى الأساسيات لإنشاء تطبيق سيبدو كما هو موضح في المثال الرابع.
هيا بنا نبدأ !
ملاحظة: إذا كنت تحب هذا المشروع ، فيمكنك التصويت لي في مسابقة Classroom Science. شكرا جزيلا لك !!
PS2: سيتم ارتكاب بعض الأخطاء الإنجليزية ، سامحني:)
الخطوة 2: BackGround
لقد قمت بإنشاء مزيد من الإبداع على Figma ، وهو برنامج مجاني متجه ، مثل الطلاء المتقدم ، الذي يسمح لك بإنشاء أشكال وألوان بسهولة: إنه أمر بديهي للغاية ، أوصي به: www.figma.com!
لا تحتاج إلى استخدام Figma للواجهة ، لكني أحب أن أقوم بالتصميم قبل إنشاء التطبيق نفسه.
كما ترى في الصورة ، يجب أن تكون الخلفية ناعمة جدًا ، لأننا سنضع بعض الأزرار والصور وما إلى ذلك … عليها …
أوصي بشفافية 30٪ على اللون الذي تستخدمه ، وخلفية بلون واحد فقط.
الخطوة 3: الألوان
تعتبر الألوان التي تختارها وكثافتها مهمة جدًا في التطبيق.
النصيحة الأولى التي أقدمها هي اختيار 3 ألوان كحد أقصى (+ أبيض وأسود): ما زلنا نحاول أن نكون ناعمين:)
بالنسبة للمثال الرابع الذي قدمته ، إليك النصائح التي اخترتها (يمكنك أيضًا رؤيتها على الصورة ، كخلاصة):
الخلفية: خلفية ناعمة وخفيفة بدون شكل (30٪ شفافية للون). تذكر هذا اللون لدمج الأزرار الخاصة بك!
العنوان: يبدو النص الرفيع باللون الرمادي الغامق جيدًا! بالنسبة إلى العنوان الفرعي والنص التاليين ، ابقَ باللون الأسود ، لكن غيّر ظل الأسود (الرمادي عندما لا يكون معلومة كبيرة) ، والعب بالحجم والسمة التي يمكنك (غامق ، مائل).
الزر: لون واحد ، بشكل عام لون الخلفية الخاص بك مع (80-100٪ شفافية) ، ثم الأسود أو الأبيض لإنهائه.
المتزلجون: لا تستخدم لونين لهم ، لون واحد فقط على الجانب الأيسر والجانب الأيمن في ظل أسود.
هذا كل شيء !!
الاقل هو الاكثر !!!! لا تستخدم الكثير من الألوان والشكل والحجم ، كن دقيقًا!
الخطوة 4: اضبط المعلمة الصحيحة للشاشة
في الشاشة الرئيسية لجزء App Inventor Designer ، يمكنك تحديد العنصر الرئيسي للشاشة.
على Screen1 -> Properties ، اتبع الإجراء التالي لحذف إطار الإضافات من AI2 الذي لا يبدو جيدًا حقًا ^ _ ^.
1 - اتجاه الشاشة
اختر اتجاهًا واحدًا فقط لأن التطبيق لا يتكيف جيدًا عند تدويره.
اخترت الاتجاه العمودي.
2 - تعطيل "العنوان المرئي" و 3- تعطيل "ShowStatusBar"
أقوم بتعطيل العنوان وشريط الحالة ، لأنه يضيف بعض الأشرطة على التطبيق ، والتي ليست جمالية للغاية (في رأيي).
4 - البعد
أبعاد التطبيق المشترك هي 505 × 320 (الارتفاع × العرض). تذكر تلك الأبعاد لإنشاء الخلفية والصور الخاصة بك (على الأقل لها نفس النسبة)! إذا كنت تستخدم Figma ، فيمكنك إنشاء الحجم المناسب لتطبيقك على الفور.
5 - تحجيم
إذا اخترت Fixed ، فسيكون حجم التطبيق 505x320. إذا اخترت الاستجابة ، فسيتناسب التطبيق مع هاتفك الذكي ، ولكن احذر ، فسيتعين عليك تكييف صورك.
الخطوة 5: كيف نفعل ذلك:)
لإعادة إنتاج المثال الأول ، سنتبع 3 خطوات (مثل الصور):
1 - خذ الأبعاد
ما هو رائع في Figma هو أنه يمكنك رؤية حجم الإطارات والعنصر الخاص بك ، حتى تتمكن من رؤية الحجم الذي سيكون كائناتك ، والفراغ! تعتبر الفراغات مهمة جدًا في App Inventor لأننا سننشئها عن طريق وضع ملصق غير مرئي!
2 - ملء الفراغ سوف تسميات غير مرئية
كما ترى في الصورة الثانية ، نقوم بإعادة إنتاج المقدمة التي نريدها بوضع ملصق بالحجم المناسب. ثم اجعله يبدو غير مرئي (قم بإلغاء النقر على الزر "مرئي").
استخدم أيضًا التنسيق -> الترتيب لوضع العناصر الخاصة بك
3 - حاول إنشاء الأزرار الخاصة بك على البرنامج
عندما يكون ذلك ممكنًا ، قم بإنشاء الأزرار الخاصة بك على موقع الويب AI2 ، وستكون بجودة عالية وستكون الرسوم المتحركة الصغيرة "عند النقر" رائعة نوعًا ما:). عندما لا يمكنك إنشاء الأزرار الخاصة بك ، يمكنك إنشاؤها على برنامج آخر ، ثم استيرادها كصورة.
الخطوة 6: النتيجة:)
على اليسار: لقطة شاشة من هاتفي الذكي على AI2.
على اليمين: المسودة على Figma.
آمل حقًا أن يساعدك هذا Instructable في إنشاء تطبيق رائع على AI2.
شكرا جزيلا لك على المشاهدة. إذا كنت بحاجة إلى مزيد من النصائح ، فيرجى إبلاغي بذلك …
سيتم إصدار Instructable آخر على الواجهة الخلفية لـ AI2 قريبًا!
مع الاحترام لك،
توماس ، من تكنوفابريك