Šiame vadove parodysiu, kaip sukurti patrauklų vartotojo-profilį programoje ir kaip panaudoti įspūdingą Blur efektą, kad padidintum vizualinį patrauklumą. Išmoksi, kaip efektyviai derinti įvairius elementus ir suteikti savo vartotojams įspūdingą patirtį.
Pagrindiniai įžvalgos
- Patrauklaus dizaino vartotojo profilio kūrimas yra esminis vartotojo patirtims.
- Blur efektų naudojimas gali padėti sutelkti dėmesį į svarbiausią informaciją.
- Tinkamas kaukių naudojimas jūsų grafikos programoje gali labai pagerinti išdėstymą.
- Išmoksite efektyviai derinti vaizdų ir teksto elementus, kad sukurtumėte harmoningą visumą.
1 žingsnis: Pridėti naują valdiklį
Pradėk prisidėdamas naują valdiklį savo dizaino įrankyje. Šiame pavyzdyje naudojame iPhone 8 šabloną. Nukopijuok esamus elementus, tokius kaip skirtuko navigacija ir būsenos juosta, naudodamas klavišus "Control + C" (kopijuoti) ir "Control + V" (įklijuoti).
Įsitikink, kad viskas yra tinkamai išdėstyta. Šiame žingsnyje užtikrinsite, kad valdiklio struktūra jau būtų nustatyta ir būtų vietos būsimam turiniui.
2 žingsnis: Priderinti navigacijos juostą
Pasikeisk navigacijos juostos pavadinimą iš "Chat" į "Profilis", kad vartotojai žinotų, jog yra profilio srityje. Taip pat priderink piktogramą skirtuke, kad užtikrintum vartotojų patogumą.
Aiški ir intuityvi navigacija yra esminė, kad vartotojai visada žinotų, kur jie yra programoje.
3 žingsnis: Įterpti fono vaizdą ir Blur efektą
Dabar įterpsime fono vaizdą. Pirma, sukurkite stačiakampį, kurio plotis 375 pikselių ir aukštis 200 pikselių. Pašalinkite stačiakampio kontūrą ir priderinkite jį prie viršutinės profilio ribos.
Nukopijuokite vaizdą iš savo turinio ir įklijuokite jį į stačiakampį, paspausdami "Control + Shift + V". Tai užtikrina, kad vaizdas būtų teisingai išdėstytas. Jei reikia, sumažinkite vaizdą, redaguodami jį su kauke, kad jis gerai tilptų į stačiakampį ir parodytų norimą plotą.
4 žingsnis: Taikyti Blur efektą
Norint sukurti norimą Blur efektą, sukurkite dar vieną stačiakampį virš jau įterpto vaizdo. Nustatykite Blur efektą maždaug 15 pikselių, kad vaizdas atrodytų šiek tiek neaiškus, išlaikant kontūrus matomus.
Jei norite toliau tobulinti skaidrumą ar efektą, eksperimentuokite su nustatymais, kad rastumėte tobulą balansą, kuris padėtų jūsų dizainui.
5 žingsnis: Pridėti profilio nuotrauką
Pridėkite ovalą profilio nuotraukai. Galite įterpti kvadratą, kurio matmenys 125 x 125 pikselių, ir suapvalinti kampus, kad jis gerai tilptų į bendrą vaizdą. Nepamirškite palikti šiek tiek vietos viršuje, kad vaizdas atrodytų harmoningai.
Nukopijuokite vaizdą dar kartą į ovalą ir sukurkite kaukę, kad jis atrodytų gerai apvyniotas. 3 pikselių kontūras gali padėti geriau atskirti profilio nuotrauką nuo fono.
6 žingsnis: Teksto laukai vardui ir progresui
Dabar sukurkite tekstų laukus vartotojo vardui ir pažangos rodymui. Naudokite H4 antraštę vardui ir vietą ją žemiau profilio nuotraukos.
Įsitikinkite, kad pasirinkote aiškų ir patrauklų šriftą ir tekstą išdėstėte centre. Šrifto dydis turi būti tinkamas, kad užtikrintumėte vartotojų patogumą.
7 žingsnis: Pažangos rodymas
Pridėkite pažangos rodiklį, kad vartotojams parodytumėte, kiek jie jau pasiekė. Naudokite pilką etiketę ir priderinkite aukštį, kad jis gerai atitiktų kitą sekciją.
Įrašykite tekstą "Jūsų pažanga" ir skaitiklio rodiklius. Pasirūpinkite naudoti skirtingas spalvas, kad išskirtumėte pažangos rodiklį nuo aprašymo.
8 žingsnis: Pridėti mygtuką "Pro versijai"
Sukurkite mygtuką "Gauti Pro versiją". Užtikrinkite, kad mygtukas būtų gerai matomas ir turi vienodą dizainą su patraukliu fono stiliumi. Atstumas iki apatinio krašto turi būti 16 pikselių, kad jis būtų lengvai pasiekiamas.
Tekstas mygtuke galėtų būti "Gauti Pro dabar", gerai skaitomame šrifte. Svarbu suformuluoti aiškų veiksmų raginimą.
Santrauka – Vartotojo profilio su Blur efektu kūrimas
Šiame vadove sužinojote, kaip sukurti patrauklų vartotojo profilį ir integruoti įspūdingą Blur efektą į savo dizainą. Išmokote įvairius žingsnius, tokius kaip vaizdų įterpimas, kaukių kūrimas ir teksto laukų priderinimas. Šios technikos padės jums kurti vizualiai patrauklius ir funkcionalius programų išdėstymus.
Dažnai užduodami klausimai
Kaip įterpti vaizdą į stačiakampį?Galite kopijuoti vaizdą ir tada įklijuoti į stačiakampį paspausdami "Control + Shift + V", kad užtikrintumėte, jog jis teisingai išdėstytas.
Koks yra Blur efekto tikslas?Blur efektas padeda sutelkti vartotojų dėmesį į esminę informaciją, sušvelnindamas foną.
Kaip galiu užtikrinti, kad mano dizainas gerai atrodytų skirtinguose įrenginiuose?Išbandykite savo dizainą skirtinguose įrenginių tipuose ir dydžiuose, kad užtikrintumėte, jog viskas gerai išdėstyta ir skaitoma.
Kaip priderinti atstumus tarp elementų?Atstumą galite lengvai priderinti tiesiog vilkdami elementus arba įvedant vertes į atstumo reguliatorius.
