Σχεδιασμός Mobile App Design / Προσαρμοσμένα Θέματα Dev με το jQuery Mobile

Στο παλαιότερο μας jQuery Mobile tutorial είχα εισαγάγει ένα μεγάλο μέρος του υποκείμενου πλαισίου και πώς να πάω για τη δημιουργία του πρώτου ιστοτόπου σας. Η βιβλιοθήκη JS είναι τόσο ελαφριά και εύκολη στην παραλαβή όσον αφορά τη μαθησιακή δυσκολία. Υπάρχει επίσης ένα γενικό φύλλο στυλ CSS που περιλαμβάνεται στα αρχεία, ώστε να μπορείτε να προσαρμόσετε περαιτέρω τα στοιχεία στη διάταξή σας.

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

Προεπιλεγμένα περιεχόμενα φύλλου στυλ

Θα πρέπει να ξεκινήσω ξεκαθαρίζοντας ακριβώς ποιος τύπος κώδικα CSS περιλαμβάνεται στα προεπιλεγμένα αρχεία. Το φύλλο στυλ από το jQM 1.0 έχει χωριστεί σε δύο βασικά τμήματα - δομή και θέματα.

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

Κάθε ένα από αυτά τα εσωτερικά θεματικά στοιχεία μπορεί επίσης να αναφέρεται ως δείγματα. Όταν δημιουργείτε ένα πρότυπο κινητής τηλεφωνίας, θα ακολουθήσετε γενικά ένα μόνο θέμα. Αλλά σε σχεδόν κάθε σενάριο ο σχεδιασμός μπορεί να βελτιωθεί με διαφορετικά σχέδια χρωμάτων. Το προεπιλεγμένο φύλλο στυλ περιλαμβάνει μόνο τα δείγματα A-E αλλά μπορείτε να δημιουργήσετε δείγματα F-Z για να προσθέσετε άλλες 21 εναλλακτικές λύσεις στη βιβλιοθήκη θεμάτων. Ακριβώς για να διευκρινίσετε ξανά αυτούς τους όρους α θέμα θεωρείται ένα ενιαίο αρχείο CSS το οποίο μπορεί να περιλαμβάνει μέχρι 26 διαφορετικά δείγματα με την ένδειξη A-Z.

Εναλλαγή στυλ

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

  Προεπιλεγμένη σελίδα jQM
 
  Ακολουθεί κάποιο εσωτερικό περιεχόμενο.

Παρατηρήστε ότι έβαλα το χαρακτηριστικό γνώρισμα δεδομένων στη θεματική σελίδα div. Αυτό σημαίνει ότι το νέο χρώμα του δείγματος θα επηρεάσει τα πάντα στο εσωτερικό του οποίου περιλαμβάνονται τόσο οι επικεφαλίδες όσο και οι περιοχές περιεχομένου. Θα μπορούσα επιπλέον να συμπεριλάβω δεδομένα-θέμα = "c" στην κεφαλίδα div για να αλλάξετε μόνο αυτό το περιεχόμενο από την υπόλοιπη σελίδα μου.

Συστατικά ενός δείγματος

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

Θα πρέπει να παρατηρήσετε πως κάθε δείγμα χωρίζεται από ένα ξεχωριστό σχόλιο και κάθε μια από τις εσωτερικές τάξεις τελειώνει με τα κατάλληλα γράμματα. Για παράδειγμα .ui-bar-a και .ui-σώμα-α εφαρμόζονται στις γραμμές κεφαλίδας / υποσέλιδου και στις περιοχές περιεχομένου από προεπιλογή. Οι περισσότερες ιδιότητες εφαρμόζουν μια επαναφορά στις γραμματοσειρές και τα χρώματα σύνδεσης, τις κλίσεις φόντου και άλλες μικρές λεπτομέρειες. Συμπεριέλαβα απλώς το ui-bar-a κώδικες για να σας δώσουμε μια ιδέα για τα στοιχεία που στοχεύουμε.

/* ΕΝΑ ----------------------------------------------- ---------------------------------------------- * / .ui -bar-a σύνορα: 1px στερεό # 2A2A2A; background: # 111111; χρώμα: #ffffff; γραμματοσειρά-βάρος: έντονα. σκιά κειμένου: 0 / * a-bar-shadow-x * / -1px / * a-bar-σκιά-γ * / 1px # 000000; εικόνα-φόντου: -webkit-gradient (γραμμική, αριστερή κορυφή, αριστερό κάτω μέρος, από (# 3c3c3c), έως (# 111)). / * Saf4 +, Chrome * / εικόνα φόντου: -webkit-linear-gradient (# 3c3c3c, # 111); / * Chrome 10+, Saf5.1 + * / εικόνα φόντου: -moz-linear-gradient (# 3c3c3c, # 111); / * FF3.6 * / εικόνα φόντου: -ms-γραμμική κλίση (# 3c3c3c, # 111); / * IE10 * / φόντο-εικόνα: -ο-γραμμική-κλίση (# 3c3c3c, # 111); / * Opera 11.10+ * / εικόνα-φόντου: γραμμική κλίση (# 3c3c3c, # 111); . -bar-a,, .ui-bar-a select, .ui-bar-a textarea, .ui-bar-ένα κουμπί font-family: ελαφρή γραμμή;  .ui-bar-a .ui-link-κληρονομήσει χρώμα: #fff;  .ui-bar-a .ui-link χρώμα: # 7cc4e7 / * a-bar-link-color * /; γραμματοσειρά-βάρος: έντονα.  .ui-bar-a .ui-link: μετακινήστε χρώμα: # 2489CE / * a-bar-link-hover * /;  .ui-bar-a .ui-link: ενεργό χρώμα: # 2489CE / * a-bar-link-active * /;  .ui-bar-a .ui-link: επισκέφτηκε χρώμα: # 2489CE / * a-bar-link-visited * /;

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

γραμμές κεφαλίδας και υποσέλιδου
περιεχόμενο σώματος και κείμενο σελίδας
στυλ λίστας
Το κουμπί εμφανίζει το προεπιλεγμένο / hover / ενεργό
μορφές ελέγχου εισόδου (επιπλέον)

Κωδικοποίηση σχεδίασης νέας γραμμής

Από το ίδιο αρχείο CSS εξετάσαμε την προηγούμενη αντιγραφή / επικόλληση του κώδικα A (γραμμές 12-150) σε ένα νέο αρχείο. Μπορούμε να χρησιμοποιήσουμε το όνομα του δείγματος G για να εφαρμόσουμε αυτά τα νέα στυλ. Τώρα μετά την αντιγραφή του κώδικα που θέλετε να μετονομάσετε κάθε περίπτωση κλάσης που τελειώνει -ένα προς το -σολ, καθώς έτσι θα αναγνωρίσει το jQuery Mobile ποιες μορφές θα χρησιμοποιήσουν.

Θα ήθελα να ξεκινήσω επανασχεδιάζοντας τη γραμμή κεφαλίδας bg για να μιμηθώ μια πιο γνωστή κλίση iOS. Αυτό μπορεί να γίνει μόνο μέσα στο .ui-bar-g εκλέκτορας. Θέλουμε να επεξεργαστούμε τις ιδιότητες φόντου και φόντου για να αλλάξουμε τα εφέ κλίσης. Ελέγξτε τον κώδικα μου παρακάτω και μια οθόνη επίδειξης της νέας κλίσης.

.ui-bar-g σύνορα: 1px στερεό # 2d3033 / * a-bar-border * /; όριο-αριστερά: 0px; border-right: 0px; φόντο: # 6d83a1; χρώμα: #fff / * a-bar-color * /; γραμματοσειρά-βάρος: έντονα. σκιά κειμένου: 0 / * a-bar-shadow-x * / -1px / * a-bar-shadow-y * / 1px / * a-bar-shadow-radius * / # 3e4957; (0.5, # 899cb3), έγχρωμη διακοπή (0.505, # 7e94b0), σε (############################################################################################################ 6d83a1)). εικόνα φόντου: -webkit-γραμμική κλίση (κορυφή, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1). / * Chrome 10+, Saf5.1 + * / εικόνα φόντου: -moz-linear-gradient (κορυφή, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1). / * FF3.6 * / εικόνα φόντου: -ms-γραμμική κλίση (κορυφή, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1). / * IE10 * / εικόνα φόντου: -ο-γραμμική-κλίση (κορυφή, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1). / * Opera 11.10+ * / εικόνα-φόντου: γραμμική κλίση (κορυφή, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1).

Χρησιμοποιώ το μπλε χρώμα που υπάρχει στις περισσότερες προεπιλεγμένες εφαρμογές iOS. Το υπόβαθρό μου είναι αρχικά ρυθμισμένο σε ένα συμπαγές χρώμα για συσκευές που δεν μπορούν να αποδώσουν βαθμίδες CSS3. Στη συνέχεια, χρησιμοποιώ έγχρωμες στάσεις γύρω από το δείκτη 50% για να αναδημιουργήσετε το παραδοσιακό στιλπνότερο αποτέλεσμα της στιλπνότητας. Επίσης μέσα στον ίδιο επιλογέα έχω τροποποιήσει ελαφρώς τη σκιά κειμένου με ένα πιο λεπτό χρώμα και εύρος.

Κουμπιά και εφέ κειμένου

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

.ui-btn-up-g σύνορα: 1px στερεά # 375073; φόντο: # 4a6c9b; γραμματοσειρά-βάρος: έντονα. χρώμα: #fff; σκιά κειμένου: 0 / * a-bup-shadow-x * / -1px / * a-bup-shadow-y * / 1px / * a-bup-shadow-radius / # 40536d; κουτί-σκιά: κανένας; -webkit-box-σκιά: κανένας; -moz-box-σκιά: κανένας; (# 89a0be), έγχρωμη διακοπή (0.5, # 5877a2), έγχρωμη διακοπή (0.505, # 476999), σε (# 4a6c9b)). εικόνα φόντου: -webkit-γραμμική κλίση (κορυφή, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b). / * Chrome 10+, Saf5.1 + * / εικόνα φόντου: -moz-linear-gradient (κορυφή, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b). / * FF3.6 * / εικόνα φόντου: -ms-γραμμική κλίση (κορυφή, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b). / * IE10 * / εικόνα-φόντου: -ο-γραμμική-κλίση (κορυφή, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b). / * Opera 11.10+ * / εικόνα-φόντου: γραμμική κλίση (κορυφή, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); ακτίνα ακτίνας: 4px; -webkit-ακτίνα-ακτίνα: 4px; -moz-ακτίνα-ακτίνα: 4px;  bui-btn-up-g .ui-btn-εσωτερική, .ui-btn-hover-g .ui-btn-εσωτερική, 0; -webkit-ακτίνα-ακτίνα: 0; -moz-ακτίνα-ακτίνα: 0;  .ui-btn-hover-g σύνορα: 1px στερεά # 1b49a5; background: # 2463de; γραμματοσειρά-βάρος: έντονα. χρώμα: #fff; σκιά κειμένου: 0 / * a-bup-shadow-x * / -1px / * a-bup-shadow-y * / 1px / * a-bup-shadow-radius / # 40536d; κουτί-σκιά: κανένας; -webkit-box-σκιά: κανένας; -moz-box-σκιά: κανένας; Εικόνα φόντου: -Βαθμονόμηση ιστού (γραμμική, 0% 0%, 0% 100%, από (# 779be9), έγχρωμη διακοπή (0.5, # 376fe0) 2463de)). εικόνα φόντου: -webkit-γραμμική κλίση (κορυφή, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de). / * Chrome 10+, Saf5.1 + * / φόντο-εικόνα: -moz-γραμμική κλίση (κορυφή, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de). / * FF3.6 * / εικόνα φόντου: -ms-γραμμική κλίση (κορυφή, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de). / * IE10 * / εικόνα-φόντου: -ο-γραμμική-κλίση (κορυφή, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de). / * Opera 11.10+ * / εικόνα-φόντου: γραμμική κλίση (κορυφή, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de). ακτίνα ακτίνας: 4px; -webkit-ακτίνα-ακτίνα: 4px; -moz-ακτίνα-ακτίνα: 4px;

Η περιοχή κώδικα που επεξεργαζόμαστε τώρα βρίσκεται μέσα στις κλάσεις κουμπιών UI. Υπάρχουν 3 διαφορετικοί τρόποι με τους οποίους πρέπει να ασχοληθείτε: .ui-btn-up-g, .ui-btn-hover-g, και .ui-btn-down-g. Είμαι επικεντρωμένος κυρίως στα στάνταρ (btn-up) και τα hover (btn-hover) εφέ με την επεξεργασία της σκιάς κιβωτίου και των γραμμικών κλίσεων. Επίσης επέκτεινα το αποτέλεσμα των στρογγυλεμένων γωνιών, ώστε τα κουμπιά να φαίνονται πιο ορθογώνια.

Εξαιτίας αυτού χρειάστηκε να αφαιρέσω την εσωτερική ακτίνα από μια κλάση με τίτλο .ui-btn-εσωτερική. Αυτή η τάξη συνδέεται σε ένα στοιχείο έκτασης μέσα σε κάθε σύνδεσμο αγκύρωσης στη γραμμή κεφαλίδας. Χωρίς να επαναφέρετε τις ιδιότητες ακτίνας του πλαισίου, θα παρατηρήσετε μικρές δυσλειτουργίες στο σχεδιασμό όποτε πετάτε πάνω από ένα κουμπί. Καθώς περνάτε περισσότερο χρόνο κωδικοποίησης σε θέματα jQuery Mobile, θα απομνημονεύσετε αυτές τις μικρές αποχρώσεις για μελλοντικά έργα.

Εισαγωγή στο ThemeRoller

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

Από αυτή τη σελίδα έχετε πρόσβαση για να επεξεργαστείτε τα πρώτα 3 δείγματα A-C ή ακόμη και να δημιουργήσετε ένα από τα δικά σας. Εάν κοιτάξετε στην αριστερή πλαϊνή μπάρα, μπορείτε να κάνετε εναλλαγή μεταξύ αυτών των 3 ρυθμίσεων ή να κάνετε γρήγορα αλλαγές στις παγκόσμιες επιλογές θεμάτων. Αυτά περιλαμβάνουν ιδιότητες CSS, όπως ακτίνες περιγράμματος, σκιές κουτιών ή προεπιλεγμένες γραμματοσειρές σελίδας. Σημειώστε καθώς επιλέγετε οποιοδήποτε από τα προεπιλεγμένα δείγματα που μπορούμε να επεξεργαστούμε μόνο τις ίδιες περιοχές όπως πριν - τις γραμμές κορυφής / κάτω, το περιεχόμενο του σώματος και τις καταστάσεις των 3 κουμπιών.

Αλλά το αγαπημένο μου χαρακτηριστικό πρέπει να είναι η άμεση πρόσβαση στα δείγματα Adobe Kuler. Μπορείτε να δημιουργήσετε πραγματικά μερικά σχέδια χρωμάτων στο λογαριασμό σας Kuler και να τα εισαγάγετε στο ThemeRoller. Η διεπαφή υποστηρίζει λειτουργικότητα drag-and-drop έτσι είναι πραγματικά απλό να δοκιμάσετε μερικές διαφορετικές ιδέες μέσα σε λίγα λεπτά.

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

Χρήσιμοι πόροι

jQuery Κινητά Θέματα - Τεκμηρίωση
Χρήση και προσαρμογή των θεμάτων του jQuery Mobile