Šajā tekstuālā rokasgrāmatā tu soli pa solim iemācīsies, kā izveidot Home Screen lietotnei programmā Sketch. Mēs koncentrēsimies uz pamatiem un dažiem pārbaudītiem dizaina principiem, lai radītu pievilcīgu lietotāja saskarni. Tu redzēsi, ka process ir vienkāršs un saprotams, un tu drīz varēsi izveidot savus dizainus.
Galvenās atziņas
- Sketch izmantošana Home Screen izkārtojuma izveidei
- Svarīgi dizaina principi pievilcīgām lietotāja saskarnēm
- Krāsu kodi un simbolu izmantošana, lai vienkāršotu dizaina procesu
Solis pa solim rokasgrāmata
Lai sāktu ar savu dizainu, atver Sketch un izveido jaunu dokumentu savām Home Screen.
Pirmais solis ir izvēlēties iPhone 8 kā savu dizaina rāmi. Ir jēga sākt ar mazāku ekrānu, jo šī metode atvieglo pielāgošanos lielākiem displejiem.
Tagad atver oriģinālo lietotni vai dizainu, kuru vēlies izmantot kā veidni. Mēs pievienosim navigāciju, kas atbalsta tavu lietotnes struktūru. Sāc ar navigācijas elementu izvēli.
Uzklikšķini uz zīmēšanas laukuma un nosauc dēli par „Home Background Color“. Lai pārliecinātos, ka tavs fons nākotnē nav caurspīdīgs, uzstādi vienkāršu fona krāsu, sākumā baltu.
Nākamajā solī koncentrējies uz kursa elementa izveidi. Tam tu noklikšķini uz laukuma un sāc veidot kursa karti. Tu veidosi karti ar skaidru, vienkāršu dizainu, kas atbilst plakanā dizaina principiem.
Kartes dizainam ir svarīga fona krāsa. Tu vari izmantot vienkāršu zilu, lai iegūtu tūlītēju vizuālu nošķiršanu. Alternatīvi tu vari eksperimentēt ar krāsu pārejām, lai pievienotu dziļumu un dimensiju.
Tagad pievieno tekstu kursam. Tu vari pielāgot teksta lauku, lai nodrošinātu, ka teksts ir centrā un viegli lasāms. Attālumi ap tekstu ir izšķiroši. Pārliecinies, ka atstāj apmēram 16 pikseļu attālumu no malām, lai iegūtu harmonisku dizainu.
Kad esi sakārtojis attālumus un teksta lauku, izveido aprakstu kursam. Arī apraksta etiķetei ir svarīgi pievērst uzmanību izmēram. Piemēram, aptuveni 14 punktu fonta izmērs nodrošinās labu salasāmību.
Pēc tam, kad esi ieviesis pamatelementus, vari izveidot papildu simbolus. Tie būs noderīgi, ja vēlies vairākas reizes izmantot līdzīgus elementus savā dizainā. Izveido simbolu kursa kartei, lai to varētu atkārtoti izmantot citās lietotnes daļās.
Kad esi izveidojis savu simbolu, tas automātiski pielāgos izmaiņas visās instancēs. Tagad vari pielāgot kursa nosaukumu un aprakstu, neizmainot visu manuāli. Izmanto vienkāršus teksta apzīmējus, lai nodrošinātu skaidru struktūru.
Lai tavi kartes dizaini vizuāli izskatītos pievilcīgi, pievieno ēnu. Pārliecinies, ka tā ir smalka, lai nepārslogotu dizainu. Viegls ēnojums padara elementus izteiksmīgākus un labāk iederas kopainā.
Izmanto noapaļotas malas savām kartēm, lai palielinātu vizuālo pievilcību. Malas rādiuss 8 nodrošina modernu, tīru izskatu, kas atbilst Apple dizaina vadlīnijām.
Tagad izveido skaidru virsrakstu virs kursa kartes, lai optimizētu lietotāja ceļvedi un labāk strukturētu saturu. Pārliecinies, ka augstums un attālums līdz iepriekšējam elementam ir konsekventi.
Visbeidzot, ir svarīgi domāt par konsekventu dizainu. Saglabā attālumus starp visiem elementiem un malas vienādus, lai izveidotu harmonisku kopainu.
Kopsavilkums - Izveido pievilcīgu Home Screen ar Sketch
Šodienas soļi ir parādījuši, kā ar Sketch izveidot funkcionālu un pievilcīgu Home Screen. Izmantojot vienkāršus dizaina un lietotāja vadības principus, tu vari izveidot lietotni, kas ir gan vizuāli pievilcīga, gan labi funkcionē.
Bieži uzdoti jautājumi
Kā sākt ar Sketch?Tu atver Sketch un izveido jaunu dokumentu.
Kurš ierīci man būtu jāizvēlas kā veidne?iPhone 8 ir laba izvēle, jo tam ir standarta izmērs.
Cik svarīgi ir attālumi dizainā?Attālumi ir izšķiroši, lai nodrošinātu tīru un pievilcīgu dizainu.
Kas ir simboli programmā Sketch un kā tos izmantot?Simboli ļauj izveidot atkārtotus dizaina elementus un izmaiņas lietot visur.
Kā varu pievienot ēnas savam dizainam?Pievieno ēnas, izmantojot „Slāņu” iestatījumus programmā Sketch.
