Vartotojų sąsajų kūrimas, ypač pokalbių programų, gali būti sudėtinga, tačiau kartu ir kūrybinga užduotis. Šiame pamokų vedime parodysiu, kaip efektyviai sukurti pokalbių valdiklį Sketch programoje. Mes ypač dirbsime su elementų sluoksniavimu (layeriais), kad sutaupytume laiko ir sukurtume tvarkingą dizainą.
Pagrindiniai įžvalgai
- Elementų sluoksniai „Sketch“ padeda išlaikyti aiškumą ir greitai įgyvendinti dizaino pakeitimus.
- Pakartotinai naudojamų stilių naudojimas taupo laiką ir užtikrina dizaino nuoseklumą.
- Integruojant dizaino gaires, sukuriamas patrauklus ir profesionalus vaizdas.
Žingsnis po žingsnio instrukcija
Visų pirma, pradėsime nuo pokalbių valdiklio sukūrimo. Turėtum jau būti susipažinęs su „Sketch“ vartotojo sąsaja, todėl tiesiai imsimės dizaino.
Žingsnis 1: Pokalbių valdiklio kūrimas Atidarykite savo dabartinį projektą „Sketch“ programoje ir pasirinkite naują artboard pokalbių valdikliui. Įsitikinkite, kad pasirinkote iPhone 8 kaip prietaisą, kad gautumėte tinkamą ekrano dydį. Pavadinkite artboard „Chat“ dėl lengviau asignuojant.
Žingsnis 2: Navigacijos juostos kopijavimas Norėdami pasiekti vienodą dizainą, kopijuokite navigacijos juostas iš savo pagrindinio valdiklio. Pastatykite jas toje pačioje išdėstyme kaip anksčiau, kad išlaikytumėte nuoseklumą. Būsenos ir navigacijos juostos turi būti identiškos.
Žingsnis 3: Išdėstymo pritaikymas Nustatykite pagalbines linijas su 16 pikselių atstumu, kad įsitikintumėte, jog visi elementai tiksliai ir tvarkingai išdėstyti. Būkite atsargūs, kad išdėstyme nesusidarytų „glitch'ai“, pritaikydami vertes per inspektoriaus peržiūrą.
Žingsnis 4: Stilių taikymas Jei norite naudoti stilius iš išorinių bibliotekų, atidarykite originalų dokumentą, kad galėtumėte atlikti pakeitimus. Čia galite pritaikyti spalvas ir šriftus, kurie bus naudojami visame projekte. Tai leidžia greitai taikyti pakeitimus visiems susijusiems elementams.
Žingsnis 5: Pokalbių burbulo kūrimas Žinutėms atvaizduoti sukurkite naują formą pokalbių valdyklyje. Pasirinkite naujo pokalbių burbulo fono spalvą. Sukursime mėlyną ir žalią variantą atvykusioms ir išvykusioms žinutėms.
Žingsnis 6: Teksto įterpimas Sukurkite teksto laukelį pokalbių burbule ir įveskite pasveikinimo žinutę, pavyzdžiui, „Labas, smagu, kad esi čia!“ Pasirūpinkite, kad teksto spalva ir stilius būtų pritaikyti, kad tekstas išsiskirtų ir būtų gerai skaitomas.
Žingsnis 7: Kelių atsakymo galimybių kūrimas Norėdami pateikti vartotojui kelias atsakymo galimybes, galite naudoti pokalbių burbulų kopijas. Būkite atsargūs, kad atstumas tarp elementų išliktų tolygus. Galite pridėti daugiau teksto laukelių su pasiūlymais atsakymams, pvz., „Koks tavo tikslas?“.
Žingsnis 8: Elementų pritaikymas Įsitikinkite, kad visi elementai turi vienodą aukštį, ir kopijuokite juos, kad greičiau užbaigtumėte dizainą. Pritaikydami galite pasinaudoti grupėmis ir simboliais, kuriuos sukūrėte, kad pakeitimai būtų nuoseklūs ir lengvi.
Žingsnis 9: Paskutiniai pritaikymai ir grupavimas Sujunkite visus elementus į grupes, kad padidintumėte aiškumą. Galite grupes pavadinti taip, kad jas būtų lengva atpažinti, pavyzdžiui, „Chat_Bubble“ arba „Atsakymo galimybės“.
Santrauka - Pokalbių dizainas su layeriais „Sketch“: Žingsnis po žingsnio vadovas
Jūs dabar išmokote, kaip sukurti pokalbių valdiklį naudodamiesi „Sketch“. Nuo tinkamo artboard pasirinkimo iki pokalbių burbuliukų kūrimo ir stilių pritaikymo, jūs sužinojote efektyvias technikas, kad sutaupytumėte laiko ir sukurtumėte nuoseklų dizainą.
Dažniausiai užduodami klausimai
Kaip aš galiu sukurti pakartotinai naudojamus stilius „Sketch“?Stilius galite sukurti sukurdami teksto arba fono stilių ir tada taikydami jį kitiems elementams.
Koks yra sluoksnių pranašumas „Sketch“?Sluoksniai padeda organizuoti įvairius dizaino elementus ir palengvina pakeitimus bei dizaino valdymą.
Kaip aš galiu išlaikyti vienodą atstumą tarp elementų „Sketch“?Naudokite pagalbines linijas ir išdėstymo įrankius, kad patikrintumėte ir patvirtintumėte atstumą tarp savo dizaino elementų.
Koks geras požiūris atsižvelgiant į pokalbių privatumo aspektus?Įsitikinkite, kad jūsų dizainas turi aiškius nurodymus dėl privatumo politikos, kuriuos vartotojai matys.
Kokia spalvų pasirinkimo rolė pokalbių dizainui?Spalvos gali sukelti emocijas ir paveikti vartotojo patirtį. Pasirinkite spalvas, kurios atitinka jūsų programos identitetą ir gerina skaitomumą.
