APP مخترع 2 - راهنمایی های تمیز جلو (4+ مثال): 6 مرحله

2024 نویسنده: John Day | [email protected]. آخرین اصلاح شده: 2024-01-30 08:54

ما می خواهیم ببینیم چگونه می توانیم برنامه شما در AI2 را زیبا جلوه دهیم:)

این بار بدون کد ، فقط راهنمایی برای یک برنامه روان مانند 4 مثال بالا!

تدارکات

مرحله 1: مقدمه

این دستورالعمل برای همه کسانی است که برنامه Inventor 2 را یاد می گیرند یا از آن استفاده می کنند ، نرم افزاری که توسط MIT توسعه یافته است.

MIT AI2 یک برنامه کاربردی تلفن هوشمند رایگان ، ساده و شگفت انگیز است که برای هر دستگاه DIY Arduino یا دستگاه الکترونیکی مناسب است. اما سادگی او نیز او را بسیار محدود می کند ، مخصوصاً وقتی می خواهید برنامه خود را زیبا جلوه دهید.

هدف این دستورالعمل این است که نکاتی را برای ایجاد جلوه ای جالب برای برنامه آینده خود به شما ارائه دهد ، که مانند هر قسمت ساده و زیبا به نظر می رسد.

ما قصد داریم اصول اولیه ایجاد یک برنامه را ببینیم که شبیه 4 مثال نشان داده شده است.

بیایید شروع کنیم !

PS: اگر عاشق این پروژه هستید ، می توانید در مسابقه علوم کلاس درس به من رای دهید. خیلی ممنون !!

PS2: برخی اشتباهات انگلیسی انجام می شود ، من را ببخش:)

مرحله 2: BackGround

من در Figma یک نرم افزار رایگان بردار ، مانند یک رنگ پیشرفته ، ایجاد کرده ام که به شما امکان می دهد به راحتی اشکال و رنگ ها را ایجاد کنید: بسیار بصری است ، من آن را توصیه می کنم: www.figma.com!

نیازی نیست از Figma برای قسمت جلویی خود استفاده کنید ، اما من دوست دارم قبل از ایجاد خود برنامه ، طراحی را انجام دهم.

همانطور که در تصویر مشاهده می کنید ، پس زمینه باید بسیار نرم باشد ، زیرا ما می خواهیم دکمه ها ، تصاویر و غیره را روی آن قرار دهیم…

من شفافیت 30 درصدی را در مورد رنگی که استفاده می کنید و پس زمینه ای با تنها 1 رنگ توصیه می کنم.

مرحله 3: رنگها

رنگهایی که انتخاب می کنید و شدت آنها در یک برنامه بسیار مهم است.

اولین توصیه ای که می کنم انتخاب حداکثر 3 رنگ (+ سیاه و سفید) است: ما هنوز سعی می کنیم نرم باشیم:)

در مورد 4 نمونه ای که من تهیه کردم ، توصیه هایی که من انتخاب کرده ام (در تصویر نیز می توانید آنها را به عنوان خلاصه ببینید) آورده شده است:

پس زمینه: یک پس زمینه نرم و روشن بدون شکل (30٪ شفافیت رنگ). این رنگ را برای ادغام دکمه های خود به خاطر بسپارید!

عنوان: متن نازک به رنگ خاکستری تیره خوب به نظر می رسد! برای زیرنویس و متن زیر ، سیاه بمانید ، اما سایه سیاه را تغییر دهید (خاکستری وقتی اطلاعات زیادی نیست) و با اندازه و ویژگی که می توانید بازی کنید (پررنگ ، کج).

دکمه: یک رنگ ، به طور کلی رنگ پس زمینه شما با (شفافیت 80-100٪) ، سپس سیاه یا سفید برای تکمیل آن.

لغزنده ها: از 2 رنگ برای آنها استفاده نکنید ، فقط یک رنگ در سمت چپ ، و سمت راست در سایه مشکی.

خودشه !!

کمتر بیشتر !!!! از رنگ ، شکل و اندازه زیاد استفاده نکنید ، ظریف باشید!

مرحله 4: پارامتر راست صفحه را تنظیم کنید

در صفحه اصلی قسمت App Inventor Designer ، می توانید ویژگی اصلی صفحه را انتخاب کنید.

در Screen1 -> Properties ، اقدامات زیر را برای حذف فریم اضافی از AI2 انجام دهید که واقعاً خوب به نظر نمی رسد ^_ ^.

1 - جهت گیری صفحه نمایش

فقط یک جهت را انتخاب کنید زیرا وقتی برنامه را بچرخانید خیلی خوب سازگار نمی شود.

من جهت گیری پرتره را انتخاب کردم.

2 - "عنوان قابل مشاهده" و 3- "ShowStatusBar" را غیرفعال کنید

عنوان و نوار وضعیت را غیرفعال می کنم ، زیرا برخی از نوارها را در برنامه اضافه می کند ، که به نظر من بسیار زیبا نیستند (به نظر من).

4 - ابعاد

ابعاد برنامه رایج 505x320 (ارتفاع x عرض) است. این ابعاد را برای ایجاد پس زمینه و تصاویر خود به یاد داشته باشید (حداقل نسبت یکسانی داشته باشید)! اگر از Figma استفاده می کنید ، می توانید بلافاصله اندازه مناسب برنامه خود را ایجاد کنید.

5 - اندازه

اگر Fixed را انتخاب کنید ، اندازه برنامه 505x320 خواهد بود. اگر Responsive را انتخاب می کنید ، برنامه با تلفن هوشمند شما سازگار است ، اما مراقب باشید ، باید تصاویر خود را تطبیق دهید.

مرحله 5: چگونه این کار را انجام دهیم:)

برای بازتولید اولین مثال ، ما 3 مرحله را دنبال می کنیم (مانند تصاویر):

1 - ابعاد را در نظر بگیرید

نکته جالب در figma این است که شما می توانید اندازه فریم ها و شیء خود را ببینید ، بنابراین می توانید اندازه اشیاء خود و اندازه خالی آن را ببینید! موارد خالی در App Inventor بسیار مهم هستند زیرا ما قصد داریم آنها را با قرار دادن برچسب نامرئی ایجاد کنیم!

2 - جای خالی برچسب های نامرئی را پر کنید

همانطور که در تصویر دوم مشاهده می کنید ، ما قسمت جلویی مورد نظر خود را با قرار دادن برچسب با اندازه مناسب بازتولید می کنیم. سپس آن را نامرئی کنید (روی دکمه "قابل مشاهده" را بردارید).

همچنین از Layout -> Arrangement برای قرار دادن اقلام خود استفاده کنید

3 - سعی کنید دکمه های خود را بر روی نرم افزار ایجاد کنید

در صورت امکان ، دکمه های خود را در وب سایت AI2 ایجاد کنید ، آنها با کیفیت بالا خواهند بود و انیمیشن کوچک "روی کلیک" بسیار جالب خواهد بود:). هنگامی که نمی توانید دکمه های خود را بسازید ، می توانید آنها را روی نرم افزار دیگری ایجاد کرده و سپس آن را به عنوان تصویر وارد کنید.

مرحله 6: نتیجه:)

در سمت چپ: تصویری از تلفن هوشمند من در AI2.

در سمت راست: پیش نویس ساخته شده در Figma.

من واقعاً امیدوارم این دستورالعمل به شما در ساخت برنامه ای عالی در AI2 کمک کند.

خیلی ممنون که تماشا کردید. اگر به توصیه های بیشتری نیاز دارید ، لطفاً به من اطلاع دهید…

یکی دیگر از دستورالعمل های پشتیبان AI2 به زودی منتشر می شود!

با احترام به شما ،

توماس ، از Technofabrique