Lietotāju interfeisu izstrāde, īpaši čata lietotnēm, var būt prasīga, bet arī radoša uzdevums. Šajā apmācībā es parādīšu, kā efektīvi izstrādāt čata kontrolieri Sketch. Mēs īpaši strādāsim ar elementu slāņošanu, lai ietaupītu laiku un izstrādātu rūpīgu dizainu.
Galvenās atziņas
- Slāņi Sketch palīdz saglabāt pārskatu un ātri īstenot dizaina izmaiņas.
- Atkārtoti izmantojamu stilu lietošana ietaupa laiku un nodrošina konsekvenci dizainā.
- Dizaina vadlīniju integrācija nodrošina pievilcīgu un profesionālu izskatu.
Solī pa solim instrukcija
Pirmkārt, mēs sāksim ar čata kontroliera izveidi. Tev jau vajadzētu būt pazīstamam ar Sketch lietotāja interfeisu, tāpēc mēs uzreiz ķersimies pie dizaina.
1. solis: Čata kontroliera izveide Atver savu pašreizējo projektu Sketch un izvēlies jaunu artboard čata kontrolierim. Pārliecinies, ka izvēlies iPhone 8 kā ierīci, lai iegūtu piemērotu ekrāna izmēru. Nosauc artboard par „Čats” vieglākai piesaiste.

2. solis: Navigācijas joslas kopēšana Lai iegūtu vienotu dizainu, kopē navigācijas joslas no sava mājas kontroliera. Novieto tās tajā pašā izkārtojumā kā iepriekš, lai saglabātu konsekvenci. Statusa un navigācijas joslām jābūt identiskām.

3. solis: Izkārtojuma pielāgošana Izvieto palīgizrādes ar 16 pikseļu attālumu, lai nodrošinātu, ka visi elementi ir precīzi un kārtīgi izkārtoti. Pārliecinies, ka nav „glitch”-u izkārtojumā, pielāgojot vērtības, izmantojot inspektora skatu.

4. solis: Stilu pārsūtīšana Ja vēlies izmantot stilus no ārējām bibliotēm, atver oriģinālo dokumentu, lai veiktu izmaiņas. Tev būs iespēja pielāgot krāsas un fontus, kas tiks izmantoti visā projektā. Tas ļaus tev ātri lietot izmaiņas visiem saistītajiem elementiem.

5. solis: Čata burbuļa izveide Lai attēlotu ziņas, izveido jaunu formu čata kontrolierī. Izvēlies fona krāsu jaunajam čata burbulim. Mēs izveidosim zilu un zaļu variāciju ienākošām un izejošām ziņām.

6. solis: Teksta ievietošana Izveido tekstu laukumu čata burbulī un ievadi sveiciena ziņu, piemēram, „Sveiki, prieks tevi redzēt!” Pārliecinies, ka teksta krāsa un stils ir pielāgoti tā, lai teksts izceltos un būtu labi lasams.

7. solis: Dažādu atbilžu iespēju izveide Lai lietotājam piedāvātu dažādas atbildes iespējas, vari izmantot čata burbuļu kopijas. Pārliecinies, ka attālums starp elementiem paliek vienmērīgs. Tu vari pievienot vēl tekstu laukumus ar ieteikumiem atbildēm, piemēram, „Kāds ir tavs mērķis?”.

8. solis: Elementu pielāgošana Pārliecinies, ka visiem elementiem ir vienāda augstums un kopē tos, lai ātrāk pabeigtu dizainu. Pielāgošanā vari izmantot grupas un simbolus, kurus esi izveidojis, lai izmaiņas saglabātu konsekventas un vienkāršas.

9. solis: Pēdējās pielāgošanas un grupēšana Apvieno visus elementus grupās, lai palielinātu pārskatu. Tu vari nosaukt grupas tā, lai tās būtu viegli identificējamas, piemēram, „Čata_burbulis” vai „Atbilžu iespējas”.

Kopsavilkums - Čata dizains ar slāņiem Sketch: Soli pa solim ceļvedis
Tu esi tagad iemācījies, kā izstrādāt čata kontrolieri ar Sketch. No pareizā artboarda izvēles, čata burbuļu izveides līdz stilu lietošanai, tu esi iemācījies efektīvas tehnikas, lai ietaupītu laiku un izveidotu vienotu dizainu.
Bieži uzdotie jautājumi
Kā es varu izveidot atkārtoti lietojamus stilus Sketch?Tu vari izveidot stilus, izveidojot teksta vai fona stilu un pēc tam to piemērojot citiem elementiem.
Kādas ir slāņu priekšrocības Sketch?Slāņi palīdz organizēt dažādus dizaina elementus un atvieglo izmaiņas un dizaina pārvaldību.
Kā es varu nodrošināt vienmērīgu attālumu starp elementiem Sketch?Izmanto palīgizrādes un izlīdzināšanas rīkus, lai pārbaudītu un apstiprinātu attālumu starp saviem dizaina elementiem.
Kāda ir laba pieeja, lai ņemtu vērā čata datu aizsardzību?Pārliecinies, ka tavs dizains ietver skaidras norādes par privātuma politikām, kas ir redzamas lietotājiem.
Kāda loma ir krāsas izvēlei čata dizainā?Krāsas var izraisīt emocijas un ietekmēt lietotāju pieredzi. Izvēlies krāsas, kas atbilst tavas lietotnes identitātei un veicina lasāmību.