Κέρδη:
- Δυνατότητα παραγωγής ισχυρού κώδικα διεπαφής για το Jetpack Compose και το SwiftUI με σειρά σκοπού, στοιχείο, τέσσερις καταστάσεις (φόρτωση/κενό/σφάλμα/πλήρη), σύστημα σχεδίασης και προσβασιμότητα
- Δυνατότητα δημιουργίας μιας διεπαφής ανοιχτής σε όλους τους χρήστες ορίζοντας την προσβασιμότητα από την αρχή, με σωστή επισήμανση, επαρκή αντίθεση και κατάλληλη αφή.
- Δυνατότητα δημιουργίας συνεπών, πολυγλωσσικών και ανοιχτού/σκούρου θέματος διεπαφές, διαβάζοντας χρώμα και χώρο από το κεντρικό θέμα
Η επιτυχία μιας εφαρμογής για κινητά καθορίζεται σε μεγάλο βαθμό από τη διεπαφή χρήστη της (UI — τις οθόνες που βλέπει και αγγίζει ο χρήστης) και την εμπειρία χρήστη (UX — πόσο ομαλή και ευχάριστη είναι η χρήση της). Ο χρήστης δεν βλέπει τον κακό κώδικα, αλλά αισθάνεται την κακή διεπαφή στο πρώτο δευτερόλεπτο. Η τεχνητή νοημοσύνη παίζει δύο ισχυρούς ρόλους στην ανάπτυξη διεπαφής: αφενός, δημιουργεί σχεδιαστική ιδέα, ροή και κείμενο (γραφή UX). Από την άλλη πλευρά, μετατρέπει απευθείας αυτό το σχέδιο σε κώδικα διεπαφής εργασίας. Σε αυτή την ενότητα, θα μάθουμε πώς να παράγουμε γρήγορες, προσβάσιμες και συνεπείς διεπαφές με AI, εστιάζοντας στα σύγχρονα εργαλεία δηλωτικής διεπαφής Jetpack Compose (Android) και SwiftUI (iOS). "Δηλωτικό" σημαίνει ότι αντί να εξηγείτε βήμα προς βήμα πώς να σχεδιάσετε την οθόνη, περιγράφετε "έτσι πρέπει να φαίνεται η οθόνη σε αυτήν την κατάσταση". Το εργαλείο κάνει τα υπόλοιπα.
Από το σχέδιο στον κώδικα: η σωστή σειρά
Το να πεις στην τεχνητή νοημοσύνη να "φτιάξει μια όμορφη οθόνη" είναι ασαφές γιατί το "όμορφο" δεν μπορεί να μετρηθεί. Η καλή παραγωγή διεπαφής ακολουθεί αυτή τη σειρά:
- Σκοπός και περιεχόμενο. Τι κάνει η οθόνη, τι πληροφορίες δείχνει, τι θα κάνει ο χρήστης;
- Λίστα εξαρτημάτων. Μέρη όπως τίτλος, λίστα, κουμπί, πεδίο φόρμας.
- Καταστάσεις. Φόρτωση, άδεια (χωρίς δεδομένα), σφάλμα, πλήρης — οι τέσσερις βασικές καταστάσεις οθόνης.
- Σύστημα σχεδιασμού. Χρώμα, τυπογραφία, κανόνες απόστασης. γενικά συμμορφώνονται με τις Οδηγίες ανθρώπινης διεπαφής του Υλικού 3 (Android) ή iOS.
- Προσιτότητα. Ετικέτες προγράμματος ανάγνωσης οθόνης, επαρκής αντίθεση, μέγεθος στόχου αφής.
- Κώδικας. Έχοντας πει όλα αυτά, η γενιά Composable ή SwiftUI View.
Το βήμα που παραλείπεται πιο συχνά είναι το τρίτο. Οι προγραμματιστές λαμβάνουν υπόψη μόνο την "πλήρη" κατάσταση. ενώ στην πραγματική εφαρμογή ο χρήστης αντιμετωπίζει ως επί το πλείστον καταστάσεις «φόρτωσης» και «λάθους». Η εκτύπωση και των τεσσάρων καταστάσεων στο AI είναι το μυστικό για μια ισχυρή διεπαφή.
Συμβουλή: Προσθέστε "δημιουργία φόρτωσης, άδεια, σφάλμα και πλήρη χωριστά" στο τέλος του μηνύματος. Αυτή η μοναδική πρόταση καθιστά τη διεπαφή σας έτοιμη για τον πραγματικό κόσμο και μειώνει σημαντικά τον αριθμό των σφαλμάτων στη φάση QA (δοκιμή ποιότητας).
Η προσβασιμότητα είναι αδιαπραγμάτευτη
Η προσβασιμότητα — η δυνατότητα χρήσης της εφαρμογής από χρήστες με προβλήματα όρασης, ακοής ή κινητικής αναπηρίας — αποτελεί ταυτόχρονα ηθική ευθύνη και αποθήκευση και νομική προσδοκία. Η τεχνητή νοημοσύνη παράγει προσβάσιμο κώδικα εάν το επιθυμείτε. Επιστρέφει μια διεπαφή χωρίς ετικέτες, χαμηλής αντίθεσης, εάν δεν είναι επιθυμητή. Τρεις εμπειρικοί κανόνες: δώστε σε κάθε διαδραστικό στοιχείο μια σημαντική ετικέτα για το πρόγραμμα ανάγνωσης οθόνης (contentDescription / AccessibilityLabel), επαρκή χρωματική αντίθεση μεταξύ κειμένου και φόντου (τουλάχιστον αναλογία 4,5:1) και στόχο αφής τουλάχιστον 48x48 dp/44x44 pt. Ρωτήστε το AI αυτά τα πράγματα ρητά.
Προσοχή: Το AI μπορεί επίσης να προσθέσει μια μεγάλη ετικέτα προσβασιμότητας σε ένα διακοσμητικό εικονίδιο. Αυτό κατακλύζει τον χρήστη του προγράμματος ανάγνωσης οθόνης με περιττές φλυαρίες. Τα καθαρά διακοσμητικά στοιχεία θα πρέπει να είναι "κρυφά από την προσβασιμότητα" (να επιτρέπεται η παράλειψη από το πρόγραμμα ανάγνωσης οθόνης). Ελέγξτε τις ετικέτες που παράγονται: αφήστε το νόημα να μιλήσει, αφήστε το διακοσμητικό να παραμείνει σιωπηλό.
Συνέπεια: σύστημα σχεδίασης και θέμα
Οι επαγγελματικές εφαρμογές δεν χρησιμοποιούν τυχαία χρώματα και κενά. ακολουθεί ένα σύστημα σχεδίασης (τυποποιημένο σύνολο χρωμάτων, γραμματοσειρών, διαστημάτων και στοιχείων). Εάν δώσετε στην τεχνητή νοημοσύνη τις τιμές του θέματός σας (κύριο χρώμα, δευτερεύον χρώμα, ακτίνα γωνίας, κλίμακα τυπογραφίας), όλες οι οθόνες θα βγουν συνεπείς. Εάν δεν το κάνετε, κάθε οθόνη θα χρησιμοποιεί διαφορετική απόχρωση του μπλε και η εφαρμογή θα φαίνεται ακατάστατη. Ο πιο αποτελεσματικός τρόπος είναι να ζητήσετε πρώτα από το AI να δημιουργήσει ένα αρχείο διακριτικών θεμάτων/σχεδιασμού και στη συνέχεια να συνδέσετε όλες τις οθόνες σε αυτό το θέμα.
Θέμα
κακή προσέγγιση
Ισχυρή προσέγγιση
Χρώμα
Χειροκίνητος χρωματικός κώδικας κάθε οθόνης
Κεντρικό θέμα, οθόνες που διαβάζονται από το θέμα
καταστάσεις
Μόνο "πλήρης" οθόνη
Φόρτωση/άδειο/σφάλμα/πλήρες τέσσερις καταστάσεις
προσβασιμότητα
Προστέθηκε αργότερα
Ορίζεται στην αξίωση από την αρχή
κείμενο
ενσωματωμένο στον κώδικα
Ξεχωριστή πηγή, έτοιμη για πολλές γλώσσες
τρεις μίνι θήκες
Περίπτωση 1 — Αποθηκεύτηκε κενή θήκη. Μια ομάδα ειδησεογραφικών εφαρμογών είχε τις μεμονωμένες καταστάσεις οθόνης εκτύπωσης AI. Χάρη στην οθόνη "κατάσταση αδράνειας" ("Δεν έχουν αποθηκευτεί ακόμη ειδήσεις"), το 70% των συμμετεχόντων σε δοκιμές χρηστών δεν άφησαν την εφαρμογή σε κενή οθόνη. Στην προηγούμενη έκδοση, η κενή οθόνη παρέμενε λευκή και οι χρήστες νόμιζαν ότι ήταν «σπασμένη» και έφυγαν. Ένα μικρό αντίγραφο αύξησε το ποσοστό διατήρησης.
Περίπτωση 2 — Απόρριψη αντίθεσης. Μια ομάδα έκανε αίτηση στο App Store με οθόνες με κείμενο σε ανοιχτό γκρι, το χρώμα της επωνυμίας. Η Apple εξέδωσε μια προειδοποίηση για λόγους προσβασιμότητας λόγω χαμηλής αντίθεσης. Όταν ειπώθηκε στο AI να "αυξήσει την αντίθεση κειμένου-φόντου πάνω από 4,5:1", τα χρώματα έγιναν πιο σκούρα και το πρόβλημα λύθηκε. Αν είχε ζητηθεί από την αρχή, δεν θα υπήρχε καθυστέρηση.
Περίπτωση 3 — Θόρυβος διακοσμητικής ετικέτας. Ένας ελεγκτής με προβλήματα όρασης ανέφερε ότι κάθε εικονίδιο στολιδιού ("γραμμή", "κουκκίδα", "σκιά") διαβάστηκε δυνατά στην οθόνη που δημιουργήθηκε από AI, καθιστώντας την οθόνη άχρηστη. Η εμπειρία ανάγνωσης οθόνης έγινε ρευστή όταν τα διακοσμητικά στοιχεία αποκρύπτονταν από την προσβασιμότητα. Μάθημα: προσβασιμότητα σημαίνει "οι σωστές ετικέτες", όχι "πάρα πολλές ετικέτες".
Αδύναμη προτροπή / Ισχυρή προτροπή
Αδύναμο μήνυμα: "Σχεδιάστε μια οθόνη προφίλ."
Ισχυρό μήνυμα: "Δημιουργία οθόνης προφίλ χρήστη για iOS/SwiftUI. Περιεχόμενο: avatar, όνομα, email, κουμπί "Επεξεργασία προφίλ", λίστα ρυθμίσεων. Κατάσταση: φόρτωση (σκελετός), σφάλμα (κουμπί επανάληψης), πλήρης. Σχεδίαση: Μη υλικό, συμμορφώνεται με το iOS HIG, χρώματα συστήματος, Δυναμικός τύπος. Προσβασιμότητα: προσβασιμότητα4 στοιχείο στόχου, κρυφό εικονίδιο στόχου. Διαβάστε τις τιμές θέματος από ένα ξεχωριστό αρχείο, μην ενσωματώνετε τον έγχρωμο κώδικα στην οθόνη.
Αντιγράψιμα πρότυπα
Πρότυπο δημιουργίας οθόνης: "Δημιουργία [όνομα οθόνης] για [πλατφόρμα/εργαλείο]. Περιεχόμενο: [στοιχεία]. Ενέργειες χρήστη: [ενέργειες]. Δημιουργία τεσσάρων καταστάσεων ξεχωριστά: φόρτωση, κενή, σφάλμα, πλήρης. Σύστημα σχεδίασης: [Υλικό 3 / iOS HIG], ανάγνωση από διακριτικά θεμάτων. Προσβασιμότητα: ετικέτες, αντίθεση=4."
Πρότυπο συστήματος θέματος/σχεδίασης: "Δημιουργία ορισμού κεντρικού θέματος για την εφαρμογή μου ([Σύνθεση θέματος / δομή διακριτικού σχεδίασης στο SwiftUI]):- Κύριο χρώμα [δεκαεξαδικό], δευτερεύον [δεκαεξαδικό], χρώμα σφάλματος, χρώμα επιφάνειας- Κλίμακα τυπογραφίας (τίτλος, σώμα, περιγραφή)- Κλίμακα απόστασης (4,8,16,24 με ακτίνα φωτός και τυπική υποστήριξη για το σκούρο φως A).
Πρότυπο ελέγχου προσβασιμότητας:"Ελέγξτε αυτόν τον κώδικα οθόνης για προσβασιμότητα:1) Υπάρχουν διαδραστικά στοιχεία χωρίς ετικέτα;2) Είναι επαρκείς οι λόγοι αντίθεσης;3) Είναι οι στόχοι αφής αρκετά μεγάλοι;4) Είναι κρυμμένα διακοσμητικά στοιχεία από το πρόγραμμα ανάγνωσης οθόνης; Προτείνετε διορθώσεις για κάθε πρόβλημα. [κώδικας]"
Πρότυπο σχεδίασης σε κώδικα: "Περιγράφω την ακόλουθη σχεδίαση: [περιγραφή οθόνης ή στιγμιότυπο οθόνης]. Μεταφράστε το σε κώδικα [Σύνθεση/SwiftUI]. Διατηρήστε την απόσταση και την ευθυγράμμιση σύμφωνα με τη σχεδίαση, αλλά προσθέστε και τις τέσσερις καταστάσεις."
Συνήθη λάθη
- Απλά σκέφτομαι την πλήρη κατάσταση. Τις περισσότερες φορές ο πραγματικός χρήστης βλέπει την οθόνη φόρτωσης/σφάλματος.
- Ενσωμάτωση χρώματος και χώρου στον κώδικα. Εάν το θέμα δεν είναι κεντρικό, η συνέπεια χάνεται και η συντήρηση γίνεται δύσκολη.
- Αφήνοντας την προσβασιμότητα για το τέλος. Η προσθήκη του αργότερα είναι ακριβή. Είναι χωρίς κόστος εάν ζητηθεί από την αρχή.
- Υπερσήμανση. Η ανάγνωση διακοσμητικών στοιχείων διαταράσσει επίσης την εμπειρία ανάγνωσης οθόνης.
- Ενσωμάτωση κειμένου σε κώδικα. Όταν απαιτείται πολύγλωσση υποστήριξη, είναι απαραίτητο να αλλάζετε χειροκίνητα κάθε οθόνη. Κρατήστε τα κείμενα ξεχωριστά.
- Αναμένεται ακριβές αντίγραφο από το στιγμιότυπο οθόνης. Ο σχεδιασμός AI παράγει περίπου. Η ακρίβεια pixel ρυθμίζεται χειροκίνητα.
Συνοπτικά
Το AI είναι ισχυρό στην παραγωγή διεπαφής, αλλά απαιτεί καθοδήγηση. Η σωστή σειρά: σκοπός, εξαρτήματα, τέσσερις καταστάσεις (φόρτωση/άδειο/σφάλμα/πλήρης), σύστημα σχεδίασης, προσβασιμότητα και μετά κωδικός. Η προσβασιμότητα είναι αδιαπραγμάτευτη και σημαίνει «η σωστή ετικέτα», όχι «πάρα πολλές ετικέτες». Για συνέπεια, διαβάστε το χρώμα και τα κενά από το κεντρικό θέμα, μην το ενσωματώσετε σε κώδικα. Η ισχυρή θέληση τα ορίζει όλα αυτά από την αρχή. Έτσι, η διεπαφή είναι έτοιμη για τον πραγματικό κόσμο, την έγκριση του καταστήματος και όλους τους χρήστες.
Εργασία εφαρμογής
Χρησιμοποιώντας το "Πρότυπο δημιουργίας οθόνης" για μια οθόνη ρυθμίσεων, ζητήστε από την τεχνητή νοημοσύνη για τον κωδικό Compose ή SwiftUI και ζητήστε και τις τέσσερις καταστάσεις. Στη συνέχεια, ελέγξτε τον ίδιο κωδικό με το "Πρότυπο ελέγχου προσβασιμότητας". Βρείτε και διορθώστε τουλάχιστον μία βελτίωση προσβασιμότητας (λείπει ετικέτα, χαμηλή αντίθεση ή μικρός στόχος αφής) και σημειώστε ποια κατάσταση (φόρτωση/άδειο/σφάλμα) πιστεύετε ότι θα εμφανίζεται πιο συχνά σε πραγματική χρήση.
λίστα ελέγχου
- [ ] Έκανα σαφή τον σκοπό και τα στοιχεία της οθόνης στην προτροπή
- [ ] Είχα τις τέσσερις καταστάσεις (φόρτωση/άδειο/σφάλμα/πλήρη) που δημιουργήθηκαν ξεχωριστά
- [ ] Έκανα το χρώμα και το διάστημα να διαβάζονται από το κεντρικό θέμα, δεν το ενσωμάτωσα στον κώδικα.
- [ ] Ήθελα από την αρχή ετικέτες προσβασιμότητας και αντίθεση
- [ ] Επιβεβαίωσα ότι τα διακοσμητικά στοιχεία είναι κρυμμένα από το πρόγραμμα ανάγνωσης οθόνης
- [ ] Κράτησα τα κείμενα ξεχωριστά, έτοιμα για πολλές γλώσσες