Design for Mobile, Part #01: Web Application Design

γενικές συζητήσεις για τον προγραμματισμό φορητών συσκευών

Συντονιστής: Super-Moderators

Απάντηση
Άβαταρ μέλους
Basilakis
PHP Moderator
Δημοσιεύσεις: 8575
Εγγραφή: 17 Νοέμ 2003 13:03
Τοποθεσία: Womans' Brain
Επικοινωνία:

Design for Mobile, Part #01: Web Application Design

Δημοσίευση από Basilakis » 18 Ιούλ 2011 18:52

Το να σχεδιάσουμε ένα Web Site για να παίζει σε mobile συσκευές δεν είναι εύκολο.
Πόσο μάλλον να σχεδιάσουμε ένα application το οποίο θέλουμε να λειτουργεί αποκλειστικά σε mobile περιβάλλον.
Υπάρχουν κάποια πράγματα τα οποία πρέπει να λάβουμε υπόψιν όταν ξεκινάμε για να σχεδιάσουμε κάτι τέτοιο. Ας δούμε ποιος θα ήταν ένας "καλός" δρόμος για να σχεδιάσουμε μια τέτοια εφαρμογή.

Η Ιδέα
Η ιδέα μίας εφαρμογής ή ενός application, πρέπει να βασίζεται στην λύση ενός προβλήματος ( εάν είναι κάτι από το 0 και δεν είναι απλώς η μετατροπή ενός Web Service σε mobile υπηρεσία ). Αυτό βέβαια
εάν θέλετε το web app σας να είναι web service και να μπορείτε να βγάλετε κάποια χρήματα από αυτήν. Η λύση συνήθως είναι σε προβλήματα που αντιμετωπίζεται εσείς οι ίδιοι, ή σε προβλήματα τα οποία
θεωρείτε πως υπάρχουν και θα έπρεπε να λυθούν.

Το κοινό μας
Το σημαντικότερο κομμάτι. Ακόμη πριν φτάσετε στο πρώτο σας σχέδιο θα πρέπει να ξέρετε που απευθύνεστε. Όσο και η mobile τεχνολογία να έχει περάσει στην ζωή μας, το κοινό σας χρησιμοποιεί
1. Διαφορετικές συσκευές
2. Διαφορετικά προγράμματα κινητής τηλεφωνίας ( όγκος δεδομένων χρήσης )
3. Διαφορετικό τρόπο προσέγγισης του mobile internet

Προσωπικά έχω βγάλει κάποια στοιχεία με βάση κάποια έρευνα σε κάποια Web Apps ή iOS APPS, θα μοιραστώ κάποια από αυτά.
1. Το Location παίζει μεγάλο ρόλο
2. Το Niche παίζει ρόλο
3. Ο χρόνος ανταπόκρισης της εφαρμογής σας σε ερωτήματα χρήστη
4. Η χρήση social στοιχείων, π.χ. Login With Facebook ID
5. Το καλό Design
6. Η χρήση νέων τεχνολογιών για διευκόληνση του χρήστη: Push Notifications, Geolocation, Voice Recognision, Accelerometer κτλ.
7. Native τεχνολογίες: HTML5


Ξεκινήστε με το WireFrame
Θα ήταν καλό πάντοτε, να ξεκινάτε την υλοποίηση μιας ιδέας σας με ένα WireFrame. Το Wireframe είναι η διαδικασία που ακολουθούμε για να "βγάλουμε" από το μυαλό μας την ιδέα μας για την υλοποίηση
και να μπορέσουμε να την οργανώσουμε σωστά. Το WireFrame μας, αναλόγως πόσο "σίγουροι" είμαστε, μπορεί να γίνει στο χαρτί η κατευθείαν σε κάποιο εργαλείο που χρησιμοποιούμε ( photoshop, illustrator, pixmator ).
Αυτό το βήμα είναι το πιο βασικό. Εάν δεν σχεδιάσετε την πρώτη σας ιδέα, θα αντιμετωπίσετε προβλήματα στη συνέχεια.
1. Να ξεχάσετε πράγματα
2. Να μην έχετε συζητήσει και να σκεφτείτε παραπάνω πράγματα με αυτούς που δουλεύετε την εφαρμογή μαζί
3. Να προσαρμόσετε την εφαρμογή και να κάνετε τα πρώτα Usability Testings. Μπορείτε να βρείτε χρήστες ακόμη και στο δρόμο που θα σας βοηθήσουν να αντιμετωπίσετε την εφαρμογή σας σωστά.

Μερικά Resources σχετικά με τα WireFrames:
http://www.smashingapps.com/2011/02/02/ ... gners.html
http://www.geekchix.org/blog/2010/01/03 ... reframing/


Το Design της εφαρμογής μας
Αφού τελειώσουμε με τα WireFrames και προχωρήσουμε στο Design της εφαρμογής υπάρχουν πράγματα που πρέπει ξανά, να έχουμε κατά νού. Ναι πολλά απο αυτά είναι Web related, αλλά και άλλα που πρέπει να αντιμετωπίσουμε εάν δεν έχουμε δουλέψει ξανά σε Web App.

1. Το μέγεθος της εφαρμογής μας δεν πρέπει να έχει max-width 480px. Αυτό συμβαίνει για να μπορούμε να βλέπουμε το μέγεθος να είναι "αναλογικό" με τα μεγέθη των οθονών που βρισκόμαστε.
ΠΑΡΟΛΑ αυτά προσωπικά συμβουλεύω να χρησιμοποιούμε ένα grid system με μέγεθος τα 300px. ΑΝ και στην πραγματική υλοποίηση μας, θα έχουμε ένα width: 100% ( ή θα ήταν το καλύτερο τέλος πάντων ).

2. Το μέγεθος τον γραφικών μας πρέπει να είναι όσο περισσότερο Optimized γίνεται. Σαφώς, επειδή οι mobile browsers μας το επιτρέπουν, μπορούμε να κάνουμε replace τα περισσότερα γραφικά μας με CSS3 ή να τα δημιουργήσουμε με HTML5 canvas. Αυτό χρειάζεται εμπειρία και σαφώς να κάνουμε πολλούς περισσότερους ελέγχους, αλλά στο τέλος το αποτέλεσμα, δικαιώνει.

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

4. Προσοχή στα διάφορα elements. Βασικό στοιχείο είναι πως πρέπει να "ξεχωρίζουμε" τα στοιχεία της εφαρμογής μας. Δεν πρέπει να υπάρχουν στοιχεία τα οποία δείχνουν πως κάνουν κάτι, ενώ δεν κάνουν, να μην υπάρχουν στοιχεία

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

Μερικά σχετικά Resources
http://978.com όπου θα βρείτε ένα 300px grid



Και τι σχεδιάζουμε;
Η Εφαρμογές μας έχουν κάποια στάδια.

1. Στο mobile χρησιμοποιούμε ένα Intro page με κάποιο loader. Αυτό το κάνουμε για να κερδίσουμε χρόνο στη φόρτωση της εφαρμογής μας, για να ζητήσουμε το χρήστη να συνδεθεί πριν προχωρήσει και ακόμη ότι άλλο τρόπο σκεφτείτε.


2. Οι φόρμες, η αναζήτηση οι εικόνες τα video και ότι animation έχουμε, πρέπει να είναι πολύ πιο προσεγμένα. Οι χρήστες μας έχουν ένα μικρό πληκτρολόγιο να χρησιμοποιήσουν, αλλά και δεν μπορούμε να βάλουμε στοιχεία όπως π.χ. AutoSugget, γιατί θα βαρύνουν την εφαρμογή μας και δεν το θέλουμε. Χρησιμοποιείστε τα native κουμπιά των συσκευών σας για να γίνεται η αποστολή ( π.χ. το go του iPhone ) σε φόρμες όπως η μηχανή αναζήτησης.

Εικόνα

3. Η τυπογραφία τις εφαρμογής μας, αντιστοιχεί και αυτή στο μέγεθος τον elements. Μην σχεδιάζεται αντικείμενα που είναι δύσκολο να διαβαστούν ή να επιλεγούν. Για να σχεδιάσετε τα elements μπορείτε να χρησιμοποιήσετε και διάφορα libraries τα οποία σας δίνουν αυτή τη δυνατότητα.

4. To εικονίδιο της εφαρμογής μας, είναι ένα εξίσου σημαντικό κομμάτι. Στο header της σελίδας μας μπορούμε να προσθέσουμε το παρακάτω:

Κώδικας: Επιλογή όλων

<link rel="apple-touch-icon" href="/custom_icon.png"/>
<link rel="apple-touch-startup-image" href="/startup.png">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
Οι android εφαρμογές θα επιλέξουν το

Κώδικας: Επιλογή όλων

<link rel="apple-touch-icon-precomposed" href="/custom_icon.png"/> 
να χρησιμοποιήσουν για την εφαρμογή σας.

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

6. H χρήση Icons και γραφικών ΠΡΟΒΛΕΠΕΤΕ. Είναι ο πιο σωστός τρόπος για να δώσετε στους χρήστες σας να καταλάβουν και να κατανοήσουν το περιεχόμενο της εφαρμογής σας. Μάλιστα λόγο χώρου, είναι καλύτερα να χρησιμοποιείται ένα Icons αντί για κείμενο.

7. Τα error message τις εφαρμογής μας είναι και αυτά ένα κομμάτι το οποίο πρέπει να προσέξουμε. Ένα 404 error σε μια ιστοσελίδα είναι κάτι που οι περισσότεροι μπορούν να το αντιληφθούν, αλλά τι γίνεται στο mobile? Πως μπορούμε να δώσουμε στο χρήστη περισσότερες επιλογές όταν φτάνει σε κάτι τέτοιο;


The Retina Display

Το iPhone 4 βγήκα για να μας κάνει τη ζωή δύσκολη. Ναι πολύ δύσκολη. Αλλά οκ, τα πράγματα γίνονται εύκολα όσο έχεις τα κατάλληλα εργαλεία... Anyway, το iPhone 4 έχει το Retina Display. Μας επιτρέπει δηλαδή να φτιάξουμε εικόνα στο διπλάσιο μέγεθος για να χρησιμοποιηθεί από την εφαρμογή μας!


Μια διαδικασία που μπορείτε να ακολουθήσετε είναι η ακόλουθη:

* Φτιάχτε το Design σας σε 1χ
* Χρησιμοποιείστε το copy merged για να σώσετε όλες τις εικόνες σε 1χ
* Κάντε Duplicate όλα το φάκελο που περιέχει τα 1χ Images
* Χρησιμοποιείστε κάποιο πρόγραμμα όπως το Automator για Mac για να προσθέσετε ένα @2χ σε όλες τις εικόνες
* Ανοίχτε τα αρχεία σας και τρέχτε ένα Scale by 200% photoshop action. Αυτό θα σας δώσει αρχεία με σωστό filename και μέγεθος.
* Κάντε το ίδιο στο main Photoshop design σας

Retina για Browser
Για να καλέσετε το "retina size" στο browser σας χρησιμοποιείται τα παρακάτω:

Κώδικας: Επιλογή όλων

@media all and &#40;-webkit-min-device-pixel-ratio&#58;2&#41; &#123;
    .bg &#123;
        background-image&#58; url&#40;chevron-hd.png&#41;;
    &#125;
&#125;
εάν θέλετε βέβαια, μπορείτε να καλέσετε ένα full retina CSS file, από εδώ:

Κώδικας: Επιλογή όλων

<link rel="stylesheet" href="retina.css" media="all and &#40;-webkit-min-device-pixel-ratio&#58;2&#41;">

The ICON DESIGN
Για τα Web App μας ένα σημαντικό κομμάτι, είναι το σχέδιο του εικονιδίου σας. Όπως αναφέραμε υπάρχουν διαφορετικά μεγέθη τα οποία μπορείτε να χρησιμοποιήσετε.
Εικόνα


Λίγο Inspiration
http://mashable.com/2011/01/26/mobile-a ... gn-trends/
http://www.iospirations.com/
http://mobile.tutsplus.com/tutorials/mo ... spiration/
http://www.inspiredm.com/ios-inspires-m ... resources/
http://www.iosinspires.me/category/appwebsites/
http://designshack.co.uk/articles/inspi ... interfaces



Αυτά για αρχή! Τι λέτε να κάνουμε και έναν διαγωνισμό;

Εάν αυτό το post, που εγκαινιάζει μια σειρά από posts, μαζέψει 100 Facebook Likes ( εκεί το κουμπάκι πάνω ντε! ), στο τέλος των posts θα μοιράσω .psd αρχεία από ένα web app :-)

emphasy
Honorary Member
Δημοσιεύσεις: 4303
Εγγραφή: 16 Ιαν 2005 10:31

Design for Mobile, Part #01: Web Application Design

Δημοσίευση από emphasy » 21 Ιούλ 2011 13:36

Αντί για την παράμετρο pixel, δεν μπορεί να χρησιμοποιηθεί το "ποσοστό (%)"; Νομίζω πως έτσι κερδίζεις αρκετό χρόνο στο design αλλά και στην τιμή, παράγεις κάτι φθηνότερο που μπορεί να παίζει και σε mobile devices. Έχει βέβαια αρκετά αρνητικά, όπως ότι δεν μπορείς να χρησιμοποιήσεις πολλές εικόνες και άλλα πολλά.

Άβαταρ μέλους
Basilakis
PHP Moderator
Δημοσιεύσεις: 8575
Εγγραφή: 17 Νοέμ 2003 13:03
Τοποθεσία: Womans' Brain
Επικοινωνία:

Design for Mobile, Part #01: Web Application Design

Δημοσίευση από Basilakis » 21 Ιούλ 2011 13:41

Η παράμετρος % σημαίνει πως θα ρυθμίσεις και όλα σου τα αντικείμενα με αυτήν. Ναι μπορεί να παίζει σε όλες τις συσκευές αυτό που θα ορίζεις, αλλά το περιεχόμενο προσωπικά θεωρώ πως δεν πρέπει να είναι το ίδιο σε αυτά...


Facebook like / Twitter share όλα αυτά πως θα ρυθμιστούν σε κάτι mobile?

Προσωπικά ακολουθώ την τεχνική του http://978.gs/ και είμαι απόλυτα ικανοποιημένος :-)

Άβαταρ μέλους
cpulse
Script Master
Δημοσιεύσεις: 1527
Εγγραφή: 21 Μαρ 2006 19:30
Τοποθεσία: Αθήνα village
Επικοινωνία:

Design for Mobile, Part #01: Web Application Design

Δημοσίευση από cpulse » 21 Ιούλ 2011 17:55

Ένα ενδιαφέρον link για περισσότερες πληροφορίες για το πως στοχεύουμε CSS για διαφορετικά μεγέθη οθονών

http://developer.android.com/guide/weba ... eting.html

Άβαταρ μέλους
Basilakis
PHP Moderator
Δημοσιεύσεις: 8575
Εγγραφή: 17 Νοέμ 2003 13:03
Τοποθεσία: Womans' Brain
Επικοινωνία:

Design for Mobile, Part #01: Web Application Design

Δημοσίευση από Basilakis » 21 Ιούλ 2011 18:31

Το συγκεκριμένο άρθρο δεν είναι για @media-queries! :-)

Ετοιμάζω ένα άλλο σχετικά...

Απάντηση

Επιστροφή στο “προγραμματισμός mobile συσκευών - γενικά”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 0 επισκέπτες