Περιεχόμενο
- Εγγενής εφαρμογή
- 01. Οι χρήστες αναμένουν γνωστά στοιχεία ελέγχου διεπαφής χρήστη
- 02. Η είσοδος αφής αλλάζει τα πάντα
- 03. Η υψηλή ανάλυση αναλαμβάνει
- 04. Ο χρόνος είναι σύντομος
- 05. Το ακίνητο είναι μικρό
- 06. Οι χρήστες μισούν την πληκτρολόγηση
- 07. Οι βιβλιοθήκες και τα πλαίσια μπορούν να βοηθήσουν
- 08. Το πλαίσιο είναι το παν
- 09. Ο λευκός χώρος γίνεται σκοτεινός
- 10. Το Wireframing είναι απαραίτητο
- Σαν αυτό? Διαβάστε αυτά!
Η διαχωριστική γραμμή μεταξύ ενός ιστότοπου και μιας εφαρμογής για το smartphone σας έχει θολώσει τα τελευταία χρόνια, καθώς τα HTML5 και CSS3, σε συνδυασμό με τη JavaScript, διευκόλυναν πολλές αλληλεπιδράσεις όπως οι επιτραπέζιοι υπολογιστές σε ιστότοπους και εφαρμογές ιστού. Καθώς τα εργαλεία έχουν βελτιωθεί και ο κορεσμός της αγοράς smartphone αυξάνεται, έτσι οι ευκαιρίες για τους σχεδιαστές ιστοσελίδων να χρησιμοποιούν τις δεξιότητές τους για το σχεδιασμό εφαρμογών.
Υπάρχουν δύο βασικές προσεγγίσεις για το σχεδιασμό μιας εφαρμογής χρησιμοποιώντας τις δεξιότητες σχεδίασης ιστού. Το πρώτο είναι να δημιουργήσετε μια εφαρμογή ιστού - ουσιαστικά έναν ιστότοπο προσανατολισμένο για κινητά. Μπορείτε να προσθέσετε λειτουργίες ειδικά για HTML5 για να κάνετε το περιεχόμενο διαθέσιμο εκτός σύνδεσης, αλλά για όλους τους πρακτικούς σκοπούς μια εφαρμογή ιστού δεν είναι τίποτα πιο περίπλοκη από έναν κανονικό ιστότοπο με σχεδιασμό που προσανατολίζεται στη χρήση σε smartphone ή tablet.
Εγγενής εφαρμογή
Η δεύτερη προσέγγιση είναι να χρησιμοποιήσετε ένα πλαίσιο για να ολοκληρώσετε τον ιστότοπό σας μέσα σε μια εγγενή εφαρμογή. Αυτό χρησιμοποιεί την ίδια βασική προσέγγιση για τη δημιουργία μιας εφαρμογής, αλλά σας επιτρέπει να μεταγλωττίσετε το περιεχόμενο έτσι ώστε να διανεμηθεί και να εγκατασταθεί από ένα κατάστημα εφαρμογών αντί μέσω μιας διεύθυνσης ιστού.
Και οι δύο μέθοδοι χρησιμοποιούνται ευρέως και έχουν τα δικά τους πλεονεκτήματα και μειονεκτήματα. Αλλά αν σχεδιάζετε μια εγγενή εφαρμογή ή μια εφαρμογή ιστού και τη δημιουργείτε για εσάς ή έναν πελάτη, πολλές από τις δεξιότητες που έχετε ως σχεδιαστής ιστοσελίδων μεταφέρονται απευθείας στο σχεδιασμό εφαρμογών. Πολλές από τις βέλτιστες πρακτικές που έχετε αντιμετωπίσει στον ιστό ισχύουν εξίσου για τη σχεδίαση μιας εφαρμογής, αλλά υπάρχουν μερικοί χρυσοί κανόνες και πράγματα που πρέπει να γνωρίζετε σχετικά με τη σχεδίαση εφαρμογών - ρίξτε μια ματιά στη λίστα μας παρακάτω και προσθέστε τη δική σας στο σχόλια!
- Διαβάστε όλα τα άρθρα που σχετίζονται με το σχεδιασμό της εφαρμογής μας εδώ
01. Οι χρήστες αναμένουν γνωστά στοιχεία ελέγχου διεπαφής χρήστη
Ακριβώς όπως υπάρχει μια συνηθισμένη προσέγγιση στη σχεδίαση διεπαφής χρήστη (UI) στον ιστό, το ίδιο ισχύει και για τη σχεδίαση εφαρμογών. Παρόλο που δεν υπάρχει τίποτα που να σας εμποδίζει να δημιουργήσετε ένα εντελώς νέο παράδειγμα διεπαφής, χρειάζεστε έναν αρκετά καλό λόγο να μην χρησιμοποιήσετε τα ίδια στοιχεία ελέγχου διεπαφής χρήστη με τα οποία οι χρήστες σας θα είναι ήδη εξοικειωμένοι. Κάτι τέτοιο βοηθά στην παροχή καλής σήμανσης στο σχεδιασμό της εφαρμογής σας και κάνει τον χρήστη να αισθάνεται αμέσως σαν στο σπίτι του χρησιμοποιώντας την εφαρμογή σας.
Υπάρχουν πολλές βιβλιοθήκες στον ιστό που δημιουργούν αυτόματα στοιχεία διεπαφής χρήστη για να ταιριάζουν με τις προεπιλεγμένες ρυθμίσεις του συστήματος, σύμφωνα με τη συσκευή που χρησιμοποιείται για την προβολή της εφαρμογής ιστού. Δείτε τα Sencha Touch και jQuery Mobile για δύο παραδείγματα.
02. Η είσοδος αφής αλλάζει τα πάντα
Μπορεί να ακούγεται προφανές, αλλά όταν σχεδιάζετε εφαρμογές, η κύρια μέθοδος εισαγωγής δεν είναι ποντίκι και πληκτρολόγιο, αλλά δάχτυλο. Αυτό σημαίνει ότι πρέπει να ξεχάσετε να δημιουργήσετε εφέ ποντικιού και αντίθετα να σκεφτείτε πώς μπορείτε να προσφέρετε μια ουσιαστική εμπειρία χρήστη με κατάλληλα σχόλια και επισημάνσεις όταν το περιεχόμενό σας χειρίζεται (και αποκρύπτεται) με ένα δάχτυλο ή δάχτυλο.
Ένα συνηθισμένο λάθος που κάνουν οι σχεδιαστές ιστοσελίδων είναι να βασιστείτε στο ποντίκι για να δημιουργήσετε ένα υπομενού από μια γραμμή πλοήγησης. Ενώ τα προγράμματα περιήγησης για κινητά προσπαθούν να το λάβουν υπόψη αυτό, είναι καλύτερο να σχεδιάσετε με τέτοιο τρόπο ώστε η διεπαφή σας να είναι βελτιστοποιημένη για αφή.
03. Η υψηλή ανάλυση αναλαμβάνει
Όταν η Apple δημιούργησε το iPhone 4, εισήγαγε μια οθόνη υψηλής ανάλυσης που ονομάστηκε οθόνη Retina. Αυτό προσφέρει υψηλότερο αριθμό pixel ανά τετραγωνική ίντσα, κάνοντας το κείμενο και τις εικόνες να φαίνονται πιο ευκρινείς. Οι οθόνες υψηλής ανάλυσης γίνονται πλέον κοινές στους κατασκευαστές, αλλά παρουσιάζουν ένα ενδιαφέρον πρόβλημα για τους σχεδιαστές. Όταν σχεδιάζετε στοιχεία διεπαφής χρήστη, πρέπει να λάβετε υπόψη την ανάλυση της συσκευής που χρησιμοποιείται για την προβολή αυτής της διεπαφής.
Για παράδειγμα, ένα κουμπί σχεδιασμένο σε τετράγωνο 100px θα εμφανιστεί στο μισό μέγεθος (το ένα τέταρτο της περιοχής) σε μια οθόνη Retina όπως θα εμφανίζεται σε μια τυπική οθόνη. Υπάρχουν τρόποι για να αναγκάσετε τις οθόνες υψηλής ανάλυσης να διπλασιάσουν τα pixel τους, έτσι ώστε τα στοιχεία διεπαφής χαμηλής ανάλυσης να αποδίδονται στο ίδιο μέγεθος ανεξάρτητα από την ανάλυση της οθόνης, αλλά μια κοινή προσέγγιση είναι να δημιουργήσετε δύο εκδόσεις κάθε στοιχείου σε μια εφαρμογή - ένα για οθόνες υψηλής ανάλυσης και ένα για οθόνες χαμηλότερης ανάλυσης. Με αυτόν τον τρόπο, μπορείτε να επωφεληθείτε από τις καθαρές οθόνες υψηλής ανάλυσης, ενώ συνεχίζετε να υποστηρίζετε συσκευές παλαιού τύπου.
04. Ο χρόνος είναι σύντομος
Ένα από τα χαρακτηριστικά των κινητών συσκευών είναι ότι τείνουν να χρησιμοποιούνται σε σύντομο χρονικό διάστημα. Αντί να κάθονται μπροστά σε μια οθόνη, οι χρήστες smartphone και tablet αναμένουν να μπορούν να φτάσουν πολύ γρήγορα στο περιεχόμενο, την υπηρεσία ή τη λειτουργικότητα που αναζητούν.
Για αυτόν τον λόγο, είναι σημαντικό να λάβετε υπόψη σας κάθε στοιχείο της σχεδίασης και της παρουσίασης της διασύνδεσης για να διασφαλίσετε ότι θα λάβετε το κουμπί πληροφοριών, παιχνιδιού ή αγοράς στην οθόνη του χρήστη το συντομότερο δυνατό. Αυτό σημαίνει ότι δεν υπάρχουν πολύπλοκες διαδρομές πλοήγησης και μια κατανοητή δομή στην εφαρμογή σας που καθιστά σαφές τι θα βρείτε, πού. (Φυσικά, αυτός ο κανόνας πρέπει να ισχύει και για το σχεδιασμό ιστοσελίδων, αλλά αξίζει να το επαναλάβετε!)
05. Το ακίνητο είναι μικρό
Οι εφαρμογές εμφανίζονται συνήθως σε μικρές οθόνες, με ακίνητη περιουσία περιορισμένης οθόνης. Εκτός από τη μικρή οθόνη, υπάρχουν και άλλες πτυχές σχετικά με το υλικό που πρέπει να λάβετε υπόψη κατά το σχεδιασμό μιας διεπαφής εφαρμογής. Σκεφτείτε, για παράδειγμα, πόσο εύκολο ή δύσκολο θα είναι να πατήσετε ένα κουμπί στο σχέδιό σας. Τα κουμπιά πρέπει να έχουν ένα ελάχιστο μέγεθος παρόμοιο με ένα άκρο δακτύλου, ανεξάρτητα από την ανάλυση της συσκευής που χρησιμοποιείται.
Στον ιστό, είναι συνηθισμένο να τοποθετείτε κουμπιά ή γραμμές εργαλείων στο επάνω μέρος του παραθύρου του προγράμματος περιήγησης. Σε μια κινητή συσκευή, τα κουμπιά που τοποθετούνται στην άκρη της οθόνης θα είναι πάντα πιο δύσκολο να χτυπηθούν με ακρίβεια με το δάχτυλο, ειδικά εάν ο χρήστης σας διαθέτει μια σφιχτή θήκη για το τηλέφωνο ή το tablet του. Προσπαθήστε να κάνετε έναν καλό διαχωρισμό από την άκρη της οθόνης για διαδραστικά στοιχεία χρήστη στο σχέδιό σας και βεβαιωθείτε ότι μπορείτε να φιλοξενήσετε άτομα με παχιά δάχτυλα και μικρά τηλέφωνα!
06. Οι χρήστες μισούν την πληκτρολόγηση
Ας το παραδεχτούμε, η πληκτρολόγηση σε ένα σύγχρονο smartphone δεν είναι ακριβώς διασκεδαστικό. Είναι πολύ καλύτερο από το να χρησιμοποιήσετε ένα αριθμητικό πληκτρολόγιο για να διαγράψετε λέξεις, αλλά εξακολουθεί να είναι μια δυνητικά πολύ απογοητευτική διαδικασία. Εάν παρουσιάζετε μια φόρμα που απαιτεί εισαγωγή χρήστη, προσπαθήστε να τη διατηρήσετε όσο το δυνατόν πιο απλή και ελαχιστοποιήστε την απαιτούμενη ποσότητα εισαγωγής κειμένου.
Η χρήση ορισμένων από τα σύγχρονα στοιχεία φόρμας HTML5 μπορεί να βοηθήσει με αυτό, ζητώντας από τη συσκευή να παρουσιάσει ένα κατάλληλο πληκτρολόγιο όταν χρησιμοποιείτε για παράδειγμα τον τύπο εισαγωγής = "email" />, αλλά οπουδήποτε ζητάτε από τους χρήστες σας να πληκτρολογήσουν περισσότερα από δύο λέξεις που πρέπει να λάβετε υπόψη εάν παρακωλύετε τη χρηστικότητα της εφαρμογής σας και κινδυνεύετε να ενοχλήσετε ή χειρότερα να απενεργοποιήσετε τους χρήστες σας.
07. Οι βιβλιοθήκες και τα πλαίσια μπορούν να βοηθήσουν
Δεν χρειάζεται να κολλήσετε σε μια εφαρμογή ιστού! Αν έχετε ήδη δεξιότητες σε HTML, CSS και JavaScript, μπορείτε να τις χρησιμοποιήσετε για να δημιουργήσετε εγγενείς εφαρμογές για διανομή σε όλα τα δημοφιλή καταστήματα εφαρμογών, εκμεταλλευόμενοι ένα από τον αυξανόμενο αριθμό των διαθέσιμων πλαισίων και βιβλιοθηκών.
Αυτά τα πλαίσια παρέχουν ένα κέλυφος στο οποίο θα αποδίδει ο τυπικός κώδικας ιστού σας, δημιουργώντας αποτελεσματικά μια υβριδική εφαρμογή που εγκαθίσταται εγγενώς στη συσκευή του χρήστη, αλλά εκμεταλλεύεται τις υπάρχουσες δεξιότητές σας. Ρίξτε μια ματιά στα PhoneGap, Sencha, Corona Labs και Appcelerator για να αποκτήσετε μια αίσθηση για το πόσο εύκολο είναι να δημιουργήσετε μια εγγενή εφαρμογή.
08. Το πλαίσιο είναι το παν
Κάτι που συνήθως δεν πρέπει να λάβουν υπόψη οι σχεδιαστές ιστοσελίδων είναι το περιβάλλον χρήσης. Ιστορικά, οι ιστότοποι έχουν πρόσβαση από επιτραπέζιους υπολογιστές ή φορητούς υπολογιστές και, ως εκ τούτου, είναι σε θέση να προσφέρουν κάθε λεπτομέρεια και υπηρεσία στον επισκέπτη. Στον κόσμο των εφαρμογών, ωστόσο, το περιβάλλον είναι εξαιρετικά σημαντικό.
Εάν σχεδιάζετε μια εφαρμογή για ένα εστιατόριο, οι πληροφορίες που συνήθως θα θέλουν οι χρήστες θα είναι πώς να φτάσουν στο εστιατόριο, τι είναι διαθέσιμο για φαγητό και πώς να κάνουν κράτηση. Αυτό ισχύει επειδή οι χρήστες των εφαρμογών είναι συχνά φορητοί - αν κάθονταν στα γραφεία τους, θα καλούσαν τον ιστότοπο του εστιατορίου, όπου μπορείτε να πάρετε λεπτομέρειες σχετικά με τη διακόσμηση, τα κατοικίδια ζώα του ιδιοκτήτη και ούτω καθεξής.
Κατά το σχεδιασμό εφαρμογών, το σενάριο χρήσης υπαγορεύεται από το πλαίσιο και αυτό θα πρέπει να ενημερώνει την προσέγγιση σχεδιασμού σας (τόσο από αρχιτεκτονική / ενημερωτική όσο και από αισθητική άποψη).
09. Ο λευκός χώρος γίνεται σκοτεινός
Εάν είστε εκτυπωτής ή σχεδιαστής ιστοσελίδων, θα έχετε συναντήσει την ιδέα ότι ο «λευκός χώρος» είναι καλός. Το να δώσετε στοιχεία μέσα στο ντιζάιν δωμάτιο σας για να αναπνέει μπορεί να κάνει τη διάταξη σας να αισθάνεται πιο επαγγελματική, ευκολότερη στη χρήση και λιγότερο τεντωμένη στο μάτι.
Το ίδιο ισχύει και για τη σχεδίαση εφαρμογών, αλλά συνήθως ο λευκός χώρος πρέπει να είναι «σκοτεινός χώρος». Αυτό συμβαίνει επειδή η είσοδος του χρήστη τείνει να επισημαίνεται με ελαφρύτερα πεδία σε κινητές συσκευές, καθιστώντας τις ευκολότερες να εντοπίζουν σε συνήθως πιο σκούρα ή φωτεινότερα φόντα. Εξετάστε αυτήν τη διάκριση μεταξύ των δύο μέσων κατά το σχεδιασμό για εφαρμογές.
10. Το Wireframing είναι απαραίτητο
Είναι πολύ πιθανό ότι ως σχεδιαστής ιστοσελίδων ήδη πλαισιώνετε τις ιστοσελίδες σας. Το Wireframing είναι ένας πολύ χρήσιμος τρόπος για να κοροϊδεύετε την εμπειρία του χρήστη προτού καταλήξετε στο έξυπνο σχεδιασμό των κουμπιών, δημιουργώντας την τυπογραφία σας και επιλέγοντας εικόνες.
Είναι ακόμη πιο σημαντικό στη σχεδίαση εφαρμογών, επειδή γίνεται ένας χρήσιμος τρόπος για να περιγράψετε εξελιγμένες αλληλεπιδράσεις χρηστών χωρίς να χρειάζεται να κωδικοποιήσετε λειτουργικά σχέδια. Το Pidoco, το justinmind και το iPhoneMockup είναι τρία καλά διαδικτυακά εργαλεία για να ξεκινήσετε τα wireframes σας - για περισσότερα δείτε τη λίστα με τα καλύτερα εργαλεία wireframing.
Λόγια: Σαμ Χάμπτον-Σμιθ
Σαν αυτό? Διαβάστε αυτά!
- Δημιουργήστε έναν τέλειο πίνακα διάθεσης με αυτές τις επαγγελματικές συμβουλές
- Οι καλύτερες προσθήκες Photoshop
- Ο απόλυτος οδηγός για το σχεδιασμό των καλύτερων λογότυπων
Χάσαμε κάποια ουσιώδη πράγματα που πρέπει να γνωρίζουν οι σχεδιαστές ιστοσελίδων σχετικά με το σχεδιασμό εφαρμογών; Ενημερώστε μας στα σχόλια παρακάτω!
