Programos dizainasvisada turėtų būti apgalvotas ir patrauklus. Šiame vadove sužinosite, kaip galite peržiūrėti savo pagrindiniovaldiklio dizainą, kad pridėtumėte daugiau interaktyvumo ir vizualinės patrauklumo. Pradėkime!
Pagrindinės įžvalgos
- Pagrindinį valdiklį galima padaryti patrauklesnį kūrybiškai naudojant spalvas ir išdėstymą.
- SVG failai siūlo redagavimo ir ryškumo pranašumų.
- Spalvų perėjimų ir skirtingų sekcijų naudojimas gali žymiai pagerinti naudotojo patirtį.
Žingsnis po žingsnio vadovas
Pirmiausia pažvelgsime į esamą pagrindinio valdiklio dizainą. Čia pamatysite, kad turime įvairias sekcijas: kursų apžvalgą, interaktyvų pokalbį ir profilį. Dėmesys skiriamas pagrindiniam srautui. Šiame vadove mes pritaikysime navigaciją ir optimizuosime dizainą.
1 žingsnis: Peržiūrėti navigaciją
Norėdami patobulinti savo pagrindinio valdiklio dizainą, pradėsime peržiūrėdami navigacijos juostą. Pirmiausia pašalinsime esamus elementus, tokius kaip navigacija.
Dabar pridėsime stačiakampį kaip naują antraštę, kurios aukštis turėtų būti 250 pikselių. Stačiakampis neturėtų turėti rėmo, kad būtų užtikrintas švarus įvaizdis.
2 žingsnis: Pridėti antraštę ir tekstą
Kitame žingsnyje pasirinkite dokumento spalvą ir pridėkite naują tekstą. Nustatykite tekstą kaip „Visi kursai“ ir eksperimentuokite su tekstų stiliais. Rekomenduojama antraštės dydis būtų 110 pikselių. Svarbu, kad antraštė būtų pritaikyta statuso juostai.
3 žingsnis: Pradinių spalvų ir fonų pritaikymas
Patraukliam dizainui svarbu naudoti spalvų perėjimus. Grįžkite prie savo stačiakampio ir pasirinkite perėjimą, kuris būtų dinamiškas ir harmoningas visame išdėstyme. Diagonali perėjimas suteiks daugiau gylio.
4 žingsnis: Pridėti naują sekciją
Dabar sukursime naują sekciją po antrašte. Pridėkite dar vieną stačiakampį su 350 pikselių aukščiu ir pašalinkite rėmą. Čia galite pasirinkti kontrastinę spalvą, kad suteiktumėte daugiau gyvybės programai.
5 žingsnis: Turinys ir piktogramos
Šioje sekcijoje galime pridėti mygtuką, kad vartotojui pasiūlytume daugiau turinio, pvz., vaizdo įrašą. Papildykite tekstą „Judėjimo galia“ H3 formatu ir positionsuokite jį 16 pikselių nuo viršaus.
Dabar pridėsime piktogramą, kuri gali būti arba sukurta jums, arba importuota iš išteklių. Šiuo atveju rekomenduojama naudoti SVG failus, kadangi jie yra lengvai redaguojami.
6 žingsnis: Sukurkite Pro versijos sekciją
Sukurkite dar vieną sekciją, kuri suteiktų vartotojams galimybę įsigyti programos Pro versiją. Pridėkite naują stačiakampį su 250 pikselių aukščiu ir ten išdėliokite savo kvietimą „Gauti Pro versiją“.
Čia svarbu, kad tekstas būtų akivaizdžiai išskirtinis. Galite naudoti tamsesnę spalvos variantą, kad užtikrintumėte gerą tekstų skaitomumą.
7 žingsnis: Aiškumas per grupes
Sukurkite grupes iš įvairių sekcijų, kad padidintumėte aiškumą. Tai padės geriau organizuoti skirtingas sritis.
8 žingsnis: Paskutiniai derinimai ir suderinimai
Galiausiai galite dar kartą peržiūrėti visus elementus sekcijose ir, jei reikia, pritaikyti atstumus ir pozicijas, kad būtų užtikrintas švarus išdėstymas.
Apibendrinimas – Pagrindinio dizaino perprojektavimas: efektyvus būdas sukurti patrauklią vartotojo sąsają
Dabar išmokote, kaip galite perprojektuoti savo pagrindinį valdiklį, kad padarytumėte jį interaktyvesnį ir vizualiai patrauklesnį. Kūrybiškai naudojant spalvų perėjimus, įtraukiant SVG piktogramas ir struktūrizuojant sekcijose, jūs žymiai patobulinote savo programos išdėstymą.
DUK
Kaip galiu užtikrinti, kad mano antraštė gerai atrodytų?Įsitikinkite, kad naudojate tinkamą tekstų dydį ir spalvų derinius, kurie yra nuoseklūs visame dizaine.
Kokie pranašumai yra naudojant SVG failus?SVG failai yra skalabilūs ir išlaiko savo ryškumą, nepriklausomai nuo mastelio.
Kaip galiu pridėti spalvų perėjimus „Sketch“ programoje?Pasirinkite pageidaujamą elementą, eikite į užpildymo parinktis ir pasirinkite „Gradient“ kurti patraukliems perėjimams.
