Klēts vienam App-projektamvienmēr jābūt pārdomātam un pievilcīgam. Šajā apmācībā jūs uzzināsiet, kā pārstrādāt sava Home Controller, lai pievienotu vairāk interaktivitātes un vizuālā pievilcība. Sāksim uzreiz!
Svarīgākie secinājumi
- Home Controller var padarīt pievilcīgāku, radoši izmantojot krāsas un izkārtojumus.
- SVG faili piedāvā priekšrocības rediģējamībā un asumā.
- Krāsu pāreju un dažādu sekciju izmantošana var ievērojami uzlabot lietotāja pieredzi.
Soļu pa soļiem norādījumi
Vispirms apskatīsim esošo Home Controller. Šeit tu pamanīsi, ka mums ir dažādas sekcijas: kursu pārskats, interaktīvs čats un profils. Uzmanība tiek pievērsta Home Feed. Šajā apmācībā mēs pielāgosim navigāciju un optimizēsim dizainu.
1. solis: Pārstrādāt navigāciju
Lai uzlabotu sava Home Controller dizainu, sāksim ar navigācijas joslas pārstrādi. Vispirms noņemsim esošos elementus, piemēram, navigāciju.
Tagad pievienosim taisnstūri kā jaunu virsrakstu, kam jābūt 250 pikseļi augstam. Taisnstūrim nevajadzētu būt apmalēm, lai nodrošinātu glītu izskatu.
2. solis: Pievienot virsrakstu un tekstu
Nākamajā solī izvēlies Document Color un pievieno jaunu tekstu. Iestati tekstu uz "Visi kursi" un eksperimentē ar tekstu stiliem. Ieteicamā izvēlne virsrakstam būtu 110 pikseļi. Svarīgi, lai virsraksts būtu pielāgots statusa joslai.
3. solis: Pielāgot fona un krāsas
Pievilcīgā dizainā ietilpst arī krāsu pāreju izmantošana. Atgriezies pie sava taisnstūra un izvēlies krāsu pāreju, kas ir gan dinamiska, gan harmoniska visā izkārtojumā. Diagonāla pāreja radīs lielāku dziļumu.
4. solis: Pievienot jaunu sekciju
Tagad mēs izveidojam jaunu sekciju zem virsraksta. Pievieno vēl vienu taisnstūri ar 350 pikseļu augstumu un noņem apmali. Šeit tu vari izvēlēties kontrastējošu krāsu, lai piešķirtu dzīvīgumu spēlei.
5. solis: Saturs un ikonas
Šajā sekcijā mēs varētu pievienot pogu, lai lietotājam piedāvātu vairāk satura, piemēram, video. Pievieno tekstu "Mobilitātes spēks" H3 formātā un novieto to 16 pikseļu attālumā no augšas.
Tagad pievienosim ikonu, ko var izveidot paši vai importēt no resursiem. Šajā gadījumā ieteicams izmantot SVG failus, jo tie ir viegli rediģējami.
6. solis: Izveidot Pro versijas sekciju
Izveido vēl vienu sekciju, kas lietotājiem dod iespēju iegādāties Pro versiju. Pievieno jaunu taisnstūri ar 250 pikseļiem augstu un novieto savu aicinājumu "Iegūstiet Pro versiju" tur.
Šeit ir svarīgi, lai teksts būtu labi pamanāms. Tu vari izmantot tumšāku krāsu variantu, lai nodrošinātu labu salasāmību.
7. solis: Pārskatāmības uzlabošana ar grupām
Izveido grupas no dažādām sekcijām, lai uzlabotu pārskatāmību. Tas palīdzēs tev labāk organizēt dažādās jomas.
8. solis: Pēdējās pielāgošanas un salāgošana
Beigās vari vēlreiz pārskatīt visus elementus sekcijās un, ja nepieciešams, pielāgot attālumus un pozīcijas, lai nodrošinātu tīru izkārtojumu.
Kopsavilkums – Home Pārveidošana: Tavs efektīvais ceļš uz pievilcīgu lietotāja saskarni
Tu tagad esi iemācījies, kā pārstrādāt savu Home Controller, lai tas būtu interaktīvāks un vizuāli pievilcīgāks. Radoši izmantojot krāsu pārejas, ieviešot SVG ikonas un veidojot izkārtojumu sekcijās, tu ievērojami uzlabojusi savas aplikācijas izkārtojumu.
Biežāk uzdotie jautājumi
Kā es varu pārliecināties, ka mans virsraksts izskatās labi?Pārliecinies, ka tu izmanto atbilstošus tekstu izmērus un krāsu kombinācijas, kas visā dizainā ir saskanīgas.
Kādas priekšrocības man sniedz SVG failu izmantošana?SVG faili ir mērogojami un saglabā asumu neatkarīgi no palielināšanas līmeņa.
Kā es varu pievienot krāsu pārejas Sketch?Izvēlies vēlamo elementu, ej uz aizpildes opcijām un izvēlies "Gradient", lai izveidotu pievilcīgas pārejas.
