Πώς να σχεδιάσετε ένα UI εφαρμογής της εφαρμογής Android που δεν πιπιλίζει
Οι προγραμματιστές και οι προγραμματιστές γενικά δεν είναι σχεδιαστές - αυτό είναι ευρέως αποδεκτό ως αληθινό. Οι προγραμματιστές τείνουν να εστιάζουν στη δημιουργία ενός έργου εφαρμογών - οι σχεδιαστές επικεντρώνονται στο να κάνουν την εφαρμογή αισθητικά ελκυστική . Αλλά γιατί οι προγραμματιστές δεν μπορούν να κάνουν το ίδιο;
Πίσω στη μέρα, όταν οι σελίδες προσγείωσης και τα φανταχτερά σχέδια ήταν ένα πράγμα, στη συνέχεια, σίγουρα, ήταν λογικό να προσλάβει έναν επαγγελματία σχεδιαστή. Αλλά η σημερινή τάση είναι ελάχιστη - ή τουλάχιστον απλουστευμένη.
Επιτρέψτε μου να σας δώσω ένα ανεκδοτικό παράδειγμα - λίγο πίσω, κάποιος μου ζήτησε να δημιουργήσω μια οθόνη εκκίνησης για το λογισμικό του υπολογιστή. Έτσι, πήγα όλα έξω - το έβγαλε στο σκίτσο χαρτί, το εισήγαγε στο PhotoShop, δημιούργησε πολλές φανταχτερες γραμμές και εφέ εφέ. Θα μπορούσε να είναι μια ταπετσαρία στην επιφάνεια εργασίας, παρά μια οθόνη εκκίνησης. Το σημείο είναι ότι δημιούργησα αυτό το πραγματικά φανταχτερό και περίτεχνο σχέδιο για αυτούς.
Όπως ίσως μαντέψετε, δεν τους άρεσε. Το σχέδιο με το οποίο πέρασαν ήταν κυριολεκτικά ένα μικρό λογότυπο με λίγους επικαλυπτόμενους χρωματισμούς και το όνομα του λογισμικού κάτω από αυτό. Όπως 2 λεπτά στο PhotoShop. Και ξέρεις τι? Είχα κάπως να συμφωνήσω ότι ήταν καλύτερο από το δικό μου.
Το σημείο που κάνω είναι έτσι - νομίζω ότι οι προγραμματιστές πέφτουν σε αυτή την παγίδα κάνοντας το ίδιο λάθος που έκανα. Έχουμε την τάση να σκεφτόμαστε τα UI και τις οθόνες εκκίνησης που πρέπει να είναι αυτά τα πραγματικά φανταχτερά, εντυπωσιακά πράγματα που κάνουν την εφαρμογή να ξεχωρίζει . Αλλά δεν πρέπει να είναι - ειλικρινά, δεν πρέπει να είναι. Θα πρέπει να ακολουθήσουμε μια νοοτροπία προγραμματιστή και να την εφαρμόσουμε στο αισθητικό σχεδιασμό - απλά, λειτουργικά, έργα.
Σε αυτό το άρθρο, θα εξετάσουμε μερικούς πολύ απλούς τρόπους για να δημιουργήσετε ένα κομψό Android APP UI / UX, ακόμη και αν δεν έχετε σχεδόν καμία εμπειρία σχεδίασης.
Αν δεν θέλετε πραγματικά κάτι άλλο, Stick to Material Design
Η εφαρμογή σας δεν χρειάζεται να είναι " μοναδική" και " ξεχωρίζει από τα υπόλοιπα" για να είναι δημοφιλής και να δείχνει καλή. Αυτός είναι ο σκοπός του Σχεδίου Υλικού της Google - ένα πρότυπο για το UI της εφαρμογής σε όλη τη βιομηχανία και έχουν κάνει καλή δουλειά. Υπάρχει ένας τόνος δημοφιλών εφαρμογών εκεί έξω που κολλάνε στο υλικό σχεδιασμό - μερικά από τα μεγαλύτερα ονόματα σε εφαρμογές Android, όπως SwiftKey, Nova Launcher, Textra SMS, YouTube, για να αναφέρουμε μόνο μερικά.
Η βασική εστίαση του υλικού σχεδιασμού είναι σε μια διάταξη με βάση την κάρτα, με μια συμπαγή παλέτα χρωμάτων. Η Google συνεργάστηκε με κορυφαίους σχεδιαστές της βιομηχανίας, αντλώντας πολλά στοιχεία από τις πρακτικές μινιμαλιστικής σχεδίασης και έπειτα κυκλοφόρησε όλο το θέμα δωρεάν - αυτό είναι πολύ καλό, αφού τα μαθήματα σχεδιασμού ιστοσελίδων και εφαρμογών μπορούν να τρέξουν εκατοντάδες δολάρια για ηλεκτρονικά βιβλία, και τα λοιπα.
Ξεκινώντας με το Σχεδιασμό Υλικών είναι απίστευτα εύκολο και υπάρχει μια χούφτα εργαλείων που το καθιστούν απλούστερο, το οποίο θα δούμε παρακάτω:
- Υλικό επεξεργασίας θεμάτων (macOS + σκίτσο)
- Σχεδίαση υλικών Plug Color Palette (PhotoShop / Illustrator)
- Υλικό σχεδίασης UI Kit PSD (PhotoShop)
- Συλλογή UI υλικού σχεδίασης Android ( Σκίτσο)
- Γεννήτρια θεμάτων υλικού UI
Και αν χρειάζεστε κάποια έμπνευση για τη δημιουργία απλών, κομψών σχεδίων Υλικού Σχεδιασμού, δείτε αυτά τα blogs:
- MaterialDesignBlog - 15 Awesome παραδείγματα Υλικού Σχεδιασμού γίνεται σωστά
- MockPlus - 12 καλύτερες ιστοσελίδες σχεδίασης υλικών για να σχεδιάσετε έμπνευση
- AndroidAuthority - 10 καλύτερες εφαρμογές Σχεδιασμού Υλικού για Android
Οι διαβαθμίσεις χρωμάτων είναι πιο εύκολο από ό, τι νομίζετε
Για μια εναλλακτική λύση στο Υλικό Σχεδιασμού, οι βαθμίδες dolor είναι απλές, μοντέρνες και εντυπωσιακές. Και ίσως να πιστεύετε ότι οι σχεδιαστές περνούν πολύ χρόνο ζωγραφίζοντας σε όλα τα χρώματα ή σχεδιάζοντας την τελική κλίση. Θα κάνατε λάθος - μπορεί να γίνει σε 10 δευτερόλεπτα στο PhotoShop.
Θα σας οδηγήσω σε αυτό, για να σας δείξω πόσο εύκολο είναι.
Δημιουργήστε ένα νέο έργο PS για κινητά ( 1080 x 1920 px @ 72 ppi λειτουργεί καλά)
Πηγαίνετε στο UIGradients.com και βρείτε κάτι που σας αρέσει.
Αντιγράψτε τα χρώματα κλίσης από πάνω από την προεπισκόπηση.
Κάντε δεξί κλικ σε ένα άδειο στρώμα στο PS και μεταβείτε στην επιλογή Blending Options> Gradient Overlay.
Κάντε κλικ απευθείας στην προεπισκόπηση προτύπου κλιμάκωσης στο αναπτυσσόμενο μενού - μην κάνετε κλικ στο αναπτυσσόμενο κουμπί. Κάνοντας κλικ απευθείας στην κλίση ανοίγει ο επεξεργαστής χρωμάτων.
Τώρα απλώς επικολλήστε την επικόλληση των τιμών hex hex από το UIGradient στον επεξεργαστή βαθμίδων PS.
Ρυθμίστε όπως είναι απαραίτητο. Τώρα έχετε επαγγελματικό υπόβαθρο για την εφαρμογή Android.
Άλλα εργαλεία κλίσης που αξίζει τον έλεγχο:
- WebGradients.com
- Γεννήτρια σχημάτων Android ( για τη δημιουργία σχημάτων μέσω XML, με δυνατότητα κλίσης)
Χρησιμοποιήστε SVGs Αντί JPG / PNG
Αντί να χρησιμοποιείτε PNG ή JPG για τα γραφικά σας στοιχεία (κουμπιά, λογότυπα, κλπ.), Θα πρέπει να χρησιμοποιείτε πραγματικά SVG ( Scalable Vector Graphics) . Αυτό οφείλεται στο γεγονός ότι τα αρχεία SVG μπορούν να αλλάξουν χωρίς να χάσουν την ποιότητα - για παράδειγμα, αν μεταβάλλετε το JPG σε μεγαλύτερη αξία, χάνει την ποιότητα και γίνεται θολή / pixelated. Δεν υπάρχει SVG. Οι χρήστες προσπαθούν να χρησιμοποιήσουν τεράστια αρχεία PNG που θα μειωθούν ώστε να ταιριάζουν με τις οθόνες Android. Αντίθετα, μπορείτε να χρησιμοποιήσετε μικρότερους SVG που έχουν αναβαθμιστεί χωρίς απώλειες στην ποιότητα.
Επιπλέον, τα αρχεία SVG μπορούν να είναι έως 60% έως 80% μικρότερα σε μέγεθος αρχείου από το PNG . Αυτό σημαίνει ότι ο ιστότοπός σας για εφαρμογές ή για κινητά θα φορτωθεί γρηγορότερα για τον χρήστη και θα φανεί καλό ανεξάρτητα από την ανάλυση οθόνης.
Συμπεριλάβετε μια σκοτεινή λειτουργία χρησιμοποιώντας το Θέμα.AppCompat.DayNight
Δεν χρειάζεται να σχεδιάσετε δύο ξεχωριστά θέματα για να συμπεριλάβετε ένα θέμα σκούρου / νυχτερινής λειτουργίας στην εφαρμογή σας. Του λίγο πολύ ενσωματωμένο στη βιβλιοθήκη AppCompat, απλά πρέπει να το ενεργοποιήσετε και να επεξεργαστείτε τις τιμές.
Δείτε τον οδηγό Appual "Πώς να εφαρμόσετε μια σκοτεινή λειτουργία στην εφαρμογή Android".
Χρησιμοποιήστε ένα κιτ προτύπου ή κινητού UI
Εάν η εφαρμογή σας δεν κάνει call για ένα φανταχτερό, προσαρμοσμένο GUI, δεν υπάρχει απολύτως τίποτα λάθος με τη χρήση ενός προτύπου ή κιτ. Τα πρότυπα και τα κιτ μπορούν να χρησιμοποιηθούν ως έμπνευση, ή μπορείτε να χρησιμοποιήσετε κυριολεκτικά το πρότυπο / κιτ όπως είναι, προσθέτοντας τα δικά σας κουμπιά και άλλα.
Μερικοί μεγάλοι πόροι για πρότυπα και κιτ Android UI:
- SpeckyBoy - 50 δωρεάν Κιτ Κινητού UI για iOS και Android
- SketchAppSources - Πόροι εφαρμογών Android UI ( Σκίτσο)
- Freebiesbug - Συσκευές PSI UI ( PhotoShop)
