Δημιουργία εικονιδίων συσκευής στο πρόγραμμα περιήγησης με το DeviceMock
Μπορείτε να βρείτε τους τόνους των δωρεάν μακέτες συσκευών σε απευθείας σύνδεση, που κυμαίνονται από PSD σε αρχεία Sketch. Αλλά τι γίνεται αν θα μπορούσατε γρήγορα κατασκευάστε mockups συσκευών on-the-fly στο πρόγραμμα περιήγησής σας?
Λοιπόν, χάρη στους ανθρώπους στο rm-labo, μπορείτε! Το δωρεάν plugin jQuery, το DeviceMock.js, σας επιτρέπει τυλίξτε μια συσκευή φορέα γύρω από οποιοδήποτε στοιχείο της σελίδας, χρησιμοποιώντας απλά JavaScript και SVG.
Λοιπόν, πώς ακριβώς λειτουργεί αυτό?
Λοιπόν, πρώτα χρειαζόμαστε ένα αντίγραφο του jQuery και μια έκδοση του πρόσθετου DeviceMock από το GitHub. Αυτό έρχεται με ένα αρχείο JS, ένα αρχείο CSS και μερικά αρχεία SVG για τη δημιουργία των πραγματικών συσκευών.
Μπορείς στοχεύσετε οποιοδήποτε τύπο στοιχείου στη σελίδα, από μια απλή εικόνα σε μια ολόκληρη διαίρεση ή ακόμα και ένα ενσωματωμένο στοιχείο όπως ένα iframe. Αυτό σημαίνει ότι θα μπορούσατε ακόμη και οικοδομήσουμε ένα δροσερό μίνι-browser δεξιά στον ιστότοπό σας με ένα iframe σε άλλη σελίδα.
Αυτό το plugin υποστηρίζει πέντε διαφορετικούς τύπους συσκευών:
- φυλλομετρητής
- Smartphone
- Δισκίο
- Επιφάνεια εργασίας
- ΦΟΡΗΤΟΣ ΥΠΟΛΟΓΙΣΤΗΣ
Όλα αυτά τα mockups χρησιμοποιούν επίπεδα στυλ σχεδιασμού αφού είναι κατασκευασμένα με SVG. Και, όλα φαίνονται αρκετά παρόμοια με τις συσκευές της Apple, για παράδειγμα το smartphone είναι ένας κλώνος του iPhone και η επιφάνεια εργασίας που βλέπει εμφανώς σαν ένα iMac.
Όλοι αυτοί οι φορείς είναι εύκολο να προστεθούν και εργάζονται μέσα κάθε πρόγραμμα περιήγησης με υποστήριξη SVG.
Μπορείτε ακόμη και αλλαγή ιδιοτήτων όπως το μέγεθος του mockup, το θέμα (άσπρο / μαύρο) και ο προσανατολισμός (οριζόντιο τοπίο).
Εάν χρησιμοποιείτε το mockup του προγράμματος περιήγησης, μπορείτε ακόμη και καθορίστε μια ψεύτικη διεύθυνση URL στη γραμμή διευθύνσεων. Αυτός είναι ένας τρόπος διασκέδασης για να προσθέσετε ακόμα μεγαλύτερη προσαρμογή.
Χορηγήθηκε αυτή η βιβλιοθήκη δεν θα είναι χρήσιμη για όλους, αλλά για αυτό επιλύει ένα εξειδικευμένο πρόβλημα που πολλοί προγραμματιστές UI / UX αντιμετωπίζουν κατά τη δημιουργία πρωτοτύπων.
Για να μάθετε περισσότερα, επισκεφθείτε το Σελίδα GitHub ή ελέγξτε το ζωντανό site για ενεργό επίδειξη.
