Kuidas kujundada Androidi rakenduse kasutajaliidest, mis ei ime

. Kuid miks ei saa arendajad sama teha?



Sel ajal, kui animeeritud splash-maandumislehed ja väljamõeldud paigutused olid asi, oli siis mõistlik palgata professionaalne disainer. Kuid tänane trend on minimaalne - või vähemalt oluliselt lihtsustatud.

Lubage mul tuua teile anekdootlik näide - mõni aeg tagasi palus keegi mul luua oma arvutitarkvarale sirvimisekraani. Niisiis läksin kõik välja - joonistasin selle visandipaberile, importisin selle PhotoShopi, lõin palju uhkeid neoonjooni ja efekte. See võis olla töölaua taustpilt, mitte ekraanipilt. Asi on selles, et ma lõin neile selle väga uhke ja viimistletud kujunduse.



Nagu arvata võib, ei meeldinud see neile. Kujundus, millega nad käisid, oli sõna otseses mõttes väike logo, mis kujutas paari kattuvat värvilist ringi, ja selle all olev tarkvara nimi. Nagu 2 minutit PhotoShopi tööd. Ja tead mida? Ma pidin kuidagi nõustuma, et see oli parem kui minu oma.



Punkt, mille ma teen, on seega - ma arvan, et programmeerijad satuvad sellesse lõksu, et teevad sama vea, mida ma tegin. Me kipume mõtlema kasutajaliideseile ja ekraanipiltidele, mis peavad olema need tõesti uhked ja pilkupüüdvad asjad, mis muudavad rakenduse välja paistma . Kuid nad ei pea olema - ausalt, nad ei peaks seda olema. Peaksime võtma a programmeerijad mõtteviisi ja rakendada seda esteetilisele kujundusele - lihtne, funktsionaalne, töötab.



Selles artiklis uurime mõningaid väga lihtsaid viise elegantse Android APP-i kasutajaliidese / kasutajaliidese loomiseks, isegi kui teil pole peaaegu mingit kujundamiskogemust.

Pange kinni materjalidisainist, kui te tõesti midagi muud ei soovi

Teie rakendus ei pea olema ainulaadne ” ja eristuda teistest ” et see oleks populaarne ja näeks hea välja. See on see, mida Google Materjali kujundus saavutada - standard rakenduste kasutajaliideste jaoks kogu tööstuses ja nad on teinud head tööd. Materjalikujunduse juurde kuulub hulk populaarseid rakendusi - mõned Androidi rakenduste suurimad nimed, näiteks SwiftKey, Nova Launcher, Textra SMS, YouTube, et nimetada vaid mõnda.

Material Disaini põhirõhk on kaardipõhine kujundus, millel on ühevärviline palett. Google tegi koostööd tipptasemel disaineritega, ammutades palju elemente minimalistlikest disainipraktikatest ja andis seejärel kogu selle asja tasuta välja - see on päris hea tehing, kuna veebisaitide ja rakenduste kujundamise kursustel saab e-raamatute, videote, jne.



Materjalidisainiga alustamine on uskumatult lihtne ja selle lihtsustamiseks on käputäis tööriistu, mille loendame allpool:

  • Materjali teema redaktor (macOS + visand)
  • Materjali kujunduse värvipaleti pistikprogramm (PhotoShop / Illustrator)
  • Materjali kujunduse kasutajaliidese komplekt PSD (PhotoShop)
  • Androidi materjali kujunduse kasutajaliidese komplekt ( Visand)
  • Materjali kasutajaliidese teema generaator

Ja kui vajate lihtsate ja elegantsete materjalidisaini teemade loomiseks inspiratsiooni, vaadake neid loendiblogisid:

Värvigradiente on palju lihtsam kui arvate

Materjali kujunduse alternatiiviks on dolori kalded lihtsad, trendikad ja pilkupüüdvad. Ja võite arvata, et disainerid veedavad palju aega kõigi värvide maalimiseks või ülima gradiendi kujundamiseks. Sa eksid - seda saab PhotoShopis teha 10 sekundiga.

10 sekundit PhotoShopi gradientliideses.

Ma käin sellest isegi läbi, et näidata teile, kui lihtne see on.

Looge Mobile'ile uus PS-projekt ( 1080 x 1920 px @ 72 ppi töötab hästi)

UIGradients.com - suur kogum eelnevalt valmistatud gradiente.

Minema UIGradients.com ja leidke midagi, mis teile meeldib.

Kopeerige värvigamma väärtused UIGradientsist

Kopeerige gradientvärvid eelvaate ülalt.

PhotoShopi gradientvalija.

Paremklõpsake PS-s tühjal kihil ja minge Blending Options> Gradient Overlay.

Klõpsake rippmenüüs otse gradientmustri eelvaadet - ärge klõpsake rippmenüü nuppu. Otse gradientil klõpsamine avab värviredaktori.

Sisestage UIGradienti kuusnurga väärtused PS gradiendi tööriista.

Nüüd lihtsalt kleepige UIGradientist värvi heksakõvera väärtused kleepige PS gradientiredaktorisse.

Reguleerige vastavalt vajadusele. Teil on nüüd oma Androidi rakenduse jaoks professionaalne gradienttaust.

Muud gradientvahendid, mida tasub vaadata:

JPG / PNG asemel kasutage SVG-sid

Selle asemel, et kasutada oma graafiliste elementide (nuppude, logode jms) jaoks PNG-sid või JPG-sid, peaksite tõesti kasutama SVG-sid ( Skaleeritav vektorgraafika) selle asemel. Seda seetõttu, et SVG-de suurust saab muuta kvaliteeti kaotamata - näiteks kui muudate JPG-d suuremaks, kaotab see kvaliteedi ja muutub uduseks / pikseldatuks. SVG seda ei tee. Inimesed üritavad kasutada tohutuid PNG-faile vähendatud Androidi ekraanidele sobitamiseks - kui selle asemel saate kasutada väiksemaid SVG-sid, mis need on suurendatud kvaliteedi kadumiseta.

Lisaks võivad SVG-d olla kuni 60–80% väiksem kui PNG . See tähendab, et teie rakendus või mobiiliveebisait laaditakse kasutaja jaoks kiiremini ja näeb hea välja, olenemata ekraani eraldusvõimest.

Lisage tume režiim, kasutades rakendust Theme.AppCompat.DayNight

Pimeda / öörežiimi teema rakendusse lisamiseks ei pea te kahte eraldi teemat kujundama. See on üsna sisse ehitatud AppCompat teeki, peate selle lihtsalt lubama ja väärtusi muutma.

Vaadake Appuali juhendit Kuidas rakendada tumedat režiimi oma Android-rakenduses ”.

Kasutage malli või mobiilse kasutajaliidese komplekti

Kui teie rakendus ei vaja väljamõeldud ja kohandatud graafilist kasutajaliidest, pole malli või komplekti kasutamisel midagi valesti. Malle ja komplekte saab kasutada inspireeriva juhendina või võite sõna otseses mõttes lihtsalt malli / komplekti sellisena kasutada, lisades oma nupud ja muu.

Mõned suurepärased ressursid Androidi kasutajaliidese mallide ja komplektide jaoks:

  • SpeckyBoy - 50 tasuta mobiilse kasutajaliidese komplekti iOS-ile ja Androidile
  • SketchAppSources - Androidi kasutajaliidese rakenduse ressursid ( Visand)
  • Freebiesbug - PSD kasutajaliidese komplektid ( PhotoShop)
Sildid android Areng 4 minutit loetud