9 Βασικοί κανόνες για ευαίσθητες γκαλερί εικόνων
Ο υπεύθυνος σχεδιασμός είναι ένα ουσιαστικό και απαραίτητο μέρος της ανάπτυξης ιστού. Ένα από τα μεγαλύτερα ζητήματα με την ικανοποιητική σχεδίαση ιστοσελίδων είναι τα είδωλα. Πολλοί συζητούν τον καλύτερο τρόπο προβολής εικόνων σε έναν ανταποκρινόμενο ιστότοπο. Και τότε, τι γίνεται με τις γκαλερί εικόνων;
Οι γκαλερί εικόνων παρουσιάζουν πολύ μεγαλύτερη πολυπλοκότητα από τις μεμονωμένες εικόνες. υπάρχουν ακόμα περισσότερες μεταβλητές και πράγματα που πρέπει να σκεφτείτε όταν υλοποιείτε ολόκληρες αποκριτικές γκαλερί εικόνων στον ιστότοπό σας. Ας ρίξουμε μια ματιά σε μερικές χρήσιμες συμβουλές για την εφαρμογή των ανταποκριτικών γκαλερί εικόνων με τον σωστό τρόπο.
1) Slideshows: απόκρυψη ναυτιλίας όποτε είναι δυνατόν
Ενδέχεται να μην έχετε στοιχεία πλοήγησης σε tablet ή κινητή συσκευή, αλλά σε μια επιφάνεια εργασίας, είναι καλή ιδέα να αποκρύψετε αυτά τα στοιχεία μέχρι να χρειαστούν. Στοιχεία όπως τα βέλη προς τα εμπρός και πίσω και τα σημεία πλοήγησης θα πρέπει να ρυθμιστούν ώστε να εμφανίζονται μόνο όταν κάποιος ποντίζει πάνω από την συρόμενη γκαλερί εικόνων. Αυτό αποτρέπει περισπασμούς και αποφεύγετε συγκρούσεις μεταξύ περιεχομένου και στοιχείων NAV. Όλη η εμπειρία αισθάνεται λιγότερο μπερδεμένη.
2) Αποφύγετε πάρα πολλές εικόνες πορτρέτου
Εάν εφαρμόζετε μια γκαλερί που είναι ένα πλέγμα εικόνων, θα θέλετε να επιλέξετε εικόνες με οριζόντιο προσανατολισμό ή τετράγωνο αν είναι δυνατόν. Αυτό διευκολύνει την προβολή τους σε μια μικρή οθόνη. Οι εικόνες πορτραίτου θα ήταν ωραίες σε ένα έξυπνο τηλέφωνο σε πορτραίτο, αλλά η ευρεία περιοχή προβολής ενός τηλεφώνου προσανατολισμένου στο τοπίο καθιστά δύσκολη την προβολή εικόνων πορτρέτου. Το τοπίο είναι καλύτερο, αλλά μπορείτε να εγκαταστήσετε το τετράγωνο εάν το τοπίο δεν είναι επιλογή. Όλες οι εικόνες μπορούν να ρυθμιστούν ώστε να ταιριάζουν σε μια περιοχή προβολής, αλλά οι εικόνες πορτρέτου σε μια οριζόντια οθόνη θα φαίνονται πολύ μικρές. Οι εικόνες σας δεν θα προβάλλονται ως τετράγωνες εικόνες ή εικόνες τοπίου, οι οποίες θα γεμίσουν περισσότερη περιοχή της οθόνης και θα εμφανιστούν μεγαλύτερες. Κατά την επιλογή εικόνων, φροντίστε να κρατάτε υπόψη το άτομο που τις βλέπει.
3) Χρησιμοποιήστε χειρονομίες σε δισκία και κινητά
Οι άνθρωποι αγαπούν να χρησιμοποιούν χειρονομίες στις οθόνες αφής τους. Αισθάνονται πιο δυνατοί όταν αισθάνονται σαν να ολισθαίνουν μια εικόνα, επειδή η εμπειρία είναι πιο εντυπωσιακή. Η προσπάθεια να πατήσετε μικροσκοπικά βέλη ή κουκκίδες πλοήγησης σε μια κινητή συσκευή είναι πολύ κουραστική. Είναι πολύ πιο φυσικό να μπορείτε να τραβήξετε το δάχτυλό σας και να σύρετε μια εικόνα πάνω, κάτω, αριστερά ή δεξιά.
4) Αποφύγετε τα lightboxes: απενεργοποιήστε τα στο κινητό
Αν έχετε εικόνες προϊόντων, όπως μηχανήματα ή αντικείμενα που πρέπει να εξεταστούν λεπτομερέστερα (ύφασμα, κοσμήματα, κλπ.), Τότε ένα λογότυπο με τις μεγαλύτερες εικόνες έχει νόημα. Ακόμα και τότε, θα πρέπει να χρησιμοποιούνται μόνο στην επιφάνεια εργασίας. Όταν καταρρεύσετε σε μεγέθη οθόνης tablet και κινητής τηλεφωνίας, θα πρέπει να απενεργοποιήσετε τα κουτιά φωτισμού. Μπορούν να προκαλέσουν πολλά προβλήματα με την εμπειρία των χρηστών. Αν συμβεί κάτι και το lightbox δεν έχει σωστό μέγεθος, μπορεί να μην έχουν πρόσβαση στο κουμπί εξόδου ή οι εικόνες ενδέχεται να μην εμφανίζονται σωστά.
5) Όταν χρησιμοποιείτε στοιχεία NAV, τα κάνετε διακριτικά
Αν έχετε μια συρόμενη συλλογή εικόνων με σημαντικό αριθμό διαφανειών, τότε η πλοήγηση έχει νόημα. Δεν θέλετε να κάνετε τους χρήστες να περιμένουν να γυρίσουν όλα. Μπορούν εύκολα να κάνουν κλικ με τη δική τους ταχύτητα, να μπουν μέσα, να πάρουν ό, τι χρειάζονται και να βγουν. Όταν χρησιμοποιείτε αυτά τα στοιχεία, βεβαιωθείτε ότι τα πιέζετε σε μέρη που είναι εκτός δρόμου. Δεν υπάρχουν κουκκίδες πλοήγησης πάνω από κείμενο ή άλλους συνδέσμους. Επίσης, αποφύγετε υπερβολικά περίπλοκα στοιχεία ελέγχου. Αυτά καταλαμβάνουν πολύ χώρο, αποσπούν τους χρήστες από το περιεχόμενο και δημιουργούν μια γεμάτη εμφάνιση. Έχοντας κουκίδες που οι χρήστες μπορούν να κάνουν κλικ για να πραγματοποιήσουν κύκλο ή να μεταβούν σε συγκεκριμένες εικόνες, και έχοντας τα βέλη προς τα εμπρός και πίσω είναι άφθονα. Μην το παρακάνετε!
6) Μην αναμιγνύετε εικόνες και βίντεο
Η ανάμειξη διαφορετικών μέσων είναι συνήθως εντάξει, αλλά η ανάμειξη βίντεο όπου δεν αναμένεται μπορεί να προκαλέσει προβλήματα. Δεν θέλετε ένας χρήστης να ξεκινήσει κατά λάθος ένα βίντεο, το οποίο αναπαράγει τον ήχο για να ακούσει όλοι. Ξεχωριστά βίντεο και εικόνες, ώστε να γνωρίζουν τι πρέπει να περιμένουν. Κανείς δεν συμπαθεί αυτούς τους τύπους εκπλήξεων.
7) Βεβαιωθείτε ότι οι εικόνες δεν κλιμακώνονται πέρα από το μέγιστο πλάτος τους
Αυτό είναι σημαντικό, επειδή μπορείτε να αποφύγετε την κλιμακωτή κλιμάκωση των εικόνων που είναι πολύ μικρές για ένα διάστημα. Οι εικόνες πρέπει να είναι αρκετά μεγάλες ώστε να καλύπτουν το 100% μιας κινητής συσκευής (στις περισσότερες περιπτώσεις), αλλά οι ιστότοποι μεγέθους επιφάνειας εργασίας θα πρέπει να ορίζουν μόνο το μέγιστο πλάτος στο 100%. Έχω δει μερικές περιπτώσεις όπου κάποιος έχει μία από αυτές τις μεγάλες 27 "οθόνες, και όταν σέρνουν το πλάτος του προγράμματος περιήγησης, η εικόνα ζυγίζει μαζί του, πέρα από το προβλεπόμενο μέγεθος.
8) Κλιμάκωση εικόνας
Εάν έχετε κλίμακα εικόνων, σιγουρευτείτε ότι μειώνονται, όχι προς τα πάνω. Είναι καλύτερο να ορίσετε τις ακριβείς διαστάσεις για τις εικόνες σας. Πολλές φορές χρησιμοποιείται ένα ποσοστό για μια διάσταση, ενώ η άλλη διάσταση έχει οριστεί αυτόματα. Για παράδειγμα, εάν θέλετε μια εικόνα να καλύπτει το 50% του πλάτους του προγράμματος περιήγησης, θα ορίζετε το πλάτος της εικόνας στο 50% και το ύψος αυτόματα .
9) Αποφύγετε τη χρήση υποτίτλων εικόνων
Οι υπότιτλοι εικόνων ή οποιοδήποτε άλλο συνοδευτικό κείμενο μπορούν να προκαλέσουν κάθε είδους προβλήματα για εσάς και τους χρήστες σας. Το πρώτο πρόβλημα είναι ότι είναι δύσκολο να χωρέσει το κείμενο σε μια κινητή συσκευή. Με τα smartphones, έχετε περιορισμένο χώρο όπως είναι, αλλά προσπαθώντας να προσθέσετε κείμενο μπορεί να κάνει όλη την εμπειρία να γεμίσει και να γεμιστεί μαζί. Ένα άλλο ζήτημα είναι ότι είστε περιορισμένοι στο ποσό του κειμένου που μπορείτε να χρησιμοποιήσετε. Προσθέτοντας μια λεζάντα ή οποιοδήποτε επιπλέον κείμενο προσθέτει τη μεταβλητή του αποκρινόμενου κειμένου στο μίγμα. Πρέπει να εξετάσετε τα διαλείμματα λέξεων και τον τρόπο με τον οποίο πολλές γραμμές του κειμένου θα καταλήξουν να κοιτάζουν μαζί με την εικόνα σας. Εάν το κείμενο χρησιμοποιείται ως επικάλυψη, πρέπει επίσης να ασχοληθείτε με το πού πέφτει πάνω από την εικόνα. Το ελαφρύ κείμενο πάνω από την περιοχή φωτός της εικόνας θα κάνει το κείμενο δυσανάγνωστο. Η αντίθεση είναι το κλειδί και κάθε εικόνα είναι διαφορετική.
συμπέρασμα
Η κατώτατη γραμμή, όταν έρχεται κάτω σε οποιαδήποτε πτυχή του σχεδιασμού ιστοσελίδων είναι ότι πρέπει να λειτουργήσει καλά, και να έχει το χρήστη στο μυαλό. Εάν κανείς δεν μπορεί να χρησιμοποιήσει τον ιστότοπό σας, δεν θα επιστρέψει. Ακολουθώντας αυτά τα απλά αρχεία και τα μηνύματα των ανταποκριτικών γκαλερί εικόνων θα το κάνουν έτσι ώστε οι χρήστες να μην τρέχουν σε κοινά προβλήματα κατά την προβολή των εικόνων σας.