Reageerivad päised ja logod - nõuanded ja lõksud

Vastutustundliku veebidisaini kontseptsioon on veebi läbinud ja muutunud esiplaanide arendajatele. Kaasaegses maailmas ei ole eitavat disaini väärtust, kuid mõningaid raskusi on arusaadav, kuidas kujundada sobivaid skeeme korralikult.

Teema võib jätkuda, sest veebisaidi ainulaadseid valdkondi on nii palju, kuid keskendumine üksikutele elementidele võib aidata teil paremini mõista kasutaja eesmärke ja seda, kuidas neid eesmärke on võimalik rahuldavalt kujundada.

Ma tahaksin katta disaini näpunäited päistele, logodele, ja navigeerimismenüüd, kui need puudutavad tundlikku disaini. Tehke need soovitused nii, nagu need kehtivad teie enda töö suhtes, ning kujundage kindlasti oma kasutajaliideseid silmas pidades.

Õhuke vedruklahvid

Suurtel ekraanidel on tavaline, et on suured päised, võib-olla isegi mitmetasandilised lingitasemed. Kuid väiksematel ekraanidel ei ole sama ruumi ning neid tuleks vajadusel piirata.

Kuna kohalikel mobiilirakendustel tavaliselt on fikseeritud päised, see on tavapärane praktika ka tundlikule disainile. Fikseeritud päis peaks ka kahanema väiksematel seadmetel: see jätab sisule rohkem ruumi, kuid annab siiski lugejatele otsese juurdepääsu päise ja navigeerimisele.

Võtke näiteks Cartoon Brew paigutus täissuuruses monitoris ja mobiilseadmes.

600px katkestuspunktis langeb navigeerimine lehel peaaegu poole kõrgusele. See muudab nii logo kui ka klõpsatava navigatsioonimenüü väiksemaks, kuid nad on palju proportsionaalsem suhtelise ekraani ruumi.

Arvestage ka seda, et Cartoon Brew'il on rippmenüü, mis on mobiiliekraanil tundlik menüü. See tähendab seda kattub sisuga avatud lehel, seega on oluline jätta sellele ruumi.

Sarnane näide on Jacksonville Art Walk veebilehel. Ülemine navigeerimisriba jääb kerimise ajal fikseerituks väheneb väiksematel seadmetel. See on parem tundlikule disainile, sest õhem navar jätab sisule rohkem ruumi väiksemal mobiiliekraanil.

Igal navigeerimisribal oleval lingil on seotud lingiga seotud ikoon. See tundub laiekraani monitoril hea, kuid väiksemate ekraanide puhul on see liiga üksikasjalik.

Navigeerimine Art Walk muutub rippmenüüsse, millel on 770px murdepunkti ümber fikseeritud ühendused. Ikoonid on rippmenüüs peidetud, sest nad oleksid liiga väikesed ja väiksematele seadmetele liiga kitsad.

Vastusliku päise kujundamisel arvestage alati üldine ekraaniruum navigeerimisriba kujundamisel. Kui te ei soovi, et päis jääks fikseerituks, on see täiesti hea, aga sa ikka tahad kahaneb see natuke ruumi ülaosas salvestamiseks.

Ikoonige logo

Enamik logosid sisaldavad brändi esindamiseks teksti ja ikooni või graafikat. See tähendab, et saate alati ikooniks (Jah, see on tõeline sõna) selline logos sümbolini selle täisversioonist.

See on võimas tehnika vastuslike päiste jaoks, sest täieliku logo jaoks ei ole alati piisavalt ruumi. Te kaotate osa täismõõdulise logo ilusast ja glamuurist, kuid see on hind, mida peate maksma puhta reageeriva paigutuse eest.

Vaadake veebi disainerite uudiste logo ja vaadake, kuidas see brauseri suuruse muutmisel muutub.

Võib-olla ei tunne igaüks seda ikooni, kui külastate seda saiti, vaid tänu sellele mustri äratundmine see ei ole suur probleem.

Inimesed on olnud Internetis piisavalt kaua, et teada saada, et lehe ülemine vasak nurk on tavaliselt reserveeritud logole. Seda väikest roosa ikooni kasutatakse ka faviconis, mistõttu on lihtne teha mõningaid järeldusi ilma kaevata liiga kaugele.

Selle tihendatud logo tehnika puhul ei pea te alati lootma graafikale. Young And Hungry päises kasutatakse logo jaoks rohelist teksti, mis tihendub lõpuks tekstiga "Y&H".

See ei pruugi toimida iga saidi puhul, kui kaubamärki ei ole lihtne üksikuteks tähtedeks tuvastada. Aga see näitab, et logod saab lihtsamaks muuta nii graafikas kui ka tekstis ja mõlemas variandis võtke vähem ruumi väiksematel ekraanidel.

Koguekraani taustade käsitlemine

Paljud sihtleheküljed kasutavad rohkem tähelepanu pöörates kogu ekraani taustaga. See on võimas tehnika, kuid töötab sageli suurtel monitoridel.

Niisiis, kuidas sa seda väiksemal ekraanil käitled? Üldiselt on ka disainerid eemaldage taustapilt teatud katkestuspunkti või pildi möödumisel muutub ümber aknasse.

Cap Radio Raffle kasutab seda tehnikat oma kodulehel. Taustapilt säilitab keskpunkti alati, olenemata sellest, kui suur on ekraani suurus.

Selline lahendus on tavaliselt nõuab mõnda CSS-i positsioneerimist kuid see on tõesti lihtne, kui sa selle riputad. Lihtsalt säilitama teabekeskuse igal ajal ja kujutise konteineri suurust sobitada seadmega.

Lisaks esteetilistel põhjustel suurele taustale võite kasutada ka lehe sisu jaoks suuri pilte. Mashable'i kodulehekülg kasutab ülemist lugu, millel on kogu kujundus, esiletõstetud taustapildi.

Nende reageeriv paigutus tihendab pildi samal ajal keskse kontaktpunkti pidamine. Seda on raske teha, sest see muudab lugu muutudes pildi, mistõttu tuleb fotosid hoolikalt jälgida. Mashable'i lahendus on ikka suurepärane meetod täisekraanil olevate fotode käitlemiseks blogide ja ajakirjade paigutuste jaoks, kui need on korralikult kavandatud.

Lihtsustage navigeerimist

Väiksemate ekraanide uuendamisel, hoida võimalikult palju linke navigeerimisel ja muuta see kergesti ligipääsetavaks. See tähendab, et kui teil on mitme astme rippmenüüd, peate võib-olla paar linki kraavima.

Kuigi kui teil on õige strateegia, on siiski võimalik hoida kõik rippmenüüd taktikaliselt. Näiteks kasutab Kidscreen a lennuvaliku menüü väikeste noolega ikoonidega alamlinkide näitamine reageerivas menüüs.

Paljud inimesed väidavad vastu hamburgeri menüüd, kuid ma olen tulnud vastu võtma seda vajaliku elemendina pikkade navigatsioonimenüüde jaoks. See toimib lihtsalt ja enamik nutitelefonikasutajaid on seda mõistnud "menüünupuna".

Tegelikult on teil raske suruda, et leida reageeriv sait, mis ei tugine kolme baari hamburgerimenüüle. CyberChimps on suurepärane näide sellest kasutab vertikaalset rippmenüüd mitte slaidi sisse.

CyberChimps'i navigeerimisstruktuur muutub ümber, et libistada lehe ülaservas. Menüü langeb ülevalt suured plokkelemendid lingidele.

Koos rohkem klikkima ala ja suurem link tekst, lehekülgede navigeerimise protsess muutub palju lihtsamaks. Eesmärk on järgida seda filosoofiat kogu oma reageeriva päisega ja teie kujundused paranevad drastiliselt.

Ehita oma

Neid nõuandeid kasutades ei tohiks kasutada hädavajalikke kasutatavaid päiseid. Kuigi on palju vahendeid, mis aitavad teil välja tulla, on ainus viis tõeliselt aru saada praktika kaudu.

Nii et võtke need tehnikad teiega ja alustage veebilehtede loomist! Olen ka loetlenud mõned täiendavad ressursid tundlikele päistele, mida saate allpool vaadata.

• Loo põhiline mobiilse CSS-i reageeriva navigatsioonimenüü (teamtreehouse.com)
• Parim tava vastusliku veebisaidi päise jaoks (ux.stackexchange.com)
• Kuidas ma saan oma päisekujutise korralikult reageerida? (stackoverflow.com)