Primjeri interfejsa s karticama i kako ih izgraditi

Početna » piton » Primjeri interfejsa s karticama i kako ih izgraditi

Interfejsi s karticama su jedan od najpoznatijih obrazaca navigacije u modernom softveru., od mobilnih aplikacija i web nadzornih ploča do složenih alata za razvoj. Omogućavaju korisnicima da prelaze između različitih odjeljaka ili dokumenata unutar istog prozora, održavajući iskustvo urednim, brzim za skeniranje i jednostavnim za učenje. Kada su pažljivo dizajnirane, kartice dramatično smanjuju nered i jasno daju do znanja koji je sadržaj trenutno vidljiv.

Iza tog jednostavnog reda etiketa kriju se mnoge dizajnerske odluke i tehničke opcije.: fiksne ili kartice koje se mogu pomicati, rasporedi samo s ikonama, ugniježđeni sistemi kartica u kreatorima stranica, prozori s karticama u stilu dokumenta u progresivnim web aplikacijama ili prilagođeni widgeti s karticama izgrađeni pomoću okvira poput Bootstrapa ili Xajaxa. U ovom vodiču ćemo proći kroz širok raspon primjeri interfejsa s karticama i pristupe implementaciji, objedinjujući sve ideje iz Androida, web UI-ja, PWA manifesta i klasičnih PHP + Ajax rješenja.

Interfejsi s karticama u Androidu s TabLayout i ViewPager

Na Androidu, glavni gradivni blok za navigaciju s karticama u Material Designu je TabLayout widget., često uparen s ViewPagerom (ili ViewPager2 u novijim projektima). Googleov tim za Material Design opisuje kartice vrlo jednostavno: one olakšavaju istraživanje i prebacivanje između različitih prikaza unutar iste aktivnosti.

TabLayout horizontalno raspoređuje kartice i otkriva dva glavna načina rada: fiksni i skrolujući.U fiksnom režimu, svaka kartica je vidljiva u isto vrijeme, a dostupna širina je podijeljena između njih. Ovo je obrazac koji se koristi u aplikacijama poput WhatsAppa, gdje je nekoliko različitih odjeljaka uvijek udaljeno jednim dodirom, a kartice popunjavaju cijeli red.

Pomične kartice dolaze u obzir kada broj odjeljaka ili dužina oznaka premašuje širinu ekranaU ovoj konfiguraciji, korisnik može horizontalno prevući prstom preko trake s karticama kako bi otkrio više opcija. Googleova aplikacija Vijesti i vrijeme dobra je referenca za TabLayout s mogućnošću pomicanja, gdje kategorije sadržaja prerastaju ono što jedan ekran može udobno smjestiti.

Svaki tab u TabLayout-u se obično mapira na Fragment prikazan unutar ViewPager-a.Kada korisnik dodirne karticu, TabLayout ažurira svoje odabrano stanje i ViewPager prelazi na odgovarajući fragment. Slično tome, kada korisnik prevlači prstom između stranica, indikator odabrane kartice se pomiče kako bi pratio trenutno vidljivi fragment. Ova čvrsta veza se obično ostvaruje putem setupWithViewPager(), koji automatski kreira kartice i povezuje slušače za događaje skrolovanja i klika.

Kartice materijala mogu prikazivati ​​tekst, ikone ili kombinaciju obojeNeke aplikacije, poput Twittera na Androidu, uveliko se oslanjaju na prepoznatljive ikone umjesto naljepnica, što štedi prostor i može se činiti bržim za skeniranje kada korisnici shvate značenje svakog simbola. TabLayout podržava sve ove opcije, bilo da su definirane u XML-u ili postavljene programski.

Korak po koraku, kreiranje osnovnog Android interfejsa sa karticama

Da biste u Android Studiju od nule izgradili jednostavan korisnički interfejs s karticama, obično počinjete s praznom aktivnošću., često se naziva nešto poput MainActivity, a zatim predstavite tri ključna dijela: nekoliko fragmenata, TabLayout u vašem XML-u izgleda i ViewPager kojim upravlja adapter za stranice.

Prvi gradivni blok je mali skup klasa Fragment, jedna po kartici.Na primjer, možete definirati FragmentOne, FragmentTwo i FragmentThree, pri čemu svaki napuhava vlastiti XML raspored (na primjer, fragment_one.xml). Kod za svaki fragment je jednostavan: napuhavanje prikaza, povezivanje bilo kojih widgeta i dostavljanje sadržaja relevantnog za tu karticu.

Zatim dodajete TabLayout i ViewPager u glavni raspored aktivnosti. u activity_main.xml izjavljujete TabLayout element sa ID-om kao što je tab_layout i ViewPager odmah ispod njega. Sa atributima kao što su app:tabMode i app:tabGravity Vi kontrolišete da li su kartice fiksne ili se mogu pomicati i da li se rastežu kako bi ispunile dostupnu širinu. Postavka tabMode="fixed" i tabGravity="fill" će ravnomjerno rasporediti sve kartice po traci, što je posebno primjetno na širokim ekranima poput tableta.

Stiliziranje kartica se obično vrši pomoću prilagođene reference stila na TabLayout-u.Kroz stil poput @style/CustomTabLayout, možete definirati stvari poput boje indikatora (tabIndicatorColor), visina indikatora (tabIndicatorHeight) i boje teksta za odabrana i neodabrana stanja (tabTextColor i tabSelectedTextColor). Ista svojstva se mogu postaviti i programski pomoću metoda poput setSelectedTabIndicatorColor() or setTabTextColors(), ali centralizacija dizajna u XML-u olakšava održavanje konzistentnosti izgleda.

Nakon definiranja rasporeda, prilažete adapter za preglednik koji kontrolira koji se fragment pojavljuje za svaku karticu.Uobičajena implementacija proširuje FragmentPagerAdapter (ili FragmentStatePagerAdapter ili novijeg FragmentStateAdapter za ViewPager2) i prepisuje tri metode: getItem() da se obezbijedi fragment za određenu poziciju, getCount() prijaviti koliko stranica postoji i getPageTitle() da se isporuči tekst oznake za svaku karticu. Kada je odabrana prva kartica, pod nazivom nešto poput "Stavka kartice 1", getItem() Će se vratiti FragmentOne, povezujući oznaku sa njenim sadržajem.

Svi dijelovi se spajaju u aktivnosti onCreate() načinTamo uzimate reference na TabLayout i ViewPager iz activity_main.xml, konstruirajte svoj adapter pomoću FragmentManagera i postavite ga na ViewPager. Poziv funkcije tabLayout.setupWithViewPager(viewPager) završava ožičenje, kreirajući kartice za svaki unos u adapteru i sinhronizujući interakcije korisnika. Prevlačenjem između stranica ažurira se odabrana kartica, a dodirivanjem kartica se lista stranica do desnog fragmenta.

Ako vam je potrebna detaljnija kontrola nad korisničkim radnjama, možete priložiti OnTabSelectedListenerOvaj slušač izlaže tri povratna poziva: onTabSelected() kada kartica postane odabrana, onTabUnselected() kada izgubi fokus, i onTabReselected() kada korisnik dodirne već aktivnu karticu. Ove udice su idealne za učitavanje dodatnih podataka samo kada se kartica zapravo pregleda ili za pokretanje suptilnih animacija kada se fokus promijeni.

Pomicanje u odnosu na fiksne kartice i korištenje ikona umjesto teksta

Materijalni dizajn jasno razlikuje fiksne kartice i kartice koje se mogu pomicati, a svaka ima idealne slučajeve upotrebe.Fiksni tabovi se preporučuju kada imate ograničen broj kratkih oznaka koje korisnici mogu upoređivati ​​jednu pored druge. Savršeni su za primarnu navigaciju na ekranima osjetljivim na dodir, gdje su jasnoća i stabilnost važniji od uklapanja ogromnog kataloga stranica.

Pomične kartice se prikazuju kada su oznake duže ili vam je potrebno više od otprilike četiri karticeAko pokušate nagurati duga imena u fiksni TabLayout, Android će početi prelamati oznake preko više redova ili ih čak skraćivati, što ne samo da izgleda neuredno, već i šteti upotrebljivosti. Kada je omogućen režim skrolovanja, korisnik može glatko pomicati traku kartica lijevo i desno, a svaka oznaka dobija dovoljno prostora da bude čitljiva.

Prebacivanje između ovih načina rada može se izvršiti ili u XML-u putem app:tabMode ili programski sa setTabMode(). Prolaz TabLayout.MODE_FIXED daje fiksne tabove, dok TabLayout.MODE_SCROLLABLE kreira horizontalno pomičnu listu. Vrijedi zapamtiti da ako očekujete više od četiri kategorije, smjernice snažno preporučuju da se priklonite konfiguraciji s pomicanjem.

Još jedna moćna varijacija je korištenje ikona umjesto teksta za oznake kartica.Pozivanjem getTabAt(index) na instanci TabLayout-a, a zatim pozivanje setIcon(), dodjeljujete element koji se može crtati određenom tabu. Ovo otvara prostor za vrlo kompaktne trake kartica, posebno kada su ikone univerzalno razumljive. Ako i dalje prepisujete getPageTitle() U vašem adapteru možete kombinirati tekst i ikone; ako izostavite to prepisivanje, dobit ćete kartice samo s ikonama.

Ponašanje tabulatora je također vrlo konfigurabilno bez dodirivanja XML-a.Možete eksplicitno kreirati kartice pomoću newTab(), umjesto da se oslanja na setupWithViewPager(), a možete mijenjati način rada kartice u hodu, odgovarati na odabir putem slušača ili čak umetati prilagođene prikaze kartica ako su vam potrebni složeniji dizajni od jednostavne oznake i ikone.

Korištenje Android Studio predložaka za izradu kartičnih aktivnosti

Pisanje interfejsa sa karticama od nule je odlično za razumijevanje kako se sve uklapa, ali Android Studio može generirati funkcionalnu konfiguraciju za vas za nekoliko sekundi.IDE dolazi s predlošcima za uobičajene obrasce, uključujući „Tabbed Activity“ koji je dostupan i u Javi i u Kotlinu.

Kada započnete novi projekat, nakon što odaberete naziv aplikacije i ciljne uređaje, možete odabrati "Aktivnost na karticama" sa liste aktivnostiU konačnom dijalogu za konfiguraciju postoji opcija za odabir stila navigacije, kao što je „Tabovi trake radnji (s ViewPagerom)“. Nakon što potvrdite, Android Studio generira aktivnost s TabLayoutom, ViewPagerom i fragmentima primjera povezanim tako da možete odmah pokrenuti i istražiti.

Ovi ugrađeni predlošci su izuzetno praktični za prototipove i jednostavne aplikacijeOni su postavili osnovni kod, primjere rasporeda i logiku povezivanja tako da se možete usredotočiti na stvarni sadržaj i specifično ponašanje. U postojećim projektima možete dodati istu vrstu aktivnosti iz menija Datoteka umetanjem nove „Aktivnosti s karticama“ i slijedeći iste korake.

Za ambicioznije aplikacije sa složenom navigacijom ili vrlo prilagođenim vizualnim jezikom, predlošci trećih strana mogu dodatno ubrzati stvari.Tržišta poput Envata nude unaprijed izrađene predloške Android aplikacija koje uključuju sofisticirane interfejse s karticama i obrasce Material Designa odmah po instalaciji. Ovi kompleti su posebno korisni kada se želite koncentrirati na jedinstvenu funkcionalnost umjesto ponovnog kreiranja standardne navigacije od nule.

Ugniježđene kartice u Elementoru za napredne web izglede

Na webu, kreatori stranica poput Elementora donose ideju interfejsa s karticama u tokove rada dizajna s metodom "drag-and-drop".Jedan posebno fleksibilan obrazac su ugniježđene kartice: kartice koje se nalaze unutar drugih kartica, omogućavajući vam grupiranje povezanog sadržaja u duboko strukturirane, ali kompaktne rasporede bez preopterećenja stranice.

Dobar prvi korak pri dizajniranju ugniježđenih kartica je definiranje konzistentnog vizualnog jezikaNa primjer, kartica može kombinirati glavnu sliku, naslov koji sažima mjesto održavanja ili plan, kratak tekstualni opis i dugme. Nakon što je ta struktura postavljena, možete mijenjati stvarni raspored po kartici – možda jedan vertikalni blok u jednoj, raspored s dvije kolone u drugoj i kompoziciju s tri reda u trećoj – uz zadržavanje istih elemenata kako bi interfejs i dalje djelovao kohezivno.

Ugniježđene kartice Elementora vam omogućavaju da ubacite bilo koji widget koji želite, ne samo običan tekstMožete ugraditi cjenovnike kako biste prikazali mjesečne, polugodišnje i godišnje planove unutar različitih kartica ili ih kombinirati s mrežama petlji kako biste dinamički filtrirali objave na blogu, proizvode ili stavke portfelja po kategorijama. Poravnavanjem kategorija s karticama, posjetitelji mogu brzo kliknuti na ono što im je važno bez napuštanja trenutne stranice.

Kartice su također moćan način za vođenje korisnika kroz procese ili priče.Jedan primjer je korištenje otprilike četiri kartice kao koraka u toku podešavanja: svaka kartica može prikazivati ​​ikonu, broj koraka i kratku oznaku u traci kartica, dok sadržaj panela sadrži jedinstveni tekst i slike za tu fazu. Dodajte efekte pokreta ili suptilne animacije slikama i elementima i možete stvoriti vođeno, narativno iskustvo koje je mnogo zanimljivije od duge statične stranice.

Za naprednije kontrolne ploče i prikaze u administratorskom stilu, dizajneri ponekad idu jedan nivo dublje i koriste ugniježđene kartice unutar ugniježđenih karticaZamislite vertikalnu kolonu kartica na lijevoj strani koje djeluju kao primarni odjeljci, a svaki sadrži horizontalni skup sekundarnih kartica za podprikaze. Uz malo prilagođenog CSS-a – na primjer, korištenjem CSS ID-a svake kartice za rotiranje oznaka i kompresiju vertikalne navigacije – možete izgraditi visoko funkcionalne kontrolne ploče s karticama u potpunosti s Elementor kontejnerima i mrežama petlji.

Glavna stvar je da ugniježđeni tabovi nude gotovo beskrajne mogućnosti za strukturiranje sadržaja.Bez obzira da li organizujete obilaske funkcija, opcije cijena, portfolije ili analitičke kontrolne ploče, kombinacija konzistentnog dizajnerskog jezika i fleksibilnih izgleda omogućava vam da spakujete ogromnu količinu informacija u prostor koji se i dalje čini intuitivnim za istraživanje.

Način rada s karticama u progresivnim web aplikacijama

Interfejsi s karticama ne postoje samo unutar web stranica; mogu se ugraditi u način na koji progresivne web aplikacije rade kao samostalni prozori.Na ChromeOS-u, poseban "režim aplikacije s karticama" omogućava PWA-u da prikaže vlastitu traku s karticama u stilu dokumenta, slično onome što biste očekivali od izvornog editora ili IDE-a.

PWA podržavaju nekoliko načina prikaza koji se kontrolišu putem display član u manifestu web aplikacije. Opcije uključuju fullscreen, standalone, minimal-ui i browser, a preglednici se vraćaju na definirani lanac ako određeni način rada nije podržan. Za još precizniju kontrolu postoji display_override svojstvo koje omogućava programerima da odrede prilagođeni rezervni redoslijed.

Novi način rada s karticama aplikacije popunjava prethodnu prazninu pružanjem ugrađenog sučelja za dokumente s karticama (TDI) za PWA-ove.Umjesto lažnih kartica unutar stranice s prilagođenim HTML-om i JavaScriptom, aplikacija može zatražiti od sistema da hostira više dokumenata ili prikaza u stvarnim karticama najvišeg nivoa unutar namjenskog PWA prozora. Ovo se razlikuje od display: browser, što jednostavno otvara aplikaciju u normalnoj kartici preglednika s punim korisničkim interfejsom preglednika.

Tipični slučajevi upotrebe za ovaj način rada uključuju aplikacije za produktivnost, alate za komunikaciju i iskustva čitanja.PWA za uređivanje koda može otvoriti više datoteka u odvojenim karticama, klijent za chat može pružiti karticu po sobi ili kanalu, a aplikacija za čitanje može otvoriti veze članaka u novim karticama aplikacije, sve uredno unutar istog prozora umjesto da zatrpava opći preglednik.

Postoje važne razlike između ovog ugrađenog načina rada s karticama i prilagođenih korisničkih interfejsa s karticama koje su napravili programeri.Sistemske kartice mogu elegantno obraditi veliki broj dokumenata, imati koristi od izolacije resursa i duboko se integrirati s funkcijama preglednika kao što su historija navigacije, "Kopiraj link za ovu stranicu", preusmjeravanje s trenutne kartice ili otvaranje aktivnog dokumenta u redovnom prozoru preglednika. Ako samo simulirate kartice unutar stranice, te mogućnosti se primjenjuju na vanjsku ljusku, a ne na svaki pojedinačni podprikaz.

Kako konfigurirati PWA način rada aplikacije s karticama

Omogućavanje načina rada s karticama za PWA počinje u manifestu, postavljanjem odgovarajućeg display_override lanacMinimalna konfiguracija može specificirati "display": "standalone" i "display_override": , što znači da bi preglednik trebao preferirati prozor aplikacije s karticama ako je moguće, a u suprotnom se vratiti na standardni samostalni prozor.

Osim toga, tab_strip Član vam omogućava da prilagodite ponašanje trake s karticama aplikacijeOvaj objekt može definirati dva opcionalna podsvojstva: home_tab i new_tab_buttonAko izostavite tab_strip U potpunosti, preglednik će pružiti zadano ponašanje koristeći početni URL aplikacije kao osnovu za kreiranje novih kartica.

Koncept početne kartice je posebno važanTo je zakačena kartica koja mora uvijek biti prisutna kad god je prozor aplikacije otvoren i ne bi trebala izlaziti iz definiranog opsega. Očekuje se da će se sve veze na koje se klikne unutar ove početne kartice otvoriti u novim karticama aplikacije. Konfigurirate je putem home_tab.scope_patterns, što je lista URL obrazaca (često jednostavnih putanja poput "/" or "/index.html") u odnosu na URL manifesta.

The new_tab_button unos opisuje kako se ponaša dostupnost "nove kartice" korisničkog interfejsaIma jednu url član koji određuje koja stranica se otvara kada korisnik klikne na dugme, obično nešto unutar opsega aplikacije kao što je "/create"Ako taj URL spada u opseg početne kartice, aplikacija uopće neće prikazati zasebnu kontrolu "nova kartica", jer se pretpostavlja da se navigacija odvija iz početnog prikaza.

Primjer manifesta koji povezuje prozor aplikacije s karticama mogao bi izgledati ovako (konceptualno): definiše ime, start_url, display postavljeno na standalone, display_override koji sadrži "tabbed", a home_tab čiji opseg obuhvata / i /index.html, A new_tab_button konfigurisan sa a "/create" URL. S tom postavkom, korisnici dobijaju trajnu početnu karticu plus mogućnost otvaranja dodatnih dokumenata jednim klikom.

Aplikacije također mogu otkriti da li se izvršavaju u režimu s karticama tokom izvođenja.. Koristeći display-mode medijsku funkciju, možete napisati CSS blok poput @media (display-mode: tabbed) za fino podešavanje stilova ili korištenje window.matchMedia('(display-mode: tabbed)').matches u JavaScriptu kako bi se provjerilo je li aktivan način rada aplikacije s karticama i prilagodilo ponašanje korisničkog interfejsa u skladu s tim.

Konačno, postoji zanimljiva interakcija s Launch Handler API-jem.Kada se PWA sa karticama postavi "client_mode": "navigate-new" U konfiguraciji pokretanja, pokretanja aplikacija mogu se usmjeriti u nove kartice unutar postojećeg prozora aplikacije umjesto otvaranja više prozora. Ovo održava korisnički radni prostor urednim i pojačava ideju jedinstvenog okruženja aplikacije usmjerenog na kartice.

Izrada prilagođene navigacije s karticama pomoću PHP-a, Ajaxa i Xajaxa

Mnogo prije nego što su PWA imali kartice na sistemskom nivou, web programeri su izrađivali vlastite komponente za navigaciju s karticama koristeći HTML, CSS, JavaScript i kod na strani servera.Jedan klasičan pristup koristi PHP zajedno s Xajax frameworkom za asinhrono učitavanje sadržaja kartice i ažuriranje stranice bez potpunog ponovnog učitavanja.

HTML struktura u takvom primjeru je prilično jednostavnaOmotač <div> nosi klasu poput pestanas i unutar njega <ul> sadrži <li> elementi za svaku karticu. Svaka stavka liste ima jedinstveni ID (kao što je pestana0, pestana1, pestana2) i CSS klasu koja pokazuje da li je aktivna ili neaktivna. Sidrene oznake unutar ovih stavki liste pozivaju JavaScript funkciju koju generira Xajax, na primjer javascript:void(xajax_cambia_contenido(0)), prosljeđujući indeks kartica serveru.

Ispod liste kartica nalazi se poseban kontejner za sadržaj tijela kartice., često a <div> sa ID-om kao što je cuerpopestanasKada korisnik klikne na bilo koju karticu, Ajax poziv dohvaća odgovarajući HTML fragment i ubacuje ga u ovo područje sadržaja. Sama stranica se nikada ne ponovo učitava; mijenja se samo unutrašnji HTML kontejnera sadržaja.

CSS igra centralnu ulogu u tome da kartice izgledaju i osjećaju se interaktivno.Mogu se definirati dvije klase ključeva: jedna za neaktivne kartice (na primjer li.pestanainactiva) i još jedan za odabranu karticu (kao što je li.pestanaseleccionada). Razlike u stilu – boja pozadine, okviri, stilovi fonta – daju korisniku jasne povratne informacije o tome koja je kartica aktivna. Dodatna pravila nameću određene boje linkova ili uklanjaju dekoraciju teksta kako bi oznake odgovarale željenom vizualnom identitetu.

Na strani servera, PHP funkcija kao što je cambia_contenido() orkestrira odgovorPrima indeks kartice kao parametar, gradi xajaxResponse objekt i pretražuje odgovarajući sadržaj u PHP nizu stringova. Zatim koristi addAssign() za ažuriranje stranice: jedan poziv postavlja innerHTML of cuerpopestanas na odabrani tekst, drugi mijenja className kliknutog taba u stil "odabrano", a petlja resetuje preostale tabove u klasu "neaktivno".

Ovaj obrazac je fleksibilan u pogledu porijekla sadržaja.Umjesto čvrsto kodiranih tekstualnih nizova u nizu, mogli biste sastaviti HTML iz predložaka, izvući zapise iz baze podataka ili dinamički sastaviti obrasce i interaktivne widgete. Klijentski dio nije briga; on samo prima ažurirane oznake za prikaz u tijelu kartice kada korisnik promijeni karticu.

Inicijalizacija se obavlja malim isječkom JavaScript koda.Pozivanjem xajax_cambia_contenido(0) on window.onload, stranica automatski odabire prvi tab i učitava njegov sadržaj čim je DOM spreman. Na taj način ne morate fiksno kodirati sadržaj tijela stranice u originalnom HTML-u – sistem tabova je od početka u potpunosti vođen Ajaxom.

Dizajniranje mobilnih traka s karticama uz najbolje prakse

Na mobilnim uređajima, donja traka s karticama jedan je od najvažnijih elemenata navigacije i zaslužuje pažljivu pažnju.Pretrpana ili nedosljedna traka s karticama može brzo zbuniti korisnike, posebno na malim ekranima gdje je svaki piksel važan.

Jedna od prvih smjernica je ograničavanje broja stavki u traci s karticama.Ciljajte na najviše četiri ili pet ikona; prekoračenje tog broja obično smanjuje ciljeve dodira i oznake do te mjere da ih je teško precizno dodirnuti i teško ih je interpretirati. Ako vam zaista treba više opcija navigacije, razmislite o sekundarnim menijima ili drugim obrascima poput ladica.

Izbor ikone je podjednako važanSvaka ikona treba jasno prenijeti glavnu svrhu svog odjeljka i biti odmah prepoznatljiva. Tekstualne oznake mogu se štedljivo koristiti radi pojašnjenja značenja, ali ako su vaše ikone dobro odabrane i u skladu s konvencijama platforme, korisnici će ih brzo naučiti i oslanjati se isključivo na vizualni prikaz.

Indikacija stanja mora biti nedvosmislenaKoristite promjene boje, oblika ili veličine da biste istaknuli aktivnu karticu – na primjer, obojeni akcenat, varijantu ispunjene ikone umjesto obrisa ili suptilno izbočenje veličine. Ovo jasno pokazuje koji odjeljak korisnik trenutno pregleda. Istovremeno, općenito je mudro izbjegavati značke obavještenja ili numeričke brojače direktno u traci kartica, jer mogu stvarati stalnu vizualnu buku i odvlačiti pažnju od navigacije.

Plasman i upornost su također veoma važniTraka s karticama treba biti na dnu ekrana, stalno vidljiva i dostupna palcem, kako u uspravnom tako i u vodoravnom položaju. Nemojte je skrivati ​​iza tastatura, dijaloga ili plutajućih dugmadi za radnje i izbjegavajte preklapanje s drugim komponentama koje bi mogle presresti dodire. Održavanje trake stabilnom gradi mišićnu memoriju i održava navigaciju predvidljivom.

Korištenje Bootstrap-a, Bootbox.js-a i Font Awesome-a za korisnička sučelja web kartica

Za tradicionalne web projekte, okviri poput Bootstrap 3 nude gotove komponente kartica koje se mogu lako stilizirati i proširivati; pogledajte kako napraviti web stranicu od nuleIsti set alata pruža dugmad, padajuće menije, panele i modalne prozore, što olakšava sastavljanje kohezivnih interfejsa gdje se kartice prirodno uklapaju u ostatak dizajna.

Bootstrapove navigacijske komponente uključuju gotove oznake i klase za kreiranje horizontalnih traka s tabovima.Kombiniranjem standardnih navigacijskih klasa sa klasama specifičnim za kartice, možete se prebacivati ​​između panela sadržaja uz minimalan JavaScript. Budući da svi elementi dijele isti Bootstrap sistem stiliziranja, vaše kartice će se automatski uskladiti s izgledom menija, panela i obrazaca na cijeloj web stranici.

Da bi obradili upozorenja i potvrde na način koji odgovara izgledu Bootstrapa, mnogi programeri se oslanjaju na Bootbox.js.Ova mala biblioteka obavija modalne prozore u Bootstrap stilu praktičnim JavaScript API-jima, tako da možete prikazati dijaloge za potvrdu ili upozorenja kada korisnici prebace kartice, pokušaju zatvoriti nesačuvane prikaze ili pokrenuti potencijalno destruktivne radnje – sve bez narušavanja vizualne konzistentnosti koju je uspostavio CSS okvir.

Ikonografiju često pokreće Font AwesomeOvaj opsežni set ikona se glatko integriše sa Bootstrapom, pružajući vam ogroman katalog simbola za korištenje unutar oznaka kartica ili područja sadržaja. Bez obzira da li su vam potrebne generičke ikone za početnu stranicu, postavke, poruke i datoteke ili specijalizovaniji glifovi, Font Awesome pomaže u komunikaciji značenja bez potrebe za dizajniranjem prilagođenih slika svaki put.

Kombiniranjem strukturnih komponenti Bootstrapa, modalnih prozora Bootbox.js i ikona Font Awesome, možete kreirati bogate interfejse s karticama koji djeluju uglađeno i koherentno. Kartice, obavještenja i ikone dijele isti dizajnerski jezik, što korisničko iskustvo čini namjernim, a ne sastavljenim od neusklađenih dijelova.

Na Androidu, webu, PWA-ima i PHP-vođenim stranicama, interfejsi s karticama ostaju pouzdan način organiziranja više prikaza ili dokumenata u jednom okviru.Bez obzira da li se odlučite za TabLayout u Material Designu sa ViewPager-om, ugniježđene kartice u Elementoru, ChromeOS tab-ovani način rada aplikacije za PWA-ove ili prilagođena rješenja koristeći Xajax i Bootstrap, osnovni cilj je isti: navigacija mora biti jednostavna, sadržaj vidljiv, a promjene konteksta kristalno jasne.