Oblikovanje uporabniškega profila in kreativna uporaba učinka zameglitve

V tem priročniku ti bom pokazal, kako lahko oblikuješ privlačen uporabniški profil v aplikaciji in uporabljaš vznemirljiv Blur-učinek, da povečaš vizualno privlačnost. Naučil se boš, kako učinkovito kombinirati različne elemente in svojim uporabnikom ponuditi osupljivo izkušnjo.

Najpomembnejše spoznanje

• Ustvarjanje uporabniškega profila s privlačnim oblikovanjem je odločilno za uporabniško izkušnjo.
• Uporaba Blur učinkov lahko pomaga usmeriti pozornost na ključne informacije.
• Pravilna uporaba mask v tvoji grafični programski opremi lahko močno izboljša postavitev.
• Sposoben boš učinkovito kombinirati slikovne in tekstovne elemente, da ustvariš harmonično celoto.

Korak 1: Dodajanje novega kontrolnika

Začni tako, da dodaš novega kontrolnika v svojem orodju za oblikovanje. V tem primeru uporabljamo predlogo iPhone 8. Kopiraj obstoječe elemente, kot so navigacijski ukazi in statusna vrstica, tako da pritisneš tipki "Ctrl + C" (za kopiranje) in "Ctrl + V" (za lepljenje).

Poskrbi, da je vse pravilno poravnano. V tem koraku se prepričaj, da je struktura kontrolnika že določena in ponuja prostor za prihodnje vsebine.

Korak 2: Prilagajanje navigacijske vrstice

Spremeni ime v navigacijski vrstici iz "Klepet" v "Profil", da uporabnike obvestiš, da so v območju profila. Prilagodi tudi ikono na zavihku, da zagotoviš uporabnost.

Jasna in intuitivna navigacija je odločilna, da uporabniki kadarkoli vedo, kje se nahajajo znotraj aplikacije.

Korak 3: Vstavitev ozadja in Blur učinka

Zdaj vstavimo ozadje. Najprej ustvarite pravokotnik, širok 375 pik in visok 200 pik. Odstrani obrobo pravokotnika in ga prilagodi zgornjemu robu tvojega profila.

Kopiraj sliko iz svojih sredstev in jo prilepiš v pravokotnik tako, da pritisneš "Ctrl + Shift + V". To bo pravilno poravnalo sliko. Po potrebi skrči sliko z obdelavo s masko, da se dobro prilega pravokotniku in pokaže želeno površino.

Korak 4: Uporaba Blur učinka

Da ustvariš želeni Blur učinek, ustvari še en pravokotnik nad že vstavljenim slikami. Nastavi Blur učinek na približno 15 pik, da bo slika nekoliko zamegljena, medtem ko so oblike še vedno prepoznavne.

Če želiš še dodatno izboljšati prosojnost ali učinek, igraj se z nastavitvami, da najdeš pravi ravnotežje, ki koristi tvojemu oblikovanju.

Korak 5: Dodajanje profilne slike

Dodaj oval za profilno sliko. Lahko vstaviš kvadrat s 125 x 125 pik in zaobliš kote, da se dobro ujema z celotno sliko. Ne pozabi pustiti malo razdalje zgoraj, da deluje harmonično.

Kopiraj sliko znova v oval in ustvari masko, da izgleda lepo obrobljeno. Obroba s 3 piki lahko pomaga, da se profilna slika bolje loči od ozadja.

Korak 6: Besedilna polja za ime in napredek

Zdaj ustvari besedilna polja za uporabniško ime in prikaz napredka. Uporabi H4 naslov za ime in ga postavi pod profilno sliko.

Poskrbi, da izbereš jasno in privlačno pisavo ter besedilo postaviš na sredino. Velikost pisave naj bo primerna za zagotavljanje uporabnosti.

Korak 7: Nastavitev prikaza napredka

Dodaj prikaz napredka, da uporabnikom pokažeš, koliko so že dosegli. Uporabi za to sivo oznako in prilagodi višino, da se lepo ujema z drugo sekcijo.

Vnesi besedilo "Tvoj napredek" in prikaz števca. Poskrbi, da uporabiš različne barve, da ločiš prikaz napredka od opisa.

Korak 8: Dodajanje gumba za Pro različico

Ustvari gumb za možnost "Pridobi Pro različico". Poskrbi, da bo gumb dobro viden in bo imel enotno obliko s privlačnim ozadjem. Razdalja do spodnjega roba naj bo 16 pik, da je lahko dostopen.

Besedilo na gumbu bi lahko bilo "Pridobi Pro zdaj", v dobro berljivi pisavi. Pomembno je oblikovati jasen poziv k akciji.

Povzetek – Ustvarjanje uporabniškega profila z Blur učinkom

V tem priročniku si se naučil, kako ustvariti privlačen uporabniški profil in kako v svoje oblikovanje vključiti vznemirljiv Blur učinek. Prešel si skozi različne korake, kot so dodajanje slik, ustvarjanje mask in prilagajanje besedilnih polj. Te tehnike ti bodo pomagale oblikovati vizualno privlačne in funkcionalne postavitve aplikacij.