Ανάπτυξη διεπαφής. Γραφική σχεδίαση διεπαφής χρήστη

Πίνακας περιεχομένων:

Ανάπτυξη διεπαφής. Γραφική σχεδίαση διεπαφής χρήστη
Ανάπτυξη διεπαφής. Γραφική σχεδίαση διεπαφής χρήστη
Anonim

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

Πού ξεκινάει ο σχεδιασμός

Ο σχεδιασμός μιας διεπαφής χρήστη ξεκινά με το ερώτημα για ποιο σκοπό είναι και ποιος θα τη διαχειριστεί. Ένας καλός σχεδιαστής ρίχνει πάντα μια κριτική ματιά στην πραγματικότητα γύρω του και κάνει κάτι όχι μόνο για τη διαδικασία, αλλά στοχαστικά, για κάποιο λόγο. Ο σωστός σχεδιασμός διεπαφής είναι η διαδικασία εύρεσης λύσεων στα προβλήματα των χρηστών. Η εμπειρία τους στην αλληλεπίδραση (UX) επηρεάζει την απόφαση να αγοράσουν ή να εκτελέσουν μια άλλη ενέργεια μετατροπής και μπορεί να τους κάνει να εγκαταλείψουν ακόμη και ένα προϊόν υψηλής ποιότητας. Η διεπαφή λύνει επίσης επιχειρηματικά προβλήματα, γιατί είναι βολικό για αυτούςαπολαύστε τους πελάτες, εξαρτάται από το κέρδος της εταιρείας.

διαχειριζόμενη ανάπτυξη διεπαφής
διαχειριζόμενη ανάπτυξη διεπαφής

Πυραμίδα των αναγκών προϊόντων

Ο σχεδιαστής Maxim Desytykh πρότεινε ένα μοντέλο των σημαντικών συστατικών οποιουδήποτε προϊόντος, ανεξάρτητα από το σε ποιον προορίζεται. Το ονόμασε «Πυραμίδα των Αναγκών Προϊόντος». Μπορεί να χρησιμοποιηθεί στην ανάπτυξη της διεπαφής χρήστη. Στην καρδιά αυτού του μοντέλου, το πιο σημαντικό κριτήριο αξιολόγησης είναι η απόδοση. Εάν ένα προϊόν δεν λειτουργεί, όσο ελκυστικό κι αν είναι, δεν θα πετύχει.

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

GUI
GUI

Ιστορίες χρήστη και σενάρια

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

ανάπτυξη διεπαφής προγραμματισμού
ανάπτυξη διεπαφής προγραμματισμού

Ανάπτυξη διαχειριζόμενης διεπαφής

Η δυνατότητα ανεξάρτητης αλλαγής της διεπαφής στις ανάγκες του χρήστη υπάρχει στα προϊόντα της εταιρείας "1C". Για παράδειγμα, στο σύστημα 1C:Enterprise 8.2, χρησιμοποιώντας τα ενσωματωμένα εργαλεία ανάπτυξης, ο διαχειριστής μπορεί να προγραμματίσει φόρμες, να βελτιστοποιήσει την αλληλεπίδραση μεταξύ των τμημάτων του πελάτη και του διακομιστή και να βελτιώσει την πλατφόρμα. Οι λύσεις εφαρμογών είναι διαθέσιμες όχι μόνο στο τοπικό δίκτυο, αλλά και μέσω του Διαδικτύου, εάν χρησιμοποιούνται κανάλια επικοινωνίας χαμηλής ταχύτητας.

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

Ψυχοφυσιολογία της αντίληψης των διεπαφών

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

ανάπτυξη διεπαφής χρήστη
ανάπτυξη διεπαφής χρήστη

Μαγικοί αριθμοί 7±2 και 4±1

Στη δεκαετία του 1920, ο ψυχολόγος George Miller διεξήγαγε ένα πείραμα στα Bell Labs στο οποίο ομάδες ανθρώπων έλυσαν ορισμένα προβλήματα χρησιμοποιώντας διαφορετικό αριθμό αντικειμένων. Ως αποτέλεσμα, αποδείχθηκε ότι όσο λιγότερα αντικείμενα χρησιμοποιούνται, τόσο πιο αποτελεσματικά επιλύεται η εργασία. Αφού εξέτασε τα αποτελέσματα της μελέτης, ο MillerΣυνήγαγε τον κανόνα ότι 7 ± 2 αντικείμενα είναι ο μέγιστος αριθμός που μπορεί να χωρέσει η βραχυπρόθεσμη μνήμη ενός ατόμου. Ο εγκέφαλος αρχίζει να αποφεύγει τους μεγάλους αριθμούς για να εξοικονομήσει πόρους. Πριν από λίγο καιρό, εμφανίστηκε μια νέα μελέτη, η οποία λέει ότι δεν πρέπει να υπάρχουν 7±2, αλλά 4±1 αντικείμενα.

Η διαφορά στον τρόπο με τον οποίο ο εγκέφαλος επεξεργάζεται τα αντικείμενα

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

Ανάπτυξη διεπαφής 1s
Ανάπτυξη διεπαφής 1s

Σημασία εφαρμογής του κανόνα 4±1

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

Ο προγραμματιστής χρειάζεταιορίστε καθήκοντα για αυτόν, για τη λύση των οποίων αρκεί να λειτουργήσετε με έναν μικρό αριθμό αντικειμένων, μετά από τα οποία μπορείτε να προχωρήσετε. Όταν ο χρήστης κοιτάζει τη σελίδα, επιλέγει περίπου 5 αντικείμενα με τα οποία στη συνέχεια αλληλεπιδρά. Από αυτά επιλέγει αυτό που θα τον οδηγήσει γρήγορα στον στόχο. Δουλεύοντας με το αντικείμενο, λύνει το πρόβλημα και προχωρά. Ως αποτέλεσμα, η ενέργειά του θα εξοικονομηθεί, το πρόβλημα θα λυθεί και ο χρήστης θα είναι ικανοποιημένος, έχοντας λάβει μια ευχάριστη εμπειρία αλληλεπίδρασης με το προϊόν. Επομένως, η εφαρμογή του κανόνα 4±1 κάνει τη διεπαφή καλύτερη.

Ανάπτυξη GUI
Ανάπτυξη GUI

Χρήση της αντίληψης χρώματος και μεγέθους

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

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

Εικόνα και κείμενο

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

διεπαφές ανάπτυξης εφαρμογών
διεπαφές ανάπτυξης εφαρμογών

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

Αναγνωσιμότητα κειμένου

Οι κανόνες αντίθεσης είναι σημαντικοί όχι μόνο για τα γραφικά στοιχεία, αλλά και για το περιεχόμενο κειμένου. Για παράδειγμα, οι αναγνώστες βιβλίων έχουν μια ειδική νυχτερινή λειτουργία που σας επιτρέπει να κάνετε το φόντο μαύρο και το κείμενο λευκό. Χάρη σε αυτό, στο βραδινό φωτισμό, τα μάτια είναι λιγότερο κουρασμένα από τη φωτεινή οθόνη. Η ίδια αρχή χρησιμοποιείται από τους προγραμματιστές στη διαδικασία σύνταξης κώδικα. Με τη χρωματική κωδικοποίηση, το μάτι αναγνωρίζει περισσότερες αποχρώσεις σε σκούρο φόντο, ειδικά το κόκκινο και το βιολετί φάσμα. Η σωστή τυπογραφία βοηθά στην εξοικονόμηση πόρων του εγκεφάλου και στην ταχύτερη ανάγνωση του κειμένου. Παλαιότερα πίστευαν ότι οι άνθρωποι ήταν καλύτεροι στην ανάγνωση γραμματοσειρών serif, αλλά σύμφωνα με νέα έρευνα, οι άνθρωποι είναι πλέον πιο πιθανό να διαβάσουν μια οικεία γραμματοσειρά, είτε είναι serifed είτε sans serif.

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

Συνιστάται: