Programmētāji un izstrādātāji parasti nav dizaineri - tas tiek plaši atzīts par patiesu. Izstrādātāji mēdz pievērsties tam, lai lietotne darbotos - dizaineri pievēršas tam, lai lietotne būtu estētiski pievilcīga . Bet kāpēc izstrādātāji nevar rīkoties tāpat?

Toreiz, kad bija runa par animētām slampātlapām un izdomātiem izkārtojumiem, tad noteikti bija jēga nolīgt profesionālu dizaineru. Bet mūsdienās tendence ir minimāla vai vismaz ievērojami vienkāršota.

Ļaujiet man sniegt jums anekdotisku piemēru - pirms kāda laika kāds man lūdza izveidot sava datora programmatūrai slampāt ekrānu. Tāpēc es izgāju visu ārā - izvilku to uz skices papīra, importēju to PhotoShop, izveidoju daudz izdomātu neona līniju un efektu. Tas varēja būt darbvirsmas fona attēls, nevis slampāt ekrāns. Lieta ir tāda, ka esmu viņiem radījis šo patiešām iedomāto un izsmalcināto dizainu.

Kā jūs droši vien varat uzminēt, viņiem tas nepatika. Dizains, ar kuru viņi devās, burtiski bija neliels logotips no dažiem krāsainiem apļiem, kas pārklājās, un programmatūras nosaukums zem tā. Piemēram, 2 minūtes PhotoShop darbā. Un jūs zināt, ko? Man sava veida vajadzēja piekrist, ka tas bija labāks par manējo.

Tāpēc es domāju, ka programmētāji nonāk slazdā, pieļaujot to pašu kļūdu, ko es. Mums ir tendence domāt par lietotāja saskarnēm un slampāt ekrāniem, kuriem jābūt tiešām izdomātiem un uzkrītošiem, kas izceļ lietotni. Bet viņiem nav jābūt - godīgi sakot, viņiem nevajadzētu būt. Mums vajadzētu uztvert programmētāja domāšanas veidu un piemērot to estētiskajam dizainam - vienkāršiem, funkcionāliem, darbiem.

Šajā rakstā mēs apskatīsim dažus ļoti vienkāršus veidus, kā izveidot elegantu Android APP UI / UX, pat ja jums gandrīz nav projektēšanas pieredzes.

Ja vien jūs patiešām nevēlaties kaut ko citu, pieturieties pie materiāla noformējuma

Lai tā būtu populāra un labi izskatās, jūsu lietotnei nav jābūt “ unikālai” un “ jāizceļas no pārējiem” . Tas ir tas, ko Google ir izveidojis, lai sasniegtu - lietotņu lietotāja saskarnes standartu visā nozarē, un viņi ir paveikuši labu darbu. Tur ir ļoti daudz populāru lietotņu, kas pieturas pie materiāla dizaina - daži no lielākajiem nosaukumiem Android lietotnēs, piemēram, SwiftKey, Nova palaidējs, Textra SMS, YouTube, lai tikai nosauktu dažus.

Materiāla dizaina galvenā uzmanība ir vērsta uz kartēm balstītu izkārtojumu ar vienkrāsainu krāsu paleti. Google sadarbojās ar labākajiem nozares dizaineriem, no minimālisma dizaina prakses izmantojot daudz elementu, un pēc tam izlaidis visu bez maksas - tas ir diezgan izdevīgs darījums, jo vietņu un lietotņu dizaina kursos e-grāmatām, video, utt.

Sākt darbu ar materiālu noformējumu ir neticami viegli, un ir daži rīki, kas to padara vēl vienkāršāku, ko mēs uzskaitīsim zemāk:

• Materiālo tēmu redaktors (macOS + skice)
• Materiāla dizaina krāsu paletes spraudnis (PhotoShop / Illustrator)
• Materiālu dizaina lietotāja saskarnes komplekts PSD (PhotoShop)
• Android materiāla dizaina lietotāja saskarnes komplekts ( skice)
• Materiālā lietotāja saskarnes tēmas ģenerators

Un, ja jums ir nepieciešama iedvesma vienkāršu, elegantu materiālu dizaina tēmu izveidošanai, apskatiet šos saraksta emuārus:

• MaterialDesignBlog - 15 satriecoši piemēroti materiālu noformējumi
• MockPlus - 12 labāko materiālu dizaina vietņu piemēri, lai smeltos iedvesmu
• AndroidAuthority - 10 labākās materiālu dizaina lietotnes Android ierīcēm

Krāsu gradienti ir daudz vieglāk, nekā jūs domājat

Materiāla dizaina alternatīvai dolora slīpumi ir vienkārši, moderni un saistoši. Un jūs varētu domāt, ka dizaineri daudz laika pavada, krāsojot visās krāsās vai izstrādājot galīgo gradientu. Jūs maldāties - to var izdarīt 10 sekundēs PhotoShop.

10 sekundes PhotoShop gradienta UI.

Es pat jums to apskatīšu, lai parādītu, cik tas ir viegli.

Izveidojiet jaunu PS projektu mobilajām ierīcēm ( 1080 x 1920 px @ 72 ppi darbojas labi)

UIGradients.com - liela iepriekš sagatavotu slīpumu kolekcija.

Dodieties uz vietni UIGradients.com un atrodiet kaut ko sev tīkamu.

Kopējiet krāsu sešstūru vērtības no UIGradients

Kopējiet gradienta krāsas no priekšskatījuma.

PhotoShop gradienta atlasītājs.

Ar peles labo pogu noklikšķiniet uz tukša slāņa PS un dodieties uz Blending Options> Gradient Overlay.

Noklikšķiniet tieši uz gradienta modeļa priekšskatījumu nolaižamajā izvēlnē - neklikšķiniet uz nolaižamās pogas. Noklikšķinot tieši uz gradientu, tiek atvērts krāsu redaktors.

Ievadiet heksa vērtības no UIGradient PS gradienta rīkā.

Tagad vienkārši ielīmējiet krāsu graudu vērtības no UIGradient PS gradienta redaktorā.

Pielāgojiet pēc nepieciešamības. Tagad jūsu Android lietotnei ir profesionāls gradienta fons.

Citi gradienta rīki, kurus ir vērts pārbaudīt:

• WebGradients.com
• Android Shapes Generator ( formu veidošanai, izmantojot XML, ar iespēju izmantot gradientu)

JPG / PNG vietā izmantojiet SVG

Tā vietā, lai grafiskajiem elementiem (pogām, logotipiem utt.) Izmantotu PNG vai JPG, jums tā vietā tiešām vajadzētu izmantot SVG ( mērogojama vektorgrafika) . Tas notiek tāpēc, ka SVG lielumu var mainīt, nezaudējot kvalitāti - piemēram, ja JPG palielināsit līdz lielākai vērtībai, tā zaudē kvalitāti un kļūst neskaidra / pikseļota. SVG to nedara. Cilvēki mēģina izmantot milzīgus PNG failus, kuru apjoms tiks samazināts, lai ietilptu Android ekrānos. Tā vietā jūs varat izmantot mazākas SVG, kas ir palielinātas, nezaudējot kvalitāti.

Turklāt SVG faila lielums var būt par 60% līdz 80% mazāks nekā PNG . Tas nozīmē, ka jūsu lietotne vai vietne mobilajām ierīcēm lietotājam tiks ielādēta ātrāk un labi izskatīsies neatkarīgi no ekrāna izšķirtspējas.

Iekļaujiet tumšo režīmu, izmantojot Theme.AppCompat.DayNight

Lai lietotnē iekļautu tumša / nakts režīma motīvu, jums nav jāizstrādā divi atsevišķi motīvi. Tas ir diezgan daudz iebūvēts AppCompat bibliotēkā, jums tas vienkārši jāiespējo un jārediģē vērtības.

Skatiet Appual ceļvedi “Tumšā režīma ieviešana Android lietotnē”.

Izmantojiet veidni vai mobilās lietotāja saskarnes komplektu

Ja jūsu lietotnei nav nepieciešama iedomāta, pielāgota GUI, veidnes vai komplekta izmantošanā nav nekā slikta. Veidnes un komplektus var izmantot kā iedvesmojošu vadlīniju, vai arī burtiski varat vienkārši izmantot veidni / komplektu, kā tas ir, pievienojot savas pogas un citas lietas.

Daži lieliski resursi Android UI veidņu un komplektu izveidošanai:

• SpeckyBoy - 50 bezmaksas mobilo saskarņu komplekti operētājsistēmai iOS un Android
• SketchAppSources - Android lietotāja saskarnes lietotņu resursi ( skice)
• Freebiesbug - PSD lietotāja saskarnes komplekti ( PhotoShop)