Anonim

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

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

  1. Αφαιρέστε τα εντελώς και αντικαταστήστε τα με την κύρια ενέργεια.
  2. Προσθέστε ένα δευτερεύον μενού όπου μπορείτε είτε να πατήσετε μία φορά για την επίδραση του hover και για άλλη μια φορά για την κύρια ενέργεια.
  3. Τοποθετήστε τις πληροφορίες σχετικά με τον τίτλο στη σελίδα του.

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

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

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

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

Προσθέστε ένα δευτερεύον μενού

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

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

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

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

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

Διαμονή με αιωρόπτερο

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

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

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

3 Εναλλακτικές λύσεις για την επίδραση του hover σε κινητές συσκευές