Κάθε οθόνη που χρησιμοποιείτε σχεδιάστηκε από κάποιον: την αρχική οθόνη μιας τραπεζικής εφαρμογής, ένα πλαίσιο αναζήτησης, μια σελίδα ρυθμίσεων. Η σχεδίαση διεπαφής χρήστη είναι η πειθαρχία που αποφασίζει πώς είναι τακτοποιημένα αυτές οι οθόνες, πώς φαίνεται κάθε στοιχείο ελέγχου και πώς αποκρίνεται όταν το αγγίζετε.
Ένας σχεδιαστής διεπαφής χρήστη εργάζεται με μερικά δομικά στοιχεία. Η διάταξη και η απόσταση ομαδοποιούν πράγματα που σχετίζονται μαζί. Η οπτική ιεραρχία κάνει την πιο σημαντική δράση να ξεχωρίζει. Η τυπογραφία και το χρώμα έχουν νόημα και επωνυμία. Στοιχεία όπως κουμπιά, είσοδοι, κάρτες και μενού σχεδιάζονται μία φορά και επαναχρησιμοποιούνται, έτσι ώστε το προϊόν να είναι συνεπές.
Κάθε συστατικό έχει επίσης καταστάσεις. Ένα κουμπί έχει καταστάσεις προεπιλογής, αιώρησης, πατήματος, εστίασης, απενεργοποίησης και φόρτωσης και το καθένα χρειάζεται ένα σχέδιο. Το να αφήνετε έξω τις καταστάσεις είναι ένας από τους πιο συνηθισμένους λόγους για τους οποίους ένα σχέδιο φαίνεται τελειωμένο σε μια μακέτα, αλλά αισθάνεται σπασμένο στο πραγματικό προϊόν.
Η αλληλεπίδραση και η κίνηση αποτελούν επίσης μέρος της διεπαφής χρήστη. Μικρές απαντήσεις, που συχνά ονομάζονται μικρο-αλληλεπιδράσεις, επιβεβαιώνουν ότι ένα πάτημα λειτούργησε, δείχνουν πρόοδο ή εξηγούν πού πήγε κάτι. Θα πρέπει να είναι γρήγοροι και σκόπιμοι και να σέβονται τη ρύθμιση του συστήματος για μειωμένη κίνηση.
Το μεγαλύτερο μέρος του σχεδιασμού διεπαφής χρήστη σήμερα συμβαίνει στο Figma, με τα Penpot, Sketch και Lunacy ως κοινές εναλλακτικές. Για διεπαφές που πρέπει να αντιδρούν σε πραγματικά δεδομένα και εισαγωγή στην ολοκληρωμένη εφαρμογή, οι σχεδιαστές χρησιμοποιούν επίσης διαδραστικά εργαλεία. Το ExodeUI, το οποίο φτιάχνουμε, είναι ένα: αποθηκεύει καταστάσεις, ελατήρια φυσική και συμβάντα σε ένα ανοιχτό αρχείο που εκτελείται σε React, Vue, Svelte, Angular, Solid, React Native, ZQX3QQZX και ZQX3QQZX.