Sfaturi ucigaș pentru iPhone și iPad Icon Design

Icoanele reprezintă o parte crucială a fiecărei aplicații iOS. Acestea transmit prima impresie a aplicației dvs. utilizatorilor potențiali și rămân un punct focal central pentru cei care descarcă aplicația. Știm cu toții cât de important este să creați o primă impresie bună și să construiți un brand puternic cu designul dvs. și acest tutorial va demonstra 8 modalități excelente de a face exact acest lucru!

1. Utilizați metaforele vizuale

Acesta este un design neconceput în designul icoanelor, dar dacă treceți prin App Store, sunt surprinzător de puține icoane care fac acest lucru bine. De exemplu, căutați "twisters limba" și veți vedea un sortiment de icoane de genul:

Dacă ați luat toate cuvintele de pe aceste icoane, câte dintre voi v-ar spune "gura"? Acesta este motivul pentru care auziți adesea "nu folosiți cuvinte pe pictograme" - prea mulți oameni o folosesc ca o cârjă pentru a descrie ce este vorba despre aplicație!

Am lărgit singura icoană care face cu adevărat termenul "twister limba" justiție. Câteva îmbunătățiri pe care le-aș sugera sunt să contureze silueta capului și, eventual, să o mărească. Acest lucru va face limbajul răsucite clar vizibil și conturul îl va ajuta să apară din fundal. Cu excepția cazului în care toate twists sunt specifice pentru Marea Britanie, mi-ar pierde steagul și în loc să aleagă un fundal care adaugă mai mult contrast în jurul ilustrației.

Ce sa întâmplat Starbucks?

Aplicația principală Starbucks are o imagine minunată și o aplicație excelentă, dar aplicația care urmărește numerar pe cartela dvs. cadou Starbucks contrastează în comparație. Pictograma este abia lizibilă în grila App Store, iar sigla este practic invizibilă.

Ce altceva ar fi putut face? Cum de a face pictograma să semene cu o carte cadou reală? Trageți în marcă comercială verde, faceți logo-ul mare și vizibil și adăugați banda magnetică "card cadou" care trece peste ea? Sau poate o ilustrare a unui portofel cu sigla Starbucks?

2. Înfășurați un concept în jurul aplicației și pictogramei

Un alt mod de a adăuga adâncimea designului icoanelor și app-urilor este să-i dați o adâncime conceptuală. În spațiul aglomerat al aplicațiilor "to-do", marca "verificare" este o metaforă vizuală frumoasă pentru "făcut", dar este suprautilizată până la punctul de lipsă de sens.

Singurele aplicații care ies din mulțime au pus un strat conceptual suplimentar peste semnul comunicativ.

2Do - Această pictogramă seamănă cu un teanc de documente care trebuie revizuite. Pielea cusută este un contrast frumos față de culoarea curată, post-it și textura netedă.

Opriți lucrurile - Punerea lucrurilor în afara este un exemplu extraordinar de gândire și design conceptual. De ce să creați o altă aplicație de rezolvat atunci când majoritatea dintre noi doresc cu adevărat să dau seama ce putem face până mâine? Privind la o problemă în exact opusul concurenței dvs. poate da rezultate destul de creative și distractive. Opera de arta spune exact ce este vorba despre aplicatie - o cutie poștală cu o săgeată "înainte" și dacă te uiți la grila de pictograme de deasupra selecției de culori o face într-adevăr să iasă din mulțime.

Taska - icoana lui Taska arată ca o grămadă de hârtii bine așezate pe un birou. Deși nu este un concept profund, această icoană este ilustrată frumos. Observați detaliile despre umbrirea fundalului de lemn care dă adâncime stivei și claritatea marginilor hârtiei și semnul de marcare. Hârtiile par să se tragă chiar de pe ecran, ceea ce face ca pop-ul să se desprindă de grila de semne de avertizare vechi.

3. Nu faceți promisiuni goale

Pictograma aplicației dvs. este prima promisiune făcută utilizatorului. Se spune:

  • Sunt de calitate "x"
  • Voi face "asta" pentru tine

Dacă utilizatorii văd o pictogramă de înaltă calitate, iar aplicația este proastă, oamenii primesc codul PO. Dacă oamenii cred că pictograma înseamnă "x" și aplicația efectuează de fapt "y", oamenii primesc PO. Îndepliniți promisiunea aplicației către utilizator!

4. Continuitatea grafică este o necesitate

O modalitate de a vă asigura că respectați promisiunile dvs. este să vă asigurați că grafica din cadrul aplicației corespunde cu pictograma. Cheltuielile reprezintă un exemplu excelent de icoană care descrie foarte bine funcția aplicației (cheltuielile de urmărire) și cum se poate trage un concept de design de la pictogramă la aplicație.

5. Testați designul de pictograme pe dispozitivul dvs.

Aceasta este o surpriză pentru mulți designeri noi în proiectarea icoanelor iPhone și iPad. Modul în care designul dvs. pare a fi înșelat în Photoshop sau chiar în iPhone Simulator este mult diferit de modul în care va arăta pe un dispozitiv real. De ce? Câteva motive:

  • Monitoarele pentru computer nu reprezintă cu precizie gama de culori și luminozitatea dispozitivelor touchscreen.
  • Nu toate afișajele cu ecran tactil sunt create. De exemplu, ecranul cu retină pe iPhone este de o calitate superioară ecranului pentru retină pentru iPod touch.
  • În special pentru iPad, este dificil să duplicați perspectiva adâncimii pe pictogramele așa cum apar pe dispozitivul propriu-zis.

6. Curiozitatea Pique

All-in Yoga este un exemplu excelent de siluetă provocatoare, dar ilustrată cu bun gust, care descrie în detaliu despre ce este vorba aplicația.

All-in Yoga

7. Capitalizați pe marca dvs.

Dacă proiectați o aplicație pentru un brand bine cunoscut, utilizați-o! Mai jos sunt exemple de aplicații care fac o treabă excelentă de a ieși în App Store prezentând un logo, un nume sau o față care pot fi recunoscute în legătură cu aplicația. Este posibil ca aceste aplicații să nu vă spună exact ce are aplicația, dar oferă o idee despre conținutul pe care îl veți primi pe baza imaginii.

Nike - probabil ceva de fitness legate
NBC Nightly News - buletine de știri din program
madonă - muzică sau videoclipuri
Jamie Oliver - Rețete
Mad Libs - probabil o versiune de aplicație a MadLibs?

Indiferent ce faceți, nu pierdeți darul unui brand recunoscut! Acestea pot fi recunoscute atunci când sunt suflate:

Dar uite ce se întâmplă atunci când siluetele lor slabe concurează cu alte pictograme din grila ocupată de App Store. Unde este Rachel? iCarly?

Acum, uita-te la îmbunătățire cu doar câteva mici tweaks:

Acestea sunt mai ușor de recunoscut și în grila App Store:

Gândirea și executarea acestor corecții au durat mai puțin de o oră în Photoshop:

Rachel Ray - Chiar daca fata lui Rachel nu era recunoscuta, ea are un zambet mare si ochii care servesc ca punct focal pentru atragerea oamenilor. Vestea buna atunci cand proiectati o icoana pentru o celebritate este ca aveti multe de lucrat in utilizarea fața persoanei. În general, ochii oamenilor sunt mai întâi atrase de chipurile umane în rândul unui grup de icoane generice. Testați-vă acest lucru pentru dvs.: aruncați o privire spre imaginea de mai sus pentru un minut și apoi priviți înapoi. Pe ce pictogramă ați făcut prima dată ochiul tău? Anunță-mă în comentariile!

iCarly - Desigur, eu nu ma uit la iCarly, dar bunul simt imi spune ca personajul principal al show-ului este probabil cea mai buna fata pe care o poti prezenta pe aceasta icoana, impreuna cu logo-ul show tweeny. Dacă copiii sau părinții nu sunt siguri de cana recomandată, logo-ul susține că au găsit o aplicație de interes.

Eckart Tolle - Această aplicație este de fapt pentru seria sa video, Stillness Within. Titlul ar putea fi cu siguranță scris în partea de jos într-un mod elegant. Cu toate acestea, pentru cei care recunosc Eckart, ei probabil nu vor pasa de titlu. El atrage un public foarte pasionat, unul care ar fi interesat de orice publica. Doar imaginea lui e suficientă.

Hello Kitty Calendarul de ștampile - Din nou, brand foarte recunoscut, care a fost prea mult înghesuiți într-un spațiu mic. În versiunea originală, abia poți face fata Hello Kitty. Aceasta este o rușine, deoarece este marca recunoscută pe plan internațional a mărcii. Desigur, o adăugare utilă ar fi adăugarea unui calendar în formă de ștampilă, dar ceea ce trebuie luat în considerare în cazul marilor marci este modul în care se poate gestiona iconografia din întreaga suită de produse de aplicație pentru acea marcă. Este aceasta singura aplicație pe care Hello Kitty o va produce? Cum se vor ocupa de icoane pentru marca ca un întreg?

Perez Hilton - Această pictogramă poate merge în câteva direcții diferite. Cititorii lui îl recunosc cu adevărat sau doar numele lui? I-am citit blogul de câteva ori și nu pot să-ți spun nimic despre aspectul lui. Cu toate acestea, el are câteva ilustrații pe antetul său de blog, problema este că cea care a fost utilizată este practic nerecunoscută. Am folosit una dintre celelalte ilustrații de pe blogul său, am explodat pentru o siluetă puternică și am corelat culorile voastre ale site-ului său. Bam.

Acum că am spus că e bine să folosiți o imagine de fotografie, permiteți-mi să clarific. Acest lucru este OK dacă aveți de-a face cu o figură recunoscută de tip celebritate! Nu aș recomanda să folosiți fotografii din orice alt motiv. Iată câteva exemple de utilizare necorespunzătoare a fotografiilor:

8. Respectați grilă App Store

S-ar putea să fi observat că mă refer la grilă App Store. Aceasta este ceea ce face designul icoanelor pentru iPhone și iPad unic de la desktop sau web design icon icon. Experiența de cumpărături din App Store este ca și cum ai căuta o "căutare" la un magazin de lux. Există câteva produse utile și frumos concepute, înconjurate de o mulțime de agitate și junk.

Verificați designul în toate magazinele

"Grilă" se aplică magazinelor iTunes, magazinelor iPhone și iPad, deci asigurați-vă că ați testa modul în care va apărea pictograma dvs. în toate aceste medii atunci când este contrastează cu aplicațiile care vor fi cel mai probabil poziționate în aceeași listă ca a dvs. Trebuie să dai seama cum să atragi ochiul utilizatorului de la concurență și spre tine!

Spune-mi despre pictogramele tale favorite

Lasă-mă un comentariu de mai jos cu exemple de icoane pe care credeți că le obțineți dreptate!

Cod