Share
Ce veți creaÎn acest tutorial veți învăța să creați un formular de conectare, inspirat de lecțiile estetice din Material Design Google. Vom acoperi câteva bune practici pentru a mări ratele de finalizare a formularului și metode pentru a rămâne în concordanță cu modelele dvs. Pentru a începe, descărcați programul Archive.zip. Instalați fonturile Roboto și deschideți începe file.sketch.
Să începem prin crearea artei noastre. Pentru a face acest lucru, apăsați A apoi alegeți iPhone Portret 640x1136px presetat. Să spunem asta Logare.
Apoi, trebuie să proiectăm antetul. Antetul nostru conține bara de stare iPhone și o bară de navigare. Mai întâi, pentru bara de stare, trageți un dreptunghi utilizând R, numeste bara de stare, apoi aplicați aceste proprietăți:
Debifați marginile și umpleți dreptunghiul cu culoarea dorită. Puteți alege să mergeți cu culoarea principală a mărcii sau a aplicației dvs. - aleg acest albastru:
Să facem același lucru și pentru bara de navigare. presa R, trageți dreptunghiul, denumiți-l bară de navigare apoi utilizați aceste proprietăți pentru a le poziționa și a le scala:
În sfârșit, completați-o cu aceeași culoare pe care ați ales-o înainte:
Notă: Noi proiectăm cu afișajele retinei în minte aici. Din acest motiv, bara noastră nav este de 96 de pixeli înălțime: de două ori înălțimea real intenționată înălțime de 48 px. 48px este de trei ori înălțimea dimensiunii fontului pe care am ales să o folosesc (16px), permițându-mi să-mi centraz pictogramele și să rămân în concordanță cu conținutul în același timp.
Aproape am terminat antetul. Acum trebuie să adăugăm titlul paginii și butonul din spate.
Să începem cu butonul din spate. Mergi la Introduceți> Simboluri> pictograma înapoi apoi aplicați aceste proprietăți:
Ar trebui să ajungeți la ceva de genul:
Pentru a vă asigura că pictograma din spate este centrată pe verticală, puteți selecta pictograma și bara de navigare, apoi faceți clic pe Alinierea verticală (în partea dreaptă sus în imaginea de mai jos):
Puteți utiliza această funcție pentru a poziționa orice strat în raport cu altul. Acum, adăugați eticheta din spate. Tip T apoi scrieți "Înapoi". Accesați proprietățile textului și introduceți:
Apoi pozitionati-va pe tabla de arta folosind:
Și în sfârșit: titlul. Tip T apoi scrieți "Conectare". Accesați proprietățile textului și introduceți:
Apoi, următoarele coordonate pentru poziționare:
Să punem toate straturile într-un dosar împreună selectând toate obiectele și făcând clic pe grup buton. Denumiți-l "antet" și ați terminat!
Să continuăm cu formularul. Acesta este un formular de autentificare, obiectivul final fiind acela de a vă permite să vă conectați sau să vă înscrieți. Pentru a oferi încurajare, vom păstra la minimum intrările și vom prezenta utilizatorului o limbă motivantă.
Tip T apoi introduceți fraza de captură dorită. Asigurați-vă că sunteți concis, pentru mine va fi Veți obține niște lucruri uimitoare, apoi editați proprietățile textului care urmează să fie:
Acum hai să o punem. Vrem să aplicăm spațiul alb pentru ao face ușor de citit, așa că am ales să plasez o margine de 80px în jurul textului. Pentru aceasta, editați următorii parametri:
Avem fraza noastră de captură, acum să adăugăm nucleul paginii noastre: intrările. Intrările noastre vor demonstra două stări: goale și umplut. Să începem cu cea plină: Apăsați R și trageți un dreptunghi, denumiți-l "intrare" și aplicați următoarele:
Schimbați fundalul gri cu un alb în umple , debifați marginea și adăugați o umbră cu aceste proprietăți:
Ar trebui să obțineți ceva de genul:
Notă: Pentru a simplifica tutorialul vă dau distanța exactă pentru fiecare strat. Fiecare dintre ele are o marjă de 80px. Dacă doriți să verificați marginea dintre stratul dvs. curent și ceilalți țineți Alt și trageți mouse-ul peste celelalte straturi.
Acum vom adăuga o etichetă pentru intrare. Lovit T apoi introduceți "nume de utilizator" în majuscule, oferind textului următoarele proprietăți:
Acum pentru conținutul inputului. Lovit T apoi introduceți numele dvs., dând proprietățile textului aceste valori:
Apoi, selectați cele două straturi, aliniați-le la stânga și adăugați o margine de 10px între ele.
Există un ultim pas pentru a completa această intrare completă. Un fel de validare ar ajuta utilizatorii noștri să înțeleagă dacă au completat corect detaliile sau trebuie să încerce din nou.
Să adăugăm acest marcaj, dând clic pe Introduceți> Simboluri> bifați pictograma apoi puneți-l la
Selectați stratul de intrare, conținutul de intrare și dosarul pictogramă de verificare, apoi grupați-le și apelați noul dosar intrare completă.
Să adăugăm acum intrarea goală. Selectează intrare completă folder, faceți clic cu butonul din dreapta pe el și apăsați duplicat. Redenumiți dosarul intrare. Apoi mutați-l cu 98 de grade. Ștergeți toate straturile din interiorul acestui dosar, cu excepția celei solicitate intrare. Tip T apoi scrieți "Parola" și adăugați următoarele proprietăți:
Apoi, aliniați stratul de text vertical și în stânga stratului de intrare astfel:
Acum vom adăuga un link "uitat parola". Click pe Introduceți> Simboluri> pictograma de ajutor și plasați-o la:
Deplasați folderul cu pictograma de ajutor și stratul de text în directorul de intrare și ați terminat cu intrările!
Pentru a putea folosi acest formular, trebuie să adăugăm butonul de conectare și link-ul de înscriere. Pentru a face acest lucru, apăsați R, trageți un dreptunghi și denumiți-vă stratul conectare buton cu următoarele valori ale proprietății, inclusiv o anumită rază de graniță:
Acum, să adăugăm textul. Lovit T apoi scrieți "Login" cu următoarele proprietăți:
În final, vom adăuga pictograma noastră dând clic pe Introduceți> Simboluri> pictograma dreapta apoi poziționându-l așa:
Grupați ultimele trei straturi și denumiți-le Butonul de conectare. Ar trebui să obțineți ceva de genul:
Acum, să adăugăm linkul "înscrieți-vă". Pentru a face acest lucru lovit T și introduceți "Niciun cont? Inscrie-te". Dați acestui text următoarele proprietăți:
În cele din urmă, dorim ca link-ul în sine să se distingă de restul textului. Pentru aceasta, selectați stratul de text și modificați culoarea la: H0 S0 B60. Selectați numai partea "Înscrieți-vă" din șirul de text și aplicați culoarea principală (în cazul meu H200, S100, B80).
Felicitări am terminat cu formularul de autentificare! Aveți acum tot ce aveți nevoie pentru a crea o pagină de autentificare simplă pentru aplicația dvs., inspirată de estetica materialului de design.
Ca o provocare suplimentară, de ce să nu ajuți utilizatorii prin adăugarea unor funcții de conectare socială? Descărcați fișierul final pentru a verifica (ca un bonus) înscrierea, parola pierdută și modalitățile de felicitare.
Vă mulțumim că ați citit tutorialul. Nu ezitați să adresați întrebări în comentariile de mai jos.
Accentsconagua