Dimensions estàndard llocs: característiques, requisits i recomanacions

desenvolupament de la tecnologia de llocs web - un procés molt polifacètic. No obstant això, totes les seves etapes es poden dividir en dos components principals - un funcional i una funda exterior. O, com en el webmaster mitjà de Beg End i frontals, respectivament. Les persones que van comprar els seus llocs web en els estudis de desenvolupament web, sovint ingènuament creuen que cal centrar-se només en funcional, i que serà la decisió correcta. Però això és cert en un molt, molt rares ocasions, generalment per a la creació d'empreses de projectes en fase de proves beta. La resta del disseny gràfic i la interfície d'usuari són simplement obligat a complir amb els estàndards de desenvolupament web i estar còmode.

La primera pedra angular de front al dissenyador de la interfície, o el dissenyador - és l'amplada de la disposició del lloc. Després de tot, cal traçar les interfícies per a ella. Intuïtivament hi ha dos enfocaments - ja sigui per fer dissenys separats per a cadascuna de les resolucions de pantalla populars, o pot crear una versió del lloc per a tots els mapes. Les dues opcions serien malament, però primer el primer.

ample estàndard en píxels per al lloc que vostè necessitarà sempre

Abans del desenvolupament del fenomen de masses disseny adaptatiu ha estat el desenvolupament d'un lloc amb milers de píxels d'ample. Aquesta xifra va ser triat per una simple raó - que el lloc va ser col·locat en qualsevol pantalla. I hi ha una certa lògica, però anem a suposar que una persona segueix sent almenys HD-monitor a l'escriptori. En aquest cas, el disseny semblarà petita franja al centre de la pantalla, on tot està modelat en una pila, i en els costats de l'enorme no-espai. Ara anem a suposar que una persona va arribar al seu lloc web des d'una tauleta amb una pantalla de 800 píxels d'ample, i es comprova en la configuració de "Mostra el lloc web de la versió completa." En aquest cas, el seu lloc web també es mostra de forma incorrecta, ja que simplement no hi caben a la pantalla.

A partir d'aquestes consideracions, es pot concloure que una amplada fixa per al disseny, que simplement no encaixen i que desitja trobar una altra manera. Analitzarem la idea d'un disseny diferent per a cada ample de la pantalla.

Dissenys per a totes les ocasions

Si ha triat com a estratègia per crear dissenys per les mides disponibles tota la pantalla en el mercat, llavors el seu lloc serà la més exclusiva d'Internet. Després de tot, avui dia és simplement impossible de cobrir tota la gamma de dispositius en un intent de fer un ajust exacte per a cada opció. Però si es centren en els dispositius més populars resolució del monitor i la pantalla, la idea és bona. El seu únic inconvenient - els costos financers. Després de tot, quan el dissenyador de la interfície dissenyador i programador es veuran obligats a 5 o 6 vegades per fer la mateixa feina, el projecte tindrà un cost de manera desproporcionada originalment plantat a preus econòmics.

Per tant compten amb una gran quantitat de versions per a diferents pantalles pot ser l'excepció que els llocs de-odnostranichniki el propòsit - per vendre un producte i assegureu-vos de fer-ho bé. Bé, si vostè no és un dels Landing, un multi-lloc, és lògic pensar més enllà.

Les mides més populars de llocs

Un compromís entre els dos extrems és un dibuix de l'esquema de tres o quatre mides de pantalla. Entre ells, un ha de ser un disseny per a dispositius mòbils. La resta ha de ser adaptat a la pantalla d'escriptori petit, mitjà i gran. Com triar l'ample de la pàgina? A continuació es presenten les estadístiques de serveis HotLog per a maig de 2017, el que ens mostra la distribució de la popularitat dels diversos resolució de la pantalla del dispositiu, així com la dinàmica de canvi en aquest indicador.

A partir de la taula, és possible aprendre a determinar la mida de la pàgina que voleu utilitzar. A més, es pot concloure que l'actual més comú és el format de pantalla de 1366 per 768 píxels. Aquestes pantalles s'instal·len en un ordinador portàtil pressupost, pel que la seva popularitat és natural. El següent més popular és un monitor d'HD-completa, que és l'estàndard d'or per a pel·lícules, jocs, i, per tant, per crear dissenys de pàgina. A més, a la taula veiem permetre que els dispositius mòbils 360 x 640 píxels, així com diverses formes de realització d'escriptori i pantalles mòbils després.

la disposició de disseny

Així, després d'analitzar les estadístiques, es pot concloure que l'amplada òptima de la pàgina 4 variacions:

1. ordinadors portàtils versió amb 1366 píxels d'amplada.
2. HD-versió completa.
3. 800 píxels en la disposició mida de l'amplada per a la seva visualització en els monitors d'escriptori petits.
4. la versió mòbil de la web - 360 píxels d'ample.

Suposem que vam decidir el que desitja utilitzar la mida del codi font generat per al lloc. Però tal projecte seguiria sent costós. Així que consideri més opcions, aquest cop sense l'ús d'una amplada fixa.

Fer un disseny flexible,

Hi ha un enfocament alternatiu que només hem d'ajustar la mida mínima de la pantalla, i la gran mida dels llocs se li demanarà per cent. En aquest cas, els elements de la interfície com ara menús, botons i logos, es poden definir en termes absoluts, centrant-se en la mida mínima de l'amplada de la pantalla en píxels. Els blocs amb el contingut, per contra, seran estirades d'acord amb l'especificat per cent de l'amplada de l'àrea de pantalla. Aquest enfocament no permet detectar la mida del lloc com limitacions per al dissenyador i el talent per vèncer a aquest matís.

Quina és la proporció àuria, i com utilitzar les pàgines web a la disposició?

Fins i tot en el Renaixement molts arquitectes i artistes van tractar de donar a les seves creacions la forma perfecta i la proporció. Per obtenir respostes a preguntes sobre les implicacions de tals proporcions, es van dirigir a la reina de totes les ciències - matemàtiques.

Des dels dies de l'antiguitat va ser inventat per la proporció en què el nostre ull percep com la més natural i elegant, ja que és ubic a la natura. Descobridor de la fórmula d'aquesta relació va ser un arquitecte grec talent anomenat Fídies. Es calcula que si la majoria de les proporcions es refereix a baix com un tot proporciona una més gran, llavors aquesta proporció es veurà així. Però en aquest cas, si desitja dividir asimètricament objecte. Aquesta proporció més tard va arribar a ser cridada la proporció àuria, que encara no sobreestimar la seva importància per a la història cultural del món.

Tornem al disseny web

És molt senzill - l'ús de la proporció àuria, es pot dissenyar pàgines que seran més agradables a la vista humana. Calculat segons la fórmula de la secció àuria, ens trobem amb el nombre irracional 1,6180339887 ..., però per conveniència es pot utilitzar el valor arrodonit de 1,62. Això vol dir que els nostres blocs de la pàgina han de ser 62% i el 38% de la totalitat, sense importar la mida del codi font generat per al lloc actualment en ús. Exemple es pot veure en el següent esquema:

L'ús de les noves tecnologies

Moderns llocs web de disseny de la tecnologia li permeten comunicar amb precisió idees del dissenyador i el dissenyador, de manera que ara s'ho pot permetre la posada en pràctica de les idees més audaç que en les albors de la tecnologia d'Internet. Ja no es necessita molt trencar-el cap per al que hauria de ser la mida d'un lloc. Amb l'adveniment de les coses com ara bloc de disseny adaptatiu, la càrrega dinàmica de contingut i fonts, desenvolupament de llocs web s'ha convertit moltes vegades més agradable. Després de tot, aquestes tecnologies tenen menys restriccions, tot i que són. Però com vostè sap, sense limitació, no hi hauria art. Es recomana usar un enfocament veritablement creatiu per al disseny - la secció àuria. Amb ell, vostè serà capaç d'omplir de manera eficient i molt bé l'espai de treball, sense importar la grandària o llocs que va demanar a les seves plantilles.

Com augmentar l'espai de treball de lloc

El més probable és que vostè no tindrà espai suficient per donar cabuda a tots els elements de la interfície en el disseny de la petita grandària. En aquest cas, haurà de començar a pensar de forma creativa, o fins i tot més creatiu que ho feia abans.

Màxim espai lliure en el lloc del possible, ocultant la navegació en el menú emergent. Aquest enfocament és lògic utilitzar no només mòbil, sinó també a l'escriptori. Després de tot, l'usuari no necessita tot el temps per veure el que té títols al seu lloc - que ha arribat per al contingut. Un usuari desitja ser respectat.

Un exemple d'una bona manera d'ocultar el menú és el següent disseny (foto de baix).

A la part superior cantonada del vermell àrea, es pot veure una creu, feu clic al menú que s'amaga en una petita icona, deixant a l'usuari a soles amb el contingut del lloc web.

No obstant això, això és opcional, pot deixar la navegació que sempre està a la vista. Però pot ser que sigui un element de disseny bonic, no només una llista d'enllaços en el lloc popular. Utilitza icones intuïtius, a més d'enllaços de text o fins i tot reemplaçar-los. També permetrà al seu lloc a un ús més eficient de l'espai en la pantalla del seu dispositiu.

Millor Web - adaptativa

Si no sap quin triar un disseny per al lloc, tot només per a vostè. Per estalviar en costos de desenvolupament i al mateix temps no perdre l'audiència causa de la mala disposició d'algun dispositiu, utilitzeu el disseny web sensible.

Adaptatiu diu un disseny que es veu en diferents dispositius igual de bé. Aquest enfocament permetrà que el seu lloc sigui clara i fàcil, fins i tot per a un ordinador portàtil, almenys a la tauleta, fins i tot en un telèfon intel·ligent. S'aconsegueix aquest efecte és degut a canvis automàtics a la zona de treball de l'amplada de la pantalla. L'ús de fulls d'estil d'adaptació per al lloc, vostè està prenent la decisió correcta possible.

El que distingeix el disseny adaptatiu de la disponibilitat de les diferents versions del seu lloc web

el disseny de resposta és diferent del lloc mòbil de manera que en aquest últim cas, l'usuari rep un codi HTML, que és diferent de la d'escriptori. Això és un desavantatge des del punt de vista de l'optimització del rendiment del servidor, així com l'optimització de motors de cerca. A més, com més difícil es torna a considerar les estadístiques d'acord a diferents versions del lloc. Un enfocament adaptatiu està desproveïda de deficiències.

Adaptabilitat per a diferents dispositius s'aconsegueix a causa de l'amplada de disseny o percentatges a través de blocs de transport en l'espai disponible (en el pla vertical en lloc del telèfon intel·ligent horitzontal en un escriptori), o els dissenys individuals mitjançant la creació de diverses pantalles.

Vostè pot aprendre més sobre el disseny de resposta i el desenvolupament del que pugui dels llibres.