Odpovedajúce hlavičky a logá - tipy a úskalia

Koncept citlivého web dizajnu prenikol na web a stal sa základom vývojárov frontend. Neexistuje žiadna odpoveď na hodnotu citlivého dizajnu v modernom svete, ale je tu nejaký problém plne pochopiť, ako správne navrhnúť uspokojivé usporiadanie.

Téma by mohlo pokračovať dlhšie, pretože existuje toľko jedinečných oblastí webových stránok, ale zameranie sa na jednotlivé prvky vám môže pomôcť lepšie pochopiť ciele používateľa a ako sa tieto ciele môžu dosiahnuť s prispôsobivým dizajnom.

Chcel by som to pokryť návrhové tipy pre hlavičky, logá, a navigačné ponuky, pretože sa týkajú citlivého dizajnu. Vezmite tieto návrhy, ktoré sa vzťahujú na vašu vlastnú prácu a nezabudnite navrhnúť vaše rozhrania so správaním používateľov.

Riediteľ Navbars

Na veľkých obrazovkách je normálne mať veľké záhlavie, možno dokonca nadrozmerné hlavičky s viacúrovňovými linkami. Menšie obrazovky však nemajú rovnaký priestor a mali by byť podľa potreby obmedzené.

Keďže pôvodné mobilné aplikácie majú obvykle pevné záhlavia, to je bežná prax v reakcii na dizajn. Pevná hlavička by sa tiež mali zmenšiť keď na menších zariadeniach: ponecháva viac priestoru na obsah, ale stále poskytuje čitateľom priamy prístup k hlavičke a navigácii.

Vezmite si napríklad rozloženie Cartoon Brew na monitore v plnej veľkosti a na mobilnom zariadení.

V bode prerušenia 600 pixlov sa navigácia zmenšuje na takmer polovicu svojej výšky na stránke. Vďaka tomu je logo aj kliknutie na navigáciu menšie, ale sú to oveľa proporcionálnejšie do relatívneho priestoru na obrazovke.

Tiež si uvedomte, že Cartoon Brew má rozbaľovacú schránku ako citlivé menu na obrazovke mobilného telefónu. To znamená prekrýva obsah na otvorenej stránke, takže je dôležité nechať na to dostatok priestoru.

Podobný príklad možno nájsť na webovej stránke Jacksonville Art Walk. Najvyššia vrstva navigačnej navigácie zostane pri rolovaní fixovaná, ale zmenšuje sa na menšie zariadenia. To je lepšie pre citlivý dizajn, pretože tenšia navbar ponecháva viac priestoru na obsah na menšej mobilnej obrazovke.

Každý odkaz na navbar má príslušnú ikonu pripojenú k textovému odkazu. Vyzerá to skvelo na širokouhlom monitore, ale je to príliš podrobné pre menšie obrazovky.

Navigácia Art Walk sa zmení na rozbaľovaciu ponuku s pevnými odkazmi okolo zarážky 770px. Ikony sú v rozbaľovacej ponuke skryté, pretože by boli príliš malé a príliš ostré na menších zariadeniach.

Pri navrhovaní odpovedajúceho záhlavia vždy zvážte celkový priestor na obrazovke pri štýle Navbar. Ak nechcete, aby hlavička zostala pevná, je to úplne v poriadku, ale stále budete chcieť trochu ho utlačte ušetriť miestnosť v hornej časti stránky.

Označiť Logo

Väčšina logov obsahuje nejaký text a ikonu alebo grafiku, ktoré reprezentujú značku. To znamená, že môžete vždy iconify (áno, je to skutočné slovo) tohto druhu loga až po symbol v plnej verzii.

Je to výkonná technika pre odpovedajúce hlavičky, pretože nie je vždy dostatok miesta pre plné logo. Strácate niektoré z glitz a glamour loga v plnej veľkosti, ale to je cena, ktorú možno budete musieť zaplatiť za čisté prispôsobiteľné rozloženie.

Pozrite sa na logo Web Designer News a uvidíte, ako sa mení pri zmene veľkosti prehliadača.

Možno, že pri prvom návšteve stránky túto skutočnosť neuznajú všetci, ale vďaka rozpoznávanie vzorov to nie je obrovský problém.

Ľudia boli na internete dostatočne dlho na to, aby vedeli, že ľavý horný roh stránky je zvyčajne vyhradený pre logo. Táto malá ružová ikona sa používa aj v favikóne, takže je ľahké urobiť nejaké závery bez toho,.

Nemusíte sa vždy spoliehať na grafiku pre toto kondenzované logo. Záhlavie Young And Hungry používa pre logá jasne zelený text, ktorý nakoniec kondenzuje na text "Y & H".

V prípade, že značka nie je ľahké rozpoznať ako jednotlivé písmená, nemusí to fungovať pre každú stránku. Ale to ukazuje, že logá môže byť jednoduchšie do grafiky a textu a obidvoch variantov zaberajú menej miesta na menších obrazovkách.

Manipulácia s pozadím na celú obrazovku

Mnohé vstupné stránky používajú pozadia na celej obrazovke, aby získali väčšiu pozornosť. Je to výkonná technika, ale často funguje najlepšie na veľkých monitoroch.

Tak ako to zvládnete na menšej obrazovke? Všeobecne platí aj pre dizajnérov odstráňte obrázok pozadia okolo určitého zlomu alebo samotného obrazu sa opäť zmení aby sa zmestili do okna.

Cap Radio Raffle používa túto techniku ​​na svojej domovskej stránke. Obrázok pozadia udržuje ohnisko v pohľade v každom okamihu, bez ohľadu na to, koľko je veľkosť obrazovky zmenená.

Tento druh riešenia typicky vyžaduje určité umiestnenie v CSS ale je to naozaj jednoduché, keď sa dostanete visieť na to. proste udržujte ohnisko v pohľade za každých okolností a zmena veľkosti kontajnera s obrázkami aby zodpovedali pomeru so zariadením.

Okrem veľkých pozadia z estetických dôvodov môžete použiť aj veľké obrázky na obsah stránky. Domovská stránka používateľa Mashable používa pozadie s obrázkami pre najlepší príbeh, ktorý zahŕňa celé rozloženie.

Ich citlivé usporiadanie komprimuje obraz zatiaľ čo udržiavať ústredný kontaktný bod. Je to ťažké, pretože tento zobrazený obrázok sa mení, keď sa príbeh zmení, takže fotografie musia byť starostlivo vykreslené. Mashable riešenie je stále skvelý spôsob manipulácie s fotografiami na celú obrazovku pre blogy a rozloženie časopisov, keď sú správne navrhnuté.

Zjednodušte navigáciu

Pri prepracovaní pre menšie obrazovky, udržiavať čo najviac odkazov v navigácii a ľahko prístupné. To znamená, že ak máte viacúrovňové rozbaľovacie ponuky, možno budete musieť vybrať niekoľko odkazov.

Aj keď máte správnu stratégiu, stále je možné ponechať všetky dropdowny in-tact. Napríklad Kidscreen používa a flyout menu s malými ikonami šípok označujúcimi podzákony v odpovedajúcej ponuke.

Mnohí ľudia argumentujú proti menu hamburger, ale prišiel som ho prijať ako nevyhnutnú položku pre zdĺhavé nav menu. Jednoducho to funguje a väčšina používateľov smartfónov sa stala široko zrozumiteľnou ako "tlačidlo ponuky".

V skutočnosti by ste boli ťažko nájsť citlivú stránku, ktorá sa nespolieha na menu s tromi barovými hamburgermi. CyberChimps je skvelým príkladom používa vertikálne rozbaľovanie skôr než zasúvanie.

Navigačná štruktúra pre program CyberChimps sa presmeruje, aby sa posunula nadol v hornej časti stránky. Ponuka klesne zhora s veľké blokové prvky pre odkazy.

s viac oblastí na kliknutie a väčší text odkazu, proces navigácie stránok sa stáva oveľa jednoduchším. Snažte sa nasledovať túto filozofiu s celým odozvou hlavičky a vaše návrhy sa zlepšia drasticky.

Vytvorte si vlastné

S týmito tipmi, ktoré máte k dispozícii, by nemali byť žiadne ťažkosti s vytváraním použiteľných citlivých hlavičiek. Aj keď je veľa nástrojov, ktoré vám pomôžu, jediný spôsob, ako skutočne pochopiť, je prostredníctvom praxe.

Tak sa tieto techniky s tebou a začať budovať webové stránky! Takisto som uviedol niekoľko ďalších zdrojov pre odpovedajúce hlavičky, ktoré môžete skontrolovať nižšie.

• Vytvorte ponuku základnej mobilnej odpovedajúcej navigácie CSS (Teamtreehouse.com)
• Najlepšie postupy pre zodpovedné webové stránky hlavičky (Ux.stackexchange.com)
• Ako môžem vytvoriť správny obraz v hlavičke? (Stackoverflow.com)