Kasutajaliidese kujundamine võib eristada head ja suurepärase rakendust. Selles õpetuseskeskendume sellele, kuidas saad kujundusetööriistanakasutada, et muuta oma rakendus atraktiivsemaks. Vaatame uut ekraani, mis eristub visuaalselt olemasolevatest elementidest ja haarab kasutaja tähelepanu köitva kujundusega. Alustame kohe.
Olulisemad järeldused
- Erinevad värvid ja kontrastid suurendavad visuaalset atraktiivsust.
- Selged paigutusstruktuurid aitavad kasutajatel paremini orienteeruda.
- Ühtsed kirjatüübid ja kujundused edendavad meeldivat kasutajakogemust.
Samuti juhend
Uue juhendi lisamine
Uue ekraani loomiseks alustame uue juhendi lisamisega. Mine oma liidese koostaja juurde, kliki "Lisa juhend" ja paiguta see nii, et see sobiks olemasolevate ekraanide alla.
Juhendi seadistamine
Nimeta oma uus juhend "Kursuse juhendiks", et tulevikus ühildamine oleks lihtsam. Veenduge, et vananenud "iPhone 8 koopia" nimi vahetataks "Profiilijuhendi" vastu.
Taustavärvi kohandamine
Rakendusevisuaalse atraktiivsuse tagamiseks on oluline valida domineeriv taustavärv. Vali intensiivne roheline, mida juba mujal oma rakenduses kasutatakse. See strateegia suurendab kontrasti valgete elementidega ja lisab dünaamilisust.
Staatuseriba seadistamine
Seadista staatuseriba "Tumeda" peale, et tekst oleks rohelisel taustal hästi loetav. Kontrolli positsiooni ja veendu, et see oleks täpselt kohandatud.
Pealkirja loomine
Loo uus pealkiri kursuse kuvamiseks. Alusta pealkirjast, mis katab juhendi kogu laiu. Vali fondiks H4 ja värvi tekst valgeks.
Lisa täiendavad pealkirjad
Lisa veel üks pealkiri kursuse nime jaoks. Kasuta fondi suurust 40 pikslit ja veendu, et see on õigesti positsioneeritud – sellel ei tohiks olla vahemaad eelmise pealkirjaga.
Edasiinfo esitlemine
Kasutajatele rohkem teavet pakkumiseks lisa kolmas pealkiri. Kasuta väiksemat fondi 17 piksliga, et tekst ei paistaks liiga palju silma, kuni seda vajatakse.
Tabeli loomine
Lisa lõpuks tabel, et õppetükke selgelt esitleda. Alusta lihtsa ristkülikuga, mis katab kogu laiuse ja kujunda taust veidi tumedamaks, et saaksid töötada valge tekstivärviga.
Õppetunnid rakkudena
Loo rakk esimeseks õppetükiks pealkirjaga "Alused Osa 1". Pööra tähelepanu sobivale vahele ja joondusele.
Eraldaja lisamine
Õppetükkide vahelise selge eristamise loomiseks lisa eraldaja (õhuke joon). See joon peaks olema rakute vahel, et luua visuaalne eristus.
Looge Tühista nupp
Kasutajate võimaldamiseks sellelt vaatepunktist lahkuda, lisa tühista nupp kujul "X". Veendu, et see on ekraani keskel hästi nähtav.
Vaatame järgmisi samme
Pärast uue kursuse juhendi edukat loomist on järgmine sammsisse logimise integreerimine. See võimaldab kasutajatel oma edusamme rakenduses salvestada.
Kokkuvõte – Kujundus kui rakenduse viimistlemise tööriist
Selles õpetuses oled õppinud, kuidas tõhusa kujundamise abil oma rakenduses paremat kasutajakogemust luua. Alates uue juhendi lisamisest, sobivate värvide valimisest ja lõpetades rakkude ja nuppude lisamisega – oled läbinud kõik vajalikud sammud, et muuta oma rakendus visuaalselt atraktiivseks.
KKK
Mis on kujundusprotsessi peamised eesmärgid?Peamine eesmärk on luua atraktiivne ja kasutajasõbralik liides, mis lihtsustab rakenduse kasutamist.
Kui oluline on värvid kujunduses?Värvid on üliolulised, kuna need mõjutavad kasutajakogemust ja aitavad esile tõsta olulisi teavet.
Kuidas saan veenduda, et fondi suurused on ühtlased?Kasutage oma kujundussüsteemis kindlaks määratud tekstisuurusi ja stiile, et tagada ühtsus.
Kui tihti peaksin oma rakenduse kujundust üle vaatama?Soovitav on regulaarselt kujundust üle vaadata ja seda kasutajate tagasisidele ja rakenduse uuendustele vastavalt kohandada.
Milliseid tööriistu soovitakse prototüüpimiseks?Populaarsed tööriistad on Sketch, Figma ja Adobe XD, mis kõik pakuvad laialdasi funktsioone prototüüpimiseks.
