Share
Ce veți creaDacă aceasta este prima dată când proiectați pentru un dispozitiv portabil, veți observa că există unele diferențe majore în comparație cu proiectarea unui produs pentru un smartphone sau un computer desktop.
În acest sfat rapid, acoper câteva dintre aceste diferențe, în timp ce vă învăț cum să proiectați pentru Apple Watch.
Vom proiecta o privire pentru Apple Watch. Ca un memento, o privire este un singur ecran fără elemente interactive. Acesta afișează pur și simplu informații și poate fi accesat pentru a deschide aplicația Apple Watch corespunzătoare.
Un utilizator poate accesa o privire ridicând pe ecranul feței de ceas. De asemenea, un utilizator poate alege ce priviri ar dori să vadă pe Apple Watch. Se optează, ceea ce înseamnă că utilizatorul trebuie să selecteze în mod explicit privirile pe care doresc să le vadă pe dispozitiv. Este un mod elegant și simplu de a afișa informații despre aplicațiile preferate.
Ceea ce diferențiază o privire de la aplicația în sine este că o privire este un singur ecran și, ca rezultat, se încarcă mai repede. Flip-urile sunt, de asemenea, mai ușor și mai rapid de accesat decât aplicația Apple Watch corespunzătoare.
Proiectarea pentru Apple Watch înseamnă că trebuie să țineți cont de anumite linii directoare. Acest lucru este similar cu proiectarea pentru iOS sau Android. Puteți afla mai multe despre regulile de proiectare din tutorialul anterior al acestei serii.
Imaginați-vă o aplicație Apple Watch, în care utilizatorul poate urmări cu ușurință bugetul. În ochii noștri, dorim să afișăm a buget zilnic în timp ce se afișează și cantitatea de bani pe care utilizatorul la salvat până în acea lună. În funcție de modul în care cineva cheltuiește bani în timpul zilei, bugetul zilnic scade.
Deschideți schița și introduceți un nou tablou de bord. Lista din dreapta afișează diferitele tablouri de arhivă presetate pe care le puteți alege. În dispozitivele iOS, selectați Apple Watch 42mm.
Faceți clic pe tabloul de bord din lista de straturi și utilizați panoul din dreapta pentru a selecta o culoare de fundal. Alegeți negru (# 000000) ca și fundal. Negrul este culoarea de fundal implicită pentru aplicațiile Apple Watch.
Datorită ramei negre a lui Apple Watch, putem folosi marginea artboard la marginea designului nostru. Spre deosebire de o aplicație tipică sau un design web, nu este necesară adăugarea unei marje la stânga sau la dreapta designului.
Adăugați un titlu, "Buget", astfel încât utilizatorul să fie la curent cu privire la ceea ce privește. SF Compact este fontul implicit folosit pentru Apple Watch. Puteți afla mai multe despre tipografia pentru Apple Watch pe site-ul web al dezvoltatorului Apple. Pentru partea de ceas de 42 mm, este mai bine să rămânem la 32 pt (pentru desene 72 dpi). Textul trebuie aliniat în colțul din stânga sus.
În cele din urmă, schimbați culoarea titlului la un gri deschis (# a2a5ae) pentru a reduce contrastul alb-negru în design. Albul ar trebui să fie rezervat informațiilor pe care vrem să le remarcăm, cum ar fi bugetul rămas.
Cea mai importantă caracteristică a vederii este afișarea bugetului zilnic al utilizatorului. Am putea prezenta acest lucru în mod textual, dar să facem designul mai interesant. Aș dori să proiectez un grafic circular, care scade deoarece utilizatorul cheltuie bani.
Mai întâi, utilizați instrumentul oval pentru a crea un cerc cu o dimensiune de 220 pe 220. Centrarea formei în tabloul de bord și stabilirea lățimii marginii la 24. Faceți clic pe setări pictograma de lângă titlul de frontieră pentru a deschide meniul de setări pentru frontiere. A stabilit Decalaj la 1000 și liniuță la 138. În final, selectați rundă se termină. Bine, ați creat un inel de frontieră.
În meniul de setări de frontieră, puteți crea un inel de margine.Dezactivați completati culoarea cercului și schimbați culoarea frontieră culoare la un gradient unghiular la alegere. Ai putea folosi roti pentru a mișca forma în jurul ecranului, dar acest lucru nu este necesar pentru designul nostru de vedere.
Un gradient unghiular este excelent pentru colorarea unui inel de frontieră.Faceți clic dreapta pe ovalul din lista de straturi și duplicați elementul. Deschideți setările de frontieră ale formei duplicate și setați-o liniuță la 690. Mutați stratul duplicat sub stratul original oval și jucați cu culori și opacitate pentru a finaliza graficul. În exemplul de mai jos, am folosit un gradient unghiular gri-negru cu o opacitate redusă.
Apoi, adăugați un strat text cu copia "14,00 dolari rămas". Setați dimensiunea fontului de "14,00 dolari" la 38 pt și dimensiunea fontului "rămasă" la 26 pt. Centrarea textului în tabloul de bord. Vederea noastră se apropie încet.
În cele din urmă, trebuie să afișăm suma de bani pe care utilizatorul la salvat până în acea lună. Vom folosi secțiunea de jos a ochiului pentru a adăuga acea informație. Deoarece avem deja un element grafic în centrul vederii, vom folosi textul pentru a afișa suma pe care utilizatorul la salvat. Aceasta va crea o privire bine echilibrată și informativă.
Creați un nou strat de text și utilizați-l SF Compact ca font cu un ușoară grosimea fontului. Vom crea un text subsol. Selectați o dimensiune a fontului de 20 pt și setați textul la ceva de-a lungul liniilor de "$ 265.00 salvate în această lună". Aliniați textul din stânga jos a tabloului de bord.
Ce este important atunci când proiectați o privire este că în partea de jos a paginii dvs. de proiectare va apărea paginarea. Un utilizator poate glisa între diferite priviri ale diferitelor aplicații. Să mutăm textul subsolului cu 40 de puncte pentru a adăuga o marjă în partea de jos.
Deoarece am mutat textul din subsol, secțiunea de buget zilnic este necentată. Deplasați grupul care conține textul și diferitele ovale cu 20 de puncte. Și am terminat.
Cu câteva forme simple și trucuri, am creat o privire elegantă a Apple Watch. Dacă doriți să aflați mai multe despre construirea de produse pentru Apple Watch, vă recomandăm să citiți un tutorial despre alegerea strategiei de produs potrivite sau despre învățarea mai mult despre orientările de design Apple Watch.
Dacă aveți întrebări legate de proiectarea Apple Watch, contactați-vă în comentarii sau pe Twitter. Multumesc pentru timpul acordat.
Accentsconagua