Okrúhle plávajúce tlačidlo ako volať. Vyčnievajú a prekážajú. Na čo slúži toto tlačidlo?

Pekný deň všetkým. dnes bude to o modálnych oknách a na ich príklade implementujeme tlačidlo " Požiadajte o spätné zavolanie". Pravdepodobne ste takéto tlačidlo videli na mnohých vstupných stránkach, keď naň kliknete, zobrazí sa kontaktný formulár so stmavnutím celkového pozadia. Toto je funkcia, ktorú dnes implementujeme.

Zvyčajne sa tlačidlo "objednať spätné volanie" nachádza vpravo horný roh... Môžete experimentovať s umiestnením, ale nezabudnite, že ľudia sú už zvyknutí vidieť tento prvok tam, aj keď - to súvisí skôr so stránkami obchodných tém a služieb.

Samozrejme, vo väčšine prípadov sa modály vyrábajú pomocou javascriptu, ale dnes sa pokúsime obísť pomocou css, a nebudeme načítavať naše vstupná stránka zbytočný scenár.

A na záver poviem, že som si s dizajnom kontaktného formulára hlavu nelámal, len som chcel sprostredkovať podstatu toho, ako je tento efekt implementovaný, takže prosím nekopajte príliš. Popíšem len hlavné body a potom to opravíte, ako chcete.

Ako nastaviť Kontaktný formulár si môžete prečítať v týchto článkoch:

Aby článok nebol príliš dlhý, dám iba html značku a zvyšok si môžete pozrieť stiahnutím zdroja.

Túto funkcionalitu implementujeme :)

Opakujem ešte raz - toto je len malá šablóna, ktorú si následne doladíte podľa svojho návrhu. To všetko sa vyvolá stlačením tlačidla.

Prvá vec, ktorú musíte urobiť, je zahrnúť šablónu so štýlmi (menej) poskytnutú v zdroji. Veľmi podrobne som to opísal v komentároch, pozrite sa a opravte.

Štruktúra html je veľmi jednoduchá. Umiestňujeme tento odkaz Správne miesto na strane. Kde plánujete zobraziť tlačidlo „požiadať o spätné volanie“:

Požiadajte o spätné zavolanie

Teraz musíme vytvoriť kontajner pre modálne okno:

Nezverejnili ste šablónu so štýlmi, zdroj si môžete stiahnuť tu:

A s html značkami - to je všetko. Je to také jednoduché. Výhody tejto metódy spočívajú v tom modálne okno sa dá na stránke volať viackrát a nepoužívajú sa žiadne skripty.

Ako ste si mohli všimnúť, písal som, že používam menej. Pozrite sa na štruktúru. Nevyužil som ani 5% možností preprocesora (iba vnorenie), odkedy som sa ho začal učiť, ale v budúcnosti ho plánujem využívať častejšie. Tak som sa chcel spýtať čo je najlepšie. Nevadilo by vám, keby príklady kódu neboli v CSS, ale menej? mám Google Chrome a prehliadač Yandex odmietol kompilovať menej do css bez otvorenia súboru cez Denver alebo OpenServer. Na Mazil a IE - prehltli. Takže s najväčšou pravdepodobnosťou rozložím obvyklé štýly CSS.

A to je na dnes všetko! Ahojte všetci!

Ak nie je túžba tvoriť podobné tlačidlo sám, odporúčam vám venovať pozornosť tomu, ktoré vám umožňujú implementovať túto funkciu a majú mnoho ďalších doplnkových funkcií.

Material Design je dizajnový jazyk predstavený spoločnosťou Google rok späť, čo predstavuje odvážny pokus spoločnosti o vytvorenie jednotného používateľskú skúsenosť na všetkých zariadeniach a platformách. To sa vyznačuje výraznými farbami, liberálnym, ale zásadným používaním tieňov na označenie úrovní používateľského rozhrania a plynulá animáciačo poskytuje celkom dobrá skúsenosť interakcie v systéme Android (a niektorých aplikáciách Google v systéme iOS).

Jedna vec, ktorá ma na Material Designe trápila od jeho predstavenia minulý rok: plávajúce akčné tlačidlo.

FAB (Floating action buttons) sú podľa Google kruhové tlačidlá, ktoré sa vznášajú nad používateľským rozhraním a „používajú sa na uľahčenie akcie“. Fungujú ako tlačidlá s výzvou na akciu určené na vykonanie akcie, ktorú používatelia vykonávajú na tejto obrazovke najčastejšie.

A kvôli odvážnemu vizuálnemu štýlu Material Design je dosť ťažké ignorovať FAB - a v tom je problém. Kým v praxi, v ideálne podmienky Zdá sa, že FAB poskytuje dobré UX – nadmerné používanie FAB bude škodlivé pre UX aplikácie ako celku. Má to viacero dôvodov.

Efekt ponorenia pochádza zo skúseností

FAB vynikajú vizuálne – sú doslova navrchu akéhokoľvek prvku používateľského rozhrania na obrazovke. Pridanie FAB by tiež automaticky viedlo k menej pôsobivému UX, čo by ovplyvnilo najmä aplikácie (alebo obrazovky), ktorých účelom je poskytnúť interaktívny zážitok.

Jedným z príkladov je nová aplikácia Google pre fotografie.

Aplikácia fotografií sa otvorí ako galéria s plávajúcim tlačidlom vyhľadávania. Ide však o to, že keď otvorím aplikáciu pre fotografie, chcem len ... vidieť svoje fotografie. Plávajúce tlačidlo vyhľadávania teda odvádza pozornosť používateľa od ponorenia sa do prezerania fotografií, čo je hlavným účelom aplikácie. odoslané, inteligentné vyhľadávanie – jedinečná vlastnosť Fotografia aplikácie Google. Znamená to však, že mu treba dať v aplikácii najvyššiu úroveň, konštantný FAB? (Myslím, že nie.)
Napodiv, Google so mnou súhlasí. Na stránke Material Design FABs Google vysvetľuje, že „nie každá obrazovka potrebuje plávajúce príkazové tlačidlo“.
A potom dodáva, že „hlavnou akciou je dotknúť sa obrázka v galérii, v tomto prípade tlačidlo nie je potrebné.

Vyčnievajú a prekážajú.

Môže sa to zdať ako druhá strana mince, no je tu ešte jedna, dôležitejšia vlastnosť FAB, ktorá stojí v ceste jeho užitočnosti. Zaberá priestor na obrazovke FAB v skutočnosti blokuje obsah.

Dobre, FAB je len malé okrúhle tlačidlo, však? Koľko obsahu môže zablokovať?
Ak sa pozriete na snímku obrazovky s fotografiou aplikácie, uvidíte, že FAB vyhľadávacieho nástroja blokujú približne 50 percent miniatúrneho obrázka - určite dosť na to, aby pokryli niekoľko tvárí. To v podstate vytvára potrebu jedného dodatočného rolovania pre každú štvrtú miniatúru obrázka. posledný riadok na obrazovke. A to nie je to najhoršie.

FAB uzamkne tlačidlo Obľúbené a dátum.

Používateľ Dumazy uverejnil príspevok na burze Graphic Design Stack Exchange o probléme, na ktorý narazil, keď FAB uzamkol hviezdičku obľúbených, ako aj čas na obrazovke jeho aplikácie. Toto ilustruje problém so všetkými aplikáciami na zobrazenie zoznamu a stáva sa obzvlášť problematickým, keď sa posledná položka v zozname nedá posunúť nahor. To znamená, že musí byť obetovaný celý stĺpec (zmena umiestnenia hviezdičky atď.), aby sa zabezpečila správna použiteľnosť obrazovky.

V dôsledku toho FAB zaberá oveľa viac obrazovky, ako naznačuje jej veľkosť.

Propagácia akcie sa asi až tak často nepoužíva.

Pri navrhovaní UX majte na pamäti pravidlo 80/20, ktoré hovorí, že používatelia budú využívať 20 % funkcií 80 % času. Inými slovami, väčšina úsilia by mala ísť do návrhu niekoľkých prvkov, ktoré budú používatelia používať. najviacčas.

FAB to v skutočnosti robí – teoreticky. Čo ak sa však Fostering Action nepoužíva tak často?

Vezmite si napríklad aplikácia google Gmail.

FAB Gmail Apps je tlačidlo na písanie, ktoré predpokladá, že hlavnou činnosťou používateľa je napísanie listu.

Ale je to tak?

Viaceré štúdie ukázali, že najmenej 50 % e-mailov sa číta na mobilnom zariadení a takmer žiadny to nehovorí o vytváraní e-mailov. Inými slovami, ako by potvrdila naša každodenná skúsenosť, väčšina mobilných používateľov má tendenciu používať ich poštové aplikáciečítať e-maily.

Možno ho používa veľa ľudí mobilné zariadenia odpovedať na e-maily, ale to sa stane až po otvorení e-mailu (všimnite si, že to znamená, že obídu FAB). Toto správanie používateľa je pravdepodobne spôsobené dosť nedokonalým vstupným mechanizmom virtuálne klávesnice a automatické nahradzovanie znamená, že hlavnou činnosťou, ktorú používatelia vykonávajú, je čítanie (a odpovedanie) na e-maily, nie vytváranie nových.

Čo teda robí tlačidlo Create Mail FAB? V zriedkavých prípadoch poteší používateľov, keď chcú pomocou tejto aplikácie napísať list. Ale zvyšok času zaberá iba miesto na obrazovke, blokuje „hviezdu“ a čas a neustále odvádza pozornosť jasnou červenou farbou.

Chceme FAB? Prečiarknite predchádzajúce – potrebujeme to vôbec?

Samozrejme, nie všetky použitia FAB zhoršujú skúsenosti s používaním materiálových aplikácií. Existuje niekoľko skvelých príkladov FAB, ktoré dávajú zmysel a zlepšujú UX týchto aplikácií.

Google Mapy toto je skvelý príklad správne aplikovaný FAB. Hlavnou činnosťou, ktorú používatelia vykonávajú na Mapách, je získať trasu, takže je veľmi správne použiť FAB práve na tento účel.

Majte však na pamäti, že Mapy sú dosť zvláštny prípad, keď používatelia obsahu majú takmer vždy záujem dostať sa do stredu obrazovky (kde sa nachádza vaša modrá bodka). Vo väčšine aplikácií však zobrazenie mriežky alebo zoznamu znamená, že používatelia interagujú s obsahom kdekoľvek na obrazovke, vrátane miest, kde sa zvyčajne nachádzajú FAB.

Všimnite si tiež, že vyššie uvedené snímky obrazovky vypovedajú iba časť príbehu: pri skutočnom používaní FAB zostanú na svojom mieste, aj keď používateľ roluje (väčšinu času). Ako Google opakovane zdôraznil v Material Designe, pohybový dizajn je rovnako dôležitý ako dizajn používateľského rozhrania.

Nedostatok pohybu – dôraz na priestor na obrazovke – v kontexte pohyblivého obsahu vytvára viac vysoký stupeň rozptýlenie, ktoré snímky obrazovky nemôžu žiadnym spôsobom zobraziť.

Takže, keďže nemáme takmer žiadne príklady dobrej implementácie FAB, vyvstáva otázka: sú potrebné?

Keď sa pozrieme na nevýhody FAB v aplikáciách, môžeme to zredukovať na jednoduché pochopenie: Používatelia nielen vykonávajú akcie v aplikáciách, ale tiež konzumujú obsah.

Návrh FAB v materiálovom dizajne je založený na predpoklade, že používatelia väčšinu času vykonávajú špecifickú činnosť, a preto musí byť zvýšený stav ako hlavné tlačidlo na vysokej úrovni. V mnohých aplikáciách sa však používatelia zameriavajú aj na konzumáciu obsahu: vo fotografickej aplikácii si používatelia chcú prezerať fotografie; v aplikácii Používatelia služby Gmail chcú čítať ich e-maily; a v Facebook aplikácia, používatelia chcú čítať správy od svojich priateľov.

FAB je teda filozofia dizajnu (alebo aspoň výber dizajnu), ktorá podriaďuje optimálnu spotrebu obsahu akcii. A musíme si položiť otázku: je takýto kompromis potrebný? Chceme vôbec robiť takýto kompromis?

Keď FAB väčšinou vedú k slabému UX, keď je ťažké zistiť jedinú najpoužívanejšiu akciu v rámci aplikácie a keď musíte nájsť kruhové objazdy (keď FAB zmizne pri rolovaní alebo sa prekrýva s inými prvkami pri rolovaní), Povedal by som, že odpoveď je nie.

Materiál Google Design je celkom dobrý jednotný, principiálny dizajnový jazyk, ale FAB na ňom zďaleka nie je to najlepšie.

pozdravujem Drahí priatelia... Dnes vám ukážem, ako vytvoriť horné tlačidlo na webovej stránke. Stalo sa, že moja šablóna blogu s tým pôvodne nebola poskytnutá užitočná funkcia a návštevníci sa nemohli rýchlo presunúť zo spodnej časti článku na začiatok. Preto zároveň s vytváraním takéhoto tlačidla pre seba vám poviem, ako to urobiť za vás (Možno máte rovnaký problém a nevedeli ste, ako ho vyriešiť).

Článok bude obsahovať tieto časti:

Na čo slúži toto tlačidlo?

Úprimne povedané, milióny ľudí žijú bez takéhoto tlačidla. V jeho neprítomnosti nie je nič kritické, ale použitie tohto prvku môže priniesť určité výhody pre návštevníkov aj pre vás, ako vlastníka zdroja.

Výhody pre návštevníkov

Stránky lokality sú často preplnené obsahom. Dlhé a podrobné články nútia návštevníkov posúvať sa nižšie a nižšie posúvaním textu kolieskom myši. Na samom konci ich čakajú desiatky komentárov a na to, aby pridali svoje, musia dať ešte viac práce.

Zatiaľ čo sme zaneprázdnení čítaním, toto posúvanie nie je obzvlášť únavné. Ale návrat späť už nie je taká zábava a používateľ namiesto toho, aby sa vracal hore a prechádzal sa po iných častiach vašej stránky, ju jednoducho zatvorí.

Pomocou šípky nahor pre stránku sa môžete vrátiť horné menu rýchle a pohodlné.

Výhody pre stránku

Výhody pre stránku vyplývajú priamo z predchádzajúceho textu. Tlačidlo uľahčuje a zlepšuje navigáciu na stránke behaviorálne faktory pre váš zdroj, pretože používatelia sú aktívnejší a viac pozornosti budú poskytnuté k vašim materiálom.

Pohodlná navigácia a dobré behaviorálne faktory zase vedú k zvýšeniu autority v očiach, a teda k zvýšeniu pozícií vo výsledkoch vyhľadávania.

Jednoduché horné tlačidlo pre html stránku

Pozriem sa na dva spôsoby, ako poskytnúť vašej stránke toto tlačidlo. Prvá bude zameraná na jednoduché stránky, ku ktorým nie je možnosť ani túžba pripojiť ďalšie knižnice alebo Javascript.

Na implementáciu bude stačiť štandardná funkcionalita jazyka HTML značky, doplnený o CSS štýly. Tlačidlo nahor bude fungovať ako normálny odkaz a presmeruje návštevníka na začiatok stránky.

výhody:

• Jednoduchosť a jednoduchosť prispôsobenia;
• Nie je potrebná žiadna knižnica ani podpora skriptov.

Nevýhody:

• Tlačidlo je vždy viditeľné, aj keď je návštevník úplne hore na stránke;
• Pohyb nahor nenastáva plynulo, ale okamžite, trhavo.

Kód tlačidla bude pozostávať z dvoch prvkov. Prvým je HTML odkaz umiestnené v kóde stránky. Druhá je CSS štýl tlačidlo, nachádza sa v šablóne so štýlmi a zodpovedá za umiestnenie a vzhľad tlačidla.

Umiestnite nasledujúci kód do tela stránky (vnútri body tag, lepšie tesne pred zatvorením). Upozorňujeme, že potrebujete obrázok, ktorý bude slúžiť ako tlačidlo (nahraďte časť kódu svojou cestou k obrázku a jeho názvom).

< a href = "#" title = "Späť na začiatok" class = "buttonup">< img src = "cesta k obrázku / obrázok.png"> < / a >

Buttonup (šírka: 88px; výška: 118px; pozícia: pevná; spodná: 20px; pravá: 50px;)

Tlačidlo ( šírka: 88px; výška: 118px; poloha: pevná; dole: 20px; vpravo: 50px;

Tento kód je zodpovedný za polohu tlačidla, úpravou čísel ho môžete zmeniť. Po uložení súboru sa tlačidlo prejaví. Parameter šírky nastaviť na šírku obrazu, dole - odsadenie od spodného okraja obrazovky, vpravo - od pravého okraja obrazovky.

Plávajúce tlačidlo pre web

Takže priatelia, vytvorili sme s vami jednoduché tlačidlo HTML, teraz začnime implementovať pokročilejšiu verziu. V ňom sa zbavíme tých nedostatkov, ktoré boli prítomné v predchádzajúcej verzii, a to:

• Tlačidlo sa vám nebude neustále vznášať pred očami, ale objaví sa až vtedy, keď návštevník roluje po stránke nadol;
• Efekt návratu na začiatok stránky bude hladký, čo vyzerá štýlovo;
• Okrem toho sa naše tlačidlo zmení pri umiestnení kurzora myši (zmena farby alebo jasu).

Existuje mnoho spôsobov a skriptov na vytvorenie tlačidla. Aby som bol úprimný, nie som programátor a ak som na to prišiel s HTML v predchádzajúcej verzii, tak v JavaScripte som úplný čajník. Tak som si ich prezrel a preštudoval rôzne verzie a vybrali si možnosť, ktorá sa najjednoduchšie implementuje (menej zmien v rôznych súboroch).

Vo všeobecnosti je proces vytvárania takéhoto tlačidla trochu komplikovanejší, ale každý na to môže prísť. Všetko prebieha v 2 etapách:

1. Pripojenie knižnice jQuery

Ak používate WordPress alebo iný štandardný CMS, potom je táto knižnica s najväčšou pravdepodobnosťou zahrnutá v predvolenom nastavení. V tomto prípade môžete túto položku preskočiť.

Spojiť knižnice jQuery, je potrebné sa zaregistrovať v sekcii váš web nasledujúci riadok:

2. Pripojenie skriptu, ktorý zobrazuje tlačidlo

Kód skriptu je možné vložiť dvoma spôsobmi:

• alebo ho vložte úplne medzi značky ,
• alebo umiestnením skriptu do samostatného súboru a zaregistrovaním jeho spojenia v kóde stránky.

Prvá možnosť je jednoduchšia, druhá je podľa mňa pohodlnejšia.

Ak pre skript použijete samostatný súbor, ako som to urobil ja, vložte do neho kód medzi značky, samotné značky nie je potrebné kopírovať do súboru. Umiestnite súbor na svoj hosting.

Súbor som pomenoval buttonup.js. Ak ho chcete pripojiť, napíšte do hlavičky stránky nasledujúci riadok:

в файле footer.php. А можно просто загрузить файл со скриптом на хостинг, а затем просто сделать загрузку файла на сайте.

Если вы хотите разместить скрипт и не мучиться с загрузкой, то даю вам сам код скрипта.

JavaScript

V tomto kóde môžete zmeniť niektoré parametre pre seba.

• Riadok 4 je zodpovedný za zobrazenie samotnej rolovacej oblasti. Obsahuje základné štýly zobrazenia tlačidla. v zásade by tieto parametre mali vyhovovať takmer každému. Možno ich však budete musieť upraviť sami;
• Riadok 7 v zátvorke obsahuje číslo 300, ktoré je zodpovedné za moment, kedy sa tlačidlo objaví. To znamená, že tlačidlo sa zobrazí až po posunutí o 300 pixelov nadol. Tu odporúčam zvoliť takú hodnotu, aby rolovanie bolo možné až vtedy, keď zo zorného poľa zmizne hlavné menu stránky alebo niektoré iné dôležité prvky v navigácii;
• Na riadku 17 je za rýchlosť rolovania zodpovedná hodnota 100. Čím je hodnota nižšia, tým rýchlejšie sa vráti na začiatok stránky.

Tento kód je možné umiestniť medzi značky v hornej časti stránky. Ak je stránka na WordPress, potom sa táto oblasť nachádza v súbore šablóny header.php. Možno umiestniť aj pred uzatváraciu značku

úplne dole na stránke (súbor päta.php). Odporúčam poslednú možnosť, keďže urýchli načítanie stránky. Bude to vyzerať takto.

Ešte efektívnejšou možnosťou je načítať tento skript zo samostatného súboru. Súbor si môžete stiahnuť kliknutím na tlačidlo nižšie. Nachádza sa vo vnútri archívu.

Potom nahrajte tento súbor na hosting. Môžete ho nahrať do priečinka témy alebo ho môžete nahrať do koreňového adresára lokality. Podľa tradície to robím v priečinku šablón. Potom sa oplatí napísať kód na rovnaké miesto, ktoré načíta tento súbor. Ak to chcete urobiť, použite nasledujúci riadok.

JavaScript

V ňom budete musieť v druhom riadku nahradiť cestu k súboru svojou. Potom prilepte tento kód do rovnakej oblasti pred uzatváraciu značku, ako je uvedené nižšie.

Po úprave súboru, ak sme to robili na počítači, ho nahráme na hosting, pričom nahradíme pôvodný súbor. Potom bude fungovať jednoduché tlačidlo hore na vašej stránke.

Ak chcete upraviť parametre v tomto súbore, musíte ho otvoriť pomocou editora poznámkového bloku.

Táto možnosť je veľmi dobrá pre svoju jednoduchosť, a to ako v prevádzke, tak aj pri inštalácii na mieste. Pokročilejšou možnosťou je možnosť, kedy je okrem rolovania nahor možné vrátiť sa na miesto, z ktorého bolo rolovanie realizované. Toto je presne možnosť implementovaná v sociálnych médiách. sieť Vkontakte. Ako to urobiť, pozri nižšie.

Druhá metóda tlačidla hore z Vkontakte

Pre túto metódu som nahral podrobný videonávod.

Táto možnosť je teraz na mojom blogu. Zatiaľ sa mi nepodarilo analyzovať jeho užitočnosť. Ale ak stojí na jednom z obrov Runetu, potom môžeme bezpečne predpokladať, že z neho má zmysel. Samozrejme, s takou mierou to nie je problém. Ale na malom zdroji si ho pred inštaláciou môžete dôkladne premyslieť. Ale pozerám sa do budúcnosti, preto som sa tak rozhodol.

Implementácia druhej metódy je trochu komplikovanejšia, ale proces by vám už mal byť známy, ak ste na svojom zdroji urobili ďalšie technické body.

Pozostáva z 3 etáp:

1. Umiestnenie skriptu na stránku;
2. Umiestnenie kódu zodpovedného za zobrazenie tlačidla;
3. Úprava štýlu pomocou štýlov CSS.

Na začiatok musíme umiestniť skript, vďaka ktorému bude posúvanie plynulé a plynule zmení farbu pri prechode myšou, a to ako samotnej oblasti, tak aj farby sovy „Hore“ v závislosti od vzdialenosti posúvania stránky nadol.

Môžete ísť 2 spôsobmi, ako v prvom prípade. Buď umiestnite samotný skript do požadovanej oblasti (pozri odsek vyššie), alebo si skript stiahnite prostredníctvom súboru. Ďalej urobíme všetko presne cez druhú metódu, aby bola účinná.

Stiahnite si súbor skriptu kliknutím na tlačidlo nižšie.

Umiestnite súbor na hosting a nahrajte súbor prostredníctvom kódu v spodnej časti stránky, ako ste to urobili predtým. Súbor je pomenovaný presne rovnako ako v 1. metóde, takže na výstup môžete použiť rovnaký riadok kódu.