Design Killer Mobile Websites Συμβουλές και Παραδείγματα

Η κινητή σκηνή αυξήθηκε εκθετικά τα τελευταία δύο χρόνια. Το iOS App Store μαζί με το Android Apps στο Google Play έχουν γίνει τα δύο hotspots για τους λάτρεις των smartphone. Καθώς ο αριθμός των χρηστών smartphone αυξάνεται, βλέπουμε εκατοντάδες προγραμματιστές εφαρμογών για κινητά να ξεκινούν νέες ιδέες στην αγορά.

Οι πιο δημοφιλείς εφαρμογές συνοδεύονται από τη δική τους ιστοσελίδα. Αυτό μπορεί να σας βοηθήσει με το μάρκετινγκ και να αποκτήσετε το όνομά σας εκεί έξω. Είναι επίσης μια πολύ ωραιότερη διαδικτυακή διεύθυνση URL από οποιοδήποτε από τα App Stores. Πιστεύω ότι οποιαδήποτε επιτυχημένη εφαρμογή κινητής τηλεφωνίας απαιτεί σχεδόν μια παρουσία στο διαδίκτυο.

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

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

Στιγμιότυπα συσκευών

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

Το Easy Chef είναι μια ισπανική εφαρμογή iOS που χρησιμοποιεί πολλές λήψεις συσκευών. Το πολύ πάνω μέρος της διάταξης έχει προεπισκόπηση διαφανειών διαφορετικών απόψεων. Αλλά καθώς κάνετε κύλιση προς τα κάτω θα παρατηρήσετε άλλα διαγράμματα χρησιμοποιώντας οθόνες iPhone. Αυτοί οι πίνακες περιλαμβάνουν λεπτομερείς ετικέτες και επεκτάσεις, μεγεθυμένες προβολές οθόνης. Έχω γράψει πραγματικά για το σχεδιασμό πληροφοριακών γραφικών προϊόντων σε μια παλαιότερη θέση.

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

Εικονίδια App Store

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

Μου αρέσει να χρησιμοποιώ το Instagram ως παράδειγμα από τότε που ο ιστότοπος είχε ενημερωθεί σε νεότερη διάταξη. Έχουν κονκάρδες που υποστηρίζουν το Android Marketplace (Google Play) και το iOS App Store. Και τα δύο κονκάρδες είναι πολύ απλά σχεδιασμένα και αναγνωρίζονται εύκολα με μια ματιά. Αν ψάχνετε για πιο περίπλοκα σχέδια, συνιστώ μια γρήγορη αναζήτηση. Οι ταλαντούχοι σχεδιαστές συχνά μοιράζονται τις ιδέες τους με τα σήματα καταστημάτων εφαρμογής για εποικοδομητικές επικρίσεις.

Κινητά κοινωνικά δίκτυα

Το Facebook και το Twitter έχουν μετατραπεί σε κινητά, αλλά αυτό δεν έχει σταματήσει τα άλλα δίκτυα να ξεφλουδίσουν. Βλέπουμε την κοινωνική δικτύωση να χρησιμοποιεί κινητές εφαρμογές για να επιτρέψει μια εντελώς νέα πλατφόρμα επικοινωνίας.

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

Ελάχιστη κοινή χρήση φωτογραφιών

Το Pose είναι ένα άλλο κινητό δίκτυο με παρόμοια ιδανικά για μινιμαλιστικό σχεδιασμό. Μπορείτε να πραγματοποιήσετε λήψη της εφαρμογής για κινητά για συσκευές iOS και συσκευές Android. Το συναίσθημα είναι παρόμοιο με το weheartit, αλλά είναι για τους λάτρεις της μόδας. Η όλη εφαρμογή επικεντρώνεται στη μόδα, τα μαλλιά, το μακιγιάζ και την αίγλη.

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

Εάν θέλετε να επιστήσετε την προσοχή από τα μέσα ενημέρωσης, είναι σημαντικό να κάνετε τον ιστότοπό σας να φαίνεται και να αισθάνεται σαν ένα πραγματικό προϊόν κοινωνικής δικτύωσης. Δεν προσπαθείτε μόνο να πουλήσετε την εφαρμογή σας (με διαφημίσεις ή συνδρομητική συνδρομή), αλλά και να πωλήσετε το ίδιο το δίκτυο. Οι εφαρμογές κοινωνικής δικτύωσης μπορούν σίγουρα να είναι πιο δύσκολο από το σχεδιασμό των κανονικών ιστοσελίδων εφαρμογής. Αλλά συγκεντρώνουν επίσης πολύ περισσότερες λήψεις από τους χρήστες και είναι ένα συναρπαστικό νέο πεδίο για κινητά.

Από τις ταπεινές αρχές

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

Το Leef App είναι ένας πρόσφατα κυκλοφόρησε πελάτης Forrst για το iPhone. Ο ιστότοπός τους περιλαμβάνει ένα όμορφο στιγμιότυπο οθόνης μαζί με ένα μεγάλο τολμηρό κουμπί λήψης. Το όλο κείμενο της σελίδας απλοποιείται με παρόμοιο τρόπο με τις γραμματοσειρές και τα σχέδια χρωμάτων της Apple.

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

Υπέροχο λευκό

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

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

Πολύχρωμα εικονογραφήσεις

Το αντίθετο προς την μινιμαλιστική προσέγγιση είναι ένα έργο με μοναδικές εικονογραφήσεις, τις οποίες λατρεύω εντελώς. Συχνά φορές αυτή η επιπλέον λεπτομέρεια θα μου πουλήσει πλήρως την εφαρμογή. Ένα παράδειγμα που μπορώ να αναφέρω είναι η εφαρμογή Barista για iPhone. Η επικεφαλίδα της τοποθεσίας τους είναι γεμάτη με μικρά καπουτσίνο και ποτά εσπρέσο.

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

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

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

Ιστοσελίδες εφαρμογών: Premium Showcase

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

Bosquet App