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

Τι είναι όμως το UX και τι το UI; Η διαδικασία κατασκευής είναι UX και η διαδικασία επιμετάλλωσης και σερβιρίσματος είναι UI.

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

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

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

Το UX δεν είναι UI

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

Μπορείτε να σκεφτείτε τη διεπαφή χρήστη ή τη σχεδίαση διεπαφής χρήστη, ως εξής:

Σχεδίαση διεπαφής χρήστη = Visual Design + Interaction Design.

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

Και ενώ και οι δύο σχεδιαστές UX και UI δημιουργούν αλληλεπιδράσεις, οι σχεδιαστές UX μπορούν να θεωρηθούν αρχιτέκτονες των μακρο-αλληλεπιδράσεων και οι σχεδιαστές UI είναι δημιουργοί μικροαλληλεπίδρασης που ασχολούνται με τις λεπτομέρειες.

Σύμφωνα με τον σχεδιαστή Nick Babich:

«Τα καλύτερα προϊόντα κάνουν δύο πράγματα καλά: χαρακτηριστικά και λεπτομέρειες. Τα χαρακτηριστικά είναι αυτά που προσελκύουν τους ανθρώπους στο προϊόν σας. Οι λεπτομέρειες είναι αυτές που τους κρατούν».

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

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

Το UI κάνει τις διεπαφές όμορφες

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

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

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

Το UX βοηθά τους χρήστες να επιτύχουν στόχους

Το UI δημιουργεί συναισθηματικές συνδέσεις

Οι άνθρωποι έρχονται στον ιστότοπό σας για να κάνουν κάτι. Ίσως κάποιος ψάχνει για ένα σκυλί για ένα μικρό διαμέρισμα.

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

Μόλις ρυθμίσετε τη βασική χρηστικότητα, σύμφωνα με τον Aaron Walter, συγγραφέα του Design for Emotion, η αφοσίωση των χρηστών σας θα εξαρτηθεί από την προσωπικότητα της διεπαφής σας. Ένα φωτεινό σχέδιο μπορεί να προσελκύσει κόσμο στον ιστότοπό σας, μπορεί ακόμη και να παραμείνουν αν υπάρχει κάτι να γίνει εκεί. Και όταν δημιουργείται μια προσωπική σύνδεση, είναι στο γάντζο. Το περιβάλλον εργασίας σας τους κάνει να γελούν; Τα αρπάζει; Πόσο αναιδής είναι; Ο Άαρον λέει: «Οι άνθρωποι θα συγχωρήσουν τα ελαττώματά σου, θα σε ακολουθήσουν και θα τραγουδήσουν τους επαίνους σου αν τους ανταμείψεις με θετικά συναισθήματα». Εδώ μπαίνει ο σχεδιαστής διεπαφής χρήστη.

Ο σχεδιασμός UX δημιουργείται πρώτα

Στη συνέχεια (μερικές φορές) δημιουργείται το σχέδιο διεπαφής χρήστη

Πώς συνεργάζονται οι σχεδιαστές UX και UI σε όλη τη διαδικασία σχεδιασμού;

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

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

Ωστόσο, αυτή η διαδρομή δεν είναι πάντα γραμμική και εξαρτάται από πολλούς παράγοντες. Για παράδειγμα:

• Ποιος είναι υπεύθυνος για το UX και το UI;
• Το ίδιο άτομο ή κάποιος άλλος και μια διαφορετική ομάδα;

Το UX χρησιμοποιείται σε όλα τα προϊόντα, τις διεπαφές και τις υπηρεσίες

Το UI αναφέρεται μόνο σε διεπαφές

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

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

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

συμπεράσματα

Είναι σχεδόν αδύνατο να διαχωρίσετε το UX από το UI ή το UI από το UX.

Αλλά αν προσπαθήσεις, μπορείς να συμπεράνεις ότι:

• Ο σχεδιασμός UX βοηθά τους χρήστες να ολοκληρώσουν εργασίες σε ένα περιβάλλον διάφορες πλατφόρμεςκαι υπηρεσίες.
• Ο σχεδιασμός διεπαφής χρήστη δημιουργεί ελκυστικές και αισθητικές διεπαφές που συνδέονται με τους ανθρώπους.

Μετάφραση άρθρου του Don Sklecht

• Μετάφραση

Άκουγα ένα podcast χθες και παρατήρησα ότι κάποιος έκανε μια ερώτηση και στην πορεία είπε: "Παλιό θαυμαστή, τηλεφώνησε πρώτη φορά". Για κάποιο λόγο, αυτό με έκανε να σκεφτώ το Medium. Διαβάζω άρθρα εδώ για πολύ καιρό, αλλά ποτέ δεν έβαλα τα δύο σεντς μου. Σήμερα είναι η μέρα που θα αλλάξει.

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

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

Λοιπόν, είσαι έτοιμος; Όλα ξεκινούν με…

#1 Σημείο, γραμμή και σχήμα

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

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

Σημείο > γραμμή > σχήμα

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

Αλλά στα μάτια σας, αυτά τα σχήματα δεν υπάρχουν, πραγματικά, μέχρι να προσθέσετε κάτι σε αυτά...

#2 Χρώμα

Ορατό χρωματικό φάσμα

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

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

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

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

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

#3 Τυπογραφία

Από το τρίγωνο στο γράμμα Α

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

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

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

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

#4 Χώρος

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

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

Προσαρμογή του αρνητικού χώρου μεταξύ των χαρακτήρων (γνωστός και ως kerning)

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

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

Εάν μάθετε να βρίσκετε τη σωστή ισορροπία μεταξύ θετικού και αρνητικού χώρου, μπορείτε να δημιουργήσετε ...

#5 Ισορροπία, ρυθμός και αντίθεση

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

Προσαρμογή του οπτικού βάρους των λέξεων για τη δημιουργία ρυθμού και αντίθεσης

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

Υπάρχουν μερικά πράγματα που μπορούν να βοηθήσουν τον ρυθμό και την ισορροπία σας με τα οποία μπορείτε να παίξετε και εσείς...

#6 Κλίμακα

Κάνοντας το επόμενο βήμα προσαρμόζοντας την κλίμακα λέξεων

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

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

Για παράδειγμα, πάρτε μια σελίδα εφημερίδας. Ποιο είναι το μεγαλύτερο στη σελίδα;

Οι τίτλοι είναι συνήθως σύντομοι. Γιατί; Με αυτόν τον τρόπο μπορείτε να περάσετε γρήγορα τη σελίδα και να δείτε αν υπάρχει κάτι ενδιαφέρον να διαβάσετε. Έπειτα, έχουμε τις υπότιτλους, οι οποίες είναι με μικρότερη γραμματοσειρά αλλά δίνουν περισσότερες πληροφορίες για το άρθρο, και τέλος έχουμε το ίδιο το άρθρο με το μικρότερο μέγεθος γραμματοσειράς αλλά το πιο ευανάγνωστο μεγάλο κομμάτι κειμένου.

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

#7 Πλέγμα και ευθυγράμμιση

Είναι σαν αυτή η περίεργη ικανοποίηση όταν παίζεις Tetris και προσθέτεις την τελευταία γραμμή που εξαφανίζεται από την οθόνη.

Δημιουργία ορισμένης σύνδεσης μεταξύ των στοιχείων ώστε να φαίνονται πιο ισορροπημένα και ευχάριστα

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

Ακόμα κι αν σκόπιμα κάνετε ένα χαοτικό σχέδιο, πρέπει να υπάρχει τάξη σε αυτό το χάος.

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

#8 Καδράρισμα

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

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

Επαναπλαισίωση της σύνθεσης για να προσθέσετε ενδιαφέρον και ένα επιπλέον στοιχείο

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

Μετά από όλα αυτά, αν νιώθετε ότι λείπει κάτι ενδιαφέρον, μπορείτε να παίξετε με…

#9 Υφές και μοτίβα

Δοκιμή υφής με θόρυβο

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

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

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

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

Τελευταίο αλλά όχι λιγότερο σημαντικό, και στην πραγματικότητα αυτό που θεωρώ ότι είναι το ιερό δισκοπότηρο στον οπτικό σχεδιασμό είναι…

#10 Οπτική ιδέα

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

Ιδέα φωτιστικό... κλισέ, το ξέρω :)

Αυτό είναι που διαχωρίζει ένα υπέροχο σχέδιο από κάτι που μπορείτε να κατεβάσετε από το απόθεμα.

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

Εάν η ιδέα σας είναι ισχυρή, τότε θα μπορείτε να την υπερασπιστείτε και να πουλήσετε την ιδέα σε έναν πελάτη/αφεντικό ή στον οποίο θα την δείξετε.

Επίσης, ένα καλά μελετημένο σχέδιο θα ζήσει για χρόνια. Τα μοντέρνα hipster πράγματα είναι cool και cool, όπως τα μουστάκια και τα καρό πουκάμισα, αλλά έχουν ημερομηνία λήξης. Πραγματικά πιστεύω ότι το καλό design ΔΕΝ ακολουθεί τις τάσεις, αλλά τις δημιουργεί.

Τώρα τις έχετε, «μου» τις 10 αρχές για τη δημιουργία καλού σχεδιασμού. Παρόλο που θεωρώ ότι το #10 είναι το πιο σημαντικό, θα πρέπει να δώσετε προσοχή σε όλες τις άλλες αρχές και να φροντίσετε να επιτύχετε την αριστεία στην τέχνη σας. Μπορεί να έχετε μια καλή ιδέα, αλλά νομίζω ότι πρέπει επίσης να ξέρετε πώς να την εφαρμόσετε (ή να γνωρίζετε κάποιον που μπορεί να το κάνει για εσάς).

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

Εντάξει! Είναι όλο.

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

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

Μη διστάσετε να αφήσετε τα σχόλιά σας, είμαι πάντα ανοιχτός σε μια υγιή συζήτηση.

Ευχαριστώ για την ανάγνωση!

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

-- [ Σελίδα 1 ] --

Σχεδιασμός οπτικής διεπαφής

Ανεξάρτητα από το πόση προσπάθεια καταβάλλετε στην έρευνα και τη δημιουργία χρηστών

αναπτύσσοντας ένα μοντέλο συμπεριφοράς προϊόντων που συμβάλλει στην επίτευξη των στόχων τους

lei, αυτές οι δυνάμεις θα χαθούν αν αποτύχετε σωστά

κοινοποιούν τις αρχές αυτής της συμπεριφοράς στους χρήστες. Στην υπηρεσία

Σε διαδραστικά προϊόντα, αυτό γίνεται συχνά με οπτικά βοηθήματα.

εσείς - εμφανίζοντας αντικείμενα στην οθόνη (αν και σε ορισμένες περιπτώσεις

τσαγιού, η συμπεριφορά του προϊόντος πρέπει να κοινοποιείται μέσω φυσικής

φυσικές ιδιότητες, όπως το σχήμα ενός κουμπιού υλικού ή η αίσθηση αφής του).

Ο σχεδιασμός οπτικής διεπαφής είναι ένας κλάδος που συχνά παρεξηγείται λόγω των ομοιοτήτων του με το γραφικό σχέδιο και τις εικαστικές τέχνες. Συχνά ορίζεται λανθασμένα ως "ξεφλούδισμα" μιας διεπαφής. Έχουμε ακούσει ακόμη και μια διατύπωση όπως "διακοσμητικό προϊόν".

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

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

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

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

Οι σχεδιαστές, από την άλλη πλευρά, δημιουργούν αντικείμενα για άλλους ανθρώπους. Ενώ οι σύγχρονοι καλλιτέχνες ασχολούνται πρωτίστως με την αυτοέκφραση, οι σχεδιαστές, όπως σημειώνουν οι Kevin Mullet και Darrel Sano στο εξαιρετικό βιβλίο τους Designing Visual Interfaces, «είναι απασχολημένοι αναζητώντας την πιο κατάλληλη αναπαράσταση για να μεταφέρουν ορισμένες συγκεκριμένες πληροφορίες». .

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

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

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

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

Οι γραφίστες τείνουν να είναι πολύ οπτικά γνώστες και έχουν λιγότερη κατανόηση των εννοιών πίσω από τη συμπεριφορά. προϊόν λογισμικούκαι αλληλεπίδραση μαζί του. Οι ταλαντούχοι γραφίστες, επίσης έξυπνοι ψηφιακά, διαπρέπουν στη δημιουργία των πλούσιων, αισθητικά ευχάριστες, εντυπωσιακές διεπαφές που βλέπουμε στα Windows XP και Mac OS X, καθώς και στις οπτικά πλούσιες διεπαφές για παιχνίδια και εφαρμογές υπολογιστή που απευθύνονται στον απλό χρήστη. . Είναι σε θέση να δημιουργήσουν μια όμορφη και επαρκή εμφάνιση διεπαφών και επιπλέον, μπορούν να φέρουν μια εταιρική ταυτότητα στην εμφάνιση και τη συμπεριφορά ενός προϊόντος λογισμικού. Για τέτοιους επαγγελματίες, η σχεδίαση ή η σχεδίαση διεπαφής είναι πρώτα απ 'όλα τόνος, στυλ, σύνθεση, τα οποία είναι χαρακτηριστικά της μάρκας, δεύτερον - διαφάνεια και κατανοητότητα των πληροφοριών και μόνο τότε (αν πρόκειται για αυτό) - μεταφορά πληροφοριών σχετικά με τη συμπεριφορά μέσω του αναμενόμενου προορισμού (βλ. κεφάλαιο 13).

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

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

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

Κοινά αντικείμενα του σχεδιασμού πληροφοριών είναι όλα τα είδη γραφημάτων, γραφημάτων και άλλοι τρόποι εμφάνισης ποσοτικών πληροφοριών. Ο Edward Tufte έχει γράψει πολλά πρωτοποριακά βιβλία που εμβαθύνουν σε αυτό το θέμα, συμπεριλαμβανομένου του The Visual Display of Quantitative Information.

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

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

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

Δομικά στοιχεία σχεδιασμού οπτικής διεπαφής

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

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

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

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

Η αδυναμία της φόρμας ως παράγοντα αναγνώρισης αντικειμένων γίνεται εμφανής όταν κοιτάξετε το dock1 του Mac OS X όπου θα μπορούσατε κατά λάθος να καλέσετε το iTunes αντί για iDVD ή το iWeb αντί για το iPhoto. Τα εικονογράμματα έχουν διαφορετικά σχήματα, αλλά έχουν παρόμοια μεγέθη, χρώματα και υφές.

Μέγεθος Πόσο μεγάλο ή μικρό είναι το αντικείμενο σε σχέση με άλλα αντικείμενα στην οθόνη; Τα μεγαλύτερα στοιχεία προσελκύουν περισσότερη προσοχή, ειδικά αν είναι σημαντικά μεγαλύτερα από τα γύρω στοιχεία. Το μέγεθος είναι μια ταξινομημένη και ποσοτικοποιήσιμη μεταβλητή, δηλαδή, οι άνθρωποι παραγγέλνουν αυτόματα αντικείμενα κατά μέγεθος και τείνουν να τα βαθμολογούν κατά μέγεθος. εάν έχουμε κείμενο σε τέσσερα μεγέθη, υποτίθεται ότι το σχετικό είναι ένα ειδικό στοιχείο διεπαφής του λειτουργικού συστήματος Mac OS X, το οποίο

–  –  –

η σημασία του κειμένου μεγαλώνει με το μέγεθος και ότι το έντονο κείμενο είναι πιο σημαντικό από το κανονικό κείμενο.

Έτσι, το μέγεθος είναι μια χρήσιμη ιδιότητα για τον προσδιορισμό ιεραρχιών πληροφοριών. Μια επαρκής απόκλιση στο μέγεθος συνήθως προσελκύει γρήγορα την προσοχή ενός ατόμου. Ο Jacques Bertin, στο κλασικό του The Semiology of Graphics, περιγράφει το μέγεθος ως διαχωριστική ιδιότητα. Αυτό σημαίνει ότι εάν το αντικείμενο είναι πολύ μικρό ή πολύ μεγάλο, γίνεται δύσκολη η ερμηνεία άλλων μεταβλητών, όπως το σχήμα.

Φωτεινότητα Πόσο σκοτεινό ή ανοιχτό είναι το θέμα; Φυσικά, οι έννοιες του σκοταδιού και του φωτός έχουν νόημα κυρίως στο πλαίσιο της φωτεινότητας του φόντου. Σε σκούρο φόντο, το σκούρο κείμενο είναι σχεδόν αόρατο, ενώ σε ανοιχτό φόντο θα ξεχωρίζει έντονα. Όπως και με το μέγεθος, η τιμή φωτεινότητας μπορεί να είναι διαχωριστική. ας πούμε, εάν μια φωτογραφία είναι πολύ σκοτεινή ή πολύ ανοιχτή, είναι αδύνατο να διακρίνει κανείς τι έχει. Οι άνθρωποι αντιλαμβάνονται την αντίθεση εύκολα και γρήγορα, επομένως η τιμή φωτεινότητας μπορεί να γίνει καλό εργαλείοεφιστώντας την προσοχή σε εκείνα τα στοιχεία που πρέπει να τονιστούν. Η τιμή φωτεινότητας είναι επίσης μια ταξινομημένη μεταβλητή - ας πούμε, τα πιο σκούρα (χαμηλότερη φωτεινότητα) χρώματα σε έναν χάρτη ερμηνεύονται εύκολα: αντιπροσωπεύουν μεγαλύτερα βάθη ή μεγαλύτερη πυκνότητα πληθυσμού.

Χρώμα Κίτρινο, κόκκινο ή πορτοκαλί; Οι χρωματικές διαφορές προσελκύουν γρήγορα την προσοχή. Σε ορισμένους επαγγελματικούς τομείς, τα χρώματα έχουν συγκεκριμένες έννοιες, και αυτό μπορεί να χρησιμοποιηθεί. Έτσι, για έναν λογιστή, το κόκκινο είναι αρνητικά αποτελέσματα και το μαύρο είναι θετικό. Για έναν έμπορο μετοχών, το μπλε είναι ένα σήμα αγοράς και το κόκκινο είναι ένα σήμα πώλησης (τουλάχιστον στις ΗΠΑ, αυτό ισχύει). Τα χρώματα αποκτούν επίσης νόημα μέσα από τα κοινωνικά πλαίσια στα οποία μεγαλώνουμε. Για έναν Δυτικό που μεγάλωσε γύρω από τα φανάρια, το κόκκινο σημαίνει «στάση» και μερικές φορές ακόμη και «κίνδυνος», ενώ στην Κίνα το κόκκινο είναι το χρώμα της καλής τύχης. Το λευκό συνδέεται στη Δύση με την αγνότητα και την ειρήνη και στην Ασία με τις κηδείες και τον θάνατο. Ταυτόχρονα, σε αντίθεση με το μέγεθος ή τη φωτεινότητα, το χρώμα αρχικά δεν έχει την ιδιότητα της τάξης και δεν εκφράζεται ποσοτικά, επομένως απέχει πολύ από το να είναι ιδανικό για τη μετάδοση πληροφοριών αυτού του είδους. Επιπλέον, το χρώμα δεν πρέπει να γίνεται ο μόνος τρόπος μετάδοσης πληροφοριών, καθώς η αχρωματοψία είναι αρκετά συχνή.

Χρησιμοποιήστε το χρώμα με σύνεση. Για να δημιουργήσετε μια αποτελεσματική οπτικό σύστημαεπιτρέποντας στον χρήστη να εντοπίσει ομοιότητες και διαφορές

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

Κατεύθυνση Πού είναι το αντικείμενο στραμμένο - πάνω, κάτω ή πλάγια; Η κατεύθυνση είναι χρήσιμη όταν θέλετε να επικοινωνήσετε πληροφορίες προσανατολισμού (πάνω ή κάτω, προς τα εμπρός ή προς τα πίσω). Λάβετε υπόψη ότι η κατεύθυνση μπορεί να είναι δύσκολο να γίνει αντιληπτή για ορισμένα σχήματα και μικρά αντικείμενα, επομένως είναι καλύτερο να τη χρησιμοποιήσετε ως δευτερεύον χαρακτηριστικό. Έτσι, εάν θέλετε να δείξετε ότι το χρηματιστήριο έχει πέσει, μπορείτε να χρησιμοποιήσετε ένα κόκκινο βέλος που δείχνει προς τα κάτω.

Υφή Τραχιά ή λεία, μονότονη ή ανομοιόμορφη; Φυσικά, τα στοιχεία που απεικονίζονται στην οθόνη δεν έχουν πραγματική υφή, αλλά είναι σε θέση να δημιουργήσουν την εμφάνισή της. Η υφή είναι σπάνια χρήσιμη για τη μετάδοση διαφορών ή για να τραβήξει την προσοχή, επειδή απαιτεί μεγάλη προσοχή στη λεπτομέρεια. Επιπλέον, απαιτείται σημαντική ποσότητα pixel για τη μεταφορά της υφής. Ωστόσο, η υφή μπορεί να είναι μια σημαντική ένδειξη: όταν βλέπουμε μια περιοχή με υφή με καουτσούκ, υποθέτουμε ότι πρέπει να πιάσουμε τη συσκευή από αυτήν την περιοχή. Οι σειρές και οι διογκώσεις στα στοιχεία της διεπαφής χρήστη συνήθως υποδεικνύουν ότι το στοιχείο μπορεί να συρθεί και οι λοξοτομές ή οι σκιές γύρω από το κουμπί ενισχύουν την αίσθηση ότι μπορεί να γίνει κλικ.

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

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

Ένα κεφάλαιο δεν αρκεί για να καλύψει πλήρως το θέμα της σχεδίασης οπτικής διεπαφής. Ωστόσο, υπάρχουν ορισμένες σημαντικές αρχές που θα σας βοηθήσουν να δημιουργήσετε διεπαφές που είναι όσο το δυνατόν πιο ευανάγνωστες και ευχάριστες στο μάτι. Όπως ήδη αναφέρθηκε, οι Ke vin Mallet και Darrell Sano παρέχουν ένα εξαιρετικό και λεπτομερής ανάλυσηαυτές τις βασικές αρχές· θα συζητήσουμε μόνο εν συντομία μερικές από τις πιο σημαντικές αρχές σχεδιασμού οπτικής διεπαφής.

Κατά τη δημιουργία γραφικών διεπαφών, θα πρέπει:

Χρησιμοποιήστε οπτικές ιδιότητες για να ομαδοποιήσετε στοιχεία και να δημιουργήσετε μια σαφή ιεραρχία.

Δημιουργήστε μια οπτική δομή και χαράξτε μια λογική διαδρομή σε κάθε επίπεδο του οργανισμού.

Χρησιμοποιήστε ολιστικές, συνεπείς και κατάλληλες για το περιβάλλον εικόνες.

Ενσωματώστε το οπτικό στυλ με τη λειτουργικότητα με νόημα και συνέπεια.

Αποφύγετε τον οπτικό «θόρυβο» και την ακαταστασία.

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

Χρήση οπτικών ιδιοτήτων για ομαδοποίηση στοιχείων και δημιουργία καθαρής ιεραρχίας Γενικά, είναι λογικό να ομαδοποιούνται λογικά σύνολα λειτουργικών ή πληροφοριακών στοιχείων μέσω οπτικών ιδιοτήτων, όπως το χρώμα ή τα χωρικά χαρακτηριστικά. Εφαρμόζοντας με συνέπεια αυτές τις οπτικές ιδιότητες στη διεπαφή, μπορείτε να δημιουργήσετε μοτίβα που οι χρήστες σας θα μάθουν γρήγορα να αναγνωρίζουν. Για παράδειγμα, στα Windows XP, όλα τα κουμπιά είναι κυρτά, με στρογγυλεμένες γωνίες και πεδία κειμένουορθογώνιο, ελαφρώς πιεσμένο, με λευκό φόντο και μπλε περίγραμμα. Χάρη στη συστηματική χρήση αυτής της εικόνας, είναι αδύνατο να συγχέουμε το κουμπί και το πεδίο εισαγωγής, παρά ορισμένες ομοιότητες.

–  –  –

Όταν κοιτάζει οποιοδήποτε σύνολο οπτικών στοιχείων, ο χρήστης ρωτά ασυνείδητα, "Τι ενδιαφέρει εδώ;" – και σχεδόν αμέσως: «Ποια είναι η σχέση μεταξύ αυτών των αντικειμένων;» Θα πρέπει να προσπαθήσουμε να διασφαλίσουμε ότι η διεπαφή περιέχει την απάντηση και στις δύο ερωτήσεις.

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

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

Φυσικά, η ρύθμιση αυτών των ιδιοτήτων θα πρέπει να γίνεται με προσοχή. Μην κάνετε το πιο σημαντικό στοιχείο τεράστιο, κόκκινο και διογκωμένο. Συχνά αρκεί να αλλάξετε μόνο μία από τις ιδιότητες. Εάν διαπιστωθεί ότι δύο στοιχεία διαφορετικής σημασίας συναγωνίζονται για την προσοχή του χρήστη, η ενεργοποίηση της ασφάλειας του λιγότερο σημαντικού είναι καλύτερη λύση από το να προσπαθείτε να «ανάψετε» το πιο σημαντικό. Αυτό θα σας δώσει περισσότερο χώρο για να εστιάσετε στα πιο σημαντικά στοιχεία. (Ακολουθεί μια καλή αναλογία: αν όλες οι λέξεις σε μια σελίδα είναι με έντονο κόκκινο χρώμα, ξεχωρίζει κάποια από τις λέξεις;) Η δημιουργία μιας σαφούς οπτικής ιεραρχίας είναι ένα από τα τα πιο δύσκολα καθήκονταστον σχεδιασμό οπτικής διεπαφής, η επίλυσή του απαιτεί δεξιότητα και ταλέντο. Οι χρήστες δύσκολα παρατηρούν μια ποιοτική οπτική ιεραρχία, αλλά η απουσία της και η προκύπτουσα σύγχυση είναι άμεσα εμφανείς.

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

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

Τα στοιχεία που χωρίζονται από μεγάλες αποστάσεις μπορούν να ομαδοποιηθούν μέσω κοινών οπτικών ιδιοτήτων, δημιουργώντας ένα μοτίβο που τελικά θα αποκτήσει ένα δικό του νόημα για τους χρήστες. Έτσι, η χρήση του όγκου για τη δημιουργία μιας αίσθησης του φυσικού αναμενόμενου προορισμού είναι ίσως η μεγαλύτερη αποτελεσματική μέθοδοςΔιαχωρίστε τα στοιχεία ελέγχου από δεδομένα και στοιχεία φόντου (Δείτε το Κεφάλαιο 13 για περισσότερες αναμενόμενες αναθέσεις.) Αυτή η στρατηγική χρησιμοποιείται συχνά στη σχεδίαση εικονιδίων. Το Mac OS X χρησιμοποιεί φωτεινά χρώματα για εικονίδια εφαρμογών και αμυδρά χρώματα για βοηθητικά προγράμματα που χρησιμοποιούνται σπάνια.

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

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

Αρχές σχεδιασμού οπτικής διεπαφής

Το τεστ Squint Υπάρχει ένας καλός τρόπος για να βεβαιωθείτε ότι ο οπτικός σχεδιασμός κάνει αποτελεσματική χρήση της ιεραρχίας και των σχέσεων—οι σχεδιαστές το ονομάζουν αυτό το τεστ στραβισμού. Κλείστε το ένα μάτι και κοιτάξτε την οθόνη με το άλλο σας μάτι στραβο. Προσέξτε ποια στοιχεία προεξέχουν πολύ, ποια έχουν γίνει ασαφή και ποια έχουν συνδυαστεί σε ομάδες. Αυτή η διαδικασία συχνά αποκαλύπτει προβλήματα που δεν είχαν παρατηρήσει προηγουμένως στο σχεδιασμό της διεπαφής.

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

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

Στοίχιση και Πλέγμα Η στοίχιση οπτικών στοιχείων είναι μια από τις κύριες τεχνικές που επιτρέπει σε έναν σχεδιαστή να παρουσιάσει ένα προϊόν στους χρήστες με δομημένο και οργανωμένο τρόπο. Τα ομαδοποιημένα στοιχεία πρέπει να ευθυγραμμίζονται τόσο οριζόντια όσο και κάθετα (Εικ. 14.1.) Γενικά, κάθε στοιχείο στην οθόνη πρέπει να ευθυγραμμίζεται με όσο το δυνατόν περισσότερα άλλα στοιχεία. Η άρνηση ευθυγράμμισης δύο στοιχείων ή δύο ομάδων στοιχείων πρέπει να είναι συνειδητή: αυτό επιτρέπεται μόνο για να επιτευχθεί ένα συγκεκριμένο διαχωριστικό αποτέλεσμα. Μεταξύ άλλων, οι σχεδιαστές πρέπει να προσέχουν:

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

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

342 Κεφάλαιο 14. Οπτικός σχεδιασμός διεπαφών Εικ. 14.1. Adobe Lightroomχρησιμοποιεί πολύ αποτελεσματικά την ευθυγράμμιση με το πλέγμα σύνθεσης. Το κείμενο, τα λειτουργικά στοιχεία και οι ομάδες ελέγχου ευθυγραμμίζονται πολύ καλά σε ένα πλέγμα σταθερού βήματος. Θα πρέπει να σημειωθεί ότι η συμπλήρωση των στοιχείων ελέγχου και των ετικετών των στοιχείων της ομάδας προς τα δεξιά μπορεί να αποτρέψει τη γρήγορη ανάγνωσή τους.

Ευθυγράμμιση στοιχείων που χωρίζονται με ομάδες και πίνακες.

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

Το πλέγμα είναι ένα από τα πιο ισχυρά εργαλεία του οπτικού σχεδιαστή, που κερδίζει γρήγορα δημοτικότητα στα χρόνια μετά τον Β' Παγκόσμιο Πόλεμο χάρη στους ελβετικούς εκτυπωτές. Το πλέγμα παρέχει ομοιομορφία και συνέπεια στη δομή της σύνθεσης, κάτι που είναι ιδιαίτερα σημαντικό κατά το σχεδιασμό μιας διεπαφής με πολλά επίπεδα οπτικής ή λειτουργικής πολυπλοκότητας. Αφού οι σχεδιαστές αλληλεπίδρασης καθορίσουν τη συνολική υποδομή μιας εφαρμογής και τα στοιχεία διεπαφής χρήστη της (βλ. Κεφάλαιο 7), οι σχεδιαστές διεπαφής πρέπει να οργανώσουν τη σύνθεση σε μια δομή πλέγματος που να δίνει έμφαση σε σημαντικά στοιχεία και δομές και να αφήνει χώρο για λιγότερο σημαντικά στοιχεία και στοιχεία χαμηλότερου επιπέδου .

Κατά κανόνα, το πλέγμα χωρίζει την οθόνη σε πολλές μεγάλες οριζόντιες και κάθετες περιοχές (Εικ. 14.2).

Αρχές σχεδιασμού οπτικής διεπαφής

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

Στην ιδανική περίπτωση, το πλέγμα θα πρέπει επίσης να ορίζει τις αναλογίες των διαφόρων περιοχών της οθόνης. Τέτοιοι λόγοι εκφράζονται συνήθως ως κλάσματα. Τα κοινά κλάσματα περιλαμβάνουν τη διάσημη "χρυσή αναλογία" (που συμβολίζεται με το ελληνικό γράμμα "φι" και ισούται με περίπου 1,62), η οποία βρίσκεται συχνά στη φύση και θεωρείται ιδιαίτερα ευχάριστη για το ανθρώπινο μάτι. το αντίστροφο της τετραγωνικής ρίζας των δύο (περίπου 1:1,41), που αποτελεί τη βάση του διεθνούς προτύπου για το μέγεθος χαρτιού (για παράδειγμα, φύλλο Α4). και 4:3, η αναλογία διαστάσεων των περισσότερων οθονών υπολογιστών.

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

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

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

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

Η χρήση πλέγματος στο σχεδιασμό οπτικής διεπαφής παρέχει μια σειρά από πλεονεκτήματα:

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

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

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

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

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

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

Οι αποκλειστικές εφαρμογές συνήθως δεν έχουν συμμετρία ανώτατου επιπέδου (επιτυγχάνουν ισορροπία μέσω ενός λεπτού πλέγματος), αλλά τα καλά σχεδιασμένα στοιχεία διεπαφής σε τέτοιες εφαρμογές είναι σχεδόν σίγουρα συμμετρικά σε κάποιο βαθμό (Εικόνα 14.5).

346 Κεφάλαιο 14 Οπτικός σχεδιασμός διεπαφών 14.4. Διαγώνια συμμετρία μέσα στο πλαίσιο διαλόγου Κουκκίδες και αρίθμηση της εφαρμογής Microsoft Word. Ο άξονας συμμετρίας εκτείνεται από κάτω αριστερά προς τα πάνω δεξιά. 14.5. Κάθετη συμμετρία στο Macromedia Fireworks Tool Palette Αρχές σχεδίασης οπτικής διεπαφής Χρήση ολιστικών, συνεπών και κατάλληλων εικόνων για το περιβάλλον Η χρήση εικονιδίων και άλλων οπτικών στοιχείων μπορεί να βοηθήσει τον χρήστη να κατανοήσει τη διεπαφή ή, αντίθετα, να ενοχλήσει, να μπερδέψει ή ακόμα και να προσβάλει εάν τα εικονίδια είναι κακώς επιλεγμένα. Είναι πολύ σημαντικό οι σχεδιαστές να κατανοούν ποιο μήνυμα υποτίθεται ότι θα μεταφέρει το πρόγραμμα στον χρήστη και ποιο μήνυμα περιμένει να λάβει ο χρήστης. Η καλή κατανόηση των χαρακτήρων και των νοητικών τους μοντέλων συνήθως παρέχει μια σταθερή βάση για τις γλώσσες διασύνδεσης κειμένου και οπτικής επαφής. Οι πολιτιστικές πτυχές παίζουν επίσης ρόλο. Οι σχεδιαστές θα πρέπει να γνωρίζουν ότι το χρώμα έχει διαφορετικές σημασίες σε διαφορετικούς πολιτισμούς (στην Κίνα, το κόκκινο δεν θεωρείται προειδοποιητικό χρώμα), καθώς και οι χειρονομίες (το μπράβο θεωρείται πολύ προσβλητική χειρονομία στην Τουρκία) και τα σύμβολα (το οκτάγωνο ορίζει ένα σταματούν στις ΗΠΑ, αλλά σε λίγες άλλες χώρες). Επιπλέον, θα πρέπει να γνωρίζετε χρωματικούς κωδικούςαποδεκτή σε διάφορους τομείς της ανθρώπινης δραστηριότητας. Για παράδειγμα, στα νοσοκομεία, το κίτρινο υποδηλώνει ακτινοβολία, ενώ το κόκκινο χρησιμοποιείται συνήθως σε απειλητικές για τη ζωή καταστάσεις. Στο τερματικό του χρηματιστηρίου, το κόκκινο είναι ένα σήμα για πώληση. Πριν ξεκινήσετε, βεβαιωθείτε ότι κατανοείτε την οπτική γλώσσα της βιομηχανίας και της κουλτούρας των χρηστών σας.

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

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

Ο σχεδιασμός και η σχεδίαση των εικονογραμμάτων είναι μια εντελώς ανεξάρτητη περιοχή. Η δημιουργία κατανοητών εικόνων σε χαμηλή ανάλυση απαιτεί πολύ χρόνο και εξάσκηση - είναι καλύτερο να αναθέσετε αυτήν την εργασία σε έμπειρους σχεδιαστές. Τα εικονογράμματα είναι ένα περίπλοκο θέμα για κατανόηση, επομένως θα επισημάνουμε μόνο μερικά σημαντικά βασικά σημεία εδώ. Για όσους αναγνώστες θέλουν να μάθουν περισσότερα σχετικά με τη χρήση των εικονιδίων, αναφερόμαστε έντονα στο The Icon Book του William Horton. Τα παραδείγματα σε αυτό το βιβλίο μπορεί να φαίνονται παρωχημένα, αλλά οι βασικές αρχές εξακολουθούν να είναι σχετικές.

Εικονίδια συναρτήσεων Ο σχεδιασμός εικονιδίων που αντιπροσωπεύουν λειτουργίες ή λειτουργίες που εκτελούνται σε αντικείμενα είναι πρόκληση αλλά διασκεδαστικό.

Η κύρια δυσκολία έγκειται στην αναπαράσταση αφηρημένων εννοιών σε μια εικονογραφική, οπτική γλώσσα. Σε τέτοιες περιπτώσεις, είναι καλύτερο να βασίζεστε σε ιδιωματισμούς παρά να βρίσκετε εικόνες που κανείς δεν καταλαβαίνει και να τους παρέχετε συμβουλές εργαλείων (βλ. Κεφάλαιο 23) ή λεζάντες.

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

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

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

Ομαδοποιήστε τα σχετικά χαρακτηριστικά οπτικά, είτε χωρικά είτε, ελλείψει αυτού, χρησιμοποιώντας χρώμα ή άλλα οπτικά μέσα.

Δημιουργήστε απλά εικονογράμματα. αποφύγετε περιττές λεπτομέρειες.

Χρησιμοποιήστε ξανά στοιχεία όπου είναι δυνατόν, ώστε ο χρήστης να τα μάθει μια για πάντα.

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

Αρχές σχεδιασμού οπτικής διεπαφής

–  –  –

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

Απόδοση εικονογραμμάτων και συμβόλων Καθώς διευρύνονται οι γραφικές δυνατότητες των έγχρωμων οθονών, αυξάνεται και ο πειρασμός να αποδώσετε τα εικονογράμματα και τα σύμβολα με ολοένα μεγαλύτερη λεπτομέρεια, σχεδόν φωτορεαλιστικά. Ωστόσο, αυτή η τάση τελικά δεν ανταποκρίνεται στους στόχους του χρήστη, ειδικά σε επαγγελματικές εφαρμογές. Τα εικονογράμματα πρέπει να παραμένουν απλά και σχηματικά, με ελάχιστο χρώμα και σκίαση, και να διατηρούν το μέτριο μέγεθός τους. ΣΤΟ Windows Vistaκαι Mac OS X, έχουν γίνει βήματα προς μια πιο λεπτομερή αναπαράσταση των εικονιδίων. Παρόλο που τέτοια εικονίδια φαίνονται εντυπωσιακά, τραβούν αδικαιολόγητα την προσοχή στον εαυτό τους και σε μικρό μέγεθος εμφανίζονται άσχημα - δηλαδή είτε καταλαμβάνουν πολύ ακριβό χώρο στην οθόνη είτε είναι δυσανάγνωστα. Επιπλέον, αναγκάζουν τον προγραμματιστή να παραμελήσει την οπτική συνοχή των στοιχείων στη διεπαφή, καθώς πολύ λίγα χαρακτηριστικά (κυρίως αυτά που σχετίζονται με το υλικό) μπορούν να αναπαρασταθούν επαρκώς από συγκεκριμένες φωτορεαλιστικές εικόνες. Τα φωτογραφικά εικονογράμματα μοιάζουν μόνο με δακτυλογραφημένο κείμενο κεφαλαία γράμματα; οι διακρίσεις μεταξύ τους δεν είναι ξεκάθαρες και είναι εύκολο να μπερδευτείς. Τα εικονίδια αναγνωρίζονται πιο εύκολα από τους χρήστες από το σχήμα τους, αλλά στην περίπτωση του Mac OS X, τα περιγράμματα όλων των εικονιδίων είναι εξίσου θολά. Η διεπαφή Mac OS X είναι γεμάτη φωτορεαλισμό που αποσπά την προσοχή των χρηστών και δεν λειτουργεί προς όφελός τους (Εικ. 14.6).

Οπτικοποίηση συμπεριφοράς Αντί να περιγράφετε τα αποτελέσματα των λειτουργιών στη διεπαφή μόνο με λέξεις (ή, χειρότερα, να μην δίνετε καμία περιγραφή), δείξτε στον χρήστη ποια θα είναι τα αποτελέσματα. Για το σκοπό αυτό, χρησιμοποιήστε οπτικά στοιχεία. Αυτή η τεχνική δεν πρέπει να συγχέεται με τη χρήση εικονιδίων σε στοιχεία ελέγχου που αντιπροσωπεύουν τις αναμενόμενες εκχωρήσεις. Εκτός από το κείμενο που περιγράφει μια ρύθμιση ή κατάσταση, συμπεριλάβετε μια εικόνα ή ένα διάγραμμα που περιγράφει τη συμπεριφορά. Αν και η οπτικοποίηση είναι συνήθως 350 Κεφάλαιο 14. Σχεδιασμός οπτικής διεπαφής Εικ. 14.6. Φωτορεαλιστικά εικονίδια στο Mac OS X. Αυτό το επίπεδο λεπτομέρειας μειώνει μόνο τα λειτουργικά και πληροφοριακά στοιχεία. Επίσης, εάν σε ορισμένες περιπτώσεις δικαιολογείται η λεπτομέρεια γνωστών αντικειμένων, τι νόημα έχουν οι λεπτομερείς εικόνες άγνωστων αντικειμένων ή αφηρημένων εννοιών (όπως ένα δίκτυο υπολογιστών); Πόσοι χρήστες έχουν δει "γυμνό" HDD(άκρο δεξιά); Τελικά, ο χρήστης πρέπει να πλοηγηθεί στις ετικέτες για να κατανοήσει τα εικονογράμματα που χρειάζεται και δεν καταλαμβάνει συχνά επιπλέον ακίνητα στην οθόνη· η ικανότητά του να μεταδίδει το νόημα ξεκάθαρα αξίζει τα pixel. Η Microsoft έκανε αυτή την ανακάλυψη πριν από μερικά χρόνια και από τότε παράθυρα διαλόγου(ιδιαίτερα στο Microsoft Word) είναι γεμάτα οπτικά στοιχεία που συμπληρώνουν τις περιγραφές κειμένου των στοιχείων ελέγχου. Φωτογραφείο και άλλα γραφικές εφαρμογέςέχουν δείξει από καιρό στον χρήστη τα αποτελέσματα των λειτουργιών με τη μορφή μικρογραφιών.

Επικοινωνήστε οπτικά τη λειτουργία και τη συμπεριφορά στους χρήστες.

Το πλαίσιο διαλόγου Προεπισκόπηση στο Microsoft Word (Εικ. 14.7) δείχνει πώς θα φαίνεται το εκτυπωμένο έγγραφο, λαμβάνοντας υπόψη το καθορισμένο μέγεθος χαρτιού και τα περιθώρια. Πολλοί χρήστες δεν έχουν ιδέα για το πώς φαίνεται ένα αριστερό περιθώριο 1,2 ιντσών και η Προεπισκόπηση τους το δείχνει ξεκάθαρα. Η Microsoft θα μπορούσε να προχωρήσει ακόμη περισσότερο και να οργανώσει την άμεση εισαγωγή σε αυτό το παράθυρο διαλόγου. Στη συνέχεια, οι χρήστες θα μπορούσαν να σύρουν το περίγραμμα του αριστερού περιθωρίου και να παρακολουθήσουν την αλλαγή της αριθμητικής τιμής στον αντίστοιχο μετρητή. Το πεδίο αριθμητικής εισαγωγής που σχετίζεται με ένα τέτοιο στοιχείο ελέγχου δεν χάνει τη σημασία του, δεν μπορεί να αντικατασταθεί πλήρως από ένα οπτικό στοιχείο. Το πεδίο εισαγωγής δείχνει τις ακριβείς τιμές των παραμέτρων και το οπτικό πεδίο δείχνει την τελική εμφάνιση της σελίδας.

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

Αρχές σχεδιασμού οπτικής διεπαφής

Ρύζι. 14.7. Λειτουργία προεπισκόπησηστο Microsoft Word δείχνει την οπτική έκφραση των λειτουργιών της εφαρμογής. Αυτή η δυνατότητα δεν απαιτεί από τον χρήστη να προσπαθήσει να φανταστεί πώς θα μοιάζει ένα κουτί 1,2 ιντσών, αλλά καθιστά εύκολο να δει τι αποτελέσματα θα έχει μια συγκεκριμένη τιμή των στοιχείων. Δεν θέλετε η διεπαφή να μοιάζει σαν κάποιος να την άλειψε βιαστικά με μπογιά, σωστά; Πρέπει να βεβαιωθείτε ότι οι λειτουργικές πτυχές του GUI του προγράμματος είναι σε απόλυτη αρμονία με το συνολικό οπτικό στυλ της επωνυμίας του προϊόντος σας. Η συμπεριφορά του προγράμματος αποτελεί μέρος της επωνυμίας και η εμπειρία του χρήστη με το προϊόν πρέπει να αντικατοπτρίζει την ισορροπία μορφής, περιεχομένου και συμπεριφοράς.

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

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

Επωνυμία, Εμπειρία Καταναλωτή και Εμπειρία Χρήστη Οι περισσότερες επιτυχημένες εταιρείες επενδύουν πολλά στη δημιουργία και τη διατήρηση των επωνυμιών τους. Μια εταιρεία που καλλιεργεί τη δική της επωνυμία μπορεί να υπαγορεύει την τιμή των προϊόντων της ενώ ενθαρρύνει ηθικά την πίστη των καταναλωτών. Η μάρκα είναι δείκτης της υψηλής ποιότητας ενός προϊόντος και προϋποθέτει ότι ο χρήστης θα το προτιμήσει με βάση το δικό του γούστο.

Με την απλούστερη έννοια της λέξης, μια επωνυμία είναι το άθροισμα όλων των αλληλεπιδράσεων που έχουν οι άνθρωποι με μια συγκεκριμένη εταιρεία. Καθώς οι αλληλεπιδράσεις λαμβάνουν χώρα όλο και περισσότερο μέσω καναλιών που βασίζονται στην τεχνολογία, δεν αποτελεί έκπληξη το γεγονός ότι οι προσπάθειες των εταιρειών να δημιουργήσουν "επώνυμες" διεπαφές είναι μεγαλύτερες από ποτέ. Εάν ο στόχος είναι η συνεχής και θετική αλληλεπίδραση με τον καταναλωτή, τότε τα λεκτικά, οπτικά και συμπεριφορικά (συμπεριφορικά) μηνύματα της επωνυμίας πρέπει να είναι συνεπή και συνεπή. Για παράδειγμα, εάν ένας καταναλωτής προσπαθεί να μάθει τις τιμές των υπηρεσιών DSL στην περιοχή του και διαπιστώσει ότι δεν υπάρχουν χρήσιμες πληροφορίες στον ιστότοπο της τηλεφωνικής εταιρείας (ακόμα και μετά από μεγάλη προσπάθεια να τις βρει), φεύγει με πλήρη εμπιστοσύνη ότι η εταιρεία η ίδια - η εγκατάσταση είναι αγενής και δυσάρεστη. Κανένα σχέδιο στον κόσμο δεν θα σας σώσει από αυτό. Το ίδιο ισχύει και για άλλα κανάλια: εάν ένα άτομο δεν λάβει τις απαντήσεις που χρειάζεται, τότε δεν έχει σημασία ότι η φωνή του υπολογιστή ακούγεται φιλική, το σύστημα δέχεται φωνητική εισαγωγή, και ο εκπρόσωπος υποστήριξης ολοκληρώνει τη συνομιλία με τις καλύτερες ευχές.

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

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

Αρχές σχεδιασμού οπτικής διεπαφής

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

Παρόμοιες εργασίες:

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

«Vladimir Petrovich Morozov The Art and Science of Communication: Non-Verbal Communication From the Editor Το βιβλίο που προσφέρεται στους αναγνώστες είναι η δεύτερη, διορθωμένη και συμπληρωμένη έκδοση της παλαιότερα δημοσιευμένης μονογραφίας του συγγραφέα «Non-verbal Communication in the System of Verbal Communication. Ψυχοφυσιολογικές και ψυχοακουστικές βάσεις. ”-M .: Εκδ. IPRAN, 1998. Συγγραφέας της μονογραφίας είναι ο καθηγητής V.P. Ο Μορόζοφ είναι πολύ γνωστός στους κύκλους των ερευνητών του λόγου ως ο πιο έγκυρος ειδικός στο μη λεκτικό και ιδιαίτερα στο ... "

«Roman Ingarden STUDIES IN AESTHETICS Μετάφραση από τα πολωνικά από τους A. Ermilov and B. Fedorov Foreign Literature Publishing House, Μόσχα 1962 ΠΕΡΙΕΧΟΜΕΝΑ: Πρόλογος. 5 [παραλείπεται στην ψηφιοποίηση] Δισδιάστατη δομή λογοτεχνικού έργου. 2 Η σχηματική φύση ενός λογοτεχνικού έργου. 40 Το λογοτεχνικό έργο και η συγκεκριμενοποίησή του. 72 Σχετικά με τη διαφορετική κατανόηση της αλήθειας («αλήθεια») σε ένα έργο τέχνης. 92 Για τη διαφορετική γνώση ενός λογοτεχνικού έργου. 114 Αισθητική εμπειρία...»

«Alexander Fedorov «Υπέρ» και «κατά»: Κινηματογράφος και Σχολείο Αυτή η δημοφιλής επιστημονική δημοσίευση αναλύει την πρακτική εμπειρία πολλών ετών εργασίας της σχολικής σχολής κινηματογράφου. Αυτή είναι μια εκτεταμένη έκδοση (με προσθήκες του 2002) του βιβλίου "Υπέρ" και "κατά", που εκδόθηκε από τον εκδοτικό οίκο της Μόσχας VBPK το 1987. Ο συγγραφέας είναι ο Alexander Viktorovich Fedorov, Ph.D. 1. Πριν…»

«ΑΣΤΡΑΧΑΝ ΔΕΛΤΙΟ ΠΕΡΙΒΑΛΛΟΝΤΙΚΗΣ ΕΚΠΑΙΔΕΥΣΗΣ № 2 (32) 2015. Σελ. 74-89 UDC 639.212.053.7:639.271.2 (262.81) THE SIGNIFICANCE OF NATURAL SORNING AND ARTICIAL STUDIO FARMING IN THE Formation OF THE CASPIAN SEACK STUDIO FARMING IN THE FORMATION OF THE CASPIAN SEACK STUDIO FINACIAL OF THE CASPIAN SEACKSTUDIOSTUDIO FINACIAL OF FIFA [email προστατευμένο]Εκκολαπτήρια οξύρρυγχων, τόποι ωοτοκίας, μεταναστεύσεις ωοτοκίας, μπελούγκα, ρωσικός οξύρρυγχος, αστρικός οξύρρυγχος, αναλογία φυσικών και...»

«Ομοσπονδιακό Κρατικό Προϋπολογιστικό Εκπαιδευτικό Ίδρυμα Ανώτατης Επαγγελματικής Εκπαίδευσης «Τσελιάμπινσκ Κρατική Ακαδημία Πολιτισμού και Τεχνών» ΜΟΥΣΕΙΟ ΔΕΛΤΙΟ Τεύχος 18 Chelyabinsk UDC 069 LBC 79.1 M89 Συντακτική Επιτροπή: Aleshko E. N., Grevtseva G. Ya., V.Ya., Lushnikov L. S., Terekhov A. N. Museum Bulletin / Κρατική Ακαδημία Πολιτισμού και Τεχνών του Τσελιάμπινσκ. συνθ. N. V. Ovchinnikova. - Chelyabinsk, 2015. - Τεύχος. 18. - 184 σ., έγχρωμο. συμπεριλαμβανομένου...."

«ΠΙΝΑΚΑΣ ΠΕΡΙΕΧΟΜΕΝΩΝ ΕΙΣΑΓΩΓΗ .......... 5 ΒΑΛΒΙΔΑ ΕΞΑΤΜΙΣΗΣ ΩΣ ΛΕΙΤΟΥΡΓΙΚΟ ΣΤΟΙΧΕΙΟ 1. ΤΕΧΝΗΤΟΣ ΠΝΕΥΜΟΝΙΚΟΣ ΑΝΕΜΙΣΤΗΡΑΣ. 11 Ταξινόμηση των αναπνευστήρων 1.1 ....... 11 Γενικό σχήμα της δομής των αναπνευστήρων 1.2 ...... 14 Ανάλυση των τύπων σχεδιασμού της βαλβίδας εκπνοής 1.3 .. 15 Γενικές Προϋποθέσειςστη βαλβίδα εκπνοής με βάση την ανάλυσή της 1.4. λειτουργικός σκοπός ...... 19 Η λειτουργία εξοικονόμησης της αυθόρμητης αναπνευστικής δραστηριότητας 1.4.1. ασθενής......... 19..."

"ΜΙΚΡΟ. Garanina Sergei Mikhailovich Prokudin-Gorsky SERGEI MIKHAILOVICH PROKUDIN-GORSKY PROKUDIN-GORSKY Svetlana Garanina Svetlana Garanina Καθηγήτρια, Τμήμα Επιστημών του Βιβλίου, Κρατικό Πανεπιστήμιο Πολιτισμού και Τεχνών της Μόσχας1 Πολιτισμού και Τεχνών S.M. S. M. Prokudin-Gorsky. Πορτρέτο στούντιο. Λονδίνο. πορτρέτο στούντιο. Λονδίνο. Δεκαετία 1910 ή 1920. Από το οικογενειακό αρχείο. Δεκαετία 1910 ή 1920. Από..."

«Πίνακας περιεχομένων 1. Απεριόριστη ελευθερία της Θείας ψυχής (εισαγωγή).2 2. Το στέμμα του τραγουδιστή, το αγκάθινο στεφάνι (σελίδες ζωής και δημιουργικής διαδρομής)...5 2.1. Μέσα από τα μάτια των συγχρόνων..9 2.2. Ποιητής-πολεμιστής..10 2.3. Θα 'ρθει η ματωμένη ώρα, και θα πέσω (Τραγική μονομαχία).11 3. Η συνεννόηση των λόγων των ζωντανών..12 3.1. Στίχοι..14 3.1.1. "Μποροντίνο" ..17 3.2. Ποιήματα..17 3.3. Πεζογραφία..18 3.3.1. Το μυθιστόρημα "Ένας ήρωας της εποχής μας"

«Δωρεάν Λίστα Περιεχομένου Αρ. Δωρεάν Πρόσβαση Συλλογών στη Συλλογή Γεωγραφίας Lan Publishing EBS Lan Publishing. Πρόσβαση στη Συλλογή Ιστορίας Τέχνης Lan Publishing EBS Lan Publishing. Δικαίωμα πρόσβασης στη συλλογή. Jurisprudence Publishing House Lan EBS Publishing House Lan. Πρόσβαση στη συλλογή Ψυχολογία. Εκδοτικός Οίκος Pedagogy Lan EBS Publishing House Lan. Πρόσβαση στη συλλογή Κοινωνικών και Ανθρωπιστικών Επιστημών Lan Publishing EBS Lan Publishing. Πρόσβαση στη συλλογή Γλωσσολογία και...»

"ΡΕ. J. Schwartz The Art of Thinking Big The Magic of Thinking Big Εκδότης: Popurri, 2007 Χαρτόδετο, 304 σελίδες ISBN 978-985-15-0037-2, 0-671-64678 Κυκλοφορία: 6000 αντίτυπα. Μορφή LdGray: 84x108/ Εκδότης The Art of Thinking Big έχει βοηθήσει εκατομμύρια ανθρώπους να βελτιώσουν τη ζωή τους. Ο συγγραφέας του, ο Δρ David Schwartz, ένας από τους πιο διάσημους ειδικούς στον τομέα των κινήτρων, θα σας βοηθήσει να εργαστείτε καλύτερα, να διαχειριστείτε καλύτερα, να κερδίσετε περισσότερα λεφτάΚαι το πιο σημαντικό, νιώσε...

"Δημοτικό ίδρυμα πρόσθετης εκπαίδευσης" Παιδική Καλλιτεχνική Σχολή Νο. 3 "Περιφέρεια Lyubertsy της περιοχής της Μόσχας ΑΥΤΟΕΞΕΤΑΣΗ προς την κατεύθυνση της δραστηριότητας για το 2014 Σύμφωνα με τον Ομοσπονδιακό Νόμο" για την εκπαίδευση στο Ρωσική Ομοσπονδία"(όπως τροποποιήθηκε στις 23/07/2013). Μέρος 1 του άρθ. 29. Μέρος 2 του Άρθ. 30, η διαδικασία για τη διενέργεια αυτοεξέτασης από εκπαιδευτικό οργανισμό, που εγκρίθηκε με εντολή του Υπουργείου Παιδείας και Επιστημών της Ρωσικής Ομοσπονδίας της 14.06.2013 αριθ. 462, με εντολή του Υπουργείου Παιδείας και Επιστημών της Ρωσικής Ομοσπονδίας 10.12.2014. Νο. 1324, MU DO "Παιδικό Σχολείο Τεχνών ..."

«ΔΗΜΟΣΙΑ ΕΚΘΕΣΗ ΜΒΔΟΥ Αρ. 79 Ενότητα Ι. Γενικά χαρακτηριστικά ιδρύματος 1. Είδος, είδος, κατάσταση: Δημοτικό προϋπολογισμό προσχολικής εκπαίδευσης γενικού αναπτυξιακού τύπου με δραστηριότητες προτεραιότητας σε έναν από τους τομείς ανάπτυξης παιδιών Νο. 79 2. Άδεια για εκπαιδευτικές δραστηριότητες Σειρά RO Αρ. 042931 Αριθμός εγγραφής Αρ.

«Περίληψη Αυτή η εργασία αποφοίτησης είναι αφιερωμένη στη βελτιστοποίηση της περιοχής κάλυψης της ψηφιακής τηλεοπτικής και ραδιοφωνικής εκπομπής στο Aktau. Στην τελική εργασία εξετάζονται τα ακόλουθα θέματα: περιγραφή προτύπων ψηφιακή τηλεόραση(DVB, ATSC και ISDB), περιγραφή ενός δικτύου μονής συχνότητας και επιλογή εξοπλισμού για την κατασκευή ενός τηλεοπτικού δικτύου Πραγματοποιήθηκαν οι ακόλουθοι υπολογισμοί: υπολογισμός της έντασης πεδίου με αναλυτική μέθοδο. Υπολογισμός της έντασης του πεδίου από τις καμπύλες διάδοσης. Υπολογισμός ζώνης Fresnel; μελέτη της ακτίνας της περιοχής κάλυψης·...»

"Υπουργείο Πολιτισμού της Ρωσικής Ομοσπονδίας Ομοσπονδιακό Κρατικό Δημοσιονομικό Εκπαιδευτικό Ίδρυμα Ανώτατης Επαγγελματικής Εκπαίδευσης "Chelyabinsk State Academy of Culture and Arts" ΕΚΘΕΣΗ σχετικά με την αυτοεξέταση του Ομοσπονδιακού Κρατικού Προϋπολογισμού Εκπαιδευτικού Ιδρύματος Ανώτατης Επαγγελματικής Εκπαίδευσης "Chelyabinsk State Academy of Culture and Arts " (από την 1η Απριλίου 2015) Τσελιάμπινσκ 2015 Περιεχόμενα 1. Γενικές πληροφορίες για το εκπαιδευτικό ... "

«Τσαρλς Γουίλιαμ Μόρις Θεμέλια της Θεωρίας των Σημείων Nemo autem vereri debet ne characterum contemplatio nos a rebus abducat, imo contra ad intima rerum ducet. Gottfried Leibniz (Κανείς δεν πρέπει να φοβάται ότι η παρατήρηση των ζωδίων θα μας οδηγήσει μακριά από τα πράγματα: αντίθετα, μας οδηγεί στην ουσία των πραγμάτων. - Gottfried Leibniz (λατ.)) I. ΕΙΣΑΓΩΓΗ. ΣΗΜΕΙΩΤΙΚΗ ΚΑΙ ΕΠΙΣΤΗΜΗ Οι άνθρωποι είναι τα υψηλότερα έμβια όντα που χρησιμοποιούν σημάδια. Φυσικά, όχι μόνο οι άνθρωποι, αλλά και τα ζώα αντιδρούν σε κάποια πράγματα ως σημάδια κάτι…».

«ISSN 1997-4558 ΠΑΙΔΑΓΩΓΙΚΗ ΤΗΣ ΤΕΧΝΗΣ http://www.art-education.ru/AE-magazine № 4, 2014 ΑΝΤΙΛΗΨΗ ΤΩΝ ΚΑΛΩΝ ΤΕΧΝΩΝ ΚΑΙ ΤΗΣ ΜΟΥΣΙΚΗΣ ΣΤΗΝ ΠΝΕΥΜΑΤΙΚΗ ΑΝΑΠΤΥΞΗ ΤΩΝ ΠΑΙΔΙΩΝ ΚΑΙ ΣΤΗΝ ΑΝΤΙΛΗΨΗ ΜΟΥΣΕΙΟ STOLYAROV BORIS ANDREEVICH STOLYAROV BORIS ANDREEVICH Διδάκτωρ Παιδαγωγικής, Καθηγητής, Προϊστάμενος του Τμήματος "Ρωσικό Κέντρο Μουσειακής Παιδαγωγικής και Παιδικής Δημιουργικότητας" FGBUK "State ..."

"ΥΠΟΥΡΓΕΙΟ ΕΚΠΑΙΔΕΥΣΗΣ ΚΑΙ ΕΠΙΣΤΗΜΗΣ ΤΗΣ ΡΩΣΙΑΣ Ομοσπονδιακό Κρατικό Αυτόνομο Εκπαιδευτικό Ίδρυμα Ανώτατης Εκπαίδευσης "Νότιο Ομοσπονδιακό Πανεπιστήμιο" Ακαδημία Αρχιτεκτονικής και Τεχνών Τμήμα Ιστορίας Αρχιτεκτονικής, Τέχνης και Αρχιτεκτονικής Αποκατάστασης Nino Samvelovna Yesoyan ARCHITECTURE OF THE M4700. .01 (270100) Αρχιτεκτονική επιστημονικός σύμβουλος- Αναπλ. Buchka Alexander Mikhailovich Κριτής - Αναπλ. κ.αρχ. Karpova Maria Alexandrovna Rostov-on-Don - 2015 Η εργασία έγινε στις...»

«Το μέλλον μας ανοίγει τις πιο μεγαλειώδεις προοπτικές. Γιατί έχει ήδη φτάσει η ώρα για την έναρξη της μεγάλης κυκλικής επιστροφής στη μυστικιστική σκέψη. Από όλες τις πλευρές είμαστε περιτριγυρισμένοι από τα νερά του ωκεανού της παγκόσμιας επιστήμης - τις επιστήμες της αιώνιας ζωής, γεμάτες με τους ξεχασμένους βυθισμένους θησαυρούς των περασμένων γενεών. Ε.Π. Blavatsky H.P. BLAVATSKAYA WORKSHOP OFF OCCULT TRAINING _ Συντάχθηκε από την E. A. Logaeva Μετάφραση από τα αγγλικά: V. S. Zueva, V. I. Myznikov, T. I. Perebailova, T. O. Sukhorukova, Yu. .."

C O L L O Q U I A | | ISSN 1822-3737 EVGENIY DOBRENKO Σοσιαλιστικός ρεαλισμός και πραγματικός σοσιαλισμός (σοβιετική αισθητική και κριτική και η παραγωγή της πραγματικότητας) Περίληψη: Η σοβιετική τέχνη δεν είναι η τέχνη της «αλήθειας» (όπως τοποθετήθηκε) ή του «ψέματος» (όπως περιγράφεται στο Σοβιετολογία, μεταναστευτικοί και αντιφρονούντες λόγοι). Είναι πέρα ​​από την επαλήθευση και εκτελεί τις λειτουργίες όχι της «αντανακλάσεως της πραγματικότητας», αλλά της αποπραγματοποίησης της ζωής για τον μετέπειτα μετασχηματισμό και αντικατάστασή της. Το..."

2016 www.site - "Δωρεάν ηλεκτρονική βιβλιοθήκη - Βιβλία, εκδόσεις, εκδόσεις"

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

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

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

Γιατί οι ισορροπημένοι ιστότοποι φαίνονται καλοί

Υποσυνείδητα αγαπάμε την ισορροπία. Η αγάπη για τις βιώσιμες δομές είναι εγγενής σε μας σε υποσυνείδητο επίπεδο, η ανισορροπία, αντίθετα, προκαλεί ένα αίσθημα απόρριψης.
Έτσι, η οπτική ισορροπία είναι το κλειδί για την επιτυχημένη σχεδίαση. Είναι αυτή η επιπλέον σπίθα που έχουν ορισμένοι ιστότοποι και άλλοι όχι. Ως πρόσθετο πλεονέκτημα, η ισορροπημένη σχεδίαση συνδυάζεται καλά με τη λειτουργικότητα.

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

Τύποι ισορροπίας

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

Οριζόντια ισορροπία

Κάθετη ισορροπία

Radial Balance

Συμμετρική ισορροπία

Ασύμμετρη ισορροπία

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

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

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

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

Πώς ξέρετε ποιος τύπος ισορροπίας θα ήταν σωστό να χρησιμοποιήσετε τώρα; Γενικά, η συμμετρία είναι συνήθως πιο εύκολα αντιληπτή. Γι' αυτό είναι πιο διαδεδομένο στο σχεδιασμό.

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

Για συμμετρία, είναι καλύτερο να χρησιμοποιείτε περιεχόμενο περίπου των ίδιων τμημάτων, διασκορπισμένα σε όλη τη διάταξη

Στην ασυμμετρία, είναι καλύτερο να τραβήξετε την προσοχή σε ένα συγκεκριμένο σημείο, μη ισορροπώντας το βλέμμα του θεατή.

ιδιότητες ισορροπίας

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

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

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

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

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

Τοποθεσία

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

Πώς να προσθέσετε υπόλοιπο στον ιστότοπο

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

Σύγχρονες τάσειςκαι προσεγγίσεις για την ανάπτυξη Ιστού

Μάθετε τον αλγόριθμο για γρήγορη ανάπτυξη από την αρχή στη δημιουργία ιστοσελίδων

Τα μεγάλα αντικείμενα είναι βαρύτερα από τα μικρά

Τα σκοτεινά αντικείμενα είναι βαρύτερα από τα ανοιχτόχρωμα.

Τα κορεσμένα χρώματα είναι πιο βαριά από τα ξεθωριασμένα

Όσο πιο παχύ είναι το περίγραμμα, τόσο πιο βαρύ είναι

Όσο περισσότερη υφή, τόσο πιο βαρύ είναι το αντικείμενο με αυτό

Εκτός από τον οριζόντιο τύπο ισορροπίας, μην ξεχνάτε τον κατακόρυφο και τον ακτινωτό

Τα ζεστά φωτεινά χρώματα όπως το πορτοκαλί και το κόκκινο είναι πιο βαριά από τα ψυχρά χρώματα (μπλε, πράσινο)

Κανόνας τρίτων

Στις εικαστικές τέχνες, υπάρχει κάτι όπως ο κανόνας των τρίτων - αυτό συμβαίνει όταν ο χώρος εργασίας χωρίζεται νοερά σε 9 ίσα μέρη από 2 κάθετες και 2 οριζόντιες γραμμές. Έτσι, σύμφωνα με αυτόν τον κανόνα, τα κύρια κέντρα σύνθεσης θα πρέπει να βρίσκονται στη διασταύρωση αυτών των γραμμών.

Λοιπόν, πώς να χωρίσετε τη διάταξη σε 9 ίσα μέρη;

1. Φανταστείτε ότι ολόκληρος ο χώρος εργασίας είναι ένα κανονικό ορθογώνιο

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

3. Το ίδιο και για το οριζόντιο εξάρτημα

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

Παραδείγματα με επεξηγήσεις

Στην τοποθεσία MacAllan Ridge, βλέπετε την ασύμμετρη διάταξη μπλοκ. Ωστόσο, το ογκώδες μπλοκ με μια εικόνα εξισορροπείται από τα βαριά όρια του μπλοκ μενού. Αρκετά κοινή πράξη εξισορρόπησης.

9 απαντήσεις

εδώ είναι το κόλπο μου, ελπίζω να βοηθήσει. /

καταρχήν να διευκρινίσω σχέδιοκαι ανάπτυξη

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

ανάπτυξηείναι η ανάπτυξη μιας τελικής προδιαγραφής/ιδέας (τουλάχιστον θεωρητικά) ή κάτι που έχει νόημα και είναι κοντά σε αυτό που ψάχνεις (αν και σε πολλές περιπτώσεις δεν είναι) βασικά η μετατροπή του σχεδίου/ιδέας σου σε τελικό εργασίας προϊόν

Σημείωσηότι και τα δύο πράγματα μπορούν και στις περισσότερες περιπτώσεις να συνυπάρχουν δίπλα-δίπλα στην παραγωγή ενός προϊόντος

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

από την κατανόησή μου και από όσα έχω μάθει όλα αυτά τα χρόνια,

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

οπτικό σχέδιο(δεν ισχύει για το πεδίο) - η έννοια / η κατανόηση της αισθητικής έλξης και του αντίκτυπου του θέματος με το οποίο ένα άτομο αλληλεπιδρά / κοιτάζει

Σχεδιασμός ιστοσελίδων(για ένα συγκεκριμένο πεδίο) - μια ιδέα/κατανόηση μιας ιδέας που είναι συγκεκριμένη για την(τις) τεχνολογία(ες) και περιλαμβάνει πτυχές πολλών σχεδιαστικών εννοιών όπως, ενδεικτικά: σχεδιασμός αλληλεπίδρασης, οπτικός σχεδιασμός, σχεδιασμός διεπαφής χρήστη, χρήστης σχεδιασμός διεπαφής κ.λπ. .δ.

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

διεπαφή χρήστη(κάποια ειδικά για το πεδίο) - η έννοια του σχεδιασμού μιας διεπαφής μέσω της οποίας ένας χρήστης μπορεί να αλληλεπιδράσει με ένα προϊόν, μια τεχνογνωσία σε ένα λογισμικό/εφαρμογή Ιστού ή ένα τιμόνι σε ένα αυτοκίνητο

ανάπτυξη διεπαφής χρήστη(δεν ισχύει για το πεδίο) είναι η διαδικασία μετατροπής μιας ιδέας σχεδιασμού διεπαφής χρήστη σε διεπαφή εργασίας που δημιουργεί μια φυσική σύνδεση μεταξύ ατόμων και προϊόντος.

ελπίζω αυτό να βοηθήσει

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

Ορισμένοι ή όλοι οι παραπάνω κλάδοι αποτελούν μέρος των παρακάτω πεδίων:
Αρχιτεκτονική όταν σχετίζεται με κτίρια
Εσωτερική διακόσμηση όταν σχετίζεται με εσωτερικούς χώρους
Βιομηχανικό σχέδιο που σχετίζεται με υλικά αντικείμενα
Γραφιστική που σχετίζεται με κείμενο και εικόνες
Σχεδιασμός εφαρμογής που σχετίζεται με ψηφιακές εισόδους/εξόδους
Σχεδιασμός ιστοσελίδων που σχετίζεται με το πρόγραμμα περιήγησης

Κατασκευή αλληλεπίδρασης - Ερευνητική οντότητα, ορίζει την ΑΛΛΗΛΕΠΙΔΡΑΣΗ/ΜΗΝΥΜΑ του συστήματος/εφαρμογής. Visual Design - Ο καλλιτέχνης που απεικονίζει γραφικά μπορεί να είναι web media/print media/.tc Σχεδιασμός Ιστού - Καλλιτέχνης ΑΛΛΑ για ΕΦΑΡΜΟΓΗ WEB μόνο UX Design - Ερευνητικό προσωπικό που κατανοεί τα πάντα και όλους από την ΠΛΕΥΡΑ ΧΡΗΣΤΗ και ακολουθεί την εμπειρία HAPPY/SMILEY EXPERIENCE UI Design - Ίδιο με το Web Design UI Development - Frontend Developer - HTML, CSS, JS, JQuery, Ajax, YUI, Php, Silverlight.net.etc.tc. Οποιαδήποτε τεχνολογία διεπαφής.

Επιτρέψτε μου να το οργανώσω με απλό/απλό τρόπο UX DESIGN INTERACTIVE DESIGN INTERFACE USER /WEB/VISUAL DESIGN UI DEVELOPMENT

Η απάντησή μου σε αυτή την ερώτηση:

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

Παράδειγμα προσέγγισης: Είναι ένα στρογγυλό κουμπί κατάλληλο για το κοινό-στόχο μας ή ένα τετράγωνο;

Σχεδιασμός >και σχεδιασμός διεπαφής χρήστησημαίνει αισθητική αντίληψη. Η μόνη διαφορά μεταξύ του Visual Design και του UI Design είναι ότι το πρώτο είναι πιο ολοκληρωμένο, περιλαμβάνει τα πάντα, από κουμπιά, εικονίδια και διατάξεις έως αφίσες, ενώ το δεύτερο δεν περιλαμβάνει banner, εστιάζοντας κυρίως σε εικονίδια/κουμπιά/ θεματική πλευρά της εφαρμογής.

Σχεδιασμός UXπαρόμοια με την έννοια του "Interaction Design", αλλά είναι πιο "σκληροπυρηνική" από αυτή την άποψη, περιγράφοντας μια λογική προσέγγιση στη χρηστικότητα, όπως η λογική αρχιτεκτονική ενός ιστότοπου, που καθορίζεται από τις ανάγκες του χρήστη. Είναι η διαδικασία σχεδιασμού, προβολής και πλαισίωσης, δημιουργίας χαρακτηριστικών και παροχής συστήματος, και ο σχεδιασμός αλληλεπίδρασης είναι ένα άλλο βήμα.

Τελικά, UXσχετίζεται με την έννοια των σκίτσων και του wireframe, UIολοκληρώνει τη σχεδίαση αναλόγως (προσθέτοντας ένα θέμα, ασφαλείς γραμματοσειρές στο διαδίκτυο και παλέτα χρωμάτων) και η ανάπτυξη διεπαφής χρήστη είναι η διαδικασία αναδημιουργίας του σχεδίου κατά την κωδικοποίηση.

Μπορείτε να διαβάσετε περισσότερα για αυτό στο Interaction Foundation: https://www.interaction-design.org/literature?ep=mb

Το πραγματικό πρόβλημα που πρέπει να λύσουμε είναι η διαφορά μεταξύ UI, αλληλεπίδρασης και UX.

Εδώ είναι μια άλλη ΠΑΓΚΟΣΜΙΑ ΠΡΩΤΗ ΣΕ ΒΑΘΟΣ ΣΥΖΗΤΗΣΗ σχετικά με τέτοιες διαφορές.

(1) UI σημαίνει πώς ο χρήστης «βλέπει» το σύστημα/εφαρμογή και πώς το σύστημα/η εφαρμογή «μιλάει» στον χρήστη. Εμφάνισηεφαρμογές, μέγεθος, διάταξη, χρώματα, γραμματοσειρές, οθόνη, όπως ο φωτισμός καταστήματος, ύψος και πλάτος ραφιού, πλάτος και μήκος νησίδας κ.λπ.

(2) Αλληλεπίδραση σημαίνει πώς ο χρήστης «ενεργεί» στο σύστημα/εφαρμογή και πώς το σύστημα/η εφαρμογή «ενεργεί» στον χρήστη. Εδώ δανείζομαι πολλά από το The Art of Interaction Design: A Selfish and Illuminating Guide to Building Successful Software του Chris Crawford.

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

Το άτομο/η εφαρμογή απλώς ακούει. Τότε δεν είναι διαδραστικό, π.χ. καταγραφικό, βιβλίο, τοίχος

Το άτομο/η εφαρμογή απλώς μιλάει. Τότε δεν είναι διαδραστικό, π.χ. ραδιόφωνο, παλιά τηλεόραση, CD player παλιάς εποχής

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

(3) UX Με δεδομένη την ίδια διεπαφή και την ίδια αλληλεπίδραση, θα έχουμε το ίδιο UX; Μπορούν να αλλάξουν καθόλου;

για παράδειγμα. Ας υποθέσουμε ότι υπάρχει μια μηχανή αναζήτησης που λειτουργεί ακριβώς όπως το Google. Αλλά "αισθάνεστε" ή "υποψιάζεστε" ότι αυτή η νέα μηχανή αναζήτησης συλλέγει πάρα πολλά από τα προσωπικά σας δεδομένα.

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

μερίδιο