Lietotāja interfeisa izveide var būt atšķirība starp labu un lielisku lietotni. Šajā mācību stundāmēs koncentrēsimies uz to, kā tu vari izmantot dizainukā rīku, lai padarītu savu lietotni pievilcīgāku. Mēs uzsāksim jaunu ekrānu, kas vizuāli atšķiras no esošajiem elementiem un aizrauj lietotāju ar pievilcīgu noformējumu. Sāksim uzreiz.
Galvenās atziņas
- Atšķirīgas krāsas un kontrasti palielina vizuālo pievilcību.
- Skaitļu skaidras struktūras palīdz lietotājiem labāk orientēties.
- Vienveidīgas fontu izmēri un dizaini veicina patīkamu lietotāja pieredzi.
Pakāpeniska rokasgrāmata
Pievienot jaunu kontrolieri
Lai izveidotu jauno ekrānu, sākam ar jauna kontroliera pievienošanu. Dodies uz savu interfeisa veidotāju, noklikšķini uz "Pievienot kontrolieri" un novieto to tā, lai tas pieskaņotos esošajiem ekrāniem.
Kontroliera iestatījumi
Nosauc savu jauno kontrolieri par "Kursa kontrolieris", lai atvieglotu turpmāko saistīšanu. Pārliecinies, ka novecojusī "iPhone 8 copy" nosaukums tiek aizstāts ar "Profila kontrolieris".
Pielāgot fona krāsu
Lailietotnes vizuālais piesaistījums būtu ievērojams, ir svarīgi izvēlēties dominējošu fona krāsu. Izvēlies spilgtu zaļu krāsu, kas jau tiek izmantota citās tavas lietotnes vietās. Šī stratēģija pastiprina kontrastu ar baltajiem elementiem un nodrošina lielāku dinamiku.
Pielāgot statusa joslu
Iestati statusa joslu uz "Tumša", lai teksts uz zaļa fona būtu labi lasāms. Pārbaudi pozīciju un pārliecinies, ka tā ir perfekti pielāgota.
Izveidot etiķeti
Izveido jaunu etiķeti kursa rādīšanai. Sāc ar virsrakstu, kas iet pāri visai kontroliera platumam. Izvēlies fontu H4 un krāso tekstu baltā krāsā.
Pievienot papildu etiķetes
Pievieno vēl vienu etiķeti kursa nosaukumam. Izmanto fonta izmēru 40 pikseļi un pārliecinies, ka tā ir novietota pareizi – tam nevajadzētu būt attālumam līdz iepriekšējai etiķetei.
Attēlot papildu informāciju
Lai nodrošinātu lietotājiem papildu informāciju, pievieno trešo etiķeti. Izmanto mazāku fontu ar 17 pikseļiem, lai teksts nebūtu pārāk izteiksmīgs, līdz tas būs nepieciešams.
Tabulas izveide
Visbeidzot, pievieno tabulu, lai skaidri attēlotu nodarbības. Sāc ar vienkāršu taisnstūri, kas aizņem visu platumu un padari fona krāsu nedaudz tumšāku, lai varētu strādāt ar baltu tekstu.
Nodarbības kā šūnas
Izveido šūnu pirmajai nodarbībai ar nosaukumu "Pamati 1. daļa". Pārliecinies par atbilstošu attālumu un izlīdzināšanu.
Separators
Lai izveidotu skaidru atdalījumu starp nodarbībām, pievieno separatoru (planu līniju). Šai līnijai jābūt novietotai starp šūnām, lai panāktu vizuālu atdalījumu.
Izveidot atcelšanas pogu
Lai lietotājiem varētu iziet no šī skata, pievieno atcelšanas pogu "X" formā. Pārliecinies, ka tā ir labi redzama ekrāna centrā.
Nākamo soļu pārskats
Pēc tam, kad jaunais kursu kontrolieris ir veiksmīgi izveidots, nākamais solisbūs pieteikšanās integrācija. Tas ļaus lietotājiem saglabāt savu progresu lietotnē.
Kopsavilkums – Dizains kā rīks lietotnes pilnveidošanai
Šajā mācību stundā tu esi uzzinājis, kā caur efektīvu dizainu uzlabot lietotāja pieredzi savā lietotnē. No jauna kontroliera pievienošanas, atbilstošu krāsu izvēles līdz šūnu un pogu pievienošanai – tu esi izpildījis visus nepieciešamos soļus, lai padarītu savu lietotni vizuāli pievilcīgu.
BUJ
Kādi ir galvenie dizaina procesa mērķi?Galvenais mērķis ir izveidot pievilcīgu un lietotājam draudzīgu saskarni, kas atvieglo lietotnes lietošanu.
Cik svarīgas ir krāsas dizainā?Krāsas ir būtiskas, jo tās ietekmē lietotāja pieredzi un palīdz izcelt svarīgu informāciju.
Kā es varu nodrošināt, ka fontu izmēri ir konsekventi?Izmanto noteiktus teksta izmērus un stilus savā dizaina sistēmā, lai nodrošinātu vienotību.
Cik bieži man vajadzētu pārbaudīt sava dizaina lietotni?Ir ieteicams regulāri pārbaudīt dizainu un pielāgot to atbilstoši lietotāju atsauksmēm un lietotnes atjauninājumiem.
Kādi rīki ir ieteicami prototipēšanai?Populāri rīki ir Sketch, Figma un Adobe XD, kas piedāvā plašas funkcijas prototipēšanai.
