Κέρδη:
- Δυνατότητα μετατροπής του σκοπού της οθόνης και της προτεραιότητας περιεχομένου σε μια σαφή σύντομη και δημιουργία σχεδίων και παραλλαγών wireframe με τεχνητή νοημοσύνη
- Δυνατότητα γρήγορης αξιολόγησης της παραγωγής εργαλείων που δημιουργούν διεπαφές από κείμενο και προβολής τους σύμφωνα με τις αρχές σχεδιασμού
- Δυνατότητα ωρίμανσης πλαισίων τεχνητής νοημοσύνης με γνώμονα το πραγματικό περιεχόμενο, την ακμή και την προσβασιμότητα
Το Wireframe είναι ο σκελετός σε επίπεδο κουτιού μιας οθόνης, απογυμνωμένος από χρωματικές, οπτικές λεπτομέρειες και λεπτομέρειες επωνυμίας. Ο σκοπός του είναι απλός: να ελέγχει γρήγορα την προτεραιότητα, την τοποθέτηση και τη ροή του περιεχομένου. λύνοντας το ερώτημα «τι, πού, γιατί εδώ» χωρίς να μπω στην αισθητική. Ο σχεδιασμός χαμηλής πιστότητας περιγράφει επίσης αυτό το πρώτο, πρόχειρο στάδιο του σχεδίου. Η τεχνητή νοημοσύνη επιταχύνει ριζικά αυτό το βήμα: τα εργαλεία που δημιουργούν καλώδια από κείμενο δημιουργούν ένα περίγραμμα οθόνης από ένα αίτημα μίας πρότασης. Αλλά αυτή η ταχύτητα προκαλεί επίσης την εσφαλμένη αντίληψη ότι «η πρώτη έξοδος είναι η τελική σχεδίαση». Αυτή η ενότητα διδάσκει πώς να δημιουργείτε με έξυπνο τρόπο και να ωριμάζετε κριτικά καλώδια AI.
Πρώτα η σύντομη, μετά η παραγωγή
Τα περισσότερα κακά wireframes προκύπτουν από ένα κακό brief. Εάν πείτε στην τεχνητή νοημοσύνη "κάντε μια οθόνη σύνδεσης", θα λάβετε ένα γενικό μοτίβο. Μια ισχυρή σύνοψη wireframe περιλαμβάνει:
- Σκοπός της οθόνης: Γιατί ο χρήστης έρχεται σε αυτήν την οθόνη, τι κερδίζει από αυτήν;
- Προτεραιότητα περιεχομένου: Ποια είναι τα τρία πιο σημαντικά στοιχεία; Πού πρέπει να πέσει πρώτα το μάτι του χρήστη;
- Πλαίσιο: Συσκευή (κινητό/επιτραπέζιος υπολογιστής), τρέχουσα διάθεση του χρήστη, προηγούμενη οθόνη.
- Περιορισμοί: Απαιτούμενα στοιχεία (αποποίηση ευθύνης, στοιχείο επωνυμίας), όριο χώρου.
- Αίτημα παραλλαγής: Πόσες διαφορετικές διατάξεις θέλετε να δείτε.
Όταν δίνετε αυτή τη σύντομη περιγραφή, το μοντέλο παράγει διαφορετικές επιλογές που θα σας βοηθήσουν να πάρετε μια απόφαση. Αν το σλιπ είναι αδύναμο, θα είναι όλα παρόμοια και άχρηστα.
Συμβουλή: Ζητήστε από το AI όχι ένα «τέλειο» wireframe, αλλά για 3 ευδιάκριτα διαφορετικές προσεγγίσεις (π.χ. «μία λίστα-βαριά, μια βαριά εικόνα, μια εστίαση σε μία ενέργεια»). Η ποικιλία επιλογών σας ανοίγει τα τυφλά σημεία.
Ρεαλιστική τοποθεσία των εργαλείων που δημιουργούν διεπαφές από κείμενο
Τα τελευταία χρόνια, τα εργαλεία που υπόσχονται «γράψτε το και εμφανίζεται η διεπαφή» έχουν γίνει ευρέως διαδεδομένα. Αυτά παράγουν ένα πραγματικά γρήγορο βύθισμα εκκίνησης. Αλλά αν δεν γνωρίζετε τα όριά του, θα σας παραπλανήσει:
- Δεν έχει δοκιμαστεί με πραγματικό περιεχόμενο: Τα δείγματα κειμένων έχουν πάντα την ιδανική έκταση. Εάν ο πραγματικός τίτλος υπερχειλίσει, η διάταξη μπορεί να διαταραχθεί.
- Δεν υπάρχουν ακραίες περιπτώσεις: Η κενή λίστα, το μεγάλο όνομα, η περίπτωση σφαλμάτων συνήθως δεν σχεδιάζονται.
- Η προσβασιμότητα δεν είναι η προεπιλογή: Η αντίθεση, η περιοχή αφής, η σειρά ανάγνωσης συχνά δεν ελέγχονται.
- Είναι αδιάφορο για το νοητικό μοντέλο: το μοντέλο παράγει τη «μέση διεπαφή», όχι τη συνήθεια του χρήστη σας.
Σωστή στάση: θεωρήστε το αποτέλεσμα ως το αρχικό σχέδιο, όχι το τελικό σχέδιο. Αυτό που κάνει ένα «καλό» wireframe είναι ότι έχει δοκιμαστεί με πραγματικό περιεχόμενο, ακμή και προσβασιμότητα.
Σκηνή
Έξοδος AI
Η ωριμότητα που προσθέσατε
πρώτη παραγγελία
Σκελετός με γραμμή κουτιού
Διόρθωση βάσει προτεραιότητας περιεχομένου
περιεχόμενο
Δείγμα ιδανικού μήκους
Δοκιμή με πραγματικό, ξεχειλισμένο, κενό περιεχόμενο
θήκη άκρης
Συνήθως κανένα
Κατάσταση κενού/σφάλματος/φόρτωσης
προσβασιμότητα
μη επιλεγμένο
Αντίθεση, ακολουθία, περιοχή αφής
Σύνδεσμος ροής
ενιαία οθόνη
Συνέπεια με την προηγούμενη/επόμενη οθόνη
τρεις μίνι θήκες
Περίπτωση 1 — Τρεις παραλλαγές, σαφής απόφαση. Ένας σχεδιαστής ζήτησε από το AI 3 διαφορετικές διατάξεις για ένα ταμπλό (σύνοψη-κάρτα, πίνακας, γράφημα-βαρύ). 3 προσχέδια έφτασαν σε 15 λεπτά. Η ομάδα τα έδειξε στα ενδιαφερόμενα μέρη και πήρε μια απόφαση κατεύθυνσης σε 20 λεπτά. Αν γινόταν χειροκίνητα, θα χρειάζονταν 3 προσχέδια μισή μέρα.
Περίπτωση 2 — Το πραγματικό περιεχόμενο διέκοψε την τάξη. Στο wireframe AI, τα ονόματα προϊόντων ήταν πάντα 2 λέξεις. Στον πραγματικό κατάλογο, μερικά ονόματα ήταν 40 χαρακτήρες και ξεχείλιζαν τα φύλλα. Ο σχεδιαστής άλλαξε τη διάταξη αφού το δοκίμασε με πραγματικά δεδομένα. Μάθημα: δείγμα περιεχομένου ψέματα. Δοκιμάστε το με πραγματικό περιεχόμενο.
Περίπτωση 3 — Κενή θήκη ξεχασμένη. Ένα συρμάτινο πλαίσιο οθόνης "τα αγαπημένα μου" εμφάνιζε μόνο την πλήρη λίστα. Ο νέος χρήστης δεν έχει αγαπημένα. Η οθόνη ανοίγει κενή. Ο σχεδιαστής είπε στην τεχνητή νοημοσύνη «να σχεδιάσει και την κενή κατάσταση» και πρόσθεσε μια καθοδηγητική κενή κατάσταση. Μάθημα: η κενή κατάσταση είναι μέρος του κύριου σχεδίου, όχι μια άκρη.
Περιεχόμενο πριν, κουτί μετά
Η πιο κοινή παρανόηση στο Wireframing είναι να μπερδεύουμε το σχέδιο με την "τοποθέτηση κουτιού". Ωστόσο, ένα καλό wireframe είναι προσανατολισμένο στο περιεχόμενο: πρώτα αποφασίζετε ποιες πληροφορίες πρέπει να εμφανίζονται στην οθόνη και με ποια προτεραιότητα. Τα κουτιά είναι το αποτέλεσμα αυτής της απόφασης. Η δημιουργία μιας "προτεραιότητας περιεχομένου" είναι το πρώτο βήμα του wireframing: αναφέρετε τα πράγματα που πρέπει να δει ο χρήστης σε αυτήν την οθόνη από τα πιο σημαντικά έως τα λιγότερο σημαντικά. Η τεχνητή νοημοσύνη είναι ένας καλός συνεργάτης για τη δημιουργία αυτής της λίστας. Δίνει προτεραιότητα σε πιθανά στοιχεία περιεχομένου όταν δίνετε το σκοπό της οθόνης. Στη συνέχεια, μεταφράζετε αυτήν την προτεραιότητα με τη σειρά: το πιο σημαντικό στοιχείο στο πιο ορατό μέρος. Όταν αυτή η σειρά αντιστρέφεται - όταν σχεδιάζετε για πρώτη φορά μια ωραία διάταξη και στη συνέχεια προσπαθείτε να χωρέσετε το περιεχόμενο - οι πληροφορίες που πραγματικά χρειάζεται ο χρήστης ωθούνται στο παρασκήνιο.
Προσοχή: Ένα όμορφο συρμάτινο πλαίσιο μπορεί να κρύβει λανθασμένη προτεραιότητα περιεχομένου. "Είναι ωραία αυτή η ρύθμιση;" αλλά "Είναι η πιο σημαντική πληροφορία το πρώτο πράγμα που σου τραβάει το μάτι;" παρακαλώ.
Αντιγράψιμα μηνύματα
Ο ρόλος σας: ανώτερος σχεδιαστής προϊόντων. Σκοπός οθόνης: <<σκοπός>>. Συσκευή: <<κινητό/επιτραπέζιο>>. Τα 3 κορυφαία στοιχεία: <<λίστα>>. Απαιτούμενα στοιχεία: <<λίστα>>. Εργασία: Προτείνετε 3 σαφώς διαφορετικές προσεγγίσεις wireframe (με κείμενο, ενότητα προς ενότητα). Για κάθε προσέγγιση: λογική διάταξης, σειρά προτεραιότητας και γιατί θα λειτουργήσει.
Δοκιμάστε αυτόν τον ορισμό wireframe σε πραγματικές συνθήκες:<<κείμενο wireframe>>. Σχεδιάστε ή περιγράψτε: κενή κατάσταση, μεγάλο περιεχόμενο (υπερχείλιση), κατάσταση σφάλματος, κατάσταση φόρτωσης. Για καθένα, γράψτε πώς πρέπει να προσαρμόζεται η διάταξη.
Ελέγξτε αυτό το wireframe για προσβασιμότητα: έχει νόημα η σειρά ανάγνωσης, επαρκούν οι στόχοι αφής, υπάρχουν μόνο πληροφορίες που βασίζονται σε χρώμα, είναι προφανής η κύρια ενέργεια; Καταγράψτε τα προβλήματα και τις προτάσεις ένα προς ένα. Wireframe: <<κείμενο>>
Δημιουργήστε ρεαλιστικό περιεχόμενο κράτησης θέσης για αυτό το wireframe: 5 κεφαλίδες διαφορετικού μήκους (από σύντομο έως πολύ μεγάλο), 3 κενά κείμενα κατάστασης, 2 μηνύματα σφάλματος. Σκοπός: να δοκιμάσετε το σχέδιο με πραγματικό περιεχόμενο, όχι ιδανικό. Πλαίσιο: <<οθόνη>>
Αδύναμη προτροπή / Ισχυρή προτροπή
Αδύναμο: "Δημιουργήστε ένα wireframe αρχικής σελίδας."
Αποτέλεσμα: Ένας γενικός σκελετός με ασαφή προτεραιότητα περιεχομένου, ομοιομορφία και χωρίς ακμές.
Ισχυρό: "Προτείνετε 3 διαφορετικές προσεγγίσεις wireframe για την αρχική σελίδα για κινητά με σκοπό X. Τα 3 πιο σημαντικά στοιχεία είναι: εξηγήστε τη λογική προτεραιότητας κάθε προσέγγισης. Επίσης εμφανίστε την κατάσταση κενού και σφάλματος."
Αποτέλεσμα: Συγκρίσιμες, με προτεραιότητα, ρεαλιστικές επιλογές.
Διαφορά: η ισχυρή προτροπή δίνει σκοπό + προτεραιότητα + παραλλαγή + ακμή.
Συνήθη λάθη
- Θεωρώντας την πρώτη έξοδο ως τελικό σχέδιο. Το AI wireframe είναι η αρχή. Η διαδικασία στην ανώριμη κατάσταση είναι δαπανηρή.
- Να είστε ικανοποιημένοι με το δείγμα περιεχομένου. Το εικονικό κείμενο ιδανικού μήκους κάνει τη διάταξη να φαίνεται ψευδώς όμορφη.
- Παράκαμψη μηδενικών καταστάσεων και καταστάσεων σφάλματος. Η πρώτη οθόνη που βλέπει ο χρήστης είναι συχνά κενή.
- Αφήνοντας την προσβασιμότητα για το τέλος. Η αντίθεση και η σειρά ανάγνωσης λαμβάνονται υπόψη στο στάδιο wireframe και δεν διορθώνονται αργότερα.
- Συνεχίζουμε με μία μόνο παραλλαγή. Η σταθεροποίηση της πρώτης ιδέας χωρίς τη δημιουργία επιλογών μεγεθύνει τα τυφλά σημεία.
Συνοπτικά
Το Wireframing είναι ο φθηνότερος τρόπος για να ελέγξετε την προτεραιότητα και τη ροή του περιεχομένου χωρίς να μπείτε στην αισθητική. Το AI επιταχύνει πολύ αυτό το στάδιο. Το κλειδί είναι να δώσετε μια ισχυρή σύντομη περιγραφή (σκοπός, προτεραιότητα, πλαίσιο, περιορισμός, παραλλαγή) πριν από την παραγωγή και να δείτε το αποτέλεσμα ως αρχικό προσχέδιο. Η έξοδος των εργαλείων που δημιουργούν διεπαφές από κείμενο δεν ωριμάζει έως ότου δοκιμαστεί με πραγματικό περιεχόμενο, ακραίες περιπτώσεις και προσβασιμότητα. Χρησιμοποιήστε το μοντέλο σαν μια γρήγορη γεννήτρια επιλογών. Προσθέτεις ωριμότητα και απόφαση.
Εργασία εφαρμογής
- Επιλέξτε μια οθόνη και γράψτε μια σύντομη περιγραφή που περιλαμβάνει τον σκοπό, τα 3 πιο σημαντικά στοιχεία και τα υποχρεωτικά στοιχεία.
- Δημιουργήστε 3 σαφώς διαφορετικές προσεγγίσεις wireframe με την πρώτη προτροπή.
- Με την τέταρτη προτροπή, δημιουργήστε ρεαλιστικό περιεχόμενο κράτησης θέσης (σύντομη-μεγάλη-κενή) και δοκιμάστε τη διάταξη.
- Προσθέστε καταστάσεις κενού, σφάλματος και φόρτωσης με τη δεύτερη προτροπή.
- Πραγματοποιήστε έναν έλεγχο προσβασιμότητας με την τρίτη προτροπή και δημοσιεύστε τα ευρήματα στο wireframe.
λίστα ελέγχου
- [ ] Έγραψα μια σύντομη με σκοπό και προτεραιότητες πριν από την παραγωγή.
- [ ] Παρήγαγα όχι μία αλλά 3 διαφορετικές παραλλαγές.
- [ ] Δοκίμασα τη διάταξη με ρεαλιστικό (μεγάλο/σύντομο/κενό) περιεχόμενο.
- [ ] Σχεδίασα καταστάσεις κενές, σφαλμάτων και φόρτωσης.
- [ ] Έκανα τον έλεγχο προσβασιμότητας στο στάδιο wireframe.
- [ ] Αντιμετώπισα το αποτέλεσμα ως αρχικό σχέδιο και το ωρίμασα.