Kuidas kujundada Androidi rakenduse kasutajaliides, mis ei ime

Programmeerijad ja arendajad ei ole üldjuhul disainerid - see on üldiselt tõsi. Arendajad keskenduvad tavaliselt rakenduse töö tegemisele - disainerid keskenduvad rakenduse esteetiliseks muutmisele . Kuid miks ei võiks arendajad sama teha?

Päeval, kui asi oli animeeritud prügikaste sihtlehtedel ja väljamõeldud paigutustel, siis oli kindel, et on mõistlik palgata professionaalne disainer. Kuid tänapäeval on trend minimaalne - või vähemalt tohutult lihtsustatud.

Lubage mul tuua teile anekdootlik näide - mõni aeg tagasi küsis keegi, et peaksin looma oma arvuti tarkvara jaoks pritsikuva. Läksin siis kõik välja - joonistasin selle visandpaberile välja, importisin selle PhotoShopisse, lõin palju väljamõeldud neoonjooni ja efekte. See võis olla pigem töölaua taustpilt, kui pritskuva. Mõte on selles, et ma lõin neile selle tõeliselt väljamõeldud ja keeruka kujunduse.

Nagu arvata võib, ei meeldinud see neile. Kujundus, millega nad kaasa läksid, oli sõna otseses mõttes väheste kattunud värviliste ringide väike logo ja selle all olev tarkvara nimi. Nagu 2 minutit PhotoShopi tööd. Ja teate mida? Ma pidin kuidagi nõustuma, et see oli parem kui minu oma.

Seega tahan öelda, et programmeerijad satuvad sama vea tegemise lõksu, mille tegin ka mina. Me kipume arvama, et kasutajaliidesed ja välklambid peaksid olema need tõeliselt väljamõeldud ja pilkupüüdvad asjad, mis eristavad rakendust. Kuid nad ei pea olema - ausalt, nad ei peaks olema. Peaksime võtma programmeerija mõtteviisi ja rakendama seda esteetilise kujunduse osas - lihtne, funktsionaalne, töötab.

Selles artiklis käsitleme mõnda väga lihtsat viisi elegantse Androidi rakenduse kasutajaliidese / kasutajaliidese loomiseks, isegi kui teil peaaegu pole projekteerimiskogemust.

Kui te tõesti midagi muud ei soovi, pidage silmas materjalikujundust

Rakendus ei pea olema unikaalne ja silma paistma, et see oleks populaarne ja hea välja nägema. Selle eesmärgi saavutas Google'i materjalikujundus - kogu rakenduse kasutajaliideste standard - ja nad on teinud head tööd. Seal on palju populaarseid rakendusi, mis jäävad materjalide kujundamisse - need on Androidi rakenduste suurimad nimed, näiteks SwiftKey, Nova käivitaja, Textra SMS, YouTube, kui nimetada vaid mõnda.

Materjalidisaini keskmes on kaardipõhine paigutus, millel on kindel värvipalett. Google tegi koostööd valdkonna tippdisaineritega, ammutades minimalistlikest disainipraktikatest palju elemente, ja laskis siis kogu asja tasuta välja anda - see on päris hea tehing, kuna veebisaitide ja rakenduste kujundamise kursused võivad e-raamatute, videote, jne.

Materjalidisainiga alustamine on uskumatult lihtne ja seal on käputäis tööriistu, mis muudavad selle veelgi lihtsamaks, mille loetleme allpool:

  • Materiaalse teema redaktor (macOS + eskiis)
  • Materjalidisaini värvipaleti pistikprogramm (PhotoShop / Illustrator)
  • Materjalidisaini kasutajaliidese komplekt PSD (PhotoShop)
  • Androidi materjalidisaini kasutajaliidese komplekt ( visand)
  • Materjali UI teemageneraator

Ja kui vajate inspiratsiooni lihtsate, elegantsete materjalidisaini teemade loomiseks, siis vaadake neid loendipäevikuid:

  • MaterialDesignBlog - 15 vinge näidet materjalide disaini kohta õigesti tehtud
  • MockPlus - 12 parimat materjalidisaini veebisaidi näidet inspiratsiooni ammutamiseks
  • AndroidAuthority - 10 parimat materjali disainirakendust Androidi jaoks

Värvigradiendid on palju lihtsamad, kui arvate

Materjalidisaini alternatiivi jaoks on dolori gradiendid lihtsad, trendikad ja pilkupüüdvad. Ja võite arvata, et disainerid veedavad palju aega kõigi värvidega maalimisel või ülima gradiendi kujundamisel. Te võite eksida - seda saab PhotoShopis teha 10 sekundiga.

10 sekundit PhotoShopi gradiendi kasutajaliideses.

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

Uue PS-projekti loomine mobiilseadmetele ( 1080 x 1920 px @ 72 ppi töötab hästi)

UIGradients.com - suur eelvalmistatud kallete kollektsioon.

Minge saidile UIGradients.com ja leidke midagi, mis teile meeldib.

Kopeerige värviliste kuueteistkümnendsuurused UIGradientsist

Kopeerige gradientvärvid eelvaate ülaosast.

PhotoShopi gradiendi valija.

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

Klõpsake rippmenüüst otse gradiendi mustri eelvaatel - ärge klõpsake rippmenüü nuppu. Otse gradiendil klõpsates avaneb värviredaktor.

Sisestage heksaväärtused UIGradientist PS gradiendi tööriista.

Nüüd kleepige lihtsalt kleepige värvigruppide väärtus UIGradientist PS gradiendiredaktorisse.

Reguleerige vastavalt vajadusele. Nüüd on teil Androidi rakenduse jaoks professionaalne gradiendi taust.

Muud kontrollimist vajavad gradiendi tööriistad:

  • WebGradients.com
  • Android Shapes Generator ( kujundite genereerimiseks XML-i kaudu, koos võimalusega gradiendi jaoks)

Kasuta JPG / PNG asemel SVG-sid

Graafiliste elementide (nupud, logod jne) PNG-de või JPG-de asemel peaksite kasutama hoopis SVG-sid ( Scalable Vector Graphics) . Selle põhjuseks on asjaolu, et SVG-de suurust saab muuta ilma kvaliteeti kaotamata - näiteks suurendades JPG-d suurema väärtuse korral, kaotab see kvaliteedi ja muutub häguseks / piksliteks. SVG seda ei tee. Inimesed proovivad kasutada tohutuid PNG-faile, mille suurust vähendatakse vastavalt Androidi ekraanidele - kui selle asemel saate kasutada väiksemaid SVG-sid, mis on kallal, ilma et see kvaliteeti kaotaks.

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

Kaasa pime režiim, kasutades rakendust Theme.AppCompat.DayNight

Pimeda ja öise režiimi teema lisamiseks oma rakendusse ei pea te kavandama kahte eraldi teemat. See on üsna palju sisseehitatud AppCompati teeki, peate selle lihtsalt lubama ja väärtusi redigeerima.

Vaadake rakenduse juhendit „Tumeda režiimi rakendamine oma Androidi rakenduses”.

Kasutage malli või mobiili kasutajaliidese komplekti

Kui teie rakendus ei nõua väljamõeldud ja kohandatud GUI-d, pole malli või komplekti kasutamisel midagi viga. Malle ja komplekte saab kasutada inspireeriva juhisena või võite sõna otseses mõttes lihtsalt malli / komplekti kasutada sellisena, nagu see on, lisades oma nuppe ja asju.

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

  • SpeckyBoy - 50 tasuta mobiili kasutajaliidese komplekti iOS-i ja Androidi jaoks
  • SketchAppSources - Androidi kasutajaliidese rakenduse ressursid ( eskiis)
  • Freebiesbug - PSD kasutajaliidese komplektid ( PhotoShop)

Huvitavad Artiklid