Odzivne glave in logotipi - nasveti in pasti

Koncept odzivnega spletnega oblikovanja je preplavil splet in postal osnovno orodje za razvijalce frontendov. V sodobnem svetu ni mogoče zanikati vrednosti odzivnega oblikovanja, vendar obstaja nekaj težav pri popolnem razumevanju pravilnega oblikovanja odzivnih postavitev.

Vsebina lahko traja dlje časa, ker je na voljo veliko edinstvenih področij spletnega mesta, vendar pa lahko osredotočanje na posamezne elemente pomaga bolje razumeti cilje uporabnika in kako je te cilje mogoče doseči z odzivnim oblikovanjem..

Rad bi pokril oblikovalski nasveti za glave, logotipe, in navigacijskih menijih, se nanašajo na odzivno oblikovanje. Vzemite te predloge, saj se nanašajo na vaše lastno delo in se prepričajte, da načrtujete svoje vmesnike z upoštevanjem vedenja uporabnikov.

Thinner Navbars

Na velikih zaslonih je običajno imeti velike glave, morda celo prevelike glave z večnivojskimi stopnjami povezav. Toda manjši zasloni nimajo enakega prostora in bi morali biti po potrebi omejeni.

Ker običajno uporabljajo mobilne aplikacije fiksne glave, to je tudi običajna praksa pri odzivnem oblikovanju. Fiksna glava tudi zmanjšati ko je na manjših napravah: to pušča več prostora za vsebino, vendar še vedno daje bralcem neposreden dostop do glave in navigacije.

Vzemite na primer postavitev risanke Brew na monitorju polne velikosti in na mobilni napravi.

Na točki 600px se navigacija skrči na polovico višine na strani. Zaradi tega sta logotip in navadni meni manjši, vendar sta veliko bolj sorazmerna na relativni prostor na zaslonu.

Prav tako menijo, da ima Cartoon Brew spustni meni kot odzivni meni na mobilnem zaslonu. To pomeni prekrivna vsebina na strani, ko je odprta, zato je pomembno, da pustite dovolj prostora za to.

Podoben primer najdete na spletni strani Jackson Walk Art Walk. Zgornja navigacijska vrstica ostane fiksna med pomikanjem, vendar skrči na manjših napravah. To je bolje za odzivno zasnovo, ker je tanjša navbar pušča več prostora za vsebino na manjšem mobilnem zaslonu.

Vsaka povezava v navigacijski vrstici ima povezano ikono, povezano z besedilno povezavo. To izgleda odlično na širokozaslonskem monitorju, vendar je preveč podrobno za manjše zaslone.

Navigacija Art Walk se spremeni v spustni meni s fiksnimi povezavami okoli 770px prekinitvene točke. Ikone so skrite v spustnem meniju, ker bi bile premajhne in premajhne na manjših napravah.

Pri oblikovanju odzivne glave vedno upoštevajte celotnega prostora na zaslonu medtem ko styling navbar. Če ne želite, da je glava ostala fiksna, je to povsem v redu, vendar boste morda še vedno želeli malo se skrči shranite na vrhu strani.

Ikonitiraj logotip

Večina logotipov vključuje nekaj besedila in ikono ali grafiko, ki predstavlja blagovno znamko. To pomeni, da lahko vedno iconify (da, to je prava beseda) ta vrsta logotipov do simbola njene polne različice.

To je močna tehnika za odzivne glave, ker ni vedno dovolj prostora za celoten logotip. Izgubite nekaj glitza in glamura logotipa polne velikosti, vendar je to cena, ki jo boste morda morali plačati za čisto odzivno postavitev.

Oglejte si logo za Web Designer News in si oglejte, kako se spreminja, ko spreminjate velikost brskalnika.

Morda ne bodo vsi prepoznali te ikone, ko bodo prvič obiskali spletno stran, a hvala prepoznavanje vzorcev to ni velik problem.

Ljudje so na internetu dovolj dolgo, da vedo, da je zgornji levi kot strani običajno rezerviran za logotip. Ta majhna roza ikona se uporablja tudi v faviconu, zato je enostavno narediti nekaj sklepov, ne da bi kopali predaleč v mesto.

Za to zgoščeno tehniko logotipa se ne zanašate vedno na grafiko. Glava Young And Hungry uporablja svetlo zeleno besedilo za logotip, ki se sčasoma zgošča v besedilo "Y&H"..

To priznanje morda ne bo delovalo za vsako spletno mesto, če blagovne znamke ni mogoče prepoznati kot posamezne črke. Ampak gre za prikaz tega logotipa lahko preprostejše tako v grafiko in besedilo kot v obe različici zavzamejo manj prostora na manjših zaslonih.

Ravnanje v ozadju celotnega zaslona

Veliko ciljnih strani uporablja ozadje celotnega zaslona, ​​da pritegne več pozornosti. To je močna tehnika, vendar pogosto najbolje deluje na velikih monitorjih.

Kako se s tem ukvarjate na manjšem zaslonu? Na splošno tudi oblikovalci odstranite sliko ozadja preteklosti, ali samo sliko preoblikuje , da se prilega oknu.

Cap Radio Raffle uporablja to tehniko na svoji domači strani. Slika ozadja ohranjajo osrednjo točko vedno, ne glede na to, kako velik je zaslon.

Takšna rešitev je običajno zahteva nekaj CSS pozicioniranja vendar je zelo preprosto, ko ga dobiš. Samo ohraniti osrednjo točko ves čas, in. \ t spremenite velikost vsebnika slike da se prilega sorazmerno z napravo.

Poleg velikih ozadij zaradi estetskih razlogov lahko uporabite tudi velike slike za vsebino strani. Domača stran Mashable uporablja predstavljeno sliko ozadja za zgornjo zgodbo, ki zajema celotno postavitev.

Njihova odzivna postavitev stisne sliko medtem osrednjo točko. Težko je to narediti, ker se prikazana slika spremeni, ko se zgodba spremeni, zato morajo biti fotografije skrbno nadzorovane. Rešitev Mashable je še vedno odličen način za ravnanje s celozaslonskimi fotografijami za spletne dnevnike in postavitve revij, ko so pravilno oblikovane.

Poenostavite navigacijo

Pri prenovi za manjše zaslone, ohranite čim več povezav v navigaciji in dostopen. To pomeni, da boste morda morali odstraniti nekaj povezav, če imate večplastne spustne menije.

Če imate pravo strategijo, je še vedno mogoče ohraniti vse padajoče. Na primer Kidscreen uporablja a meni z majhnimi ikonami s puščicami , ki označujejo povezave v odzivnem meniju.

Mnogi ljudje nasprotujejo meniju hamburgerja, vendar sem ga sprejela kot potreben element za dolge menije. To preprosto deluje in je postalo splošno razumljivo za večino uporabnikov pametnih telefonov kot "gumb menija".

Pravzaprav bi bilo težko najti odzivno stran, ki se ne zanaša na meni z hamburgerjem s tremi palicami. CyberChimps je odličen primer uporablja navpični spustni meni namesto drsenja.

Navigacijska struktura za CyberChimps se preuredi, da se pomakne na vrh strani. Meni se spusti z zgornjim kotom veliki blok elementi za povezave.

S več področij za klik in večje besedilo povezave, Postopek navigacije strani postane veliko enostavnejši. Nameravajte slediti tej filozofiji s celotno odzivno glavo in vaši modeli se bodo drastično izboljšali.

Zgradite svoje

S temi nasveti, ki so vam na voljo, ne bi smelo biti težav pri ustvarjanju uporabnih odzivnih glav. Medtem ko je na voljo veliko orodij, ki vam lahko pomagajo, je edini način, da resnično razumete skozi prakso.

Torej, te tehnike z vami in začeti graditi spletne strani! Naštel sem tudi nekaj dodatnih virov za odzivne glave, ki jih lahko preberete spodaj.

• Ustvarite osnovni mobilni odzivni navigacijski meni CSS (teamtreehouse.com)
• Najboljša praksa za odzivno stran glave strani (ux.stackexchange.com)
• Kako lahko svojo sliko glave ustrezno odzivam? (stackoverflow.com)