Ikonos yra daugiau nei dekoratyviniai elementai tavo App. Jie prisideda prie vartotojo patirties ir padeda naudotojams intuityviai naršyti. Ikonų pritaikymas gali būti lemiamas bendram tavo programos įspūdžiui. Šiame vadove sužinosi, kaip rasti, kurti ir veiksmingai integruoti ikonus į savo projektą.
Pagrindinės įžvalgos
- Ikonos veikia vartotojo patirtį ir dizainą.
- Yra daug įvairių šaltinių ikonoms, tiek nemokamų, tiek mokamų.
- SVG-ikonos suteikia didelę lankstumą šviesų ir dydžio pritaikyme.
Žingsnis po žingsnio vadovas
Žingsnis 1: Paruošti meniu
Norėdamas pradėti, pirmiausia eik į Sketch Runner, kad sukurtum TabBar. Tai padarysi naudodamas klavišų derinį Command + Shift + R. Tada pridėk TabBar ir pritaikyk ją norimai vietai.
Žingsnis 2: Tabų pavadinimų nustatymas
Dabar svarbu suteikti tabams tinkamus pavadinimus. Turėtum įrašyti „Home“, „Chat“ ir „Profil“ atitinkamuose tabuose. Tai ne tik padės tau išlaikyti aiškią apžvalgą, bet ir pagerins vartotojo naršymą.
Žingsnis 3: Pasirinkti ikonus
Norėdamas vizualizuoti savo navigaciją, tau reikės tinkamų ikonų. Savo medžiagų rinkinyje turėtum jau turėti „Home“ ir „Profil“ ikonų. Ištrauk šias ikonas į savo projektą.
Žingsnis 4: Rasti ikonus
„Chat“ ikonai gali aplankyti svetainę „Icon Finder“. Ši svetainė siūlo platų ikonų pasirinkimą įvairiais stiliais ir formatų. Ieškok tinkamos chat ikonos, tiesiog įvesdamas „Chat“ paieškos laukelyje.
Žingsnis 5: Ikonos atsisiuntimas
Įsitikink, kad pasirinkai ikoną, kuri yra licencijuota komerciniam naudojimui, jei planuoji ją naudoti paskelbtame pritaikyme. Pasirink SVG formatą ir atsisiųsk ikoną.
Žingsnis 6: Ikonų dydžio nustatymas
Dabar, kai visos ikonai įtraukti į projektą, svarbu jas nustatyti vienodam dydžiui. Šis pritaikymas užtikrins, kad tavo išdėstymas atrodytų tvarkingai. Galite proporcingai keisti ikonų dydį, kad jos gerai atrodytų viena šalia kitos.
Žingsnis 7: Spalvų keitimas SVG ikonuose
Didelis SVG ikonų privalumas yra galimybė lengvai keisti spalvas. Pasirink reikiamą lygį ir pritaikyk spalvą. Pirmiausia nukopijuok vieno iš egzistuojančių ikonų spalvos kodą, kad užtikrintum spalvų nuoseklumą.
Žingsnis 8: Žalių tonų pritaikymas
Jei nori naudoti skirtingus žalius tonus ikonoms, gali nustatyti spalvų alfa vertes. Tai suteikia daugiau gylio ir variacijos tavo dizainui. Eksperimentuok su skirtingomis alfa vertėmis, kad gautum geriausią vizualinį efektą.
Žingsnis 9: Ikonų įterpimas į TabBar
Dabar laikas integruoti ikoną į TabBar. Pasirūpink, kad jos būtų tolygiai išdėstytos ir atstumas iki kraštų būtų išlaikytas. Tai išlaikys tavo navigacijos aiškumą.
Žingsnis 10: Grupės kūrimas ir pritaikymas
Norėdamas užtikrinti geresnę organizaciją, sukurk grupes kiekvienam ikonui TabBar. Pavadink jas atitinkamai kaip „Home Selected“ ir „Profile Unselected“. Šie sisteminiai dalykai padės tau išlaikyti aiškumą rengiant savo programos įvykius.
Žingsnis 11: Simbolių kūrimas galutiniam naudojimui
Paskutinis žingsnis yra užtikrinti, kad tavo ikonos būtų išsaugotos kaip simboliai Sketch, kad jas būtų lengva pakartotinai naudoti. Išskirk simbolius iš savo išdėstymo, kad jie būtų prieinami bet kada.
Santrauka - Ikonų radimas, kūrimas ir pritaikymas: struktūruotas vadovas
Šiame vadove tu sužinojai, kaip efektyviai integruoti ikonas į savo projektą, pradedant nuo pasirinkimo, per pritaikymą iki įgyvendinimo vartotojo sąsajoje. Ikonos yra esminiai dizaino elementai ir žymiai prisideda prie vartotojų navigacijos.
Dažniausiai užduodami klausimai
Kaip rasti ikonų savo App?Tu gali naudoti svetaines kaip „Icon Finder“, kad rastum daugybę ikonų, kurios gali būti tiek nemokamos, tiek mokamos.
Kokiu formatu turėčiau saugoti ikonas?SVG yra rekomenduojamas formatas, nes gali lengvai pritaikyti ikonų spalvas ir dydį.
Ar galiu naudoti ikonas iš interneto savo komercinėje App?Pasirūpink, kad išnagrinėtum licencijų teises. Daugelis ikonų yra nemokamos tik nekomerciniams projektams.
Ar SVG ikonų redagavimas yra paprastas?Taip, SVG ikonų siūlo didelį lankstumą ir gali būti lengvai pritaikomos dizaino programose.
Ar turiu nustatyti ikonų dydžius vienodai?Taip, vienodas dydis užtikrina švarią ir patrauklią išdėstymą.
