Ξεκινώντας με το σχεδιασμό εφαρμογών UX / UI

Πρώτα βήματα για άπειρους ή μη σχεδιαστές στον κόσμο της εφαρμογής για κινητά

Ο σχεδιασμός της εμπειρίας χρήστη (UX) και της διεπαφής χρήστη (UI) είναι σημερινές τάσεις. Με τον ίδιο τρόπο, η δημιουργία εφαρμογών αποτελεί σήμερα μια από τις πιο ελκυστικές αγορές για προγραμματιστές, σχεδιαστές και ψηφιακούς δημιουργούς σε όλο τον κόσμο. Ο λόγος είναι σαφής: τα smartphones είναι πανταχού παρόν και οι πιθανές χρήσεις για εφαρμογές είναι άπειρες.

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

Εικονίδια εφαρμογής από τους διαδικτυακούς πόρους υλικού σχεδίασης

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

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

Σας αρέσει το βίντεο-παιχνίδι σχεδιασμού; Ελέγξτε αυτό το άρθρο σχετικά με το UX με βάση τη νοσταλγία:

ΤΙ ΧΡΕΙΑΖΕΤΑΙ ΝΑ ΓΝΩΡΙΖΩ ΠΡΙΝ ΤΗΝ ΕΚΚΙΝΗΣΗ;

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

1. ΕΡΓΑΛΕΙΑ ΣΧΕΔΙΑΣΜΟΥ

Θα χρειαστείτε εργαλεία για να σχεδιάσετε και να δοκιμάσετε την εφαρμογή σας. Σας προτείνω σίγουρα το Adobe XD για αρχάριους, το οποίο είναι πολύ διαισθητικό και σας προσφέρει πολλές επιλογές. Επιπλέον, είναι δωρεάν! Ωστόσο, μπορείτε να βρείτε πολλές άλλες λύσεις όπως το Sketch, το Framer, το Figma και το InVision. Ανάλογα με την περίπτωση, μπορεί να είναι καλή ιδέα να τους κοιτάξετε.

Καλύπτουμε τα βασικά του Adobe XD στο επόμενο άρθρο μας:
Οθόνη Adobe XD, από τη διεύθυνση https://helpx.adobe.com/ca/xd/help/artboards-grids.html

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

Σχεδίαση υλικών - Ηλεκτρονική οθόνη έγχρωμων εργαλείων

Το Color Tool σάς επιτρέπει να εξάγετε την παλέτα χρωμάτων για Android και iOS, έτσι ώστε οι προγραμματιστές να μπορούν να την εφαρμόσουν απευθείας στον κώδικα.

Επιλογές εξαγωγής έγχρωμου εργαλείου

Εκτός από το γενικό εργαλείο UX / UI, καλό θα είναι να χρησιμοποιήσετε το Adobe Photoshop ή οποιοδήποτε άλλο πρόγραμμα επεξεργασίας εικόνων και φωτογραφιών όπως το GIMP ή το Photo Pos Pro. Εάν δεν χρησιμοποιείτε τέτοια εργαλεία, μην ανησυχείτε! Υπάρχουν αρκετοί ελεύθεροι πόροι στο Διαδίκτυο.

Εδώ έχετε την πλήρη λίστα για τα εργαλεία που ανέφερα:

  • Adobe XD (δωρεάν!)
  • Σκίτσο (μόνο macOS)
  • Framer (μόνο macOS)
  • InVision (δωρεάν!)
  • Σχάμα (online δωρεάν δοκιμή!)
  • Χρώμα εργαλείο (online, δωρεάν!)
  • Adobe Photoshop
  • GIMP (δωρεάν!)
  • Photo Pos Pro (δωρεάν!)

2. ΣΥΣΚΕΥΕΣ ΣΤΟΧΟΙ

Θα επικεντρωθώ σε Android και iOS. Οι περισσότερες συσκευές κινητής τηλεφωνίας και φορητές συσκευές χρησιμοποιούν αυτά τα λειτουργικά συστήματα σήμερα, οπότε η σχεδίαση γι 'αυτούς θα είναι η πιο συνηθισμένη περίπτωση.

iOS και Android, από https://buildfire.com/ios-android-users/

Ωστόσο, ο σχεδιασμός του UX για τις πλατφόρμες Android και iOS μπορεί να διαφέρει σε ορισμένες πτυχές. Μπορείτε να διαβάσετε εδώ μερικές ενδιαφέρουσες πληροφορίες σχετικά με τη διαφορετική συμπεριφορά των χρηστών Android και iOS.

Θα χρειαστεί να προετοιμάσετε κάθε εικόνα ή βίντεο της εφαρμογής σας για διαφορετικά μεγέθη και πυκνότητες οθόνης, με βάση τις διαφορετικές συσκευές προορισμού. Υπάρχουν χιλιάδες διαφορετικές συσκευές Android, αλλά η Google συνιστά να σχεδιάσετε για κάποιες τυπικές προδιαγραφές οθόνης. Η πιο συνηθισμένη προσέγγιση είναι να σχεδιάσετε ψηφίσματα μέσης πυκνότητας (MDPI) ή υψηλής πυκνότητας (HDPI) και στη συνέχεια να μετατρέψετε τις εικόνες σας αναλογικά με κλιμάκωση.

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

Χάρτης πυκνότητας οθόνης Android από https://blog.prototypr.io/designing-for-multiple-screen-densities-on-android-5fba8afe7ead.

Για το σχεδιασμό iOS, η Apple καθιερώνει 3 διαφορετικές αναλύσεις βασισμένες στις τυπικές συσκευές τους. Η διαδικασία είναι πολύ απλούστερη.

Παράγοντες κλίμακας για τις συσκευές iOS Οδηγίες ανθρώπινης διεπαφής της Apple.

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

Σχεδίαση υλικού - οθόνη Μετρήσεων συσκευής

3. ΕΛΕΥΘΕΡΟΙ ΠΟΡΟΙ

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

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

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

Και εδώ είναι ο χρυσός για τους εκκινητές UX / UI: η ακόλουθη λίστα περιέχει μερικές από τις πιο χρήσιμες ιστοσελίδες από όπου μπορείτε να κατεβάσετε δωρεάν πόρους UI.

  • Σχεδιασμός Υλικού - Δωρεάν Εικονίδια
  • Adobe XD - ελεύθεροι πόροι
  • UpLabs - δωρεάν πρότυπα σχεδίασης και πόροι
  • XD Guru - δωρεάν κιτ UI για το Abode XD
  • Flat icons - δωρεάν εικονίδια
  • Freebiesui - ελεύθεροι πόροι για το σχεδιασμό UI
  • Γραμματοσειρές Google - δωρεάν τυπογραφικοί πόροι
  • Pexels - Δωρεάν ποιοτικές φωτογραφίες αποθέματος

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

4. ΟΛΑ ΤΑ ΕΞΑΙΡΕΤΙΚΑ ΓΕΝΙΚΑ ΣΥΜΒΟΥΛΕΣ

  • Ο σκοπός του UX είναι να δημιουργήσει θετικές εμπειρίες για τον χρήστη. Αυτό σημαίνει ότι θα πρέπει να σκεφτείτε ποιοι θα είναι οι χρήστες της εφαρμογής σας και πώς θα χρησιμοποιήσουν την εφαρμογή.
  • Για να δημιουργήσετε αυτές τις θετικές εμπειρίες, μπορείτε να ακολουθήσετε τις τελευταίες τάσεις και απλώς να μιμηθείτε τι κάνουν οι άλλες εφαρμογές. Διερευνήστε την αγορά! Για παράδειγμα, προσπαθήστε να ελαχιστοποιήσετε το ταξίδι του χρήστη και να κρατήσετε την πλοήγηση όσο το δυνατόν πιο απλή.
  • Η διεπαφή χρήστη (UI) είναι ένα από τα βασικά μέρη της εφαρμογής σας. Και πάλι, ακολουθήστε τις συνήθεις τάσεις και απλουστεύστε το χρωματικό σχέδιο για να κάνετε τα πράγματα καθαρά και ορατά ή να χρησιμοποιήσετε εικόνες ή βίντεο σε πλήρη οθόνη αν ταιριάζουν με την περίπτωση χρήσης της εφαρμογής σας.

Ο σχεδιασμός UX και UI απαιτεί πολύ χρόνο εργασίας, δημιουργικότητα, πρωτότυπα, αναδιαμόρφωση και διόρθωση των δικών σας αποτυχιών. Πιθανότατα θα το βρείτε όταν κάνετε τα δικά σας έργα. Παρ 'όλα αυτά, υπάρχουν πολλές οδηγίες, παραδείγματα, πόροι, mockups και κιτ που μπορείτε να χρησιμοποιήσετε για να διευκολύνετε τη διαδικασία σχεδιασμού.

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

Η καινοτομία πάντα γυρίζει προς τα εμπρός. Ακριβώς όπως ένα τρυπάνι.