Introducere în designul iPhone

Această postare este prima dintr-o serie de 10 părți iPhone Design featured pe Mobiletuts +. În fiecare săptămână, ne vom arunca cu capul într-o varietate de aspecte legate de proiectarea interfețelor mobile frumoase și utilizabile pentru iOS. Pentru a primi un memento de fiecare dată când un nou post ajunge în această serie, asigurați-vă că vă abonați prin e-mail sau feed-ul nostru RSS!

Prezentare generală a seriei

Sunteți un designer de web, entuziasmat de ideea de a proiecta aplicații pentru iPhone, dar sigur de a începe? Sau poate ați proiectat câteva aplicații, dar căutați să vă îmbunătățiți abilitățile cu câteva cunoștințe fundamentale despre motivul pentru care luăm anumite decizii de proiectare pentru mobil? Această serie este atât pentru începători, cât și pentru designeri de nivel intermediar, care doresc să facă o mare stropire în spațiul de design mobil!

Subiectele pe care le puteți aștepta cu nerăbdare în această serie includ atât tehnici hands-on și exemple, precum și teoria designului mobil legate. Următoarea este o listă a ceea ce vom acoperi pe parcursul acestei serii:

  • Proiectarea pentru publicul iPhone și App Store
  • Modul de utilizare a modelelor de design iPhone și iPad
  • Proiectarea aplicațiilor care utilizează toate funcționalitățile iPhone disponibile
  • Cum de a proiecta pentru diferite tipuri de aplicații pentru iPhone
  • Procesul de proiectare mobilă
  • Pro și Contra de a utiliza Apple implicit vs. Custom Graphics
  • Înțelegerea publicului țintă al aplicației dvs.
  • Sfaturi de design Icon pentru iPhone și iPad
  • dispozitive iPhone Mockup și procesul de tip Wireframing
  • Crearea de imagini și pictograme pentru iTunes

Proiectarea pentru mobil versus Web

Nu pot începe să proiectez aplicații? La urma urmei, proiectarea pentru mobil este doar proiectarea pentru un ecran mai mic, dreapta?

Nu chiar. Proiectarea pentru dispozitive mobile este diferită de proiectarea site-urilor web sau a aplicațiilor desktop, iar diferențele se multiplică rapid, deoarece mai multe dispozitive mobile cu funcționalități suplimentare și considerații hardware unice au intrat pe piață. Să aruncăm o privire asupra diferențelor dintre proiectarea pentru web și mobil pentru a înțelege mai bine modul în care utilizatorii interacționează cu fiecare platformă.

Proiectarea pentru Web

În sensul prezentului articol, termenul "web" se referă la site-uri web și aplicații web pe bază de laptop / desktop. Atunci când proiectăm pentru aplicații bazate pe web, în ​​mod tipic hardware-ul pe care îl vom vedea design-ul este luat în considerare. Nu vom ridica și nu ne atingem nici monitoarele sau laptopurile. De fapt, interacțiunile tactile sunt de obicei limitate la:

  • Clicuri mouse
  • Keystrokes
  • Intrare microfon
  • Difuzor audio de ieșire

Proiectare pentru mobil

Mobile este o fiară complet diferită. Nu numai că lucrăm cu hardware nou și divers, dar designul mobil are, de asemenea, potențialul de a ne afecta în moduri foarte diferite din punct de vedere emoțional. Mobile este o platformă personală și orientată spre oameni. La urma urmei, gândiți-vă la ceea ce numim multe dintre aceste dispozitive: telefoane mobile. Se potrivesc în mâna noastră, în buzunarul nostru sau lângă portofelul nostru. Noi le folosim pentru a face apeluri telefonice și pentru a socializa, și ele sunt aproape întotdeauna de partea noastră. Toți acești factori influențează percepția noastră emoțională asupra dispozitivului.

În ceea ce privește capacitățile hardware, există o mulțime de puncte de interacțiune care influențează direct considerațiile de proiectare. Acestea includ:

  • Detectarea gesturilor (strângere, mișcare, tragere, etc.)
  • Detectarea unică și multiplă (permite interacțiunea directă cu conținutul)
  • Pe ecran, tastatură software sau tastatură fizică wireless
  • Intrare microfon (adesea folosit pentru sarcini cum ar fi navigația)
  • Difuzor audio de ieșire
  • Informații despre locație și feedback

Sunteți un bun bun pentru mobil?

Ca designeri, cu toții avem puncte forte și puncte slabe, domenii de expertiză și zone de dezinteres. Înainte de a sari în elementele de bază ale iPhone Design, este o idee bună să priviți caracteristicile designerilor mobili talentați.

Vestea bună este că puteți învăța acest lucru. Întrebarea este: cât de interesat sunteți în acest sens? Proiectarea pentru dispozitivele mobile necesită o dedicație pentru experiența utilizatorilor dincolo de tot ce a fost cel mai mult la proiectarea pentru web. Rareori creăm interfețe mobile care sunt concepute să se gândească și să se bucure pur și simplu de valoarea estetică. O mare majoritate a interfețelor mobile sunt orientate pe sarcini și orientate spre utilizatori.

Adevărul este că, cu majoritatea aplicațiilor mobile bazate pe utilități, oamenii nu se uită la designul dvs. foarte mult timp. Dacă sunt, ați făcut ceva greșit și dacă nu pot să înțeleagă cum să obțineți ceea ce ați greșit destul de repede, ei pleacă. Ei șterg. Apoi scriu o recenzie urâtă.

Designerii care au cea mai ușoară tranziție la mobil sunt aceia care îmbrățișează un standard ridicat de utilizare și creativitate. Ideea că proiectarea pentru experiența utilizatorului în primul rând deflajează potențialul creativ este exact opusul realității.

Proiectarea pentru mobilă este una dintre cele mai interesante și creative locuri de joacă pentru designeri de astăzi. Este literalmente un teren de joc deschis, copt pentru inovare. Pentru a explica cum este să fii un designer mobil, este mai bine să te uiți înapoi în istoricul de design al produsului.

Înainte de a putea cumpăra un dispozitiv mobil care a efectuat mai multe sarcini, am avut un produs care a îndeplinit o sarcină. Un telefon touch-tone, un ceas cu alarmă, o lanternă - fiecare dintre aceste obiecte individuale a necesitat o echipă dedicată de dezvoltare a produsului, un designer și un comerciant.

Astăzi, desigur, toate aceste sarcini se pot face pe un singur dispozitiv. Destul de uimitor! Ce se intampla este aceeasi planificare, atentie la detalii si designul estetic care a intrat in telefon, ceasul si lanterna de dinainte incepe sa faca din fiecare dintre aceste aplicatii astazi!

Gândiți-vă că nu este doar "există o aplicație pentru asta", și în schimb ca "există un produs pentru asta". Nu proiectați doar aplicații. Proiectați produse.

Mobile este o pânză neagră

Ceea ce este cel mai interesant în ceea ce privește proiectarea pentru dispozitivele mobile este faptul că de cele mai multe ori lucrați dintr-o pânză cu adevărat goală. Desigur, există reguli fundamentale și universale de design care trebuie luate în considerare, dar adevărul este că multe dintre regulile de proiectare și așteptările legate de mobil sunt încă definite.

Provocarea pentru designeri este să creeze modele care să fie valabile pentru utilizator, pentru brand și pentru sarcina la îndemână. Uneori, aceasta înseamnă utilizarea controalelor standard și furnizarea unei interfețe pur utilitare. În alte momente, înseamnă ignorarea tuturor standardelor și crearea unui design complet unic. În orice caz, utilizatorul trebuie să înțeleagă intuitiv modul de utilizare a aplicației într-o clipită.

Ce software folosesc pentru a proiecta aplicații?

Aceasta este prima întrebare pe care designerii noștri pentru mobil pare să o întrebe. Veste bună, pixeli: este Photoshop! Acestea fiind spuse, cu proliferarea dispozitivelor, dimensiunile ecranului și rezoluțiile, formele vectoriale (sau obiectele inteligente vectoriale) sunt, de asemenea, o mare parte a proiectării pentru dispozitivele mobile.

Preferința mea personală este crearea de forme vectoriale în Illustrator și copierea și inserarea acelor obiecte în Photoshop ca strat de formă. Pentru obiectele vectoriale care nu sunt excesiv de complexe, prefer această metodă prin utilizarea obiectelor inteligente, astfel încât nu trec constant înapoi și înapoi de la Photoshop la Illustrator.

Ne vom arunca cu capul în toate detaliile diferitelor dimensiuni ale ecranului, rezoluții, tipuri de fișiere imagine și dimensiuni ale zonei de robinet într-un alt post din această serie: "Cum să folosiți șabloane de proiectare iPhone și iPad".

Cum se fac aplicațiile?

Aplicațiile iPhone sunt dezvoltate utilizând mai multe metode diferite. Ne vom arunca cu capul în "Cum să proiectăm diferite tipuri de aplicații pentru iPhone" într-un post mai târziu, dar, în general, aplicațiile iPhone sunt scrise în limbajul de programare Obiectiv-C folosind un program Apple numit Xcode. Apple oferă tot software-ul de dezvoltare de care aveți nevoie pentru a crea o aplicație gratuit când vă înregistrați ca dezvoltator Apple. Cu toate acestea, pentru a instala software-ul, veți avea nevoie de un computer Apple care rulează cea mai recentă versiune a sistemului de operare OS X. În plus, pentru a construi și a testa aplicațiile pe un dispozitiv fizic iPhone sau iPod touch, va trebui să vă înscrieți în programul Apple Developer și să plătiți o taxă anuală de 99 USD.

De ce sunt unele aplicații șablonate și unele sunt personalizate?

Aplicațiile pe care le vedeți că par să fie "șablonate" utilizează, de obicei, elementele de interfață prestabilite furnizate de Cocoa-Touch și respectă Ghidul standard pentru interfața de utilizare a Apple. Aceste linii directoare definesc standarde grafice și modele de utilizare pentru elementele implicite ale interfeței utile și facilitează dezvoltatorilor să construiască și să proiecteze o aplicație. În mod obișnuit, vedeți o bară neagră în partea de jos și o bară denumită, nav de-a lungul vârfului. Filele vă sară la diferite categorii de informații, în timp ce bara nav vă ajută să navigați în acele categorii.

Aplicațiile pe care le vedeți și care nu includ elementele de interfață standard au fost personalizate. Aproape toate jocurile casual și serioase sunt personalizate și unele instrumente distractive și aplicații de utilitate încorporează și grafica personalizată.

Decizia de a utiliza grafica personalizată versus standard este adesea bazată pe bugetul total disponibil pentru proiect. Doar având bugetul pentru a proiecta grafice personalizate nu este suficient; un buget trebuie să existe și pentru un dezvoltator care să implementeze grafica personalizată. Concepția de integrare a aplicațiilor personalizate poate fi uneori foarte dificilă pentru dezvoltator sau pentru echipa de dezvoltare, și că timpul se poate adăuga!

Având în vedere timpul și banii necesari pentru a construi un interfață utilizator particularizat, este important să luați în considerare cât de multe grafice personalizate stau să îmbunătățească experiența utilizatorilor dincolo de ceea ce este disponibil cu elementele implicite, furnizate de Apple. Un exemplu bun al unei aplicații care face doar un mic lucru și care nu are nevoie de mult design personalizat este UDID Sender. Această aplicație captează UDID-ul dispozitivelor dvs. (cam ca eticheta de licență a iPhone-ului dvs.) și o va trimite unui e-mail unui dezvoltator, astfel încât să puteți instala versiuni anterioare ale aplicațiilor pentru testare beta. Acest tip de aplicație nu are nevoie de grafică personalizată.

Gata să se scufunde în?

Grozav! Următorul post din această serie vă va permite să vă umeziți picioarele jucându-vă cu niște șabloane de design pre-fabricate. Vă voi vorbi despre câteva aspecte de bază ale modului de proiectare a primei aplicații, inclusiv standardele, cele mai bune practici și regulile de bază de proiectare și teoria mobilului.

O ofertă specială de la Jen Gordon @Tapptics

Trimiteți-mi un e-mail și vă voi trimite un cupon de 20% off pentru o perioadă de ani de descărcări pe Tapptics!

Cod