Efektīva onepager izveide ar Adobe XD – 1. daļa

Ar AdobeXDtu vari izveidot iespaidīgus dizainus tīmekļa vietnēm. Īpaši Onepagerir ļoti populāri, jo tie nodrošina kodolīgu un pārskatāmu attēlojumu. Šajā tūlītējā rokasgrāmatā tu soli pa solim uzzināsi, kā izveidot Onepager, izmantojot dažādas tehnikas. Mans mērķis ir parādīt tev dažādās iespējas un sniegt praktiskus padomus, kas palīdzēs optimizēt tavu darba plūsmu.

Svarīgākie atziņas

• Tu uzzināsi, kā izveidot artboard ar ideālu tīmekļa izšķirtspēju.
• Dažādas tehnikas attēlu novietošanai ar Adobe XD tiek izskaidrotas.
• Teksta un pogas dizainus iepazīstināsim, lai izveidotu galveni.
• Navigācijas punkti un to iestatīšana tavā dizainā tiks aprakstīti.

Solis pa solim

Solis 1: Izveido jaunu artboard

Atver Adobe XD un izmanto taustiņu kombināciju A, lai izveidotu jaunu artboard. Izvēlies tīmekļa izšķirtspēju 1366x 768 pikseļi. Šī izmērs ir ideāls, jo tas pārstāv standarta izšķirtspēju daudzām tiešsaistes lietotnēm. Kad artboard ir izveidots, tu vari tuvināt ar komandu 3, lai iegūtu labāku pārskatu par savu darba laukumu. Nosauc savu artboard par „Onepager”, lai saglabātu skaidru struktūru.

Solis 2: Fona attēla pievienošana

Lai izveidotuaugšdaļu savam Onepager, tev nepieciešams pievilcīgs attēls. Atver savu finder un izvēlies piemērotu attēlu. Velc attēlu ar peles vilkšanu uz savu artboard. Pārliecinies, ka tu ņem vērā Retina / augstas izšķirtspējas attēlus optimālai attēlošanai. Ir svarīgi, lai attēls būtu pielāgots rāmim, lai netiktu zaudēts redzamības laukums.

Solis 3: Elastīga attēla novietošanas tehnika

Vietā, lai attēlu vilktu tieši uz artboard, izmanto taisnstūra instrumentu (taustiņu kombinācija R), lai definētu vēlamo laukumu. Velc taisnstūri uz izmēru, kas atbilst vēlamajam attēla izgriezumam. Vilkdams attēlu uz taisnstūra, attēls automātiski tiks apgriezts, un tu vari pielāgot taisnstūra izmēru, nezaudējot attēla proporcijas.

Solis 4: Teksta pievienošana

Izvēlies teksta rīku, nospiežot T, un klikšķini uz labās augšējās stūra artboard. Tur vari ievadīt virsrakstu vai aizpildījuma tekstu. Lai pielāgotu tekstu, izmanto rakstzīmju formātus no sava paragrafa stila un izvēlies piemērotu fontu. Piemēram, vidēja fonta izmērs 200 varētu būt ideāls. Novieto tekstu vēlamajā vietā, pirms ej uz nākamo soli.

Solis 5: Pogas veidošana

Pievieno pogu zem sava teksta. To var izdarīt, izveidojot taisnstūri vai izmantojot pogu no iespēju saraksta. Jo vienkārša un intuitīva lietotāja saskarne ir izšķiroša tavam Onepager panākumam. Centies izvēlēties pogai krāsas, kas harmonizē ar visu tavu dizainu.

Solis 6: Navigācijas punktu izveidošana

Lai lietotājiem atvieglotu navigāciju, izveido navigācijas punktus. Izmanto elipses rīku (E), lai zīmētu apli un turi nospiestu Shift taustiņu, lai panāktu perfekta forma. Tagad ar atkārtošanas režģa palīdzību tu vari ātri izveidot vairākus navigācijas punktus. Šī funkcija ļauj viegli pielāgot attālumus starp apļiem.

Solis 7: Struktūra un organizācija

Lai saglabātu savus dizaina slāņus pārskatāmus, grupē dažādus elementus. Tādējādi tu vari pārliecināties, ka tavs dizains ir strukturēts un viegli rediģējams. Nosauc grupas atbilstoši – piemēram, „Galvene“ augšējai daļai tavam Onepager. Skaidra organizācija ir īpaši svarīga, strādājot ar lielākiem projektiem.

Solis 8: Finālā pielāgošana

Kad visi elementi ir novietoti, atgriezies un pārbaudi fontu lielumu, krāsas un attālumus. Tu vari turpināt pielāgot izkārtojumu, lai pārliecinātos, ka viss ir labi lasāms un vizuāli harmonizē. Izmēģini dažādas krāsu variācijas, lai iegūtu vēlamo sajūtu un dizaina izteiksmīgumu.

Solis 9: Logo integrācija

Pēdējā solī pievieno savu logo sava dizaina vidū. To var izdarīt, velkot to no sava finder uz vēlamo vietu. Pārliecinies, ka logo izmērs ir pielāgots pārējam dizainam, lai tas labi iekļautos un stiprinātu zīmola identitāti.

Solis 10: Noslēgums

Pārbaudi savu darbu un regulāri saglabā projektu, lai pārliecinātos, ka netiek zaudēta progresa informācija. Tu vari jebkurā brīdī izveidot priekšskatījuma skatus dizainam, lai redzētu, kā tavs Onepager izskatās dažādās ierīcēs.

Kopsavilkums – Onepager izveidošana ar Adobe XD – 1. daļa

Šajā pirmajā daļāAdobe XD rokasgrāmatā tu esi iemācījies, kā izveidot artboard, izmantot dažādas tehnikas attēlu novietošanai un pievienot pamatelementus, piemēram, tekstu un pogas. Ar parādītajām darbībām tu vari efektīvi izveidot sava Onepager struktūru un atstāt pirmo iespaidu.