Kodu-uuenemine atraktiivse rakenduse kujunduse jaoks

Rakenduse disainialgus peaks olema alati läbimõeldud ja atraktiivne. Selles õpetuses saad teada, kuidas muuta oma rakenduse avalikukontrollerit, et lisada rohkem interaktiivsust ja visuaalset atraktiivsust. Alustame kohe!

Olulisemad järeldused

• Avaliku kontrollerit saab muuta atraktiivsemaks, kasutades loovalt värve ja paigutusi.
• SVG-failidel on eeliseid redigeeritavuse ja teravuse osas.
• Värvide üleminekute ja erinevate sektsioonide kasutamine võib oluliselt parandada kasutajakogemust.

Astme-astmeline juhend

Alustame olemasoleva avaliku kontrolleri vaatamisega. Siin näed, et meil on erinevad sektsioonid: kursuste ülevaade, interaktiivne vestlus ja profiil. Fookus on avalikul voolul. Selles õpetuses kohandame navigeerimist ja optimeerime disaini.

1. samm: Navigeerimise ümberkujundamine

Et parandada oma avaliku kontrolleri disaini, alustame navigeerimisribast. Eemaldame esialgsed elemendid, nagu navigeerimise.

Nüüd lisame uue päisena ristküliku, mille kõrgus peaks olema 250 pikslit. Ristkülikul ei tohiks olla äärist, et tagada puhas välimus.

2. samm: Päise ja teksti lisamine

Järgmises etapis vali dokumendi värv ja lisa uus tekst. Sea tekst „Kõik kursused“ ja katseta tekstistiilidega. Soovitatav päise suurus oleks 110 pikslit. Oluline on, et päis kohandataks staatuste ribaga.

3. samm: Taustade ja värvide kohandamine

Atraktiivse disaini juurde kuulub ka värvide üleminekute kasutamine. Mine tagasi oma ristkülikule ja vali värvide üleminek, mis on nii dünaamiline kui ka harmooniline üldises paigutuses. Diagonaalne üleminek loob sügavuse.

4. samm: Uue sektsiooni lisamine

Nüüd kujundame uue sektsiooni päise alla. Lisa veel üks ristkülik, mille kõrgus on 350 pikslit ja eemalda ääris. Siin saad valida kontrastse värvi, et tuua rakendusse rohkem elu.

5. samm: Sisu ja ikoonid

Sellesse sektsiooni võiksime lisada nupu, et pakkuda kasutajatele rohkem sisu, näiteks videot. Lisa tekst „Liikuvuse jõud“ H3-formaadis ja paiguta see 16 pikslit ülevalt.

Nüüd lisame ikooni, mille saad kas ise luua või ressurssidest importida. Soovitatav on kasutada SVG-faile, kuna need on hõlpsasti redigeeritavad.

6. samm: Pro versiooni sektsiooni loomine

Loo veel üks sektsioon, mis annab kasutajatele võimaluse osta rakenduse Pro versioon. Lisa uus ristkülik, mille kõrgus on 250 pikslit, ja paiguta oma tegevusele üleskutse „Saada Pro versioon“ sinna.

Siin on oluline, et tekst oleks silmatorkav. Sa saad kasutada tumedamat värvitooni, et tagada, et tekst oleks hästi loetav.

7. samm: Ülevaatlikkus gruppide kaudu

Loo erinevatest sektsioonidest gruppe, et suurendada ülevaatlikkust. See aitab sul erinevaid valdkondi paremini korraldada.

8. samm: Viimased kohandamised ja häälestamine

Lõpuks saad uuesti vaadata kõiki sektsioonides olevaid elemente ja vajadusel kohandada vahemaid ja positsioone, et tagada puhas paigutus.

Kokkuvõte – Avaliku ümberkujundamine: Sinu tõhus viis atraktiivse kasutajaliidese jaoks

Oled õppinud, kuidas oma avalikku kontrollerit uuesti kujundada, et teha sellest interaktiivsem ja samas visuaalselt atraktiivsem. Loova värvide ülemineku, SVG-ikoonide rakendamise ja sektsioonide korraldamise kaudu oled oma rakenduse paigutust oluliselt parandanud.