Reaguojančios antraštės ir logotipai - patarimai ir trūkumai

Atsakingo interneto dizaino koncepcija įkvėpė žiniatinklį ir tapo pagrindiniu kūrėjų kūrimu. Negalima paneigti atsakingo dizaino vertės šiuolaikiniame pasaulyje, tačiau yra visai sunku suprasti, kaip tinkamai suprojektuoti atsakingus išdėstymus.

Objektas gali vykti ilgai, nes yra tiek daug unikalių svetainių sričių, bet sutelkiant dėmesį į atskirus elementus, galite geriau suprasti naudotojo tikslus ir kaip šie tikslai gali būti pasiekti naudojant tinkamą dizainą.

Norėčiau padengti dizaino patarimai antraštėms, logotipams, ir navigacijos meniu, kaip jie susiję su reaguojančiu dizainu. Atlikite šiuos pasiūlymus, kaip jie taikomi jūsų darbui ir būtinai suprojektuokite sąsajas su naudotojo elgesiu.

Skiediklio juostos

Dideliuose ekranuose yra normalu, kad yra didelių antraščių, galbūt netgi negabaritinių antraščių, turinčių daugiapakopę nuorodų pakopą. Tačiau mažesni ekranai neturi tos pačios erdvės ir turėtų būti apriboti, jei reikia.

Kadangi vietinės mobiliosios programos paprastai turi fiksuotos antraštės, taip pat yra įprasta reaguoti į dizainą. Fiksuota antraštė taip pat turėtų mažėti kai yra mažesniuose įrenginiuose: tai palieka daugiau vietos turiniui, bet vis tiek suteikia skaitytojams tiesioginę prieigą prie antraštės ir navigacijos.

Paimkite, pavyzdžiui, „Cartoon Brew“ išdėstymą ant pilno dydžio monitoriaus ir mobiliajame įrenginyje.

Per 600 pikselių tašką navigacija sumažėja beveik iki pusės aukščio. Tai sumažina logotipą ir paspaudžiamąjį meniu, bet jie yra daug proporcingesnis į santykinę ekrano erdvę.

Taip pat manau, kad „Cartoon Brew“ turi išskleidžiamąjį langą kaip reaguojamąjį meniu mobiliajame ekrane. Tai reiškia perdengia turinį atidarius puslapyje, svarbu tai palikti.

Panašus pavyzdys pateikiamas „Jacksonville Art Walk“ svetainėje. Viršutinė navigacinė juosta lieka fiksuota, kai ji slenka, bet mažesniuose įrenginiuose. Tai geriau reaguojant į dizainą, nes plonesnė navigacinė juosta palieka daugiau vietos turiniui mažesniame mobiliajame ekrane.

Kiekvienoje juostoje esančioje nuorodoje yra susijusi piktograma, pridedama prie teksto nuorodos. Plačiaekraniame ekrane tai puikiai atrodo, bet mažesniems ekranams tai per daug.

Navigacija „Art Walk“ keičiasi į išskleidžiamąjį meniu su fiksuotais ryšiais aplink 770px pertrauką. Piktogramos yra paslėptos išskleidžiamajame meniu, nes jos būtų per mažos ir per mažos įrangos.

Kurdami reaguojančią antraštę visada apsvarstykite bendra ekrano erdvė kurdami navigacijos juostą. Jei nenorite, kad antraštė liktų fiksuota, tai visiškai gerai, bet jūs vis tiek norėsite šiek tiek susitraukti išsaugoti kambarį puslapio viršuje.

„Iconify“ logotipas

Dauguma logotipų turi tam tikrą tekstą ir piktogramą ar grafiką, kad būtų atstovaujamas prekės ženklas. Tai reiškia, kad visada galite ikonizuoti (taip tai tikras žodis) šis logotipas iki simbolio jos pilną versiją.

Tai galinga technika reaguojančioms antraštėms, nes nėra pakankamai vietos pilnam logotipui. Jūs prarasite dalį pilno dydžio logotipo „glitz“ ir „glamour“, bet tai yra kaina, kurią jums gali tekti sumokėti už švarų reagavimą.

Patikrinkite žiniatinklio dizainerio naujienų logotipą ir peržiūrėkite, kaip jis keičiasi naršyklės dydžiu.

Galbūt ne visi atpažins šią piktogramą, kai pirmą kartą apsilankys svetainėje, bet dėl ​​to modelio atpažinimas tai nėra didžiulė problema.

Žmonės buvo internete pakankamai ilgai, kad žinotų, jog viršutinis kairysis puslapio kampas paprastai yra skirtas logotipui. Ši maža rožinė piktograma taip pat naudojama favicon, todėl lengva padaryti tam tikras išvadas be kasti per daug į svetainę.

Jums ne visada reikia pasikliauti šios sutrumpinto logotipo technikos grafika. „Young And Hungry“ antraštėje logotipui naudojamas ryškiai žalias tekstas, kuris galiausiai susilieja su tekstu „Y&H“.

Tai gali būti neveiksminga kiekvienai svetainei, jei prekės ženklo negalima lengvai atpažinti kaip vieną raidę. Tačiau tai rodo, kad logotipai gali būti paprasčiau į grafiką ir tekstą bei abu variantus užima mažiau vietos mažesniuose ekranuose.

Viso ekrano fonų tvarkymas

Daugelis nukreipimo puslapių naudoja visą ekraną, kad atkreiptų daugiau dėmesio. Tai yra galinga technika, tačiau dažnai veikia geriausiai dideliuose monitoriuose.

Taigi, kaip tai tvarkyti mažesniame ekrane? Paprastai ir dizaineriai pašalinti fono paveikslėlį praeityje tam tikru tašku arba pats vaizdas bus pertvarkytas kad tilptų į langą.

„Cap Radio Raffle“ naudoja šį metodą savo pagrindiniame puslapyje. Fono vaizdas saugo pagrindinį punktą bet kuriuo metu, nesvarbu, kiek ekrano dydis yra keičiamas.

Šis sprendimas paprastai būna toks reikia tam tikro CSS pozicionavimo bet tai tikrai paprasta, kai jį pakabinate. Tiesiog išlaikyti pagrindinį centrą bet kuriuo metu, ir keisti vaizdo talpyklos dydį tinkamas įrenginiui.

Be didelių estetinių priežasčių, puslapių turiniui galite naudoti ir didelius vaizdus. „Mashable“ pagrindiniame puslapyje naudojama geriausia istorija, apimanti visą maketą.

Jų atsakingas išdėstymas suspaudžia vaizdą kol centrinį centrą. Tai sunku tai padaryti, nes pasikeitus vaizdui, vaizdas keičiasi, todėl nuotraukos turi būti rūpestingai kuruojamos. Mashable sprendimas vis dar yra puikus būdas tvarkyti visas ekrano nuotraukas dienoraščiams ir žurnalų išdėstymams, kai jie yra tinkamai suprojektuoti.

Supaprastinkite navigaciją

Atnaujinant mažesnius ekranus, kuo daugiau nuorodų navigacijos metu, ir kad jis būtų lengvai prieinamas. Tai reiškia, kad jums gali prireikti iškabinti kelias nuorodas, jei turite daugiapakopę meniu.

Nors jei turite tinkamą strategiją, vis dar galima išlaikyti visus išskleidžiamuosius sąrašus. Pavyzdžiui, „Kidscreen“ naudoja a „flyout“ meniu su mažomis rodyklių piktogramomis nurodant sublinkius atsakingame meniu.

Daugelis žmonių ginčijasi su mėsainių meniu, bet aš atėjau priimti jį kaip reikiamą elementą ilgiems Nav meniu. Jis tiesiog veikia ir daugeliui išmaniųjų telefonų vartotojų tapo plačiai suprantamas kaip „meniu mygtukas“.

Tiesą sakant, jums būtų sunku surasti jautrią svetainę, kuri nesiremtų trijų barų mėsainių meniu. „CyberChimps“ yra puikus pavyzdys naudoja vertikalią išskleidžiamąją dalį vietoj skaidrių.

„CyberChimps“ navigacijos struktūra tampa pertvarkyta, kad būtų galima slinkti žemyn puslapio viršuje. Meniu nukrenta iš viršaus dideli blokų elementai nuorodoms.

Su daugiau spragtelėjimų ir didesnis nuorodos tekstas, puslapių naršymo procesas tampa daug paprastesnis. Tikslas sekti šią filosofiją su visa jūsų reaguojančia antrašte ir jūsų dizainas gerokai pagerės.

Sukurkite savo

Naudodamiesi šiais patarimais, neturėtų kilti problemų kuriant naudingas atsakingas antraštes. Nors yra daug įrankių, padedančių jums padėti, vienintelis būdas iš tiesų suprasti yra praktika.

Taigi, pasinaudokite šiais būdais ir pradėkite kurti svetaines! Aš taip pat išvardijau keletą papildomų išteklių reaguojančioms antraštėms, kurias galite patikrinti toliau.

• Sukurkite „Basic Mobile CSS Responsive Navigation“ meniu (teamtreehouse.com)
• Geriausios praktikos tinklaviečių antraštėms (ux.stackexchange.com)
• Kaip padaryti, kad antraštės vaizdas būtų tinkamai reaguojamas? (stackoverflow.com)