Kā noformēt Android lietotnes lietotāja saskarni, kas nepieredz

Dienā, kad animācijas uzspiešanas galvenās lapas un izdomāti izkārtojumi bija lieta, tad noteikti bija jēga pieņemt darbā profesionālu dizaineru. Bet tendence šodien ir minimāls - vai vismaz ievērojami vienkāršots.

Ļaujiet man sniegt jums anekdotisku piemēru - kādu laiku atpakaļ kāds man lūdza izveidot sava datora programmatūras uzplaiksnījuma ekrānu. Tāpēc izgāju visu - uzzīmēju uz skiču papīra, importēju to PhotoShop, izveidoju daudz iedomātu neona līniju un efektu. Tas varēja būt darbvirsmas fona attēls, nevis uzpampšanas ekrāns. Punkts ir tāds, ka es viņiem izveidoju šo patiešām iedomāto un izstrādāto dizainu.

Kā jūs droši vien varat nojaust, viņiem tas nepatika. Dizains, ar kuru viņi devās, bija burtiski mazs logotips ar dažiem krāsainiem apļiem, kas pārklājas, un programmatūras nosaukums zem tā. Piemēram, 2 minūtes PhotoShop darbā. Un jūs zināt, ko? Man kaut kā bija jāpiekrīt, ka tas bija labāks par manu.

Tāpēc es domāju, ka programmētāji ir iekļuvuši šajā slazdā, izdarot to pašu kļūdu, ko es izdarīju. Mums ir tendence domāt par lietotāja saskarnēm un uzplaiksnījuma ekrāniem, kuriem jābūt patiešām iedomātām, pievilcīgām lietām, kas padara lietotni izcelties . Bet tiem nav jābūt - godīgi sakot, viņiem tā nevajadzētu būt. Mums vajadzētu ņemt a programmētāji domāšanas veidu un piemērot to estētiskajam dizainam - vienkāršs, funkcionāls, darbojas.

Šajā rakstā mēs aplūkosim 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, palieciet pie materiāla dizaina

Jūsu lietotnei nav jābūt unikāls ” un ' izceļas no pārējiem ” lai tas būtu populārs un izskatītos labi. Tas ir tas, ko Google Materiālu dizains ir iecerēts sasniegt - lietotņu lietotāja saskarnes standarts visā nozarē, un viņi ir paveikuši labu darbu. Tur ir daudz populāru lietotņu, kas paliek pie materiāla dizaina - daži no lielākajiem nosaukumiem Android lietotnēs, piemēram, SwiftKey, Nova Launcher, Textra SMS, YouTube, lai tikai nosauktu dažus.

Material Design galvenā uzmanība tiek pievērsta izkārtojumam, kura pamatā ir kartes, ar vienkrāsainu paleti. Google sadarbojās ar nozares labākajiem dizaineriem, uzzinot daudz elementu no minimālisma dizaina prakses, un pēc tam visu izlaida bez maksas - tas ir diezgan labs darījums, jo vietņu un lietotņu dizaina kursos var izmantot simtiem dolāru e-grāmatām, video, utt.

Materiālu dizaina sākšana ir neticami vienkārša, un ir vēl daži rīki, kas to padara vēl vienkāršāku, un mēs tos uzskaitīsim tālāk:

• Materiālu motīvu redaktors (macOS + skice)
• Materiāla dizaina krāsu paletes spraudnis (PhotoShop / Illustrator)
• Materiālu dizaina lietotāja saskarnes komplekts PSD (PhotoShop)
• Android materiālu dizaina lietotāja saskarnes komplekts ( Skice)
• Materiālu lietotāja interfeisa motīvu ģenerators

Un, ja jums ir nepieciešams iedvesma vienkāršu, elegantu Materiālu dizaina tēmu veidošanai, skatiet šos saraksta blogus:

• MaterialDesignBlog - 15 lieliski piemēroti materiāla dizaina piemēri
• MockPlus - 12 labākie materiālu dizaina vietnes piemēri, lai smeltos iedvesmu
• AndroidAuthority - 10 labākās Android materiāla dizaina lietotnes

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

Alternatīva materiāla dizainam dolora gradienti ir vienkārši, moderni un uzkrītoši. Jūs varētu domāt, ka dizaineri daudz laika pavada, krāsojot visas krāsas vai izstrādājot gala gradientu. Jūs kļūdāties - to var izdarīt 10 sekundēs PhotoShop.

10 sekundes PhotoShop gradienta lietotāja saskarnē.

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

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

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

Iet uz UIGradients.com un atrodiet kaut ko, kas jums patīk.

Nokopējiet krāsu sešstūra vērtības no UIGradients

Kopējiet gradienta krāsas no priekšskatījuma augšdaļas.

PhotoShop gradienta atlasītājs.

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

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

Ievietojiet hex gradientus no UIGradient PS gradienta rīkā.

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

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

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

• WebGradients.com
• Android formu ģenerators ( formu ģenerēšanai, izmantojot XML, ar iespēju gradientam)

JPG / PNG vietā izmantojiet SVG

Tā vietā, lai grafiskajiem elementiem (pogām, logotipiem utt.) Izmantotu PNG vai JPG, jums patiešām jāizmanto SVG ( Mērogojama vektorgrafika) tā vietā. Tas ir tāpēc, ka SVG izmērus var mainīt, nezaudējot kvalitāti - piemēram, ja jūs paaugstināt JPG vērtību uz lielāku vērtību, tā zaudē kvalitāti un kļūst neskaidra / pikseļota. SVG nav. Cilvēki mēģina izmantot milzīgus PNG failus, kas būs samazināts lai tie atbilstu Android ekrāniem - kad tā vietā varat izmantot mazākus SVG paaugstināts nezaudējot kvalitāti.

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

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

Lai savā lietotnē iekļautu tumšā / nakts režīma motīvu, nav jāizstrādā divas atsevišķas tēmas. 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 veidnes vai mobilās saskarnes komplektu

Ja jūsu lietotne neprasa izdomātu, pielāgotu GUI, nav nekādas vainas, izmantojot veidni vai komplektu. Veidnes un komplektus var izmantot kā iedvesmojošu vadlīniju, vai arī jūs varat burtiski vienkārši izmantot veidni / komplektu tā, kā tas ir, pievienojot savas pogas un citas lietas.

Daži lieliski resursi Android lietotāja saskarnes veidnēm un komplektiem:

• SpeckyBoy - 50 bezmaksas mobilo saskarņu komplekti iOS un Android ierīcēm
• SketchAppSources - Android lietotāja saskarnes lietotņu resursi ( Skice)
• Freebiesbug - PSD lietotāja saskarnes ( PhotoShop)