Σχεδιάζοντας πανέμορφες εφαρμογές για κινητά από το μηδέν

Άρχισα να μαθαίνω το γραφικό σχέδιο όταν ήμουν 13. Έμαθα να σχεδιάζω ιστοσελίδες από online μαθήματα και χρησιμοποιείται για να παίζω γύρω με το Photoshop και Affinity Designer όλη την ημέρα. Αυτή η εμπειρία με διδάσκει πώς να σκέφτομαι σαν σχεδιαστής.

Έχω σχεδιάσει και αναπτύξει εφαρμογές για σχεδόν ένα χρόνο τώρα. Παρακολούθησα ένα πρόγραμμα στο MIT όπου συνεργαζόμουν με μια ομάδα για την ανάπτυξη του Universeaty. Πριν από δύο μήνες, άρχισα να εργαζόμαστε σε μια νέα εφαρμογή Crypto Price Tracker, την οποία ξεκίνησα πρόσφατα στις 28 Ιανουαρίου.

Σε αυτήν την ανάρτηση, θα μοιραστώ τη διαδικασία σχεδιασμού βήμα προς βήμα που ακολουθώ μαζί με παραδείγματα της εφαρμογής στην οποία εργάστηκα. Αυτό θα βοηθήσει οποιονδήποτε θέλει να μάθει ή να βελτιώσει τις δεξιότητές του στον ψηφιακό σχεδιασμό. Σχεδιασμός δεν είναι μόνο για τη γνώση πώς να χρησιμοποιήσετε το λογισμικό σχεδιασμού, και αυτή η θέση δεν θα σας διδάξει πώς να το χρησιμοποιήσετε. Υπάρχουν εκατοντάδες σε απευθείας σύνδεση σεμινάρια καλής ποιότητας για μάθηση. Σχεδιασμός είναι επίσης για την κατανόηση του προϊόντος σας μέσα έξω, τα χαρακτηριστικά και τη λειτουργικότητά του, και το σχεδιασμό, διατηρώντας παράλληλα τον τελικό χρήστη στο μυαλό. Αυτός είναι ο σκοπός της διδασκαλίας αυτής της ανάρτησης.

Διαδικασία σχεδιασμού:

  1. Δημιουργήστε ένα διάγραμμα ροής χρήστη για κάθε οθόνη.
  2. Δημιουργία / έλξη συρματοπλέγματος.
  3. Επιλέξτε μοτίβα σχεδίασης και παλέτες χρωμάτων.
  4. Δημιουργήστε μακέτες.
  5. Δημιουργήστε ένα πρωτότυπο κινούμενης εφαρμογής και ζητήστε από τους ανθρώπους να το δοκιμάσουν και να δώσουν ανατροφοδότηση.
  6. Δώστε τελικά τα ups ups στα mock-ups για να έχουν οι τελικές οθόνες έτοιμες να ξεκινήσουν την κωδικοποίηση.

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

Διάγραμμα ροής χρήστη

Το πρώτο βήμα είναι να υπολογίσετε τα χαρακτηριστικά που θέλετε στην εφαρμογή σας. Αφού αποκτήσετε τις ιδέες σας, σχεδιάστε ένα διάγραμμα ροής χρήστη. Ένα διάγραμμα ροής χρήστη είναι μια πολύ υψηλού επιπέδου αναπαράσταση του ταξιδιού ενός χρήστη μέσω της εφαρμογής / ιστότοπού σας.

Συνήθως, ένα διάγραμμα ροής χρήστη αποτελείται από 3 τύπους σχημάτων.

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

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

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

Διάγραμμα ροής χρήστη για την κύρια διεπαφή.

Συρματοπλέγματα

Μόλις ολοκληρώσετε τα διαγράμματα ροής του χρήστη για κάθε οθόνη και τα σχεδιασμένα δρομολόγια των χρηστών, θα αρχίσετε να εργάζεστε με την κατασκευή καλωδίων σε όλες τις οθόνες. Τα σύρματα είναι ουσιαστικά παραστάσεις χαμηλής πιστότητας για την εμφάνιση της εφαρμογής σας. Ουσιαστικά ένα σκίτσο ή ένα περίγραμμα όπου θα εμφανίζονται εικόνες, ετικέτες, κουμπιά και τα πράγματα, με τη διάταξη και τη θέση τους. Ένα ακατέργαστο σκίτσο του τρόπου με τον οποίο θα λειτουργήσει η εφαρμογή σας.

Χρησιμοποιώ εκτυπωμένα πρότυπα από Stencils UI για την κατάρτιση των κορνιζών. Εξοικονομεί χρόνο και δίνει έναν ωραίο καμβά για να τραβήξετε και να σημειώσετε.

Ακολουθεί ένα παράδειγμα wireframe.

Wireframe για την κύρια διεπαφή.

Αφού σχεδιάσετε τα wireframes, μπορείτε να χρησιμοποιήσετε μια εφαρμογή που ονομάζεται Pop και να τραβήξετε μια εικόνα όλων των σχεδίων σας χρησιμοποιώντας την εφαρμογή και να έχετε ένα πρωτότυπο συνδέοντας όλες τις οθόνες μέσω κουμπιών.

Μοτίβα σχεδίασης και παλέτες χρωμάτων

Αυτό είναι το αγαπημένο μου μέρος. Είναι σαν ψώνια παραθύρων. Πολλά σχέδια σχεδίασης και παλέτες χρωμάτων για να διαλέξετε. Πάω να μαζέψω εκείνους που μου αρέσει και να πειραματιστώ μαζί τους.

Οι καλύτερες πλατφόρμες για να βρείτε σχεδιαστικά μοτίβα είναι τα μοτίβα κινητών και τα Pttrns. Και για να βρείτε καλές παλέτες χρωμάτων, πηγαίνετε στο Color Hunt.

Μακέτες

Αυτό είναι όταν τελικά προχωρήσετε στη χρήση λογισμικού σχεδιασμού. Μια μακέτα στην έννοια του σχεδιασμού είναι μια εκπροσώπηση υψηλής πιστότητας του σχεδιασμού σας. Είναι σχεδόν σαν να μπήκατε σε αυτό το app στο μέλλον και πήρατε μερικά screenshots από αυτό. Θα πρέπει να φαίνεται ρεαλιστική και σχεδόν σαν το πραγματικό πράγμα.

Υπάρχουν σχεδιαγράμματα λογισμικού και εργαλεία για τη δημιουργία mock-ups. Χρησιμοποιώ σχεδιαστή συγγένειας. Το πιο συχνά χρησιμοποιούμενο εργαλείο για το σχεδιασμό iOS είναι το Sketch.

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

Φέρνοντας το σχέδιο μολυβιού σε εικονοστοιχεία!

Έχω πειραματιστεί περισσότερο με διάφορες παλέτες χρωμάτων.

Μοιράστηκα τα αρχικά mockups με τους φίλους μου για τα σχόλιά τους. Πολλοί άνθρωποι φαινόταν να συμπαθούν τη χρυσή κλίση και το μαύρο σχέδιο.

Να είστε έτοιμοι να λάβετε ανατροφοδότηση και να δοκιμάσετε νέες προτάσεις! Θα βρείτε εκπληκτικές ιδέες που προέρχονται από τους χρήστες σας όταν τους μιλάτε, όχι όταν περιπλανάτε το Dribbble ή το Behance.

Έτσι, επανασχεδιάσαμε τα mock-up και αφαιρέσαμε τα γραφικά φόντου, επειδή η δημιουργία τους ήταν μια τεχνικά χρονοβόρα διαδικασία και μείωσαν την αναγνωσιμότητα. Αυτό έμοιαζε με το επανασχεδιασμένο μακέτο.

Χρυσή κλίση με μαύρο εκπληκτικά φαίνεται καλό!

Ήμουν αρκετά ικανοποιημένος με το σχέδιο χρωμάτων, τα εικονίδια στη μπάρα καρτέλας και τη συνολική διάταξη. Πήγα μπροστά και σχεδίασα τις υπόλοιπες οθόνες ακολουθώντας τις ίδιες οδηγίες σχεδίασης. Ήταν μια μακρά, αλλά σίγουρα διασκεδαστική διαδικασία!

Όταν όλες οι οθόνες μου ήταν έτοιμες, έβαλα μαζί ένα πρωτότυπο στο Adobe XD και ζήτησα από λίγους φίλους να πειραματιστούν και να δώσουν σχόλια.

Μετά από τελικές πινελιές και τέτοια, μοιάζει με το τελικό μου σχέδιο.

Η κύρια διεπαφή!

Αφού ολοκληρώθηκαν όλες οι οθόνες, τις εισήγαγα στο Xcode και άρχισα να κωδικοποιώ την εφαρμογή.

Αυτό είναι! Ελπίζω ότι αυτή η ανάρτηση θα σας βοηθήσει να ξεκινήσετε με το σχεδιασμό εφαρμογών ή να σας βοηθήσουμε να γίνετε καλύτερος σχεδιαστής. Και αν σας αρέσει η εφαρμογή μου, μπορείτε να το κατεβάσετε εδώ.

Τελείω τη θέση με ένα από τα αγαπημένα μου αποσπάσματα σχετικά με το σχεδιασμό.

"Το σχέδιο δεν είναι μόνο αυτό που μοιάζει και αισθάνεται σαν. Σχεδιασμός είναι πώς λειτουργεί "
-Ο Steve Jobs