Näited vahekaartidega liidestest ja kuidas neid luua

Esileht » Python » Näited vahekaartidega liidestest ja kuidas neid luua

Vahelehtedega liidesed on tänapäeva tarkvaras ühed tuttavamad navigeerimismustrid.alates mobiilirakendustest ja veebipaneelidest kuni keerukate arendustööriistadeni. Need võimaldavad kasutajatel samas aknas erinevate sektsioonide või dokumentide vahel liikuda, hoides kogemuse korras, kiirelt loetavana ja hõlpsasti õpitavana. Kui vahekaardid on hoolikalt kujundatud, vähendavad need oluliselt segadust ja teevad selgeks, milline sisu on praegu nähtav.

Selle lihtsa siltide rea taga on palju disainiotsuseid ja tehnilisi võimalusi: fikseeritud või keritavad vahekaardid, ainult ikoonidega paigutused, pesastatud vahekaartide süsteemid lehekoostajates, dokumendistiilis vahekaartidega aknad progressiivsetes veebirakendustes või kohandatud vahekaartide vidinad, mis on loodud selliste raamistikega nagu Bootstrap või Xajax. Selles juhendis käsitleme laia valikut vahekaartidega liidese näited ja rakenduslähenemisviise, koondades kõik ideed Androidist, veebiliidesest, PWA manifestidest ja klassikalistest PHP + Ajax lahendustest.

Androidi vahelehtedega liidesed TabLayouti ja ViewPageriga

Androidis on materjalidisaini vahekaartidega navigeerimise peamine ehituskivi TabLayout vidin., sageli koos ViewPageriga (või uuemates projektides ViewPager2-ga). Google'i enda materjalidisaini meeskond kirjeldab vahekaarte väga lihtsalt: need muudavad sama tegevuse sees erinevate vaadete uurimise ja vahetamise lihtsaks.

TabLayout paigutab vahekaardid horisontaalselt ja kuvab kahte peamist töörežiimi: fikseeritud ja keritavat.Fikseeritud režiimis on kõik vahekaardid korraga nähtavad ja saadaolev laius jaotatakse nende vahel. See on muster, mida kasutatakse rakendustes nagu WhatsApp, kus käputäis erinevaid sektsioone on alati ühe puudutuse kaugusel ja vahekaardid täidavad kogu rea.

Keritavad vahekaardid tulevad mängu siis, kui sektsioonide arv või siltide pikkus ületab ekraani laiust.Selles konfiguratsioonis saab kasutaja rohkemate valikute kuvamiseks horisontaalselt üle vahekaartide riba libistada. Google'i enda uudiste ja ilma rakendus on hea näide keritavast vahekaartide paigutusest, kus sisukategooriad kasvavad välja sellest, mida üks ekraan mugavalt mahutab.

Iga TabLayouti vahekaart vastab tavaliselt ViewPageri sees kuvatavale fragmendile.Kui kasutaja puudutab vahelehte, uuendab TabLayout oma valitud olekut ja ViewPager navigeerib vastava fragmendi juurde. Samamoodi, kui kasutaja lehtede vahel liigub, liigub valitud vahelehe indikaator, et jälgida praegu nähtavat fragmenti. See tihe ühendus on tavaliselt ühendatud läbi setupWithViewPager(), mis loob automaatselt vahekaardid ja ühendab kuulajad nii kerimis- kui ka klõpsamissündmuste jaoks.

Materjalide vahekaartidel saab kuvada teksti, ikoone või mõlema kombinatsiooni.Mõned rakendused, näiteks Twitter Androidis, toetuvad siltide asemel suuresti äratuntavatele ikoonidele, mis säästab ruumi ja võib tunduda kiirem skannida, kui kasutajad on iga sümboli tähendusest aru saanud. TabLayout toetab kõiki neid valikuid, olenemata sellest, kas need on XML-is määratletud või programmiliselt seatud.

Androidi lihtsa vahekaartidega liidese loomine samm-sammult

Lihtsa vahekaartidega kasutajaliidese loomiseks nullist Android Studios alustatakse tavaliselt tühja tegevusega., mida sageli nimetatakse millekski selliseks MainActivityja seejärel tutvustage kolme põhiosa: käputäis fragmente, teie paigutuse XML-is olev TabLayout ja pager-adapteri hallatav ViewPager.

Esimene ehitusplokk on väike fragmendiklasside komplekt, üks iga vahelehe kohta.Näiteks võite defineerida FragmentOne, FragmentTwo ja FragmentThree, igaüks oma XML-paigutust paisutades (näiteks fragment_one.xml). Iga fragmendi kood on lihtne: suurenda vaadet, seo kõik vidinad ja lisa sellele vahelehele asjakohane sisu.

Järgmisena lisate oma põhitegevuse paigutusele TabLayout ja ViewPager. sisse activity_main.xml sa kuulutad a TabLayout element ID-ga nagu tab_layout ja ViewPager otse selle all. Selliste omadustega nagu app:tabMode ja app:tabGravity Saate määrata, kas vahekaardid on fikseeritud või keritavad ja kas need venivad saadaoleva laiuse täitmiseks. tabMode="fixed" ja tabGravity="fill" jaotab kõik vahekaardid ribale ühtlaselt, mis on eriti märgatav laiekraanidel, näiteks tahvelarvutites.

Tabide kujundamine toimub tavaliselt TabLayoutis oleva kohandatud stiiliviite abil.Läbi stiili nagu @style/CustomTabLayout, saate määratleda selliseid asju nagu indikaatori värv (tabIndicatorColor), indikaatori kõrgus (tabIndicatorHeight) ja valitud ja valimata olekute tekstivärvid (tabTextColor ja tabSelectedTextColor). Samu omadusi saab määrata ka programmiliselt selliste meetoditega nagu setSelectedTabIndicatorColor() or setTabTextColors(), kuid kujunduse tsentraliseerimine XML-i lihtsustab välimuse järjepidevust.

Pärast paigutuse määratlemist lisate leheadapteri, mis kontrollib, milline fragment iga vahekaardi jaoks kuvatakse.Levinud rakendus laieneb FragmentPagerAdapter (Või FragmentStatePagerAdapter või uuem FragmentStateAdapter ViewPager2 jaoks) ja tühistab kolm meetodit: getItem() et pakkuda fragmenti konkreetse positsiooni jaoks, getCount() et teatada olemasolevate lehekülgede arvust ja getPageTitle() iga vahelehe sildi teksti edastamiseks. Kui esimene vahelehe pealkirjaga „Vahekaardi üksus 1” on valitud, getItem() naaseb FragmentOne, sidudes sildi selle sisuga.

Kõik tükid tulevad tegevuses kokku onCreate() meetodSealt saad viited TabLayoutile ja ViewPagerile lehelt activity_main.xml, looge oma adapter FragmentManageriga ja määrake see ViewPagerile. Kutse tabLayout.setupWithViewPager(viewPager) lõpetab juhtmestiku loomise, luues adapteri iga kirje jaoks vahekaardid ja sünkroniseerides kasutaja interaktsioone. Lehekülgede vahel pühkimine värskendab valitud vahekaarti ja vahekaartide puudutamine kerib lehe paremale fragmendile.

Kui vajate kasutaja toimingute üle täpsemat kontrolli, saate lisada OnTabSelectedListenerSee kuulaja pakub kolme tagasihelistust: onTabSelected() kui vahekaart valitakse, onTabUnselected() kui see kaotab fookuse ja onTabReselected() kui kasutaja puudutab juba aktiivset vahelehte. Need konksud sobivad ideaalselt lisaandmete laadimiseks ainult siis, kui vahelehte tegelikult vaadatakse, või peente animatsioonide käivitamiseks fookuse muutumisel.

Keritavad vs fikseeritud vahekaardid ja ikoonide kasutamine teksti asemel

Materjalidisain eristab selgelt fikseeritud ja keritavaid vahelehti ning mõlemal on ideaalsed kasutusjuhud.Fikseeritud vahekaarte soovitatakse siis, kui teil on piiratud arv lühikesi silte, mida kasutajad võivad soovida kõrvuti võrrelda. Need sobivad ideaalselt puutetundlikel ekraanidel navigeerimiseks, kus selgus ja stabiilsus on olulisemad kui tohutu lehekülgede kataloogi mahutamine.

Keritavad vahekaardid säravad, kui sildid on pikemad või kui vajate rohkem kui umbes nelja vahekaartiKui proovite pikki nimesid fikseeritud TabLayouti toppida, hakkab Android silte mitmele reale murdma või isegi kärpima, mis mitte ainult ei näe segane välja, vaid kahjustab ka kasutatavust. Kerimisrežiimi lubamisel saab kasutaja sujuvalt tabulaatoririba vasakule ja paremale libistada ning igal sildil on piisavalt ruumi loetavaks olemiseks.

Nende režiimide vahel saab vahetada kas XML-is, kasutades app:tabMode või programmiliselt koos setTabMode(). Mööduv TabLayout.MODE_FIXED annab fikseeritud vahekaarte, samas kui TabLayout.MODE_SCROLLABLE loob horisontaalselt keritava loendi. Tasub meeles pidada, et kui eeldada rohkem kui nelja kategooriat, soovitavad juhised tungivalt keritava konfiguratsiooni kasuks.

Teine võimas variant on kasutada vahekaartide siltide asemel ikooneHelistades getTabAt(index) TabLayout eksemplaril ja seejärel käivitades setIcon(), määrate konkreetsele vahelehele joonistatava faili. See avab ruumi väga kompaktsete vaheleheribade jaoks, eriti kui ikoonid on universaalselt arusaadavad. Kui te ikkagi tühistate getPageTitle() Adapteris saate teksti ja ikoone kombineerida; kui te selle tühistamise välja jätate, saate ainult ikoonidest koosnevad vahekaardid.

Tab-käitumist saab samuti XML-i puudutamata väga hästi seadistada.Saate vahekaarte luua otsesõnu abil newTab(), selle asemel, et loota setupWithViewPager()ja saate vahekaardirežiimi lennult vahetada, valikule kuulajate kaudu vastata või isegi lisada kohandatud vahekaardivaateid, kui vajate keerukamaid kujundusi kui lihtne silt ja ikoon.

Android Studio mallide kasutamine vahekaartidega tegevuste toetamiseks

Sakkidega liidese nullist kirjutamine on suurepärane, et mõista, kuidas kõik kokku sobib, kuid Android Studio suudab teile sekunditega toimiva seadistuse luua.IDE-l on mallid levinud mustrite jaoks, sh „vahekaartidega tegevus“, mis on saadaval nii Javas kui ka Kotlinis.

Uue projekti alustamisel saate pärast rakenduse nime ja sihtseadmete valimist tegevuste loendist valida „Vahekaartidega tegevused”.Lõplikus konfiguratsioonidialoogis on võimalus valida navigeerimisstiil, näiteks „Toiminguriba vahekaardid (ViewPageriga)“. Kui olete kinnitanud, genereerib Android Studio tegevuse, millel on TabLayout, ViewPager ja näidisfragmendid, et saaksite kohe käivitada ja uurida.

Need sisseehitatud mallid on prototüüpide ja lihtsate rakenduste jaoks äärmiselt käepärased.Nad seadistavad mallikoodi, näidispaigutused ja juhtmestiku loogika, et saaksite keskenduda tegelikule sisule ja konkreetsele käitumisele. Olemasolevates projektides saate sama tüüpi tegevusi lisada menüüst Fail, sisestades uue „Tabelis loetletud tegevuse“ ja järgides samu samme.

Ambitsioonikamate rakenduste puhul, millel on keerukas navigeerimine või väga kohandatud visuaalne keel, võivad kolmanda osapoole mallid asju veelgi kiirendada.Turuplatsid nagu Envato pakuvad eelvalmistatud Androidi rakenduste malle, mis sisaldavad keerukaid vahekaartidega liideseid ja materjali disaini mustreid kohe karbist võttes. Need komplektid on eriti kasulikud, kui soovite keskenduda unikaalsele funktsionaalsusele, selle asemel et luua standardset navigeerimist nullist.

Elementoris pesastatud vahekaardid täiustatud veebipaigutuste jaoks

Veebis toovad leheehitajad, näiteks Elementor, vahekaartidega liidese idee lohistamisfunktsiooniga disaini töövoogudesse.Üks eriti paindlik muster on pesastatud vahekaardid: vahekaardid, mis asuvad teiste vahekaartide sees, võimaldades teil grupeerida seotud sisu sügavalt struktureeritud, kuid kompaktsetesse paigutustesse ilma lehte üle koormamata.

Pesastatud vahelehtede kujundamisel on hea esimene samm ühtse visuaalse keele määratlemine.Näiteks võib vahekaart kombineerida põhipildi, toimumiskohta või plaani kokkuvõtva pealkirja, lühikese tekstikirjelduse ja nupu. Kui see struktuur on paigas, saate tegelikku paigutust vahekaartide kaupa varieerida – näiteks üks vertikaalne plokk ühel, kaheveeruline paigutus teisel ja kolmerealine kompositsioon kolmandal –, säilitades samal ajal samad elemendid, et liides tunduks endiselt ühtne.

Elementori pesastatud vahekaardid võimaldavad teil lisada mis tahes vidina, mitte ainult lihttekstiSaate lisada hinnakirja tabeleid, et kuvada kuu-, poolaasta- ja aastaplaane erinevatel vahekaartidel, või kombineerida neid tsükliliste ruudustikega, et dünaamiliselt filtreerida ajaveebipostitusi, tooteid või portfoolioüksusi kategooriate kaupa. Kategooriate ja vahekaartide joondamise abil saavad külastajad kiiresti klõpsata läbi neile oluliste valikute, lahkumata praeguselt lehelt.

Vahekaardid on ka võimas viis kasutajate juhendamiseks protsesside või lugude kaudu.Üks näide on nelja või enama vahekaardi kasutamine seadistusvoo etappidena: igal vahekaardil võib vahekaartide ribal olla ikoon, etapi number ja lühike silt, samas kui paneeli sisu sisaldab selle etapi jaoks unikaalset teksti ja pilte. Lisage piltidele ja elementidele liikumisefekte või peeneid animatsioone ning saate luua juhendatud narratiivse kogemuse, mis on palju kaasahaaravam kui pikk staatiline leht.

Täiustatud armatuurlaudade ja administraatori stiilis vaadete puhul lähevad disainerid mõnikord ühe taseme võrra sügavamale ja kasutavad pesastatud vahekaartide sees pesastatud vahekaarte.Kujutage ette vasakul küljel vertikaalset vahelehtede veergu, mis toimivad peamiste sektsioonidena, millest igaüks sisaldab horisontaalset komplekti teiseseid vahelehti alamvaadete jaoks. Natuke kohandatud CSS-i abil – näiteks iga vahekaardi CSS-i ID abil siltide pööramiseks ja vertikaalse navigeerimise tihendamiseks – saate luua ülifunktsionaalseid vahelehtedega juhtpaneele, kasutades täielikult Elementori konteinereid ja silmusvõrke.

Peamine järeldus on see, et pesastatud vahekaardid pakuvad sisu struktureerimiseks peaaegu lõputuid võimalusi.Olenemata sellest, kas korraldate ekskursioone, hinnakujundusvõimalusi, portfoolioid või analüüsi juhtpaneele, võimaldab järjepideva disainikeele ja paindlike paigutuste kombinatsioon pakkida tohutu hulga teavet ruumi, mida on endiselt lihtne uurida.

Progressiivsete veebirakenduste vahekaartidega rakendusrežiim

Vahelehtedega liidesed ei asu ainult veebilehtede sees; neid saab integreerida progressiivsete veebirakenduste iseseisvate akendena töötamisse.ChromeOS-is võimaldab spetsiaalne „vahekaartidega rakenduse režiim” PWA-l kuvada oma dokumendistiilis vahekaartide riba, mis sarnaneb natiivse redaktori või IDE-ga.

PWA-d toetavad mitut kuvarežiimi, mida juhitakse display veebirakenduse manifesti liige. Valikud hõlmavad fullscreen, standalone, minimal-ui ja browserja brauserid taganevad mööda määratletud ahelat, kui konkreetset režiimi ei toetata. Veelgi täpsemaks kontrolliks on olemas display_override atribuut, mis võimaldab arendajatel määrata kohandatud varujärjekorra.

Uus vahekaartidega rakendusrežiim täidab varasema tühimiku, pakkudes PWA-dele sisseehitatud vahekaartidega dokumendiliidest (TDI).Selle asemel, et lehel võltsitud vahekaarte luua kohandatud HTML-i ja JavaScriptiga, saab rakendus paluda süsteemil majutada mitu dokumenti või vaadet päris ülataseme vahekaartidel spetsiaalses PWA aknas. See erineb sellest, display: browser, mis avab rakenduse lihtsalt tavalisel brauseri vahekaardil koos täieliku brauseri kasutajaliidesega.

Selle režiimi tüüpilised kasutusjuhud hõlmavad produktiivsuse rakendusi, suhtlusvahendeid ja lugemiskogemusi.Koodiredaktori PWA võib avada mitu faili eraldi vahekaartidel, vestlusklient võib pakkuda iga toa või kanali kohta eraldi vahekaarti ja lugemisrakendus võib avada artiklite linke uutel rakenduse vahekaartidel, jäädes kõik kenasti samasse aknasse, selle asemel et üldist brauserit risustada.

Selle sisseehitatud vahekaardirežiimi ja arendajate loodud kohandatud vahekaardiliideste vahel on olulisi erinevusi.Süsteemitaseme vahekaardid saavad sujuvalt hakkama suure hulga dokumentidega, saavad kasu ressursside isoleerimisest ja integreeruvad sügavalt brauseri funktsioonidega, nagu navigeerimisajalugu, „Kopeeri selle lehe link”, edastamine praeguselt vahekaardilt või aktiivse dokumendi avamine tavalises brauseriaknas. Kui simuleerite ainult vahekaarte lehel, kehtivad need võimalused välisele kestale, mitte igale üksikule alamvaatele.

Kuidas konfigureerida PWA vahekaartidega rakenduse režiimi

PWA vahekaartidega režiimi lubamine algab manifestist sobiva väärtuse määramisega. display_override kettMinimaalne konfiguratsioon võib täpsustada "display": "standalone" ja "display_override": , mis tähendab, et brauser peaks võimalusel eelistama vahekaartidega rakenduse akent ja vastasel juhul naasma tavalise eraldiseisva akna juurde.

Lisaks sellele tab_strip liige võimaldab teil kohandada rakenduse vahekaartide riba käitumistSee objekt saab defineerida kaks valikulist alamomadust: home_tab ja new_tab_buttonKui te seda ei tee tab_strip Täielikult pakub brauser vaikekäitumist, kasutades uute vahelehtede loomisel rakenduse algus-URL-i.

Avalehe kontseptsioon on eriti olulineSee on kinnitatud vahekaart, mis peab alati olema nähtav, kui rakenduse aken on avatud, ja see ei tohiks oma määratletud ulatusest lahkuda. Kõik sellel avalehe vahekaardil klõpsatud lingid peaksid avanema uutel rakenduse vahekaartidel. Saate selle konfigureerida jaotises home_tab.scope_patterns, mis on URL-mustrite loend (sageli lihtsad teekonnanimed, näiteks "/" or "/index.html") manifesti URL-i suhtes.

. new_tab_button kirje kirjeldab, kuidas kasutajaliidese „uue vahelehe” pakkumine toimibSellel on üksainus url liige, mis määrab, millist lehte kasutaja nupule klõpsamisel avada, tavaliselt midagi rakenduse ulatusest, näiteks "/create"Kui see URL jääb avalehe vahekaardi ulatusse, ei kuva rakendus üldse eraldi uue vahekaardi juhtelementi, kuna eeldatakse, et navigeerimine toimub avalehe vaatest.

Näidismanifest, mis ühendab vahekaartidega rakenduse akna, võib (kontseptuaalselt) välja näha selline: see määratleb nime, start_url, display seatud standalone, display_override sisaldav "tabbed"o home_tab mille ulatus hõlmab / ja /index.htmlJa new_tab_button konfigureeritud a-ga "/create" URL. Selle seadistusega saavad kasutajad püsiva avalehe ja võimaluse avada ühe klõpsuga täiendavaid dokumente.

Rakendused suudavad käitusajal tuvastada ka seda, kas need töötavad vahekaartidega režiimis.. Kasutades display-mode meediafunktsioonina võiksite kirjutada CSS-ploki, näiteks @media (display-mode: tabbed) stiilide peenhäälestamiseks või kasutamiseks window.matchMedia('(display-mode: tabbed)').matches JavaScriptis, et kontrollida, kas vahekaartidega rakenduse režiim on aktiivne, ja kohandada vastavalt kasutajaliidese käitumist.

Lõpuks on huvitav interaktsioon käivituskäitleja API-gaKui vahekaartidega PWA seadistatakse "client_mode": "navigate-new" Käivituskonfiguratsioonis saab rakenduste käivitamise suunata olemasoleva rakenduse akna uutele vahelehtedele mitme akna avamise asemel. See hoiab kasutaja tööruumi korras ja tugevdab ühtse, vahelehtedele keskenduva rakenduskeskkonna ideed.

Kohandatud vahekaartidega navigeerimise loomine PHP, Ajax ja Xajax abil

Kaua enne, kui PWA-del olid süsteemitasemel vahekaardid, olid veebiarendajad loonud oma vahekaartidega navigeerimiskomponente, kasutades HTML-i, CSS-i, JavaScripti ja serveripoolset koodi.Üks klassikaline lähenemisviis kasutab PHP-d koos Xajaxi raamistikuga vahekaartide sisu asünkroonseks laadimiseks ja lehe värskendamiseks ilma täielike uuesti laadimisteta.

Sellise näite HTML-struktuur on üsna lihtneÜmbris <div> kannab klassi nagu pestanas ja selle sees a <ul> sisaldab <li> iga vahekaardi elemendid. Igal loendiüksusel on unikaalne ID (näiteks pestana0, pestana1, pestana2) ja CSS-klass, mis näitab, kas see on aktiivne või mitteaktiivne. Nende loendiüksuste sees olevad ankrusildid kutsuvad näiteks Xajaxi loodud JavaScripti funktsiooni javascript:void(xajax_cambia_contenido(0)), edastades vahekaardi indeksi serverile.

Vahelehtede loendi all on vahelehtede sisu jaoks spetsiaalne konteiner., sageli a <div> ID-ga nagu cuerpopestanasKui kasutaja klõpsab mis tahes vahekaardil, laadib Ajax-kutse vastava HTML-fragmendi ja lisab selle sellesse sisualasse. Leht ise ei lae kunagi uuesti; muutub ainult sisukonteineri sisemine HTML.

CSS-il on keskne roll vahelehtede interaktiivseks muutmisel.Võib defineerida kaks võtmeklassi: üks mitteaktiivsete vahelehtede jaoks (näiteks li.pestanainactiva) ja teine ​​valitud vahekaardi jaoks (näiteks li.pestanaseleccionada). Stiilierinevused – taustavärv, äärised, fondi stiilid – annavad kasutajale selge tagasiside selle kohta, milline vahekaart on aktiivne. Lisareeglid sunnivad peale teatud lingivärvid või eemaldavad tekstikaunistused, et sildid vastaksid soovitud visuaalsele identiteedile.

Serveri poolel on PHP funktsioon, näiteks cambia_contenido() korraldab vastustSee saab parameetrina tabulaatori indeksi ja loob xajaxResponse objekti ja otsib PHP stringimassiivist üles sobiva sisu. Seejärel kasutab see addAssign() lehe värskendamiseks: üks kutse määrab innerHTML of cuerpopestanas valitud tekstile, teine ​​muudab className klõpsatud vahekaardi stiiliks „valitud“ ja tsükkel lähtestab ülejäänud vahekaardid klassi „mitteaktiivne“.

See muster on sisu päritolu osas paindlik.Massiivi kõvakodeeritud tekstistringide asemel saate HTML-i koostada mallidest, tõmmata kirjeid andmebaasist või koostada vorme ja interaktiivseid vidinaid dünaamiliselt. Kliendipoolne pool ei hooli sellest; see saab lihtsalt uuendatud märgistuse, mis kuvatakse vahekaardi põhiosas, kui kasutaja vahekaarti vahetab.

Initsialiseerimine toimub väikese JavaScripti koodilõigu abil.Helistades xajax_cambia_contenido(0) on window.onload, valib leht automaatselt esimese vahelehe ja laadib selle sisu kohe, kui DOM on valmis. Nii ei pea te algsesse HTML-i sisu kõvakodeerima – vahelehesüsteem on algusest peale täielikult Ajaxi poolt juhitud.

Mobiilsete vahelehtede kujundamine parimate tavade abil

Mobiilseadmetes on alumine vahekaartide riba üks olulisemaid navigeerimiselemente ja see väärib hoolikat tähelepanu.Segaduses või ebajärjekindel vahekaartide riba võib kasutajaid kiiresti segadusse ajada, eriti väikestel ekraanidel, kus iga piksel on oluline.

Üks esimesi juhiseid on piirata vahekaartide ribal olevate üksuste arvu.Püüdke maksimaalselt nelja või viie ikooni poole; sellest kaugemale minnes kiputakse puutetundlikke sihtmärke ja silte vähendama punktini, kus neid on raske täpselt tabada ja tõlgendada. Kui vajate tõesti rohkem navigeerimisvõimalusi, kaaluge teiseseid menüüsid või muid mustreid, näiteks sahtleid.

Ikoonide valik on sama olulineIga ikoon peaks selgelt edastama oma jaotise peamist eesmärki ja olema koheselt äratuntav. Tekstilisi silte saab tähenduse selgitamiseks kasutada säästlikult, kuid kui teie ikoonid on hästi valitud ja platvormi tavadega kooskõlas, õpivad kasutajad need kiiresti selgeks ja toetuvad ainult visuaalidele.

Oleku märge peab olema üheselt mõistetav. Aktiivse vahekaardi esiletõstmiseks kasutage värvi, kuju või suuruse muudatusi – näiteks värviline aktsent, täidetud ikooni variant versus kontuuri või peen suurusekõrgus. See teeb selgeks, millist jaotist kasutaja parasjagu vaatab. Samal ajal on üldiselt tark vältida teavitusmärke või numbrilisi loendureid otse vahekaardiribal, kuna need võivad tekitada pidevat visuaalset müra ja navigeerimist segada.

Paigutus ja püsivus on samuti väga olulised.Vahelehtede riba peaks asuma ekraani allosas, nii püst- kui ka rõhtpaigutuses pidevalt nähtav ja pöidlaga ligipääsetav. Ärge peitke seda klaviatuuride, dialoogibokside ega hõljuvate toimingunuppude taha ning vältige selle kattumist muude komponentidega, mis võivad puudutusi segada. Riba stabiilsena hoidmine arendab lihasmälu ja muudab navigeerimise etteaimatavaks.

Bootstrapi, Bootbox.js ja Font Awesome'i kasutamine veebilehtede vahelehtede kasutajaliideste jaoks

Traditsiooniliste veebiprojektide jaoks pakuvad raamistikud nagu Bootstrap 3 valmis vahekaartide komponente, mida saab hõlpsalt stiilida ja laiendada; vaata kuidas luua veebisaiti nullistSama tööriistakomplekt sisaldab nuppe, rippmenüüsid, paneele ja modaalaknaid, mis lihtsustab sidusate liideste loomist, kus vahekaardid sobivad loomulikult ülejäänud kujundusega.

Bootstrapi navigatsioonikomponentide hulka kuuluvad valmis märgistus ja klassid horisontaalsete vahelehtede loomiseks.Kombineerides standardseid navigeerimisklasse vahekaartidele omastega, saate sisupaanide vahel vahetada minimaalse JavaScripti abil. Kuna kõik elemendid jagavad sama Bootstrapi stiilisüsteemi, joonduvad teie vahekaardid automaatselt saidi menüüde, paneelide ja vormide välimusega.

Bootstrapi välimusega kooskõlas olevate teadete ja kinnituste haldamiseks toetuvad paljud arendajad Bootbox.js-ile.See väike teek koondab Bootstrapi stiilis modaalaknad mugavate JavaScripti API-dega, nii et saate kuvada kinnitusdialooge või märguandeid, kui kasutajad vahetavad vahekaarte, üritavad sulgeda salvestamata vaateid või käivitada potentsiaalselt kahjulikke toiminguid – seda kõike CSS-raamistiku loodud visuaalset järjepidevust rikkumata.

Ikonograafiat toetab sageli Font AwesomeSee ulatuslik ikoonide komplekt integreerub sujuvalt Bootstrapiga, pakkudes teile tohutut sümbolite kataloogi, mida saate kasutada vahekaartide siltidel või sisualadel. Olenemata sellest, kas vajate üldisi ikoone avalehe, sätete, sõnumite ja failide jaoks või spetsiifilisemaid glüüfe, aitab Font Awesome edastada tähendust ilma iga kord kohandatud pilte kujundamata.

Bootstrapi struktuurikomponentide, Bootbox.js modaalide ja Font Awesome ikoonide kombineerimise abil, saate luua rikkalikke vahekaartidega liideseid, mis tunduvad viimistletud ja sidusad. Vahekaardid, teated ja ikoonid jagavad kõik sama disainikeelt, mis muudab kasutajakogemuse pigem tahtlikuks kui kokkusobimatutest tükkidest kokku pandud.

Androidis, veebis, PWA-des ja PHP-põhistes saitidel on vahekaartidega liidesed endiselt usaldusväärne viis mitme vaate või dokumendi korraldamiseks ühes kaadris.Olenemata sellest, kas valite Material Designi TabLayouti koos ViewPageriga, Elementori pesastatud vahekaardid, ChromeOS-i vahekaartidega rakendusrežiimi PWA-de jaoks või kohandatud lahendused Xajaxi ja Bootstrapi abil, on põhieesmärk sama: hoida navigeerimine lihtne, sisu leitav ja konteksti muutused kristallselged.