Σχεδίαση διατάξεων καμβά για διαφορετικά μεγέθη οθόνης

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

Θέματα:

Σχετικά με τη σχεδίαση διατάξεων καμβά για εμφάνιση σε συσκευές με διαφορετικά μεγέθη οθόνης

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

Βελτιστοποιήστε τις διατάξεις καμβά για διαφορετικά μεγέθη οθόνης

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

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

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

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

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

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

Σχεδιάστε διατάξεις καμβά για προβολή σε διαφορετικές συσκευές

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

Εικονίδιο προγράμματος εκμάθησης Εκμάθηση

  1. Στην Αρχική σελίδα, τοποθετήστε τον δείκτη του ποντικιού πάνω σε ένα βιβλίο εργασίας, κάντε κλικ στις Ενέργειες και, στη συνέχεια, επιλέξτε Άνοιγμα.
  2. Κάντε κλικ στην επιλογή Επεξεργασία για να εμφανιστεί το βιβλίο εργασίας για επεξεργασία.
  3. Αναπτύξτε τον καμβά στο μέγιστο μέγεθος και στις Ιδιότητες καμβά, ορίστε τη Διάταξη σε Αυτόματη προσαρμογή και κάντε κλικ στο OK.
  4. Στο υποσέλιδο, κάντε κλικ στο Πρόγραμμα επεξεργασίας Responsive Canvas για να ανοίξετε το πρόγραμμα επεξεργασίας όπου μπορείτε να ορίσετε σημεία αλλαγής για προβολή του καμβά σε διαφορετικές συσκευές.
    Πρόγραμμα επεξεργασίας Responsive Canvas

  5. Ορίστε ένα σημείο αλλαγής καμβά:
    • Προσθήκη σημείου αλλαγής στην τρέχουσα θέση του ρυθμιστικού - Κάντε κλικ και σύρετε το ρυθμιστικό στην τιμή σε pixel για το μέγεθος οθόνης που θέλετε να χρησιμοποιήσετε για αυτό το σημείο αλλαγής
      Σύρετε το ρυθμιστικό στο απαιτούμενο πλάτος που εμφανίζεται σε pixel.

      και, στη συνέχεια, κάντε κλικ στην Προσθήκη σημείου αλλαγής Κάντε κλικ στο εικονίδιο Προσθήκη σημείου αλλαγής για να προσθέσετε ένα σημείο αλλαγής εκεί όπου βρίσκεται το ρυθμιστικόγια να προσθέσετε το σημείο αλλαγής στην τρέχουσα θέση του ρυθμιστικού.
    • Εισαγωγή με μη αυτόματο τρόπο μιας τιμής για ένα σημείο αλλαγής - Κάντε κλικ στο Άνοιγμα του μενού προγράμματος επεξεργασίας Responsive Canvas, κάντε κλικ στην επιλογή Προσθήκη σημείου αλλαγής και εισαγάγετε έναν αριθμό στη Θέση για το πού θέλετε αυτό το σημείο αλλαγής.
      Εισαγάγετε μια θέση με μη αυτόματο τρόπο για να προσθέσετε ένα σημείο αλλαγής

  6. Επαναλάβετε το προηγούμενο βήμα για να ορίσετε επιπλέον σημεία αλλαγής καμβά.
  7. Συμπερίληψη ή εξαίρεση απεικονίσεων για κάθε σημείο αλλαγής καμβά:
    • Κάντε δεξί κλικ στο σημείο αλλαγής του καμβά που θέλετε να διαχειριστείτε (Ένα σημείο αλλαγής καμβά και ο δείκτης του) και κάντε κλικ στην επιλογή Διαχείριση σημείου αλλαγής.
      Χρησιμοποιήστε το παράθυρο διαλόγου Διαχείριση σημείου αλλαγής για να συμπεριλάβετε ή να εξαιρέσετε απεικονίσεις από αυτό το σημείο αλλαγής καμβά.

    • Κάντε κλικ σε μια απεικόνιση από τη λίστα για να εξαιρέσετε ή να συμπεριλάβετε στον καμβά για αυτό το σημείο αλλαγής καμβά και, στη συνέχεια, κάντε κλικ στο OK.
      Χρησιμοποιήστε το παράθυρο διαλόγου Διαχείριση σημείου αλλαγής για να συμπεριλάβετε ή να εξαιρέσετε απεικονίσεις και φίλτρα dashboard από τον καμβά για αυτό το σημείο αλλαγής.

  8. Προαιρετικά: Δημιουργήστε μια απεικόνιση και προσθέστε την σε ένα σημείο αλλαγής επιλέγοντας δεδομένα από τον πίνακα Δεδομένα και προσθέτοντάς τα στον καμβά.
    Η νέα απεικόνιση προστίθεται μόνο στο τρέχον σημείο αλλαγής, ωστόσο μπορείτε να προσθέσετε την απεικόνιση σε άλλα σημεία αλλαγής στον καμβά επιλέγοντας την απεικόνιση από τη λίστα στο παράθυρο διαλόγου Διαχείριση σημείου αλλαγής για αυτό το σημείο αλλαγής.
  9. Προαιρετικά: Βελτιστοποιήστε την εμφάνιση των απεικονίσεων για ένα σημείο αλλαγής καμβά.
    Ίσως θέλετε να βελτιστοποιήσετε το περιεχόμενο ώστε να εμφανίζεται σε μια μικρότερη συσκευή, όπως ένα κινητό.
    • Αναδιάταξη απεικονίσεων - Κάντε κλικ και σύρετε τις απεικονίσεις σε μια νέα θέση.
    • Βελτιστοποίηση απεικονίσεων - Χρησιμοποιήστε το πλαίσιο Ιδιότητες για να αποκρύψετε περιττό περιεχόμενο, όπως τον τίτλο ή το υπόμνημα.
    Όταν βελτιστοποιείτε απεικονίσεις για ένα σημείο αλλαγής, αυτές οι αλλαγές δεν ισχύουν για άλλα σημεία αλλαγής στον καμβά.
  10. Κάντε κλικ στην επιλογή Αποθήκευση.