Share
Ce veți creaÎn acest tutorial, vă voi învăța cum să creați o aplicație de fitness simplă și ușor de utilizat pentru iOS pentru urmărirea funcționării în aer liber și a ciclismului. În afară de aplicația iOS, vă voi da și un exemplu de design pentru interfața Apple Watch.
La sfârșitul acestui tutorial veți putea proiecta o aplicație iOS cu diferite ecrane și vederi în Sketch. Vom folosi câteva tehnici de bază și intermediare în Sketch, așa că să începem!
Veți avea nevoie de aceste active pentru a urmări:
Înainte de a începe, trebuie să subliniez că acest concept este în întregime teoretic. În cazul unui proiect din lumea reală, ar fi nevoie de o analiză mult mai profundă a pieței și a comportamentului utilizatorilor, înainte de a putea transforma această aplicație într-o aplicație mobilă reală și utilizabilă. Am alergat și mers cu bicicleta regulat timp de patru ani, așa că am creat acest concept pentru a arăta cum ar arăta o aplicație de fitness mele perspectivă.
Folosim Sketch, o aplicație de design creată inițial pentru proiectarea interfețelor și în prezent cea mai rapidă și mai ușoară modalitate de a proiecta pentru iOS.
După ce deschidem schița, să selectăm Artboard (A) opțiune în cadrul Introduce meniul.
În panoul din stânga, vă recomand să alegeți dimensiunile iPhone 6, dar dacă aveți un alt iPhone, veți găsi mai bine să alegeți unul. Acest lucru este important, deoarece, cu ajutorul Sketch Mirror, putem vedea imediat munca noastră, în timp real pe dispozitivul nostru iOS, fără a exporta sau transfera imagini. Sketch Mirror este o parte esențială a fluxului meu de lucru de proiectare, deoarece îmi permite să văd și să simt rezultatul final al muncii mele în câteva secunde.
Pentru a activa Sketch Mirror, trebuie să descărcați aplicația Sketch Mirror din App Store, apoi faceți clic pe Oglindă în cadrul schiței (asigurați-vă că dispozitivele dvs. se află în aceeași rețea Wi-Fi sau conectate prin intermediul unui cablu USB).
De la introducerea iPhone-urilor 6 și 6 Plus, este aproape imposibil să utilizați butonul de navigare ascuns în colțul din stânga-sus, deoarece majoritatea utilizatorilor nu vor putea să-l atingă cu o singură mână. Din acest motiv, am plasat navigația principală în partea de jos a ecranului; vizibile și ușor accesibile.
Să creăm a 100px dreptunghi înalt, lățime întreagă, în partea de jos a ecranului.
Acum, să împărțim acest dreptunghi astfel încât să avem cinci dreptunghiuri egale, în care putem plasa pictogramele de navigare mai târziu. Vă recomandăm să dați fiecărui dreptunghi o culoare ușor diferită pentru a vedea clar marginile fiecăruia.
Să creăm un altul 50x50px pătrat pentru icoane. Mai jos putem adăuga etichetele pentru diferite ecrane: Activități, Provocări, GO, Prieteni și Profil. Pentru aceste etichete, am setat Avenir Next Regular cu dimensiune font 24px și înălțime de linie de 24px.
Acum putem plasa icoanele noastre în aceste mici pătrate. Asigurați-vă că fiecare pictogramă are o lățime de 50 de pixeli sau o lățime de 50 de pixeli. Pentru pictograma noastră de profil, hai să creăm un cerc de 50x50 pixeli Unelte ovale (O) și selectați imagine completă pe Umple panoul.
Ascundeți dreptunghiurile de ghidare făcând clic pe pictograma ochiului de lângă strate.
În fundalul barei de taburi am ales un alb complet #FFFFFF culoare cu 70% opacitate și 8px fundal blur. De asemenea, am adăugat un 1px # B4B4B4 line cu Instrumentul de linie (L) ca separator vizual în partea superioară a barei de file.
Pentru pictogramele și etichetele filelor inactive, recomand o nuanță de gri # 666666 în loc de un simplu negru, iar pentru partea activă, să setăm o culoare roșie vii asemănătoare # FF3B30.
Majoritatea utilizatorilor noștri vor deschide aplicația chiar înainte de a fi gata să ruleze sau să circule, astfel că primul lucru pe care vor să-l facă cu aplicația este să-și urmărească antrenamentele. Acesta este motivul pentru care începem să proiectăm mai întâi ecranul GO, permițând utilizatorului să-și înceapă imediat pregătirea.
Înainte de orice activitate în aer liber, verific întotdeauna vremea în avans, doar pentru a ști ce ar trebui să mă aștept, inclusiv puterea vântului și timpul de apus. Din punctul meu de vedere, aceste detalii sunt cu adevărat esențiale dacă vă aflați în aer liber, așa că am proiectat o secțiune de vreme încorporată pe ecranul GO. În acest fel, utilizatorii nu trebuie să verifice o aplicație meteorologică de fiecare dată înainte de a deschide aplicația noastră de fitness.
În primul rând, vom avea nevoie de un status alb iOS și de o bară de navigare din șablonul Design Sketch iOS UI, pe care îl puteți găsi Fișier> Nou de la șablon> Design IOS UI.
Bacsis: deoarece șablonul Design Sketch iOS UI ne furnizează 1 x active pe care trebuie să le convertim în rezoluție 2x. Acest lucru se poate face cu ușurință cu Scalare instrument.
Pentru culoarea de fundal a barei de navigare am vrut să aleg o culoare viu și vitală, care va inspira utilizatorii să se miște și să acționeze imediat. Așa că am ales un plat, dar încă roșu viu, # FF3B30, care trebuie să vă atrage atenția prima oară când o vedeți.
Pentru indicatorul de rezistență GPS am folosit un gradient simplu de la # 15FF00 la # 15FF00 într-un dreptunghi rotunjit de colț.
În partea opusă, am plasat o pictogramă pentru biciclete, pentru a comuta cu ușurință între modul de funcționare și ciclism.
Acum, să creăm prognoza meteo în partea superioară a ecranului. Deoarece majoritatea antrenamentelor noastre nu durează de obicei mai mult de trei ore, vom oferi o prognoză de trei ore cu informații suplimentare despre puterea vântului și timpul de apus al soarelui. Recomand un fel de gri deschis #ACACAC pentru acest tip de informații, deoarece nu vrem să punem accentul pe prognoza meteo.
Ca separator vizual între diferite tipuri de secțiuni ale interfeței, să tragem a #ECECEC dreptunghi, cu înălțimea de 54px și lățimea de 100%.
Înainte de începerea antrenamentului, aceasta poate fi motivantă pentru stabilirea unui obiectiv. Aceasta poate fi sub forma fie a unei distanțe, a unui timp sau a unei noi înregistrări de viteză medie. Pentru a afișa aceste obiective, creați două cercuri separate cu următoarele dimensiuni: 270x270px și 230x230px.
După plasarea cercurilor, glisați-o pe prima și plasați-o în cea de-a doua pe panoul stratului. Pentru a crea o formă de toner, selectați 'Scădea' opțiune.
Pentru culoarea de fund a acestui inel sa creem un gradient liniar de la # AAFFA9 la # 11FFBD și setați opacitatea la 20%. Aceasta va fi starea inactivă a inelului nostru.
Pentru partea activă, hai să ne replicăm forma selectând forma de pe panoul stratului> clic dreapta> duplicat (alternativ se poate duplica cu ⌘-C și ⌘-V, de asemenea).
Acum avem nevoie de Vector instrument (V) pentru a crea o mască pe cercul nostru activ.
Bacsis: apăsând pe Schimb cheie în timpul utilizării Vector instrumentul ne ajută să creăm linii perfect drepte.
Să mutăm acest strat sub cercul activ, apoi să îl setăm ca strat de mască. Nu uitați să dezactivați umplerea marginii formei vectoriale.
Pentru detaliile fine, să adăugăm două cercuri suplimentare de 20x20 pixeli la forma noastră de mască, oferindu-ne o margine frumos rotunjită la sfârșitul inelului activ.
Pro tip: Pentru textul din centrul inelului, să fixăm o mică cantitate de umbră interioară.
Acum, singurul lucru lipsit de pe ecranul nostru GO este butonul GO, care va fi un dreptunghi înalt de 120px cu # FF3B30 culoare rosie.
În ecranul Activități, putem naviga rapid prin antrenamente de la prietenii noștri sau de la noi înșine. După atingerea uneia dintre aceste antrenamente, putem obține o privire mai detaliată, inclusiv un grafic interactiv.
În partea de jos a acestui aspect detaliat, vom afișa rezultatele generale ale antrenamentului selectat, în timp ce în partea de sus puteți vedea rezultatele specifice în funcție de locul în care atingem graficul (indicat cu o bară verticală ușoară).
Ca și înainte, vom începe cu bara de navigare, adăugând o pictogramă suplimentară "plus" pentru a permite utilizatorului să adauge manual antrenamentele.
Pentru a comuta între antrenamentele prietenilor și propria noastră, trebuie să creați o bară secundară de navigare. Să selectăm Instrumentul dreptunghiular (R) și creați un dreptunghi înalt de 90px cu un albastru închis # 1F2033 culoare de umplere.
Acum creați un alt pătrat de 22x22px și rotiți-l cu 45 de grade.
Putem grupa aceste două straturi, așa cum am făcut cu inelele noastre de goluri. Asigurați-vă că utilizați Scădea în loc de Uniune.
Bacsis: observați ușoară modificare în termeni de opacitate între elementul de navigație secundar activ și inactiv.
Pentru aspectul detaliat, vom crea un alt dreptunghi cu același fundal albastru închis. Dar de data aceasta, înălțimea va fi de 387 de pixeli. Pentru liniile directoare să folosim Instrumentul de linie (L).
Pentru a afișa vizual diferența de altitudine în timpul antrenamentului, va trebui să creați o formă particularizată cu Vector instrument (V). Nu există nicio tehnică specifică pentru crearea acestui grafic, așa că haideți să tweak curba Bézier până când vom simți că este corect.
În afară de diferența de nivel, putem afișa, de asemenea, schimbările de viteză în timpul antrenamentului cu o curbă plină de culoare, unde zonele roșii și verzi indică ritmul.
Metoda este aceeași cu cea precedentă cu Vector instrument și curbe Bézier. Pentru culoarea de umplere pe care am folosit-o # FF3B30 pentru roșu și # 22EA05 pentru verde (verde înseamnă mai repede decât ritmul mediu, roșu înseamnă mai lent.)
Cu ajutorul pluginului Generator de conținut Sketch, putem adăuga cu ușurință imagini diferite de profil în cercurile noastre de avatar.
Acum suntem gata și cu ecranul Activități!
Pe ecranul Provocări, putem vedea provocările particulare la care participăm. În timpul proiectării acestui ecran, am combinat un design circular inspirat de Apple Watch cu un design de tip card, astfel încât utilizatorul poate rearanja provocările în funcție de importanța acestora.
După proiectarea ecranelor anterioare, va fi mult mai ușor să o creați, deoarece am proiectat deja cea mai mare parte a acesteia. În primul rând, să creăm un nou Artboard (A) și copiați bara de navigare și bara de navigare secundară din ecranul Activități.
Pentru a crea cardurile, vom avea nevoie de a 355x400px dreptunghi.
Ca culoare de fundal, am folosit un alb simplu, dar pentru a separa vizual cardurile de fundal am adaugat un pic de umbra neagra 20% opacitate.
Pentru a fi consecvent și coerent în cadrul aplicației, este important să arătați utilizatorilor același tip de informații în același mod. După cum probabil vă amintiți, am proiectat deja un inel mic pentru indicarea obiectivelor pe ecranul GO, deci acum putem folosi aceeași tehnică aici.
Bacsis: dacă doriți să obțineți mai multă inspirație pentru gradientele uimitoare ale UI, vă recomand să verificați uigradients.com.
Ultimul element care lipsește încă este bara de file din partea de jos a ecranului, deci copiați-o din ecranul anterior și asigurați-vă că modificăm starea activă a filei.
În ecranul Răsfoiți provocările, putem trece repede la cele mai populare și mai recente provocări, unde putem vedea câte zile au rămas pentru a face o anumită provocare și câte membri participă la ea.
Ca întotdeauna, putem duplica elementele de design familiare din ecranele anterioare, dar nu uitați să modificați bara de navigare secundară.
Să creăm informațiile de bază despre o provocare și să adăugăm o insignă personalizată ca motivare. Aceasta va fi recompensa atunci când cineva va completa provocarea.
Notă: Pentru acest tutorial, am creat doar o insignă simplă, dar într-un proiect din lumea reală aș petrece mult mai mult timp proiectând diferite insigne foarte lustruite.
Bacsis: Observați diferențele mici în dimensiunea și culorile textului, ajutându-ne să creăm o ierarhie clară.
Pentru a afișa vizual timpul rămas, să creăm o cronologie. Acest bar va avea 40px rotunjite și a # F5F5F5 culoare de fundal.
Pentru partea activă a acestei bare, să copiem dreptunghiul nostru anterior, să îl facem puțin mai scurt și să stabilim un gradient liniar de la # 44FF30 la # FFDA30.
După duplicarea acestei secțiuni și copierea barei de taburi de pe ecranul anterior, suntem pregătiți cu secțiunea Căutați provocări!
Nu în ultimul rând, am creat o interfață Apple Watch pentru aplicația noastră. Acest concept de design se bazează pe Ghidul Apple Human Watch Interface. Aceste orientări sunt furnizate de Apple pentru dezvoltatori și designeri pentru a înțelege mai bine posibilitățile acestei noi platforme.
Am creat patru interfețe de ceas diferite pentru aplicația noastră de fitness. În cazul primului concept, am realizat un ecran foarte personalizabil, unde puteți rearanja informațiile în funcție de interesele dvs. În plus, culoarea celor mai importante date (cele mai importante) se schimbă întotdeauna în funcție de cât de departe sunteți de la obiectivul inițial. În acest caz, culoarea verde înseamnă că ați îndeplinit aproape obiectivul pe distanță.
Am finalizat designul aplicației noastre de fitness iOS. După ce ați urmat acest tutorial, sper că sunteți mai încrezător în utilizarea schiței pentru proiectarea aplicațiilor mobile.
Simțiți-vă liber să descărcați fișierul Sketch complet, pentru a avea o privire mai detaliată asupra tehnicilor de proiectare pe care le-am folosit. Sunt curios să aud cum ați găsit procesul, așa că nu ezitați să lăsați feedback și întrebări în comentarii.
Accentsconagua