Atsaucīgi galvenes un logotipi - padomi un kļūmes

Koncepcija par atsaucīgu web dizainu ir caurvijusi tīmekli un kļuvusi par galveno priekštelpu izstrādātāju. Nav noliegt atsaucīgas dizaina vērtību mūsdienu pasaulē, taču ir dažas grūtības pilnībā saprast, kā pareizi veidot atsaucīgus izkārtojumus.

Objekts var turpināties garumā, jo ir tik daudz unikālu tīmekļa vietņu jomu, bet koncentrēšanās uz atsevišķiem elementiem var palīdzēt jums labāk izprast lietotāja mērķus un to, kā šos mērķus var sasniegt ar atsaucīgu dizainu.

Es gribētu segt dizaina padomi galvenēm, logotipiem, un navigācijas izvēlnes, kā tie attiecas uz atsaucīgu dizainu. Veiciet šos ieteikumus, kas attiecas uz jūsu darbu, un pārliecinieties, ka izstrādājāt saskarnes ar lietotāja uzvedību.

Šķīdinātāji

Lielos ekrānos ir normāli, ja ir lielas galvenes, iespējams, pat lielizmēra virsraksti ar daudzlīmeņu saiti līmeņiem. Bet mazākiem ekrāniem nav vienādas telpas, un tie ir jāierobežo pēc vajadzības.

Tā kā parasti ir vietējās mobilās lietotnes fiksētie galvenes, tas ir arī parastā prakse attiecībā uz atsaucīgu dizainu. Fiksēta galvene arī jāsamazinās kad uz mazākām ierīcēm: tas atstāj vairāk vietas saturam, tomēr sniedz lasītājiem tiešu piekļuvi galvenei un navigācijai.

Piemēram, izmantojiet Cartoon Brew izkārtojumu pilna izmēra monitorā un mobilajā ierīcē.

600px pārtraukuma punktā navigācija samazinās līdz gandrīz pusei no tā augstuma lapā. Tas padara gan logotipu, gan noklikšķināmo navigācijas izvēlni mazāku, bet tās ir daudz proporcionālāka uz relatīvo ekrāna telpu.

Uzskatiet arī, ka Cartoon Brew ir nolaižams lodziņš kā reaģējoša izvēlne mobilajā ekrānā. Tas nozīmē to pārklāj saturu atverot lapu, tāpēc ir svarīgi atstāt daudz vietas.

Līdzīgs piemērs ir atrodams Jacksonville Art Walk tīmekļa vietnē. Augšējā navigācijas josla ritināšanas laikā paliek fiksēta, bet samazinās uz mazākām ierīcēm. Tas ir labāk, ja dizains ir atsaucīgāks, jo plānāks nav atstāj vairāk vietas saturam uz mazāka mobilā ekrāna.

Katrai navigācijas joslas saitei ir saistīta ar ikonu, kas pievienota teksta saitei. Tas ir lieliski redzams platekrāna monitorā, bet tas ir pārāk detalizēts maziem ekrāniem.

Navigācija ar navigāciju mainās uz nolaižamo izvēlni ar fiksētām saitēm ap 770px pārtraukuma punktu. Ikonas ir paslēptas nolaižamajā izvēlnē, jo tās būtu pārāk mazas un pārāk mazas uz mazām ierīcēm.

Izstrādājot atsaucīgu galveni, vienmēr ņemiet vērā kopējā ekrāna telpa veidojot navigācijas joslu. Ja jūs nevēlaties, lai galvene paliktu nemainīga, tas ir pilnīgi labi, bet jūs joprojām vēlaties sarukt to mazliet lai saglabātu vietu lapas augšpusē.

Ikonizēt logotipu

Vairums logotipu ietver kādu tekstu un ikonu vai grafiku, lai pārstāvētu zīmolu. Tas nozīmē, ka jūs vienmēr varat ikonizēt (jā tas ir īsts vārds) šāda veida logotipi līdz simbolam tās pilno versiju.

Tas ir spēcīgs paņēmiens atsaucīgām galvenēm, jo ​​ne vienmēr ir pietiekami daudz vietas pilnam logotipam. Jūs zaudējat daļu no pilnizmēra logotipa glitz & glamour, bet tā ir cena, kas jums būs jāmaksā par tīru atsaucīgu izkārtojumu.

Apskatiet Web Designer News logotipu un skatiet, kā tas mainās, mainot pārlūkprogrammas lielumu.

Varbūt ne visi atpazīs šo ikonu, pirmo reizi apmeklējot vietni, bet pateicoties rakstu atpazīšana tā nav liela problēma.

Cilvēki ir bijuši internetā pietiekami ilgi, lai uzzinātu, ka lapas augšējais kreisais stūris parasti ir rezervēts logotipam. Šī mazā rozā ikona tiek izmantota arī favicon, tāpēc ir viegli izdarīt dažus secinājumus, neizmantojot pārāk tālu uz vietas.

Šai saīsinātā logotipa metodei ne vienmēr ir jāpaļaujas uz grafiku. Young and Hungry galvene izmanto logotipam spilgti zaļu tekstu, kas galu galā saīsinās ar tekstu "Y&H".

Piešķirot to, katrai vietnei var nedarboties, ja zīmolu nav viegli atpazīt kā atsevišķus burtus. Bet tas notiek, lai parādītu, ka logotipi var padarīt vienkāršāku gan grafikā, gan tekstā, gan abos variantos aizņem mazāk vietas uz maziem ekrāniem.

Darbs ar pilnekrāna foniem

Daudzas galvenās lapas izmanto pilna ekrāna fonu, lai pievērstu lielāku uzmanību. Tas ir spēcīgs paņēmiens, bet bieži vien vislabāk darbojas lielos monitoros.

Tātad, kā jūs to rīkosiet mazākā ekrānā? Parasti arī dizaineri noņemiet fona attēlu pagātnē, vai arī pats attēls tiek pārveidots lai ietilptu logā.

Cap Radio Raffle izmanto šo tehniku ​​savā mājas lapā. Fona attēls saglabā kontaktpunktu vienmēr, neatkarīgi no tā, cik lielā mērā ekrāns ir mainīts.

Šāda veida risinājums parasti ir nepieciešama CSS pozicionēšana bet tas ir patiešām vienkāršs, kad jūs saņemsiet to. Tikai saglabāt kontaktpunktu visu laiku, un mainīt attēla konteinera izmērus samērīgi ar ierīci.

Papildus estētisku iemeslu dēļ jūs varat izmantot arī lielus attēlus lapas saturam. Mashable sākumlapā tiek izmantots priekšstats par fona attēlu, kas aptver visu izkārtojumu.

Viņu atsaucīgais izkārtojums saspiež attēlu kamēr centrālā kontaktpunkta uzturēšana. To ir grūti izdarīt, jo mainās stāsts, kad attēli mainās, tāpēc fotogrāfijas ir rūpīgi jāgatavo. Mashable risinājums joprojām ir lieliska metode, kā apstrādāt pilnekrāna fotoattēlus blogiem un žurnālu izkārtojumiem, kad tie ir pareizi izstrādāti.

Vienkāršojiet navigāciju

Veicot mazāku ekrānu atjaunošanu, saglabāt tik daudz saites, cik iespējams navigācijā, un padarīt to viegli pieejamu. Tas nozīmē, ka, ja jums ir daudzpakāpju nolaižamās izvēlnes, jums var būt nepieciešams dažas saites.

Lai gan, ja jums ir pareiza stratēģija, joprojām ir iespējams saglabāt visu nolaižamo informāciju. Piemēram, Kidscreen izmanto a lidojuma izvēlne ar mazām bultu ikonām norādot apakšvirsmas atsaucīgajā izvēlnē.

Daudzi cilvēki iebilst pret hamburgeru ēdienkarti, bet es esmu ieradies to pieņemt kā nepieciešamo elementu garām navigācijas izvēlnēm. Tas vienkārši darbojas, un lielākā daļa viedtālruņu lietotāju ir kļuvuši plaši saprotami kā "izvēlnes poga".

Faktiski, jūs būtu grūti piespiest atrast atsaucīgu vietni, kas nav atkarīga no trīs baru izvēlnes. CyberChimps ir lielisks piemērs tam izmanto vertikālo nolaižamo nevis slaidu.

CyberChimps navigācijas struktūra tiek pārkārtota, lai slīdētu uz leju lapas augšpusē. Izvēlne nokrīt no augšas uz lieli bloku elementi saitēm.

Ar vairāk vietas, uz kuras noklikšķināt un lielāks saites teksts, lapu navigācijas process kļūst daudz vienkāršāks. Mērķis ir sekot šai filozofijai ar visu jūsu atsaucīgo virsrakstu, un jūsu dizains krasi uzlabosies.

Izveidojiet savu

Izmantojot šos padomus, jums nevajadzētu radīt problēmas, veidojot izmantojamus atsaucīgus galvenes. Lai gan ir daudz rīku, lai palīdzētu jums, vienīgais veids, kā saprast, ir prakse.

Tātad, ņemiet šos paņēmienus kopā ar jums un sāciet veidot tīmekļa vietnes! Esmu uzskaitījis arī dažus papildu resursus atsaucīgiem galvenajiem, kurus varat pārbaudīt tālāk.

• Izveidojiet Basic Mobile CSS Responsive navigācijas izvēlni (teamtreehouse.com)
• Labākā prakse atsaucīgai vietnes galvenei (ux.stackexchange.com)
• Kā es varu padarīt savu galvenes attēlu pareizi atsaucīgu? (stackoverflow.com)