Οδηγός σχεδίασης θεμάτων

Η σελίδα Δημιουργία θεμάτων εξηγεί πώς φτιάχνεται ένα θέμα QuizWitz: στο Adobe Animate, με εξαγωγή ως βιβλιοθήκη CreateJS. Αυτή η σελίδα καλύπτει το βήμα πριν από αυτό - τη σχεδίαση του θέματος.

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

Η σελίδα έχει τέσσερα μέρη:

1. Τι σχεδιάζεις - οι οθόνες που καλύπτει ένα θέμα.
2. Τα οκτώ καρέ και το φύλλο στοιχείων, ένα προς ένα, με στιγμιότυπα οθόνης.
3. Κανόνες σχεδίασης - πώς πρέπει να φτιαχτεί το αρχείο ώστε να μπορεί να το χρησιμοποιήσει η μηχανή.
4. Τι να παραδώσεις - αρχείο πηγής, παραδοτέα και σειρά εργασιών.

συμβουλή

Αν θέλεις μόνο να αλλάξεις χρώματα, γραμματοσειρές και φόντα, δεν χρειάζεσαι τίποτα από αυτά - προσάρμοσε καλύτερα το θέμα Emerald.

Δες το σε λειτουργία

Κάθε οθόνη που περιγράφεται εδώ μπορεί να παιχτεί ζωντανά, με δείγματα δεδομένων, στο εργαλείο Δοκιμή θεμάτων στο client.quizwitz.com/test.html. Φορτώνει ένα θέμα και προσφέρει ένα μενού με δοκιμαστικές οθόνες: ερωτήσεις με και χωρίς συνημμένο, την κατανομή των απαντήσεων για μικρή και μεγάλη ομάδα, την κατάταξη, τις εισαγωγές γύρων, την οθόνη σύνδεσης με και χωρίς λογότυπο πελάτη κ.ο.κ. Πρόσθεσε ?theme=emerald στη διεύθυνση για να δεις το θέμα Emerald. Όποιος φτιάχνει το θέμα χρησιμοποιεί την ίδια σελίδα για να το ελέγχει όσο το συναρμολογεί.

---

Τι σχεδιάζεις

Ένα παιχνίδι QuizWitz το παίζει ολόκληρη η αίθουσα ταυτόχρονα και εμπλέκονται πάντα δύο οθόνες:

• Η οθόνη παιχνιδιού - ένας προβολέας ή μια τηλεόραση, 1920 × 1080. Ερωτήσεις, απαντήσεις, πώς κατανεμήθηκαν οι απαντήσεις της αίθουσας, η κατάταξη. Αυτό είναι που σχεδιάζεις.
• Το κινητό κάθε παίκτη, όπου πληκτρολογεί την απάντησή του. Πρόκειται για μια ιστοσελίδα με σταθερή διάταξη· παίρνει το στυλ της από τη λίστα χρωμάτων σου, δεν τη σχεδιάζεις εσύ.

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

---

Οκτώ καρέ και ένα φύλλο στοιχείων

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

Το φύλλο μετράει όσο και τα καρέ: μια οθόνη που χρησιμοποιεί το γενικό καρέ χρειάζεται και πάλι «έπιπλα» μέσα στην περιοχή περιεχομένου της - ένα πάνελ, μια γραμμή, ένα διαχωριστικό.

#	Καρέ	Καλύπτει επίσης
1	Γενικό καρέ	Δεκατρείς καταστάσεις οθόνης χωρίς δικά τους γραφικά
2	Οθόνη σύνδεσης	Σχεδίασέ την δύο φορές: με λογότυπο πελάτη και χωρίς
3	Οθόνη αναμονής	-
4	Οθόνη ερώτησης	-
5	Ερώτηση με συνημμένο	Το συνημμένο σε πλήρη οθόνη και τα συνημμένα που εμφανίζονται ανάμεσα στις ερωτήσεις
6	Οθόνη απάντησης	Η οθόνη απάντησης για ανοιχτές ερωτήσεις και για ερωτήσεις με συνημμένο
7	Κατάταξη και νικητής	Η κατάταξη ανάμεσα στους γύρους και ο τελικός νικητής
8	Εισαγωγή γύρου	Και οι έξι κατηγορίες γύρων

Σχετικά με τα στιγμιότυπα οθόνης

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

Καρέ 1 - το γενικό καρέ

Τι περιέχει: το φόντο, έναν τίτλο κεφαλίδας και μια άδεια περιοχή περιεχομένου από κάτω. Δεν είναι ολοκληρωμένη σύνθεση, αλλά το καρέ μέσα στο οποίο χτίζονται όλα τα υπόλοιπα.

Τι καλύπτει: δεκατρείς καταστάσεις οθόνης - επεξήγηση γύρου, κατάταξη, παρουσίαση παικτών, παραλλαγές πολλαπλής επιλογής, μεγάλες ερωτήσεις, προειδοποιήσεις για Seats, ρυθμίσεις. Καθεμιά γεμίζει την περιοχή περιεχομένου με τον δικό της τρόπο, με στοιχεία από το φύλλο στοιχείων, οπότε το καρέ πρέπει να φιλοξενεί πράγματα που δεν μοιάζουν καθόλου μεταξύ τους. Ο επιλογέας ερωτήσεων και η μεγάλη ερώτηση μπορούν να έχουν δική τους σύνθεση αν το θέλεις· διαφορετικά χρησιμοποιούν αυτό το καρέ.

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

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

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

Καρέ 2 - η οθόνη σύνδεσης

Τι περιέχει: όλα όσα χρειάζεται η αίθουσα για να συνδεθεί.

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

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

Καρέ 3 - η οθόνη αναμονής

Τι περιέχει: σχεδόν τίποτα - το λογότυπο του ίδιου του κουίζ ή το γραφικό του θέματος.

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

Καρέ 4 - η οθόνη ερώτησης

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

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

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

Καρέ 5 - ερώτηση με συνημμένο

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

Τι καλύπτει: το συνημμένο σε πλήρη οθόνη και τα συνημμένα που εμφανίζονται ανάμεσα στις ερωτήσεις.

Εδώ με τις επιλογές αριστερά και δεξιά από το συνημμένο:

Ένα συνημμένο μόνο του, που γεμίζει την οθόνη:

Καρέ 6 - η οθόνη απάντησης

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

Τι καλύπτει: την οθόνη απάντησης για ανοιχτές ερωτήσεις και για ερωτήσεις με συνημμένο.

Η οθόνη περνά από τρεις στιγμές. Πρώτα η κατανομή, χωρίς να έχει σημειωθεί τίποτα ακόμη:

Έπειτα η σωστή επιλογή σημειώνεται με τικ και οι λάθος διαγράφονται:

Και αν η ερώτηση έχει επεξήγηση, ένα μπαλόνι πέφτει πάνω από το γραφικό. Άφησε χώρο γι' αυτό - πέφτει πάνω από ό,τι έχεις σχεδιάσει:

Με μια μικρή ομάδα, η ίδια στιγμή είναι μια λίστα σκορ αντί για διάγραμμα:

Σε μια ανοιχτή ερώτηση, το διάγραμμα δείχνει πόσοι παίκτες απάντησαν σωστά:

Καρέ 7 - κατάταξη και νικητής

Τι περιέχει: μια λίστα παικτών με θέση, avatar, όνομα και σκορ. Δώσε τη γραμμή παίκτη ως ξεχωριστό, επαναχρησιμοποιήσιμο στοιχείο: επαναλαμβάνεται έξι φορές από προεπιλογή, έως δέκα.

Τι καλύπτει: την κατάταξη ανάμεσα στους γύρους και τον τελικό νικητή.

Η κατάταξη μετά από έναν γύρο, με έξι γραμμές παικτών:

Η τελική αντίστροφη μέτρηση ονομάζει έναν παίκτη κάθε φορά, από την τελευταία θέση ως την πρώτη - θέση, σκορ και όνομα ομάδας στο προσκήνιο. Εδώ είναι επίσης που τα ιπτάμενα emoji είναι περισσότερα:

Καρέ 8 - η εισαγωγή γύρου

Τι περιέχει: μια σύντομη ανακοίνωση ανά κατηγορία γύρου. Υπάρχουν έξι κατηγορίες: επιστήμη και τεχνολογία, φύση, ψυχαγωγία και μουσική, αθλητισμός, τέχνη, ιστορία.

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

Εδώ, μία σύνθεση με παραλλαγή ανά κατηγορία:

Ο χαρακτήρας είναι προαιρετικός. Το βασικό θέμα QuizWitz έχει έναν που μιλά και αντιδρά· το θέμα Emerald δεν έχει, και η παράλειψή του αφαιρεί την πιο ακριβή δουλειά κίνησης - συγχρονισμό χειλιών, μάτια, χέρια.

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

---

Το φύλλο στοιχείων

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

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

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

Στοιχεία ελέγχου. Σχεδιάζονται μία φορά και χρησιμοποιούνται σε κάθε οθόνη:

• ένα κουμπί στις τέσσερις καταστάσεις του: ηρεμία, hover, πατημένο, απενεργοποιημένο
• τα σύμβολα σωστού και λάθους
• μια γραμμή κύλισης, ένα πλαίσιο ελέγχου, ένα πεδίο επιλογής
• πού βρίσκεται το λογότυπο του QuizWitz

---

Τι έχει ήδη αποφασιστεί για σένα

• Τα κινητά των παικτών. Μια σταθερή διάταξη HTML.
• Τα λίγα πράγματα που σχεδιάζει η ίδια η μηχανή - τα διαχωριστικά ανάμεσα στις γραμμές στην κλίμακα πόντων, την επισημασμένη γραμμή στον επιλογέα ερωτήσεων, τον κωδικό QR. Τα χρώματά τους προέρχονται από την ενότητα Το χρώμα ως λίστα.
• Ποιες οθόνες χρησιμοποιούν το γενικό καρέ και με ποιον τρόπο.
• Πώς αντιστοιχίζονται οι έξι κατηγορίες στα γραφικά της εισαγωγής γύρου. Αυτή η αντιστοίχιση είναι ρύθμιση του αρχείου ρυθμίσεων, οπότε μία εισαγωγή μπορεί να επαναχρησιμοποιηθεί για πολλές κατηγορίες.
• Όλος ο χρονισμός και η διάρκεια των κινούμενων εικόνων.
• Ήχος. Ένα θέμα μπορεί να έχει δική του μουσική και ηχητικά εφέ, αλλά αυτό είναι ξεχωριστό παραδοτέο και δεν αποτελεί μέρος του σχεδιαστικού brief.

---

Κανόνες σχεδίασης

Κανένας από αυτούς δεν περιορίζει την οπτική σου σχεδίαση. Αφορούν τον τρόπο που φτιάχνεται το αρχείο.

Μορφή

• 1920 × 1080 pixel, ακριβώς. Ένα καρέ ανά οθόνη.
• Δούλευε σε διανυσματικά γραφικά όπου μπορείς. Όπου χρησιμοποιείς ψηφιογραφικά γραφικά (φωτογραφίες, υφές): τουλάχιστον 2× το μέγεθος προβολής.
• Το έγγραφο του Animate τρέχει με 24 καρέ ανά δευτερόλεπτο. Σχετικό αν προτείνεις ιδέες κίνησης.
• Κράτα ένα περιθώριο 5% στις άκρες χωρίς ουσιώδεις πληροφορίες. Οι προβολείς κόβουν τις άκρες.

Δομή layer - ο κανόνας που μετράει περισσότερο

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

Στην πράξη:

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

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

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

Εφέ που δεν επιβιώνουν

Η μηχανή σχεδιάζει σε έναν καμβά HTML5. Αυτά πρέπει να ενσωματωθούν στην εικόνα ή να παραλειφθούν:

Εφέ	Τι να κάνεις αντί γι' αυτό
Ζωντανό θόλωμα, σκιές και λάμψη ως φίλτρα	Δώσ' τα ως γραφικό
Λειτουργίες ανάμειξης (multiply, screen, overlay)	Μετάτρεψέ τες σε επίπεδο χρώμα
Εφέ layer και layer προσαρμογής	Ενσωμάτωσέ τα στην εικόνα
Διαβαθμίσεις μέσα σε κείμενο ή κείμενο με περίγραμμα ανά χαρακτήρα	Παράλειψέ τα
Μάσκες που αλλάζουν ανά καρέ	Παράλειψέ τα

Οι διαβαθμίσεις σε σχήματα είναι εντάξει. Η διαφάνεια είναι εντάξει. Οι σκιές ως σταθερό γραφικό είναι εντάξει.

Πώς συμπεριφέρεται το κείμενο

Εδώ είναι που η σχεδίαση για το QuizWitz διαφέρει περισσότερο από τη συνηθισμένη σχεδιαστική δουλειά.

Δεν ορίζεις μέγεθος γραμματοσειράς. Σχεδιάζεις ένα πλαίσιο.

Όλο το κείμενο σχεδιάζεται ζωντανά από ένα στοιχείο που λαμβάνει δύο πράγματα: ένα κείμενο και το ορθογώνιο που σχεδίασες. Έπειτα βρίσκει το μεγαλύτερο μέγεθος γραμματοσειράς στο οποίο το κείμενο, χωρισμένο σε γραμμές, χωράει ακόμη μέσα στο πλαίσιο. Ένα μεγάλο κείμενο μικραίνει για να χωρέσει· ένα σύντομο μεγαλώνει μέχρι να γεμίσει το πλαίσιο.

Τρεις γραμμές, τρία ίδια πλαίσια - και τρία εντελώς διαφορετικά μεγέθη γραμματοσειράς, μόνο επειδή το κείμενο είναι πιο σύντομο ή πιο μεγάλο. Το «Where is love» παίρνει όλο το ύψος· η ερώτηση από πάνω πρέπει να αρκεστεί σε δύο μικρές γραμμές. Οι ετικέτες στα αριστερά συμπεριφέρονται με τον ίδιο τρόπο.

Τι προκύπτει από αυτό:

• Η ίδια ερώτηση φαίνεται διαφορετική σε άλλο παιχνίδι. Μια ερώτηση έξι λέξεων εμφανίζεται μεγάλη και γεμίζει την οθόνη· μια ερώτηση τριάντα πέντε λέξεων εμφανίζεται μικρή σε πέντε γραμμές, στο ακριβώς ίδιο πλαίσιο. Και οι δύο πρέπει να δείχνουν σωστές.
• Σχεδίασε κάθε πλαίσιο κειμένου δύο φορές. Γέμισέ το μία φορά με ένα πολύ σύντομο δείγμα και μία φορά με ένα πολύ μεγάλο και έλεγξε ότι η σύνθεση στέκει και στις δύο περιπτώσεις. Ως γενικός κανόνας: μια επιλογή απάντησης έχει από μία έως περίπου οκτώ λέξεις, μια ερώτηση από πέντε έως σαράντα, ένα όνομα παίκτη από δύο έως είκοσι χαρακτήρες.
• Μην υπολογίζεις σε σταθερό αριθμό γραμμών. Ένας τίτλος που είναι «πάντα σε μία γραμμή» δεν υπάρχει εδώ.
• Μην ευθυγραμμίζεις οπτικά το κείμενο με οτιδήποτε άλλο. Κείμενο που πρέπει να ευθυγραμμίζεται με μια γραμμή ή ένα σχήμα θα μετατοπιστεί μόλις γίνει πιο σύντομο ή πιο μεγάλο. Χρησιμοποίησε πλαίσια με αρκετό χώρο και μια στοίχιση (αριστερά, στο κέντρο, δεξιά) αντί για ακριβείς θέσεις.
• Δώδεκα γλώσσες. Οι γερμανικές σύνθετες λέξεις είναι μεγάλες και τα ουγγρικά δεν είναι πιο επιεική. Ένα πλαίσιο που είναι οριακό στα αγγλικά πέφτει σε δυσανάγνωστα μικρό μέγεθος στα γερμανικά.
• Μέσα στο κείμενο μπορούν να εμφανιστούν emoji. Οι παίκτες διαλέγουν ένα δίπλα στο όνομα της ομάδας τους και μια ερώτηση ή μια επιλογή μπορεί να περιέχει ένα - μερικές φορές μια επιλογή δεν είναι τίποτα άλλο από ένα emoji. Σχεδιάζονται έγχρωμα και είναι ψηλότερα από τα γράμματα γύρω τους.

Τι πρέπει να ξέρει η υλοποίηση για κάθε πλαίσιο κειμένου: πού βρίσκεται, πόσο μεγάλο είναι, πώς είναι στοιχισμένο, ποιο χρώμα και ποια γραμματοσειρά έχει. Όχι: σε ποιο μέγεθος γραμματοσειράς.

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

Το χρονόμετρο - απαραίτητο, και είναι κινούμενη εικόνα

Κάθε οθόνη ερώτησης έχει χρονόμετρο· η αίθουσα πρέπει να βλέπει πόσος χρόνος απομένει.

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

Τι προκύπτει:

• Η διάρκεια της ερώτησης δεν είναι σταθερή. Ορίζεται ανά κουίζ - συχνά είκοσι με τριάντα δευτερόλεπτα, αλλά μπορεί να είναι μικρότερη ή μεγαλύτερη. Η κινούμενη εικόνα σου τεντώνεται ή συμπιέζεται για να ταιριάξει.
• Χωρίς αριθμούς ή χτύπους ανά δευτερόλεπτο. Ένα χρονόμετρο που μετρά «20, 19, 18…» παύει να είναι σωστό μόλις αλλάξει η διάρκεια.
• Τα τελευταία δευτερόλεπτα είναι η πιο αγωνιώδης στιγμή του παιχνιδιού. Βοηθά αν η εξέλιξη γίνεται πιο εμφανής ή πιο επείγουσα προς το τέλος.
• Ευανάγνωστο από το βάθος της αίθουσας, με μια ματιά.
• Επιτρέπονται πολλά χρονόμετρα. Μια μπάρα στο επάνω μέρος και ένας δακτύλιος κοντά στην ερώτηση κινούνται και τα δύο, αρκεί καθένα να έχει το όνομα timer.

Δώσε το χρονόμετρο ως σειρά από keyframes ή ως περιγραφή της εξέλιξης - αρκεί κάτι σαν «η μπάρα αδειάζει από δεξιά προς τα αριστερά και αλλάζει από πράσινο σε κόκκινο».

Τα ιπτάμενα emoji πέφτουν πάνω από όλα

Κάθε παίκτης διαλέγει ένα emoji όταν συνδέεται και το παιχνίδι πετάει αυτά τα emoji σε όλη την οθόνη. Τα σχεδιάζει η μηχανή σε ένα layer πάνω από το θέμα. Δεν υπάρχει τίποτα να σχεδιάσεις εδώ - υπάρχει όμως κάτι που πρέπει να λάβεις υπόψη στη σχεδίαση, γιατί δεν είναι σπάνια διακοσμητική πινελιά.

Εμφανίζονται σε τρεις στιγμές:

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

Τι σημαίνει αυτό για τη σχεδίαση:

• Κράτα το κάτω τρίτο των οθονών κατάταξης και νικητή ελεύθερο από οτιδήποτε μικρό ή κρίσιμο. Κατά την αντίστροφη μέτρηση εκεί κάτω γίνεται πραγματικός συνωστισμός.
• Υπόθεσε ότι θα συγκρούονται με την παλέτα σου. Είναι πολύχρωμα emoji από κάθε γωνιά του πίνακα Unicode και κανένα θέμα δεν τα ελέγχει. Μια σχεδίαση που στέκει μόνο σε στενό φάσμα χρωμάτων θα φαίνεται τυχαία για εκείνα τα δευτερόλεπτα.
• Τα πεταχτά emoji απενεργοποιούνται όσο εμφανίζεται εικόνα ή βίντεο, ώστε οι οθόνες συνημμένων να μένουν καθαρές.
• Ολόκληρο το layer μπορεί να απενεργοποιηθεί ανά παιχνίδι, οπότε μη φτιάξεις ούτε σύνθεση που εξαρτάται από την παρουσία τους.

Γραμματοσειρές

• Οι γραμματοσειρές πρέπει να μπορούν να ενσωματωθούν. Χρειάζεται το αρχείο .ttf ή .otf, καθώς και άδεια που επιτρέπει την ενσωμάτωση σε εφαρμογή. Μια γραμματοσειρά με άδεια μόνο ως webfont ή μόνο για έντυπα δεν μπορεί να χρησιμοποιηθεί. Έλεγξέ το πριν σχεδιάσεις με αυτήν· αργότερα η διόρθωση κοστίζει ακριβά.
• Γραμματοσειρές με ασυνήθιστα μεγάλα ανιόντα ή κατιόντα σκέλη μπορούν να αντισταθμιστούν, αλλά ενημέρωσέ μας αν χρησιμοποιείς κάποια τέτοια.

Το χρώμα ως λίστα

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

Πού	Χρώματα
Οθόνη παιχνιδιού	Κύριο χρώμα, χρώμα έμφασης, φόντο, χρώμα πάνελ ή περιέκτη, φόντο χρονομέτρου, προεπιλεγμένο χρώμα κειμένου, χρώμα κειμένου κεφαλίδας, χρώμα κειμένου ερώτησης, κείμενο κουμπιών, κείμενο διαλόγων και επεξηγήσεων, κείμενο ονόματος και σκορ παίκτη, το χρώμα για το σωστό, το χρώμα για το λάθος
Οι τέσσερις επιλογές απάντησης	Για κάθε επιλογή: ένα χρώμα φόντου, ένα χρώμα περιγράμματος και ένα επίπεδο χρώμα για τα κινητά και τα διαγράμματα
Κινητά των παικτών	Φόντο, χρώμα κειμένου, χρώμα περιγράμματος, χρώμα περιγράμματος επιλογών, καθώς και το χρώμα φόντου και κειμένου του περιέκτη απαντήσεων

Οι διαβαθμίσεις επιτρέπονται στην οθόνη παιχνιδιού: δώσε τες ως δύο δεκαεξαδικές τιμές.

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

• το διαχωριστικό - οι γραμμές ανάμεσα στις σειρές όπου δεν υπάρχει πάνελ, και στην κλίμακα πόντων
• οι καταστάσεις ενεργή, ανενεργή και επιλεγμένη μιας γραμμής στον επιλογέα ερωτήσεων
• το κείμενο των διαλόγων
• η πρόσοψη και το φόντο του κωδικού QR

Αν τις παραλείψεις, χρησιμοποιούνται οι ενσωματωμένες προεπιλογές - λευκό, γκρι, κόκκινο, μαύρο και λευκό - που σπάνια ταιριάζουν με μια σχεδίαση.

Το λογότυπο του QuizWitz

Τα προσαρμοσμένα σχέδια περιλαμβάνουν το λογότυπο του QuizWitz. Κράτα γι' αυτό μια θέση όπου δεν εμποδίζει τη σχεδίαση.

---

Τι να παραδώσεις

Αρχείο πηγής - κατά προτίμηση Illustrator

Το θέμα φτιάχνεται στο Adobe Animate, και το τι μπορεί να εισαγάγει το Animate καθορίζει πόσο από τη δουλειά σου φτάνει ανέπαφο στην παράδοση:

Εργαλείο	Τι συμβαίνει κατά την εισαγωγή	Χρησιμοποίησέ το για
Adobe Illustrator (.ai)	Το Animate το εισάγει απευθείας και μετατρέπει τα layer σου σε layer του Animate ή σε ξεχωριστά symbols, διατηρώντας τα ονόματα των layer και αφήνοντας τα διανυσματικά γραφικά επεξεργάσιμα. Αυτό ακριβώς είναι το βήμα που γλιτώνει το γραφικό από το να ξαναφτιαχτεί με το χέρι.	Προτιμάται για το τελικό παραδοτέο
Adobe Photoshop	Εισάγεται με τα layer του ανέπαφα, όπως το Illustrator, αλλά δίνει ψηφιογραφικά αντί για διανυσματικά γραφικά.	Εφικτό
Figma	Όλα περνούν από εξαγωγή SVG και PNG, και ακριβώς εκεί χάνεται η δομή layer που χρειάζεται εδώ. Αν χρησιμοποιείς Figma, δώσε κάθε στοιχείο ξεχωριστά ως SVG, με ονόματα αρχείων που αντιστοιχούν στα ονόματα των layer, ώστε η δομή να μπορεί να ξαναφτιαχτεί με το χέρι.	Η φάση του concept, αν είσαι πιο γρήγορος σε αυτό

Δομή αρχείου:

• Ένα artboard ανά οθόνη, με όνομα από τα παραπάνω καρέ.
• Επαναχρησιμοποιούμενα μέρη (κουμπί, γραμμή παίκτη, επιλογή απάντησης, χρονόμετρο) ως symbols ή components, όχι ως μεμονωμένα αντίγραφα.
• Ονόματα layer στα αγγλικά, χωρίς κενά: question, option1 έως option4, timer, feedback, header, background, playerScore.
• Χρώματα ως επώνυμα swatches και κείμενο ως επώνυμα στυλ, αντί να ορίζονται σε κάθε αντικείμενο ξεχωριστά.

Λίστα ελέγχου παραδοτέων

1. Το αρχείο πηγής, δομημένο όπως παραπάνω.
2. Κάθε καρέ ως PNG, 1920 × 1080 - ως αναφορά για το πώς πρέπει να φαίνεται. Για το καρέ 2, τόσο την εκδοχή με όσο και την εκδοχή χωρίς λογότυπο πελάτη.
3. Το φύλλο στοιχείων ως ένα artboard: τα δομικά στοιχεία περιεχομένου και τα στοιχεία ελέγχου.
4. Κάθε ξεχωριστό γραφικό στοιχείο ως διαφανές PNG σε 2×, σε έναν φάκελο, με όνομα αρχείου ίδιο με το όνομα του layer.
5. Το χρονόμετρο ως keyframes ή ως γραπτή περιγραφή της εξέλιξης.
6. Γραμματοσειρές ως .ttf ή .otf, με αποδεικτικό άδειας χρήσης.
7. Η λίστα χρωμάτων από την ενότητα Το χρώμα ως λίστα, ως δεκαεξαδικές τιμές.
8. Μισή σελίδα σημειώσεων: ποια είναι η ιδέα, πώς πρέπει να εμφανίζονται οι επιλογές, τι κινείται και τι μένει σταθερό. Όχι μια αιτιολόγηση σχεδίασης δέκα σελίδων - όποιος φτιάχνει το θέμα πρέπει να ξέρει τι να φτιάξει. Οι ιδέες κίνησης μπορούν να περιγραφούν ή να δοθούν ως πρόχειρο animatic.

Σειρά εργασιών

1. Καρέ 4, η οθόνη ερώτησης, μαζί με το φύλλο στοιχείων. Πάρε έγκριση και για τα δύο πριν από τα υπόλοιπα. Μαζί περιέχουν το χρονόμετρο, τις επιλογές, το πάνελ και κάθε στοιχείο ελέγχου, οπότε καθορίζουν το στυλ ολόκληρου του θέματος.
2. Καρέ 1 έως 3. Προκύπτουν φυσικά από τα δύο πρώτα.
3. Τα καρέ 6 έως 8 έρχονται τελευταία.

---

Παράρτημα - ονόματα symbols

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

Καρέ	Όνομα symbol	Απαιτούμενα μέρη
1. Γενικό καρέ	GeneralPurposeScreen· GeneralPurposeScreenWithHeader προαιρετικό	placeholder (η περιοχή περιεχομένου)· πλαίσιο κειμένου title προαιρετικό
1b. Επιλογέας ερωτήσεων, μεγάλη ερώτηση	MultiQuestionScreen, LongQuestionScreen· και τα δύο προαιρετικά, αλλιώς χρησιμοποιείται το γενικό καρέ	επιλογέας: placeholder questions, timer· μεγάλη ερώτηση: placeholder question
2. Οθόνη σύνδεσης	PresentationConnectScreen· PresentationConnectScreenWithLogo προαιρετικό, με placeholder logo	instructions.line1 έως line5, connectedPlayers· placeholder qrCode με ετικέτα καρέ showQrCode προαιρετικό
3. Οθόνη αναμονής	PendingScreen· PendingScreenWithLogo προαιρετικό	header.text
4. Οθόνη ερώτησης	QuestionScreen	question.text, timer, feedback.text, option1 έως option4, ετικέτες καρέ showOptions και showFeedback
5. Ερώτηση με συνημμένο	QuestionScreenAttachment	όπως παραπάνω, συν attachment.placeholder
5b. Συνημμένο σε πλήρη οθόνη	AttachmentScreen	placeholder
6. Οθόνη απάντησης	AnswerPieScreen· AnswerPieScreenAttachment προαιρετικό	option1 έως option4, answer.text, feedback.text
6b. Απάντηση ανοιχτής ερώτησης	AnswerScreen, AnswerOpenQuestionPieScreen· παραλλαγές …Attachment προαιρετικές	answer.text, feedback.text, players, piechart
7. Κατάταξη	WinnerScreen + PlayerScore· WinnerScreen_round, WinnerScreen_game και PlayerScoreNoImage προαιρετικά	header.text, players, feedback.text (playAgain.text προαιρετικό)· στη γραμμή: position, name, score, avatar προαιρετικό
8. Εισαγωγή γύρου	ένα ή περισσότερα symbols με οποιοδήποτε όνομα· το αρχείο ρυθμίσεων αντιστοιχίζει καθεμιά από τις έξι κατηγορίες σε ένα symbol	-
-	LoadingScreen	text, progress
-	Button, Checkbox, Slider, QuestionSelect, Scrollbar, SettingsScreenScrollarea, SymbolCorrect, SymbolWrong, PackListItem	δεν χρειάζονται δικά τους γραφικά - φτιάχνονται από όσα εμφανίζονται στα καρέ σου
-	IntroScreen, IntroScreenBranded, MenuScreen, SettingsScreen, AlertScreen, ActivityScreen, ActivityVotePieScreen	εμφανίζονται μόνο στην εφαρμογή υπολογιστή, όχι σε live κουίζ. Δεν αποτελούν μέρος του brief: λαμβάνονται από το πρότυπο θέματος και παίρνουν νέο στυλ με το φόντο και τα κουμπιά σου

Τα symbols εισαγωγής γύρου του βασικού θέματος ονομάζονται RoundIntroScienceAndTech, RoundIntroFloraAndFauna, RoundIntroTedMusic, RoundIntroTedSport και RoundIntroTedCultHist· η τέχνη και η ιστορία μοιράζονται το τελευταίο. Το «Ted» σε αυτά τα ονόματα είναι απομεινάρι του χαρακτήρα του αρχικού θέματος και δεν σημαίνει ότι πρέπει να εμφανίζεται χαρακτήρας σε αυτά.

Κάθε στοιχείο που ακολουθείται από .text είναι ένα προσαρμοζόμενο πλαίσιο κειμένου, όπως περιγράφεται στην ενότητα Πώς συμπεριφέρεται το κείμενο: ένα ορθογώνιο που γεμίζει μόνη της η μηχανή. Το στοιχείο timer είναι ένα movie clip με δική του χρονογραμμή· η μηχανή διαβάζει τον αριθμό των καρέ του και μετακινεί την κεφαλή αναπαραγωγής ανάλογα με τον χρόνο που έχει περάσει, έως 24 φορές το δευτερόλεπτο.

Τι παίρνει το αρχείο ρυθμίσεων από τη σχεδίασή σου

{
  "fontFiles": { "<body font>": "fonts/body.ttf", "<heading font>": "fonts/heading.ttf" },
  "fonts":  { "default": "<body font>", "header": "<heading font>" },
  "colors": {
    "_accent_": "#…", "_main_": "#…", "_background_": "#…-#…",
    "_container_": "#…", "_timerBackground_": "#…",
    "default": "#…", "header": "#…", "question": "#…",
    "buttons": "#…", "dialog": "#…", "player": "#…",
    "_optionColors_": [ { "background": "#…-#…", "border": "#…" } ]
  },
  "optionColors": [ "#…", "#…", "#…", "#…" ],
  "booleanResultColors": { "correct": "#…", "wrong": "#…" },
  "remoteColors": {
    "background": "#…", "text": "#…", "outline": "#…",
    "options-outline": "#…", "container-background": "#…", "container-text": "#…"
  },
  "roundIntros": { "science": "<symbol>", "nature": "<symbol>", "entertainment": "<symbol>",
                   "sports": "<symbol>", "art": "<symbol>", "history": "<symbol>" },
  "overlay": "light | dark"
}