ΕΦΕΥΡΕΤΗΣ APP 2 - Καθαρίστε τις μπροστινές συμβουλές (+4 Παράδειγμα): 6 βήματα

2024 Συγγραφέας: John Day | [email protected]. Τελευταία τροποποίηση: 2024-01-30 08:34

Θα δούμε πώς μπορούμε να κάνουμε την εφαρμογή σας στο AI2 να φαίνεται αισθητική:)

Χωρίς κωδικό αυτή τη φορά, μόνο συμβουλές για μια ομαλή εφαρμογή όπως το παράδειγμα 4 στην κορυφή!

Προμήθειες

Βήμα 1: Εισαγωγή

Αυτό το Instructable είναι για όλους που μαθαίνουν ή χρησιμοποιούν το App Inventor 2, λογισμικό που αναπτύχθηκε από το MIT.

Το MIT AI2 είναι μια δωρεάν, απλή και εκπληκτική ανάπτυξη εφαρμογών smartphone, η οποία είναι ιδανική για κάθε DIY Arduino ή ηλεκτρονική συσκευή. Αλλά η απλότητά του τον καθιστά αρκετά περιορισμένο, ειδικά όταν προσπαθείτε να κάνετε την εφαρμογή σας να φαίνεται αισθητική.

Ο σκοπός αυτού του Instructable είναι να σας δώσει μερικές συμβουλές για να δημιουργήσετε ένα δροσερό μέτωπο για τη μελλοντική σας εφαρμογή, το οποίο θα φαίνεται απλό και κομψό, όπως θα έπρεπε να είναι κάθε μπροστινό μέρος.

Θα δούμε τα βασικά για να δημιουργήσουμε μια εφαρμογή που θα μοιάζει με το 4 παράδειγμα που παρουσιάστηκε.

Ας αρχίσουμε !

ΥΓ: Αν σας αρέσει αυτό το έργο, μπορείτε να με ψηφίσετε στο Διαγωνισμό Επιστήμης στην Τάξη. Ευχαριστώ πάρα πολύ !!

ΥΓ2: Θα γίνουν κάποια αγγλικά λάθη, συγχωρέστε με:)

Βήμα 2: Το BackGround

Έκανα την περαιτέρω δημιουργία στο Figma, ένα διανυσματικό δωρεάν λογισμικό, όπως ένα προηγμένο χρώμα, που σας επιτρέπει να δημιουργείτε εύκολα σχήματα και χρώματα: Είναι πολύ διαισθητικό, το συνιστώ: www.figma.com!

Δεν χρειάζεται να χρησιμοποιήσετε το Figma για το μπροστινό σας μέρος, αλλά μου αρέσει να κάνω το σχέδιο πριν δημιουργήσω την ίδια την εφαρμογή.

Όπως μπορείτε να δείτε στην εικόνα, το φόντο πρέπει να είναι πολύ μαλακό, αφού πρόκειται να βάλουμε μερικά κουμπιά, εικόνες κλπ… σε αυτό…

Συνιστώ διαφάνεια 30% για το χρώμα που χρησιμοποιείτε και φόντο με μόνο 1 χρώμα.

Βήμα 3: Τα χρώματα

Τα χρώματα που επιλέγετε και η έντασή τους είναι πολύ σημαντικά σε μια εφαρμογή.

Η πρώτη συμβουλή που δίνω είναι να επιλέξετε 3 χρώματα το μέγιστο (+ ασπρόμαυρο): προσπαθούμε ακόμα να είμαστε απαλοί:)

Για το 4 παράδειγμα που έφτιαξα, εδώ είναι οι συμβουλές που έχω επιλέξει (μπορείτε επίσης να τις δείτε στην εικόνα, ως ανακεφαλαίωση):

Το φόντο: ένα απαλό και ανοιχτό φόντο χωρίς σχήμα (30% διαφάνεια του χρώματος). Θυμηθείτε αυτό το χρώμα για να ενσωματώσετε τα κουμπιά σας!

Ο Τίτλος: Λεπτό κείμενο σε σκούρο γκρι χρώμα φαίνεται καλό! Για τον ακόλουθο υπότιτλο και κείμενο, μείνετε σε μαύρο χρώμα, αλλά αλλάξτε τη σκιά του μαύρου (γκρι όταν δεν είναι μεγάλη πληροφορία) και παίξτε με το μέγεθος και το χαρακτηριστικό που μπορείτε (έντονα, πλάγια).

Το κουμπί: Ένα μόνο χρώμα, γενικά το χρώμα του φόντου σας με (διαφάνεια 80-100%), στη συνέχεια μαύρο ή άσπρο για να το τελειώσετε.

Τα ρυθμιστικά: μην χρησιμοποιείτε 2 χρώματα για αυτά, μόνο ένα χρώμα στην αριστερή πλευρά και τη δεξιά σε μια μαύρη απόχρωση.

Αυτό είναι !!

Λιγότερο είναι περισσότερο !!!! Μην χρησιμοποιείτε πάρα πολλά χρώματα, σχήμα και μέγεθος, να είστε διακριτικοί!

Βήμα 4: Ορίστε τη σωστή παράμετρο της οθόνης

Στην κύρια οθόνη του τμήματος App Inventor Designer, μπορείτε να επιλέξετε το κύριο χαρακτηριστικό της οθόνης.

Στην οθόνη 1 -> Ιδιότητες, ακολουθήστε την ακόλουθη ενέργεια για να διαγράψετε το επιπλέον πλαίσιο από το AI2 που δεν φαίνεται πραγματικά καλό ^_ ^.

1 - Προσανατολισμός της οθόνης

Επιλέξτε μόνο έναν προσανατολισμό επειδή η εφαρμογή δεν προσαρμόζεται πολύ καλά όταν την γυρίζετε.

Επέλεξα τον προσανατολισμό Πορτρέτο.

2 - Απενεργοποίηση "Title Visible" και 3- Απενεργοποίηση "ShowStatusBar"

Απενεργοποιώ τον τίτλο και τη γραμμή κατάστασης, επειδή προσθέτει κάποια γραμμή στην εφαρμογή, που δεν είναι πολύ αισθητικά (κατά τη γνώμη μου).

4 - Διάσταση

Η διάσταση της κοινής εφαρμογής είναι 505x320 (ύψος x πλάτος). Θυμηθείτε αυτές τις διαστάσεις για να δημιουργήσετε το φόντο και τις φωτογραφίες σας (τουλάχιστον να έχετε την ίδια αναλογία)! Εάν χρησιμοποιείτε το Figma, μπορείτε να δημιουργήσετε αμέσως το σωστό μέγεθος της εφαρμογής σας.

5 - Μεγέθυνση

Εάν επιλέξετε Σταθερή, τότε η εφαρμογή θα έχει μέγεθος 505x320. Εάν επιλέξετε Responsive, τότε η εφαρμογή θα ταιριάζει στο smartphone σας, αλλά προσέξτε, θα πρέπει να προσαρμόσετε τις φωτογραφίες σας.

Βήμα 5: Πώς να το κάνετε:)

Για να αναπαράγουμε το πρώτο παράδειγμα, θα ακολουθήσουμε 3 βήματα (όπως οι εικόνες):

1 - Πάρτε τις διαστάσεις

Αυτό που είναι ωραίο στο figma είναι ότι μπορείτε να δείτε το μέγεθος των πλαισίων και του αντικειμένου σας, ώστε να μπορείτε να δείτε τι μέγεθος θα έχουν τα αντικείμενά σας και το κενό! Τα κενά είναι πολύ σημαντικά στο App Inventor επειδή πρόκειται να τα δημιουργήσουμε βάζοντας αόρατη ετικέτα!

2 - Συμπληρώστε τις κενές αόρατες ετικέτες

Όπως μπορείτε να δείτε στη δεύτερη εικόνα, αναπαράγουμε το μπροστινό μέρος που θέλουμε τοποθετώντας ετικέτα με το κατάλληλο μέγεθος. Στη συνέχεια, κάντε το να φαίνεται αόρατο (αποεπιλέξτε το κουμπί «ορατό»).

Χρησιμοποιήστε επίσης το Layout -> Arrangement για να τοποθετήσετε τα αντικείμενά σας

3 - Προσπαθήστε να δημιουργήσετε τα κουμπιά σας στο λογισμικό

Όταν είναι δυνατόν, δημιουργήστε τα κουμπιά σας στον ιστότοπο AI2, θα είναι σε υψηλή ποιότητα και η μικρή κίνηση «με κλικ» θα είναι πολύ ωραία:). Όταν δεν μπορείτε να φτιάξετε τα δικά σας κουμπιά, μπορείτε να τα δημιουργήσετε σε άλλο λογισμικό και, στη συνέχεια, να το εισαγάγετε ως εικόνα.

Βήμα 6: Το αποτέλεσμα:)

Στα αριστερά: ένα στιγμιότυπο οθόνης από το smartphone μου στο AI2.

Δεξιά: το σχέδιο που έγινε στο Figma.

Ελπίζω πραγματικά αυτό το Instructable να σας βοηθήσει να δημιουργήσετε μια υπέροχη εφαρμογή στο AI2.

Σας ευχαριστώ πολύ που παρακολουθήσατε. Αν χρειάζεστε κάποιες επιπλέον συμβουλές, ενημερώστε με…

Ένα άλλο Instructable στο backend του AI2 θα κυκλοφορήσει σύντομα!

Με εκτίμηση, Thomas, από την Technofabrique