مخترع التطبيق 2 - نصائح أمامية نظيفة (+4 مثال): 6 خطوات

2024 مؤلف: John Day | [email protected]. آخر تعديل: 2024-01-30 07:38

سنرى كيف يمكننا جعل تطبيقك على 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 قريبًا!

مع الاحترام لك،

توماس ، من تكنوفابريك