Pe vremuri, când paginile de destinație animate și aspectele fanteziste erau un lucru, atunci sigur, avea sens să angajezi un designer profesionist. Dar tendința de astăzi este minim - sau cel puțin foarte simplificat.
Permiteți-mi să vă dau un exemplu anecdotic - cu ceva timp în urmă, cineva mi-a cerut să creez un splash screen pentru software-ul computerului. Așa că am făcut totul - am desenat-o pe hârtie de schiță, am importat-o în PhotoShop, am creat o mulțime de linii și efecte de neon fanteziste. Ar fi putut fi un tapet pentru desktop, mai degrabă decât un ecran de primăvară. Ideea este că am creat acest design foarte elegant și elaborat pentru ei.
După cum probabil puteți ghici, nu le-a plăcut. Designul cu care au mers a fost literalmente un mic logo cu câteva cercuri colorate care se suprapun și numele software-ului de sub acesta. Un 2 minute în PhotoShop. Și știi ce? Trebuia să fiu de acord că era mai bun decât al meu.
Ideea pe care o fac este aceea - cred că programatorii cad în această capcană de a face aceeași greșeală pe care am făcut-o. Avem tendința să ne gândim la interfețele de utilizare și la ecranele de pornire care trebuie să fie aceste lucruri cu adevărat fanteziste, atrăgătoare, care fac aplicația a iesi in evidenta . Dar nu trebuie să fie - sincer, nu ar trebui să fie. Ar trebui să luăm un programatori mentalitatea și aplică-o la designul estetic - simplu, funcțional, funcționează.
În acest articol, vom analiza câteva modalități foarte simple de a crea o aplicație Android UI / UX elegantă, chiar dacă nu aveți aproape nicio experiență de proiectare.
Dacă nu vrei cu adevărat altceva, rămâi la designul materialelor
Aplicația dvs. nu trebuie să fie „ unic' și ' ieșiți din rest ” pentru ca acesta să fie popular și să arate bine. Asta este ceea ce Google Proiectarea materialelor și-au propus să realizeze - un standard pentru interfața de utilizare a aplicațiilor din întreaga industrie și au făcut o treabă bună. Există o mulțime de aplicații populare care se mențin la Designul materialelor - unele dintre cele mai mari nume din aplicațiile Android, cum ar fi SwiftKey, Nova Launcher, Textra SMS, YouTube, pentru a numi doar câteva.
Material Design se concentrează pe un aspect bazat pe carduri, cu o paletă de culori solide. Google a lucrat cu designeri de top din industrie, atrăgând o mulțime de elemente din practicile de design minimaliste, apoi a lansat totul gratuit - este o afacere destul de bună, deoarece cursurile de proiectare a site-urilor și a aplicațiilor pot rula sute de dolari pentru cărți electronice, videoclipuri etc.
Noțiuni de bază cu designul materialelor sunt incredibil de ușoare și există o mână de instrumente care îl fac și mai simplu, pe care le vom enumera mai jos:
- Editor de teme materiale (macOS + Sketch)
- Pluginul pentru paleta de culori pentru proiectarea materialelor (PhotoShop / Illustrator)
- Kitul de interfață pentru design material PSD (PhotoShop)
- Kitul de interfață pentru designul materialelor Android ( Schiță)
- Generator de temă UI material
Și dacă aveți nevoie de puțină inspirație pentru a crea teme simple și elegante de proiectare a materialelor, consultați aceste liste de bloguri:
- MaterialDesignBlog - 15 Exemple minunate de Material Design bine realizate
- MockPlus - 12 exemple de site-uri web pentru cel mai bun design material pentru a desena inspirație
- AndroidAuthority - 10 cele mai bune aplicații de proiectare a materialelor pentru Android
Gradientele de culoare sunt mult mai ușoare decât crezi
Pentru o alternativă la proiectarea materialelor, gradienții dolor sunt simpli, la modă și atrăgători. Și s-ar putea să credeți că designerii petrec mult timp pictând în toate culorile sau proiectând gradientul final. Te-ai înșela - se poate face în 10 secunde în PhotoShop.
10 secunde în interfața de utilizare a gradientului PhotoShop.
Vă voi plimba chiar și prin asta, pentru a vă arăta cât de ușor este.
Creați un nou proiect PS pentru mobil ( 1080 x 1920 px @ 72 ppi funcționează bine)
UIGradients.com - Colecție mare de gradiente prefabricate.
Mergi la UIGradients.com și găsește ceva care îți place.
Copiați valorile hexagonale ale culorilor din UIGradients
Copiați culorile gradientului de deasupra previzualizării.
Selector de gradient PhotoShop.
Faceți clic dreapta pe un strat gol din PS și accesați Opțiuni de amestecare> Suprapunere gradient.
Faceți clic direct pe previzualizarea modelului de gradient din meniul drop-down - nu faceți clic pe butonul drop-down. Dând clic direct pe gradient se deschide editorul de culori.
Introduceți valorile hexagonale din UIGradient în instrumentul de gradient PS.
Acum lipiți lipiți valorile hexagonale ale culorii din UIGradient în editorul de gradient PS.
Reglați după cum este necesar. Acum aveți un fundal profesional de gradient pentru aplicația dvs. Android.
Alte instrumente de gradient care merită verificate:
- WebGradients.com
- Generator de forme Android ( pentru generarea de forme prin XML, cu opțiune pentru gradient)
Folosiți SVG-uri în loc de JPG / PNG
În loc să utilizați PNG-uri sau JPG-uri pentru elementele dvs. grafice (butoane, sigle etc.), ar trebui să utilizați într-adevăr SVG-uri ( Grafică vectorială scalabilă) in schimb. Acest lucru se datorează faptului că SVG-urile pot fi redimensionate fără a pierde calitatea - de exemplu, dacă ridicați un JPG la o valoare mai mare, acesta pierde calitate și devine neclar / pixelat. Un SVG nu. Oamenii încearcă să folosească fișiere PNG uriașe care vor fi redus la scară pentru a se potrivi cu ecranele Android - când, în schimb, puteți utiliza SVG-uri mai mici care sunt upscaled fără pierderi de calitate.
În plus, SVG-urile pot fi până la Dimensiunea fișierului este cu 60% până la 80% mai mică decât PNG . Aceasta înseamnă că aplicația sau site-ul mobil se va încărca mai repede pentru utilizator și va arăta bine, indiferent de rezoluția ecranului.
Includeți un mod întunecat folosind Theme.AppCompat.DayNight
Nu este nevoie să proiectați două teme separate pentru a include o temă în modul întunecat / noapte în aplicația dvs. Este aproape integrat în biblioteca AppCompat, trebuie doar să o activați și să editați valorile.
Consultați ghidul Appual ' Cum să implementați un mod întunecat în aplicația dvs. Android ”.
Folosiți un șablon sau un kit de interfață mobilă
Dacă aplicația dvs. nu necesită o interfață grafică, personalizată, nu este absolut nimic în neregulă cu utilizarea unui șablon sau kit. Șabloanele și trusele pot fi folosite ca ghid de inspirație sau puteți folosi literalmente șablonul / kit-ul așa cum este, adăugând propriile butoane și alte lucruri.
Câteva resurse excelente pentru șabloanele și seturile de interfață Android:
- SpeckyBoy - 50 de truse gratuite de interfață mobilă pentru iOS și Android
- SketchAppSources - Resurse pentru aplicația Android UI ( Schiță)
- Freebiesbug - Kituri PSI UI ( PhotoShop)
