Kasutajaliideste, eriti vestlusrakenduste kujundamine võib olla keeruline, kuid samas loominguline ülesanne. Selles õpetuses näitan ma, kuidas saad vestluskontrolleri tõhusalt Sketch'is kujundada. Töötame eriti elementide (kihtide) kihistamisega, et säästa aega ja arendada välja puhas disain.
Tähtsad järeldused
- Sketch'is kihtide kasutamine aitab hoida ülevaadet ja viia disainimuudatused kiiresti ellu.
- Taaskasutatavate stiilide kasutamine säästab aega ja tagab disaini järjepidevuse.
- Kujundusjuhiste integreerimine tagab meeldiva ja professionaalse välimuse.
Samm-sammuline juhend
Alustame vestluskontrolleri loomist. Sa peaksid olema juba tuttav Sketch'i kasutajaliidesele, seega sukeldume kohe kujundamisse.
Samm 1: Vestluskontrolleri loomine Ava oma praegune projekt Sketch'is ja vali uus artboard vestluskontrolleri jaoks. Veendu, et valiksid seadmena iPhone 8, et saada sobiv ekraanisuurus. Nime artboard 'Vestlus', et oleks lihtsam seostada.
Samm 2: Navigatsiooniriba kopeerimine Kuna siht on ühtne disain, kopeeri oma kodukontrolleri navigatsiooniriba. Paigalda need sama kujunduse paigutusega, et säilitada järjepidevus. Olemasolevad staatus- ja navigatsiooniribad peaksid olema identsed.
Samm 3: Kujunduse kohandamine Aseta abijooned 16 pikslise kaugusele, et tagada, et kõik elemendid oleksid täpselt ja korralikult joondatud. Veendu, et joonduses ei tekiks „glitše”, kohandades väärtusi ülevaateaknas.
Samm 4: Stiilide üleviimine Kui soovid kasutada stiile välistest raamatukogudest, ava originaaldokument muudatuste tegemiseks. Siin saad kohandada värve ja fonte, mida soovid, et kogu projektis kasutataks. See võimaldab sul kiireid muudatusi kõikidele seotud elementidele rakendada.
Samm 5: Vestlusmulli loomine Sõnumite esitamiseks loo vestluskontrolleris uus kuju. Valige uue vestlusmulli taustavärv. Loomine sinine ja roheline variant sissetulevate ja väljuvate sõnumite jaoks.
Samm 6: Teksti lisamine Loo vestlusmulli sisse tekstiväli ja sisesta tervitussõnum, näiteks „Tere, tore sind siin näha!” Veendu, et kohandad teksti värvi ja stiili, et tekst silma paistaks ja oleks hästi loetav.
Samm 7: Mitme vastuse võimaluse loomine Kasutajale erinevate vastusevalikute esitlemiseks saad kasutada vestlusmullide koopiaid. Veendu, et elementide vahel oleks ühtlane vahemaa. Sa saad lisada veel tekstivalikuid, näiteks „Mis on sinu eesmärk?“
Samm 8: Elementide kohandamine Veendu, et kõik elemendid oleksid sama kõrgusega ja kopeeri need, et kujundamine kiiremini lõpule viia. Kohandamisel saad kasutada loodud gruppe ja ikoone, et muudatused oleksid järjepidevad ja lihtsad.
Samm 9: Viimased kohandused ja grupeerimine Kogu kõik elemendid gruppidesse, et suurendada ülevaadatavust. Sa saad gruppe nimeta nii, et need oleksid hõlpsasti tuvastatavad, näiteks „Vestlus_Bull” või „Vastusevalikud”.
Kokkuvõte - vestluskava kujundamine kihtidega Sketch'is: samm-sammuline juhend
Oled nüüd õppinud, kuidas kujundada vestluskontrollerit Sketch'is. Alates õige artboard'i valimisest kuni vestlusmullide loomiseni ja stiilide rakendamisega oled õppinud tõhusaid tehnikaid, et aega säästa ja ühtlast disaini luua.
Küsimused ja vastused
Kuidas saan Sketch'is taaskasutatavaid stiile luua?Sa saad stiile luua, luues teksti- või taustastiili ja rakendades seda seejärel teistele elementidele.
Milline on kihtide eelis Sketch'is?Kihtide abil saad korraldada erinevaid kujunduselemente ja lihtsustada muudatusi ning disaini haldamist.
Kuidas saan hoida elementide vahel tasakaalu Sketch'is?Kasutage abijooni ja joondamisriistu, et kontrollida ja kinnitada oma kujunduselementide vahemaid.
Milline on hea lähenemine vestluskaitse arvesse võtmise jaoks?Veenduge, et teie disain sisaldab selgeid viiteid privaatsuspoliitikale, mis on kasutajatele nähtavad.
Milline roll on värvivalikul vestluskavandamisel?Värvid võivad tekitada emotsioone ja mõjutada kasutajakogemust. Valige värvid, mis sobivad teie rakenduse identiteediga ja soodustavad loetavust.
