12 Multimedia Design Iii

Τυπογραφικός Σχεδιασμός Εντύπων & Τυπογραφικός Σχεδιασμός Εντύπων & Εφαρμογών πολυμέσωνΕφαρμογών πολυμέσων

Εκπαιδευτής Ανδρέας Κόλλιας

15.01.2010

Ι.Ε.Κ. ΧΑΛΚΙΔΑΣ

ΕΛΛΗΝΙΚΗ ΔΗΜΟΚΡΑΤΙΑ

ΟΡΓΑΝΙΣΜΟΣ ΕΠΑΓΓΕΛΜΑΤΙΚΗ ΕΚΠΑΙΔΕΥΣΗΣ ΚΑΙ ΚΑΤΑΡΤΙΣΗΣ

Κεφάλαιο Κεφάλαιο 33ºº::Σχεδίαση εφαρμογής

πολυμέσων

3

Ολοκλήρωση και Διανομή

Ανάλυση Απαιτήσεων

Σχεδίαση

Υλοποίηση

Φάσεις ανάπτυξης εφαρμογής πολυμέσων Φάσεις ανάπτυξης εφαρμογής πολυμέσων (καταρράκτης)(καταρράκτης)

4

Σχεδίαση εφαρμογής πολυμέσωνΣχεδίαση εφαρμογής πολυμέσων

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

1. Λειτουργική Σχεδίαση.– Σχεδιάζεται η δομή της εφαρμογής.

– Περιγράφεται η διεπαφή και οι λειτουργίες που επιτελεί.

– Λαμβάνονται αποφάσεις για το περιεχόμενο της.

Έντυπο Λειτουργικής Σχεδίασης (ΕΛΣ)

2. Τεχνική Σχεδίαση.– Καταρτίζεται ένα λεπτομερές σχέδιο της εφαρμογής.

Έντυπο Τεχνικής Σχεδίασης (ΕΤΣ)

5

Περιορισμοί από την ανάλυσηΠεριορισμοί από την ανάλυση

Απαιτήσεις που πρέπει να ικανοποιηθούν:1. Λειτουργικά χαρακτηριστικά.

2. Κόστος.

3. Τεχνικά χαρακτηριστικά.

Οι κυριότεροι παράγοντες που επηρεάζουν τη σχεδίαση:– Τεχνικοί και οικονομικοί πόροι.

– Οι απαιτήσεις του πελάτη.

– Οι τελικοί χρήστες.

6

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

Κατηγοριοποίηση περιεχομένου

Επιλογή μοντέλου πλοήγησης Σχεδίαση δομής

Επιλογή στοιχείων πολυμέσων

Σχεδίαση διεπαφής

Δημιουργία πρωτοτύπου

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

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

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

Θα πρέπει να διευκολύνει την πλοήγηση και να ακολουθεί το ύφος της εφαρμογής.

Αντικατοπτρίζει όλες τις παραπάνω σχεδιαστικές αποφάσεις.

7

Λειτουργικό σχέδιοΛειτουργικό σχέδιο

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

Το καλό “Λειτουργικό σχέδιο” έχει τα εξής χαρακτηριστικά: Ακολουθεί και ικανοποιεί τις απαιτήσεις που περιγράφονται από τη φάση

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

τεχνικούς όρους. Περιγράφει όλες τις πιθανές λειτουργίες της εφαρμογής με αρκετή

λεπτομέρεια. Καταγράφει όλα τα στοιχεία πολυμέσων και τον τρόπο που θα

χρησιμοποιηθούν.

Λειτουργική σχεδίαση

8

Έντυπο Λειτουργικής Σχεδίασης Έντυπο Λειτουργικής Σχεδίασης (ΕΛΣ)(ΕΛΣ)

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

Θέματα που εντάσσονται: Αρχιτεκτονική του συστήματος. Βιβλιοθήκες λογισμικού. Αλγόριθμοι.


9

Καταγραφή αρχικών ιδεώνΚαταγραφή αρχικών ιδεών

Παρουσίαση του πως φαντάζεται ο καθένας το τελικό προϊόν.

Η ομάδα απαρτίζεται από:– Το διαχειριστή του έργου.

– Το σχεδιαστή.

– Τους δημιουργούς στοιχείων πολυμέσων.

– Τον προγραμματιστή.

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

– Την παρουσίαση, δηλαδή τη διεπαφή της εφαρμογής.


10

Επιλογή περιεχομένουΕπιλογή περιεχομένου

Η ποιότητα του περιεχομένου επηρεάζεται από τα εξής:– Βάθος.

Ο βαθμός λεπτομέρειας στον οποίο το περιεχόμενο εξετάζει ένα θέμα.

– Εύρος. Η έκταση στην οποία το περιεχόμενο καλύπτει ένα συγκεκριμένο θέμα.

– Καταλληλότητα. Η σωστή ή όχι επιλογή του περιεχομένου σε σχέση με το κοινό που απευθύνεται.

Η επιλογή του περιεχομένου είναι εργασία η οποία:– Για μικρές εφαρμογές μπορεί να γίνει με συνεργασία σχεδιαστή και πελάτη.

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


11

Κατηγοριοποίηση περιεχομένουΚατηγοριοποίηση περιεχομένου

Βοηθάει στην οργάνωση του περιεχομένου.

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

Προσεγγίσεις για την κατηγοριοποίηση του περιεχομένου:– Αναγωγική:

Ξεκινάει από την αρχή και συνέχεια βελτιώνει (Top – Down approach).– Επαγωγική:

Ξεκινάει από το τέλος και συνέχεια κάνει αφαιρέσεις (Bottom-Up approach).

– Υβριδική: Ξεκινάει παράλληλα και από την αρχή και από το τέλος


12

ΠαράδειγμαΠαράδειγμα

Υλοποίηση μιας εφαρμογής τουριστικού οδηγού:

1. Καταγραφή κατηγοριών πληροφόρησης.

2. Δημιουργία αρχικού καταλόγου πληροφοριών.

3. Αναμόρφωση καταλόγου πληροφοριών.

4. Δημιουργία αναλυτικού καταλόγου πληροφοριών.

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


13

Δόμηση εφαρμογήςΔόμηση εφαρμογής

Η σχεδίαση της δομής της εφαρμογής γίνεται με βάση κάποια δομή πλοήγησης.

Βασικές δομές πλοήγησης στις εφαρμογές πολυμέσων:1. Γραμμική δομή.

2. Δενδροειδής δομή.

3. Δομή γράφου.

4. Υβριδική δομή.


14

ΠαράδειγμαΠαράδειγμαΛειτουργική σχεδίαση

ΑυτοκίνητοΜηχανικά Μέρη

Κινητήρας

Κιβώτιο Ταχυτήτων

Ανάρτηση

Πλαίσιο

Αμάξωμα

ΧειριστήριαΤιμόνι

Γκάζι

Φρένο

Συμπλέκτης

Υπόλοιπα Χειριστήρια

ΕξοπλισμόςΚλιματισμός

ABS

Ραδιοκασετόφωνο

Αυτοματισμοί

Άλλα στοιχεία εξοπλισμού

15

1.1. Γραμμική δομήΓραμμική δομή

Αποτελεί μια αλληλουχία από οθόνες

Η παρέμβαση του χρήστη περιορίζεται μόνο στο ποια θα είναι η αμέσως επόμενη / προηγούμενη οθόνη.

Η μετάβαση από οθόνη σε οθόνη γίνεται είτε χειροκίνητα, είτε αυτόματα με χρήση χρονοδιαδρόμου (timeline)

Αυτοκίνητο Κινητήρας Ανάρτηση Φρένα Αμάξωμα Εξοπλισμός

Απεικόνιση απλής γραμμικής δομής


16

2.2. Δενδροειδής δομήΔενδροειδής δομήΞεκινάει από έναν αρχικό κόμβο (ρίζα) και εκτείνεται μέχρι να φτάσει σε κάποιους τελικούς κόμβους (φύλλα).

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

Εκτείνεται σε βάθος ή σε πλάτος.

Αυτοκίνητο

Μηχανικά Μέρη Εξοπλισμός

ΑμάξωμαΠλαίσιοΚινητήρας ΚλιματισμόςΡάδιοABS Αυτοματισμοί

Χειριστήρια

ΣυμπλέκτηςΦρένοΓκάζι ΆλλαΤιμόνι

Απεικόνιση δενδροειδούς δομής


17

Έκταση σε βάθος ή σε πλάτοςΈκταση σε βάθος ή σε πλάτος

Έκταση σε βάθος:– Υπάρχουν πολλά διαδοχικά επίπεδα

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

– Πολλά ενδιάμεσα στάδια μέχρι την ανάκτηση πληροφορίας που βρίσκεται σε χαμηλό επίπεδο.

Έκταση σε πλάτος:– Δεν χρειάζεται να περάσεις από πολλά στάδια

για να φτάσεις στην επιθυμητή πληροφορία.– Συγκέντρωση πολλών θεμάτων στην ίδια

οθόνη. Δυσκολότερη σχεδίαση της διεπαφής. Σύγχυση του χρήστη.

Απεικόνιση έκτασης σε βάθος

Απεικόνιση έκτασης σε πλάτος


18

3.3. Δομή γράφου (ή δικτυακή μορφή)Δομή γράφου (ή δικτυακή μορφή)• Υπάρχουν συνδέσεις από και προς κάθε κόμβο.

• Παρουσιάζει πλήρη ευελιξία.

• Επιτρέπει στον χρήστη να επιλέξει ο ίδιος την πορεία που θα ακολουθήσει.

• Είναι το μοντέλο που υιοθετούν εφαρμογές υπερκειμένων / υπερμέσων.

• Εφαρμόζεται ευρύτατα στον παγκόσμιο ιστό.

Σχήμα δομής γράφου


19

4.4. Υβριδική δομήΥβριδική δομήΣυνδυασμός όλων των προηγούμενων δομών.

Σχήμα υβριδικής δομής


20

Σενάριο πλοήγησης εφαρμογήςΣενάριο πλοήγησης εφαρμογής

• Παρέχει εικόνα σχετικά με την οργάνωση του περιεχομένου της εφαρμογής

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

• Κάθε πιθανή πορεία καθορίζει και από ένα σενάριο πλοήγησης.

• Μία τεχνική η οποία μπορεί να περιγράψει σενάρια πλοήγησης είναι τα διαγράμματα ροής.


21

Διαγράμματα ροής (Διαγράμματα ροής (flowchartsflowcharts))

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

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

που περιέχουν.

Λύση: Χρήση προσδιοριστικής ετικέτας.

• Είναι σκόπιμο να υπάρχει ένας βαθμός ιεράρχησης και τμηματοποίησης.


22

Ιστοριοπίνακας ή πινάκιο εξιστόρησης Ιστοριοπίνακας ή πινάκιο εξιστόρησης ((storyboardstoryboard))

Αναπαριστά ακολουθιακά τμήματα της εφαρμογής πολυμέσων

Χρησιμοποιεί: Κείμενο. Γραφικές αναπαραστάσεις.

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

Παρέχει γενική εικόνα και όχι ακριβή.


23

ΠαράδειγμαΠαράδειγμαΙστοριοπίνακας για την εισαγωγική παρουσίαση τουΙστοριοπίνακας για την εισαγωγική παρουσίαση του

Τουριστικού ΟδηγούΤουριστικού Οδηγού

24

Επιλογή στοιχείων πολυμέσωνΕπιλογή στοιχείων πολυμέσων

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

Περιορισμοί:– Τεχνικοί, οικονομικοί κ.α.

– Απαιτήσεις του πελάτη (Απαίτηση συγκεκριμένων στοιχείων)

– Χωρητικότητα του μέσου διανομής

Μπορούν να χρησιμοποιηθούν με δύο τρόπους μέσα στην εφαρμογή:1. Ως τμήμα του περιεχομένου της εφαρμογής (content media)

• Π.χ. αφηγήσεις, διαγράμματα, φωτογραφίες κ.α.

2. Ως στοιχεία περιβάλλοντος (environment media)

• Π.χ. αναπαραγωγή ήχου με την επιλογή ενός εικονιδίου κ.α.


25

ΚείμενοΚείμενο

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

Πρέπει να χαρακτηρίζεται από: Συντομία.

Ο χρήστης εντυπωσιάζεται με τα άλλα πολυμεσικά στοιχεία (εικόνα, ήχος, βίντεο) και όχι με το κείμενο.

Σαφήνεια. Λογική δομή.

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


26

ΉχοςΉχοςΜπορεί να περιέχει:

– Μουσική (π.χ. ορχηστικά έργα, τραγούδια κ.α.).

– Ομιλία (π.χ. αφήγηση κειμένου κ.α.).

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

Μπορεί να πάρει τις εξής μορφές μέσα στην εφαρμογή:– Αυτόνομο κομμάτι.– Ήχος σε συνδυασμό με άλλα μέσα.

Συνοδεία κάποιου κειμένου.

Παράγοντες επιτυχημένης χρήσης ήχου:– Ηχητική ποιότητα.– Κατάλληλη διάρκεια.– Συγχρονισμός με άλλα μέσα.– Ύφος αντίστοιχο με το θέμα που παρουσιάζεται.– Ρυθμός αφήγησης.


27

ΕικόναΕικόναΜπορεί να εξυπηρετεί τους εξής στόχους:

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

Κατηγορίες εικόνας:– Φωτογραφίες.– Σχήματα και διαγράμματα.– Γραφιστικές συνθέσεις.

Παράγοντες επιτυχημένης χρήσης εικόνας:– Ποιότητα εικόνας.– Καταλληλότητα σε σχέση με το κοινό– Ύφος και αισθητική.– Συνέπεια σε σχέση με το συνοδευτικό κείμενο.


28

Βίντεο & Συνθετική κίνησηΒίντεο & Συνθετική κίνηση

Εξυπηρετεί τους εξής σκοπούς:– Την επεξήγηση διαδικασιών.

Π.χ. Η λειτουργία μιας μηχανής.

– Την παρουσίαση οδηγιών χρήσης. Π.χ. Ο τρόπος λειτουργίας ενός πακέτου λογισμικού.

– Την παρουσίαση χώρων ή τόπων. Π.χ. Αποσπάσματα που δείχνουν τα αξιοθέατα μιας πόλης.

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

– Τη διαφήμιση προϊόντων.

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

– Πλεονεκτεί στο ότι ο παραγωγός έχει απόλυτο έλεγχο στη μορφή και την κίνηση των αντικειμένων.


29

Σχεδίαση διεπαφής χρήστηΣχεδίαση διεπαφής χρήστη

Η σχεδίαση της διεπαφής αφορά σε δυο βασικά θέματα:– Την εμφάνιση του περιεχομένου.

– Την πλοήγηση του χρήστη μέσα στην εφαρμογή

Η προσπάθεια για καλύτερη σχεδίαση θα πρέπει να εστιάσει στα εξής:– Την αισθητική.

– Την εργονομία


30

Βασικές αρχές σχεδίασης διεπαφήςΒασικές αρχές σχεδίασης διεπαφής

Η διεπαφή θα πρέπει:– Να κάνει την εφαρμογή πιο ελκυστική.

– Να μην αποσπά την προσοχή του χρήστη από το περιεχόμενο.

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

– Να μην αλλάζει τον τρόπο με τον οποίο έχει συνηθίσει να χρησιμοποιεί τον υπολογιστή.

– Να του παρέχει ικανό βαθμό λειτουργικότητας.

– Να παρουσιάζει το περιεχόμενο με το σωστό τρόπο και το σωστό σημείο.

– Να είναι πρωτότυπη.

– Να διατηρεί το ενδιαφέρον του.

– Να του επιτρέπει να παρεμβαίνει και να επιλέγει ο ίδιος πώς θα δει την πληροφορία.


31

Διάταξη οθόνηςΔιάταξη οθόνηςΘα πρέπει να χαρακτηρίζεται από τους εξής παράγοντες:

1. Ισορροπία.• Η θέση που έχει κάθε στοιχείο στην οθόνη, καθώς και το οπτικό βάρος καθενός από αυτά.

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

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

2. Σωστές αναλογίες.• Η θέση των αντικειμένων σε σχέση με τα άκρα τις οθόνης και οι αποστάσεις μεταξύ τους.

3. Απλότητα.• Ομαδοποίηση αντικειμένων που έχουν κάποια κοινά στοιχεία μεταξύ τους.

4. Προσεγμένη παράταξη των αντικειμένων.• Πρέπει να μπορούν να καθοδηγήσουν το μάτι του χρήστη σε μια ορισμένη πορεία μέσα

στην εφαρμογή (οπτικό βάρος, μορφή και χρώμα στοιχείων).

5. Συνοχή (Ενότητα).• Προσδίδεται με τη χρήση κοινού φόντου, μίας σταθερής γραμματοσειράς και κοινου ύφους

για όλα τα στοιχεία.


32

Το κείμενο στην οθόνηΤο κείμενο στην οθόνηΜειωμένη αναγνωσιμότητα λόγω φωτεινότητας και αστάθειας της οθόνης.

Για βελτίωση της αναγνωσιμότητας θα πρέπει να υιοθετηθούν οι εξής κανόνες μορφοποίησης:

Χρήση κεφαλαίων και πεζών γραμμάτων. Χρήση γραμματοσειρών χωρίς ουρές (Arial ή Tahoma στα Windows και

GrHelvetica στα Macintosh). Επιλογή κατάλληλου μεγέθους γραμματοσειράς. Χρήση κουκίδων ή αρίθμησης. Εμπλουτισμός του κειμένου με εικονίδια. Χωρισμός σε παραγράφους με ενιαίο θεματικό περιεχόμενο. Χρήση στηλοθετών (tabs). Χρήση κειμένου σε μορφή πίνακα. Χρήση έντονων, πλάγιων ή υπογραμμισμένων γραμμάτων. Χρήση χρωμάτων – αντιθέσεων.


33

Χρώμα – ΚείμενοΧρώμα – Κείμενο

34

Χρήση χρώματοςΧρήση χρώματος

35

Χρώμα και ΈννοιεςΧρώμα και Έννοιες

36

ΠαράδειγμαΠαράδειγμαμη σωστής αντιστοιχίας χρωμάτωνμη σωστής αντιστοιχίας χρωμάτων

• Το STOP είναι με πράσινο χρώμα.

• Στο “ΝΑΙ” και “ΟΧΙ” γίνεται αντιστροφή των χρωμάτων.

37

Το κόκκινο αντικείμενο δίνει την αίσθηση ότι βρίσκεται σε μικρότερη απόσταση από ό,τι το μπλε.

ΠαράδειγμαΠαράδειγμακουραστικού συνδυασμού χρωμάτωνκουραστικού συνδυασμού χρωμάτων

38

• Καθιστά το κείμενο μη αναγνώσιμο.

ΠαράδειγμαΠαράδειγμαδυσκολίας στην εστίασηδυσκολίας στην εστίαση

39

Κανόνες για την αποδοτική χρήση του Κανόνες για την αποδοτική χρήση του χρώματοςχρώματος

• Σχεδιάστε πρώτα την οθόνη σε ασπρόμαυρο και προσθέστε χρώμα εκ των υστέρων.

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

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

• Μη χρησιμοποιείτε το ίδιο χρώμα για διαφορετικές λειτουργίες.

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

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

• Χρησιμοποιείτε το πολύ πέντε διαφορετικά χρώματα.

• Χρησιμοποιείτε χρώματα υψηλού κορεσμού και φωτεινότητας.

• Χρησιμοποιείτε το ίδιο βασικό χρώμα για να ομαδοποιήσετε στοιχεία που σχετίζονται μεταξύ τους.

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

40

Αρχές παρουσίασης περιεχομένουΑρχές παρουσίασης περιεχομένου

Η αποδοτική χρήση του περιεχομένου πρέπει να ακολουθεί τους εξής κανόνες:

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

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

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

της εφαρμογής. Διατηρήστε το ύφος της εφαρμογής σταθερό. Παρουσιάστε τις έννοιες με σαφήνεια και συντομία.


41

Θέματα εργονομίας στην εμφάνιση Θέματα εργονομίας στην εμφάνιση

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

Θέματα εργονομία: Συνέπεια. Ανάδραση. Πληροφόρηση. Οργάνωση. Ομαδοποίηση. Τήρηση συμβάσεων. Εύκολη πρόσβαση Παροχή βοήθειας.


42

ΣυνέπειαΣυνέπεια

• Στη μορφή των χειριστηρίων.– Διατήρηση ενιαίου ύφους χειριστήρια για την εκτέλεση διάφορων

λειτουργιών.

• Στη θέση τους.– Διατήρηση της θέσης των χειριστηρίων για διευκόλυνση των χρηστών.

• Στον τρόπο λειτουργίας τους.– Διατήρηση της λειτουργίας του κάθε χειριστηρίου.


43

Παροχή ανάδρασης στο χρήστηΠαροχή ανάδρασης στο χρήστη

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

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

• Δίνει ζωντάνια στην εφαρμογή.

• Η απόκριση μπορεί να γίνει με τη χρήση διάφορων μέσων (εικόνα, ήχος κ.α.)

• Η υπερβολική χρήση κάνει κουραστική την εφαρμογή.


44

Πληροφόρηση σχετικά με λειτουργίεςΠληροφόρηση σχετικά με λειτουργίες

• Δύσκολη η αναγνώριση της ακριβής λειτουργίας της κάθε διεπαφής.

• Χρήση μικρής λεζάντας για πληροφόρηση:– Κοντά στο εικονίδιο.

– Μέσα στο εικονίδιο.

– Εμφάνιση μόλις ο δείκτης περάσει από το εικονίδιο.

– Εμφάνιση αν ο δείκτης παραμείνει πάνω στο εικονίδιο για κάποιο χρόνο (συνήθως γύρω στο 1 δευτερόλεπτο)

• Προσοχή στην περίπτωση που υπάρχουν πολλά εικονίδια.


45

Τήρηση συμβάσεων λειτουργικού Τήρηση συμβάσεων λειτουργικού συστήματοςσυστήματος

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

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

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

αισθητικά ορθού αποτελέσματος.

• Αποφυγή της παραβίασης του συνηθισμένου τρόπου με τον οποίο ανταποκρίνεται το λειτουργικό σύστημα.


46

Λογική οργάνωση και ομαδοποίηση Λογική οργάνωση και ομαδοποίηση χειριστηρίωνχειριστηρίων

Η οργάνωση των χειριστηρίων:– Εξαρτάται από τις λειτουργίες που καλούνται να εκτελέσουν.

– Έχει σχέση με την τοποθέτησή τους στην οθόνη.

– Έχει σχέση με την ομαδοποίηση τους.

Τρόποι ομαδοποίησης:– Συγκέντρωση των αντικειμένων σε συγκεκριμένο σημείο της οθόνης.

– Χρήση κενού χώρου για να διαχωρίσει ομάδες αντικειμένων.

– Χρήση διαχωριστικών γραμμών και πλαισίων.

– Διαφορετικό φόντο για κάθε ομάδα αντικειμένων.

– Ευθυγράμμιση όμοιων αντικειμένων ως προς τον ίδιο άξονα.


47

Εύκολη πρόσβαση σε θέματα Εύκολη πρόσβαση σε θέματα και λειτουργίεςκαι λειτουργίες

• Απλοποίηση των διαδικασιών που εκτελεί ο χρήστης.– Αποφυγή της αυστηρής δενδροειδής μορφής (πολλά ενδιάμεσα στάδια).

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

– Κάθε ενέργεια θα πρέπει να είναι προσβάσιμη με τρεις το πολύ ενέργειες.


48

Παροχή βοήθειαςΠαροχή βοήθειας

Μπορεί να γίνει με τους εξής τρόπους: Με αρχεία βοήθειας. Με τη χρήση βοηθητικών ετικετών (tool tips)

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

Με επεξηγηματικά ηχητικά αποσπάσματα. Με αποσπάσματα βίντεο.

– Προσομοιώνουν τις ενέργειες που πρέπει να ακολουθήσει ο χρήστης για

να εκτελέσει μια λειτουργία.


49

Σχεδίαση πρωτοτύπουΣχεδίαση πρωτοτύπου• Πραγματοποιείται στο τέλος της λειτουργικής σχεδίασης.

• Το πρωτότυπο είναι μη λειτουργικό (mock up demo).

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

• Τα γραφικά, το περιεχόμενο, η διάταξη της οθόνης και οι λειτουργίες περιγράφονται σε αφαιρετικό επίπεδο.

• Συχνά είναι σε μορφή διαφανειών ή σε έντυπη ή σε χειρόγραφη μορφή.


50

Τεχνική σχεδίασηΤεχνική σχεδίαση

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

Δημιουργείται ένα σχέδιο της αρχιτεκτονικής του προγράμματος.– Συνεργάζονται ο σχεδιαστής/αναλυτής και ο προγραμματιστής.

Γίνεται επιλογή της πλατφόρμας και του εργαλείου ανάπτυξης.– Τα χαρακτηριστικά των εργαλείων επηρεάζουν το υπόλοιπο τμήμα της

τεχνικής σχεδίασης.

Παράγεται το Έντυπο Τεχνικής Σχεδίασης (ΕΤΣ)– Περιγράφει τον τρόπο με τον οποίο θα υλοποιηθούν τα χαρακτηριστικά που

περιγράφονται στο ΕΛΣ.

51

Πλατφόρμα ανάπτυξηςΠλατφόρμα ανάπτυξηςΔεν είναι απαραίτητο να είναι ίδια με την πλατφόρμα εκτέλεσης.

Πλατφόρμα εκτέλεσης:– Ο συνδυασμός λειτουργικού συστήματος, τύπου υπολογιστή, μέσου διανομής και

βοηθητικού λογισμικού που απαιτείται.

Πλατφόρμα ανάπτυξης:– Ο συνδυασμός λειτουργικού συστήματος, τύπου υπολογιστή και εργαλείων που

χρησιμοποιούνται για την ανάπτυξη της εφαρμογής.

Η επιλογή της πλατφόρμας ανάπτυξης εξαρτάται από:– Επεξεργαστική ισχύ.

– Ισχύ επεξεργασίας γραφικών.

– Δυνατότητα εξυπηρέτησης πολλών χρηστών, αν πρόκειται για δικτυακή εφαρμογή.

– Διαθέσιμα περιφερειακά.

– Διαθέσιμο λογισμικό.

– Κόστος πλατφόρμας.

– Μεταφερσιμότητα και συμβατότητα με άλλες πλατφόρμες.

Τεχνική σχεδίαση

52

ΠλατφόρμεςΠλατφόρμεςΠλατφόρμα επεξεργασίας εικόνας:

– Ψηφιοποίηση και επεξεργασία εικόνας

Πλατφόρμα επεξεργασίας ήχου:– Ψηφιοποίηση και επεξεργασία ήχου.– Προσοχή στη μορφή συμπίεσης.– Υπάρχουν διάφορες κωδικοποιήσεις:

Microsoft ADPCM, IMA ADPCM, PCM.

Πλατφόρμα επεξεργασίας βίντεο και συνθετικής κίνησης:– Ισχυροί γραφικοί σταθμοί εργασίας.– Υπάρχουν πολλές εκδόσεις κωδικοποιητών / αποκωδικοποιητών:

Radius Cinepack, Intel Indeo, Microsoft Video 1.

Ανάπτυξη τελικής εφαρμογής:– Μπορεί να αναπτυχθεί σε διάφορες πλατφόρμες.

Macromedia Director, Macromedia Authorware.


53

Εργαλεία ανάπτυξηςΕργαλεία ανάπτυξης

Επιλέγονται παράλληλα με την επιλογή πλατφόρμας.

Κατηγορίες εργαλείων ανάπτυξης:– Γλώσσες προγραμματισμού.

– Εργαλεία συγγραφής πολυμέσων. Σελίδας ή κάρτας. Χρονοδιαδρόμου. Βασισμένα σε εικονίδια.

– Εργαλεία δημιουργίας παρουσιάσεων


54

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

των βιβλιοθηκών συναρτήσεων.

Η χρήση γλωσσών προγραμματισμού:+ Επιτρέπει στον προγραμματιστή να υλοποιήσει εντυπωσιακές και σύνθετες

λειτουργίες.– Δυσκολία στη συγγραφή κώδικα.

Απαιτεί ιδιαίτερα εξειδικευμένες γνώσεις. Χρονοβόρα.

Γλώσσες – περιβάλλοντα προγραμματισμού που χρησιμοποιούνται:– C / C++ (πιο διαδεδομένη).– Java.– Visual Basic της Microsoft– Delphi της Inprise.


55

Εργαλεία συγγραφής πολυμέσων Εργαλεία συγγραφής πολυμέσων ((multimedia authoring toolsmultimedia authoring tools))

• Ενσωματώνουν γλώσσες σεναρίων (scripting languages) για:– Διαχείριση των αρχείων πολυμέσων.

– Έλεγχο ροής της εφαρμογής.

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

– Δημιουργία απλών ακολουθιών συνθετικής κίνησης.

• Χωρίζονται σε κατηγορίες ανάλογα με την αλληγορία συγγραφής που υιοθετούν.


56

Κατηγορίες εργαλείων συγγραφήςΚατηγορίες εργαλείων συγγραφής1. Εργαλεία σελίδας ή κάρτας.

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

Όχι απαραίτητα γραμμική – Χρήση κατάλληλα επιλεγμένων συνδέσεων.

• Υπάρχουν τα: Asymetrix Multimedia Toolbook για Windows HyperCard της Apple για Macintosh.

2. Εργαλεία χρονοδιαδρόμου.• Τα στοιχεία πολυμέσων αντιπροσωπεύουν τους «ηθοποιούς».• Η οθόνη αντιπροσωπεύει τη «σκηνή».• Ο χρονοδιάδρομος καθορίζει το χρόνο εισόδου και εξόδου του «ηθοποιού» από τη «σκηνή».• Η γραμμική συμπεριφορά του χρόνου μπορεί να παρακαμφθεί. • Υπάρχει το Macromedia Director και για Windows, αλλά και για Macintosh.

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

Διευκολύνεται η διαδικασία σχεδίασης

• Υπάρχει το Macromedia Authorware και για Windows, αλλά και για Macintosh.


57

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

Παρέχουν δυνατότητα ενσωμάτωσης όλων των βασικών μέσων.– Π.χ. Εικόνα, ήχο, βίντεο και συνθετική κίνηση.

Χαρακτηριστικά:– Απλά στη χρήση τους.– Βοηθάνε στην ανάπτυξη εφαρμογών σε μικρό χρόνο.

Ιδιαίτερα χρήσιμα για την ανάπτυξη του πρωτοτύπου μιας εφαρμογής.

Ιδιαίτερα δημοφιλή είναι τα εξής:– Microsoft PowerPoint.– Lotus Freelance Graphics.– WordPerfect Presentation.


58

Κριτήρια επιλογής εργαλείου ανάπτυξηςΚριτήρια επιλογής εργαλείου ανάπτυξηςΓίνεται με βάση ορισμένα κριτήρια:

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

Οι γλώσσες προγραμματισμού:+ Παρέχουν μεγάλη ευελιξία και

δυνατότητες την ομάδα ανάπτυξης.– Έχουν αυξημένη πολυπλοκότητα.

Αυξημένος χρόνος ανάπτυξης και αποσφαλμάτωσης.

Τα εργαλεία συγγραφής:+ Παρέχουν μεγαλύτερη ευκολία– Ενδέχεται να μην ενσωματώνουν όλες

τις εφαρμογές που απαιτεί η εφαρμογή.


Η επιλογή θα είναι το αποτέλεσμα συμβιβασμού ανάμεσα σε αυτούς τους δυο παράγοντες.

59

Εργαλεία επεξεργασίας στοιχείων Εργαλεία επεξεργασίας στοιχείων πολυμέσωνπολυμέσων

Τα εργαλεία συγγραφής περιλαμβάνουν και εργαλεία επεξεργασίας στοιχείων πολυμέσων

Έχουν περιορισμένες δυνατότητες. Παρέχουν απλές λειτουργίες.

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


60

Εργαλεία επεξεργασίας εικόναςΕργαλεία επεξεργασίας εικόνας

• Εργαλεία επεξεργασίας χαρτογραφικής εικόνας:– Μετατροπή των εικόνων σε διάφορες μορφές αποθήκευσης.– Ρύθμιση της φωτεινότητας ή της αντίθεσης,– Εφαρμογή διάφορων εφέ.Έχουμε τα εξής προγράμματα:

Adobe Photoshop, Corel PhotoPaint, JASC Paint Shop Pro και Microsoft Image Composer.

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

Έχουμε τα εξής προγράμματα: Fractal Design Painter και Fauve Matisse.

• Εργαλεία επεξεργασίας διανυσματικών εικόνων– Adobe Illustrator, Macromedia Freehand και CorelDraw.


61

Εργαλεία επεξεργασίας ήχουΕργαλεία επεξεργασίας ήχου• Εργαλεία επεξεργασίας ψηφιοποιημένου ήχου.

Παρέχουν δυνατότητες: Μοντάζ. Μίξη. Διάφορα εφέ (ενίσχυση, ηχώ, παραμόρφωση κτλ.).

Υπάρχουν τα εξής προγράμματα: Syntrillium CoolEdit, Sonic Foundry Sound Forge και Goldwave για

Windows. Sound Edit για Macintosh.

• Εργαλεία επεξεργασίας ήχου MIDI.Επιτρέπουν στο χρήστη να:

Συνθέσει ένα νέο μουσικό απόσπασμα. Να επεξεργαστεί ένα ήδη υπάρχων (ρυθμό, όργανα κτλ.)

Υπάρχουν τα εξής προγράμματα: Cakewalk Pro, Steinberg Cubase, Mark of the Unicorn Performer &

Digital Performer.


62

Εργαλεία σύλληψης και επεξεργασίας Εργαλεία σύλληψης και επεξεργασίας βίντεοβίντεο

• Δίνουν τη δυνατότητα σύλληψης βίντεο από εξωτερική πηγή – Π.χ. συσκευή βίντεο

• Παρέχουν δυνατότητα επεξεργασίας του:– Μοντάζ διαφορετικών αποσπασμάτων.– Ένθεση τίτλων.– Εφαρμογή διάφορων εφέ.

Υπάρχουν τα εξής προγράμματα:– Adobe Premiere, Unlead MediaStudio και Assymetrix Digital Video

Producer.

Για την σύλληψη υπάρχουν τα εξής προγράμματα:– VidCap για Windows και MiroCapture.


63

Εργαλεία συνθετικής κίνησηςΕργαλεία συνθετικής κίνησης

Επιτρέπουν:– Τη σχεδίαση δισδιάστατων ή τρισδιάστατων μοντέλων.

– Την παραγωγή συνθετικής κίνησης με βάση αυτά τα μοντέλα.

Υπάρχουν τα εξής προγράμματα:– Kinetix 3D Studio Max

– Caligari Truspace

– Metacreations Bryce 3D

– Kinetix Character Studio

– Metacreations Poser.


64

Σχεδίαση αρχιτεκτονικήςΣχεδίαση αρχιτεκτονικής

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

αλγόριθμοι που χρησιμοποιούνται.

Γίνεται σχεδίαση της βάσης δεδομένων που χρησιμοποιεί η εφαρμογή.


65

Διάκριση επιμέρους τμημάτωνΔιάκριση επιμέρους τμημάτων

Τμηματοποίηση της εφαρμογής.

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

Το κάθε τμήμα είναι σε μεγάλο βαθμό ανεξάρτητο από τα άλλα.

Ο τρόπος που θα γίνει η τμηματοποίηση εξαρτάται και από το εργαλείο.

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


66

Ονοματολογία αρχείωνΟνοματολογία αρχείωνΗ χρησιμοποίηση ονομάτων:

– Επιτρέπει να καταλαβαίνει κάποιος το περιεχόμενο του αρχείου. Π.χ. Gunshot.wav ήχος πυροβολισμού.

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

Η αναφορά στα αρχεία θα πρέπει να είναι απόλυτη.– Δημιουργεί πρόβλημα γιατί τα τοποθετεί αλφαβητικά και όχι με τη σειρά

που θέλουμε. Π.χ. car.bmp, airplane.bmp, ship.bmp είναι δύσκολο να καταλάβει τη

συγκεκριμένη σειρά.

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

κάποιου αριθμητικού τμήματος. Π.χ. img_p001.bmp, img_p002.bmp, img_p003.bmp κτλ.


67

Σχεδίαση βάσης δεδομένωνΣχεδίαση βάσης δεδομένων

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

Η ανάπτυξη βάσης δεδομένων: Απαλλάσσει τον προγραμματιστή από την ανάπτυξη κώδικα για:

Τη διαχείριση των δεδομένων.Την εκτέλεση κάποιων αναζητήσεων.

Δίνει μεγάλη ευελιξία για περίπλοκες αναζητήσεις με τη βοήθεια της SQL.

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

Σε περίπτωση δυσκολίας απαιτείται η χρήση εξωτερικών εργαλείων. Π.χ. η Visual Basic δεν παρουσιάζει ιδιαίτερες δυσκολίες.


68

Μεταφερσιμότητα εφαρμογήςΜεταφερσιμότητα εφαρμογής((portabilityportability))

Η δυνατότητα της εφαρμογής να μπορεί να μετατρέπεται για να λειτουργεί σε διάφορες πλατφόρμες.

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

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

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

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

Προβλήματα μπορούν να δημιουργήσουν: Βιβλιοθήκες που αποτελούν τμήμα του λειτουργικού συστήματος.

Π.χ. Βιβλιοθήκες dll (dynamic link libraries). Οι επεκτάσεις DirectX των Windows.

Χρήση κώδικα για την επίλυση του προβλήματος. Μπορεί να οδηγήσει στην παράλειψη ορισμένων λειτουργιών.


12 Multimedia Design Iii

Documents

Transcript of 12 Multimedia Design Iii