Introdução
Com tantos dispositivos no mercado, uma interface de usuário sensível é um mandato. É geralmente uma parte da exigência para qualquer nova aplicação que está sendo construído. A capacidade de resposta da interface do usuário também podem ser necessários para diferentes resoluções de tela em diferentes laptops, não apenas para telefones ou tablets. Existem muitas soluções disponíveis para fazer um site responsivo; um exemplo seria a utilização de uma Os pontos importantes para se lembrar quando projetar aplicativos sensíveis é que a experiência deve ser o mesmo, se o usuário visualiza a página em um laptop ou qualquer outro dispositivo móvel.Quando falamos sobre a experiência de ser o mesmo, os seguintes pontos merecem destaque:
Layout da Página
Se a página na tela de um laptop tem três colunas em uma linha, a mesma interface do usuário representado em um tablet pode ter duas colunas em uma linha e um telefone pode ter uma coluna;essa determinação baseia-se na largura do dispositivo. A UI para comprimidos ou telefones exibe uma ou duas colunas consecutivas e envolve as outras colunas para a próxima linha, como mostrado na Figura 1:
Figura 1: Exemplo de tela layouts
Isso traz o conceito de grades. Grids são geralmente utilizados para definir os layouts de páginas que utilizam as linhas e colunas dentro do qual o conteúdo está hospedado. Uma opção popular para uma grade é Bootstrap, que tem características que podem ser usadas facilmente. Em combinação com o Bootstrap, consultas de mídia também são usados para definir os pontos de quebra.
Tamanho da Imagem e Qualidade
O tamanho da imagem necessária em uma tela de laptop é de um tamanho maior e maior resolução;Se uma resolução menor é esticado para caber em uma tela grande, pode parecer distorcida. Como uma prática recomendada, usar as mesmas imagens, ou imagens diferentes de tamanhos diferentes para diferentes resoluções.
Tipos de fontes e tamanhos
Um cabeçalho com um tamanho de fonte de 70 pixels e peso da fonte 'bold' vai ficar bem em uma tela de laptop, mas não vai ficar bem em um tablet ou um celular. É também importante que as fontes são também dimensionado / enviesada com base no dispositivo que está a utilizar.
Em uma tela maior, poderemos exibir muitos conteúdos que haja espaço disponível, mas em telas menores, como um tablet ou telefone, não haverá espaço suficiente para caber todos os conteúdos. Então, seletivamente também pode optar por exibir ou ocultar seções de dados.
Navegação
Em telas maiores, temos um menu full-blown para a navegação, mas em telas menores, porque a largura é menor, o menu só é apresentado como um ícone e, quando clicado, aparece o menu vertical. Isso pode ser implementado usando o recurso navbar responsivo de Bootstrap, e outros plugins também estão disponíveis.
Vamos entender os conceitos anteriores com a ajuda de exemplos. Temos um Cascading Style Sheet (CSS) definido abaixo; que é dependente da resolução do dispositivo. Estas são as perguntas da mídia usados para definir pontos de quebra com base na largura da tela:
1. / * consultas de mídia
2. --------------------------------------------- * /
3.media só tela e (min-width: 320px) {
4. .home .hero .hero-img {
. 5 background: url (../ img / trans-overlay.png)
centro de repetição,
url (../ img / home-hero.png)
50% inferior no-repeat, # bbdbf5;
6.}
7. .home .content .landing-featured .Left {
. 8 font-size: 20px;
9. color: # ffb612;
10. width: 10%;
11. height: 100%;
. 12 margin: 20px 0 0 0;
13.}
14.}
15.media só tela e (min-width: 480px) {
16. .home .content-.landing destaque .Left {
17. font-size: 34px;
18. margin: 12px 0 0 0;
19. }
20.}
21.media só tela e (min-width: 768px) {
22. .home .hero .hero-img {
. 23 background: url (../ img / home-hero.png)
inferior central no-repeat, # bbdbf5;
24. background-position-x: 275px;
25.}
26. .home .content-.landing destaque .Left {
27. width: 7%;
28. margin: 15px 0 0 0;
29.}
30.}
31.media só tela e (min-width: 992px) {
32. .home .hero .hero-img {
. 33 background: url (../ img / home-hero.png)
130% inferior no-repeat, # bbdbf5;
34.}
35. .home .content .landing-featured .Left {
. 36 font-size: 28px;
37. width: 13%;
. 38 margin: 20px 0 0 0;
39.}
40.}
41.media só tela e (min-width: 1200px) {
42. .home .hero .hero-img {
. 43 background: url (../ img / home-hero.png)
inferior central no-repeat, # bbdbf5;
44. fundo-posição-x: 100%;
45.}
46.
47. .home .content .landing-featured .Left {
48. font-size: 40px;
49. width: 15%;
50. margin: 14px 0 0 0;
51.}
52.}
53.media só tela e (min-width: 1400px) {
54. .home .hero .hero-img {
55. background: url (../ img / home-hero.png)
100% inferior no-repeat, # bbdbf5;
. 56 }
57.}
Linha 3 define a largura de tela mínima para ser 320px e Linha 15 define o CSS para a largura de tela mínima de 480px. Estes são basicamente os pontos de interrupção; em outras palavras, o CSS entre as linhas 3-15 é aplicada a um dispositivo que tem a largura entre 320px e 480px. Se a largura do dispositivo é maior do que 480px, o CSS é aplicado a partir de Linhas 16-19, e assim por diante.
Um ponto importante a observar aqui é nem todas as propriedades são alteradas entre as duas resoluções. Se você olhar para a CSS de exemplo para o 320 min largura (linhas 7-12) e para o 480 min largura (linhas 16-19), você verá as seguintes afirmações:
| 320px (min-width) | 480px (min-width) |
. 7 .home .content .landing-featured .Left { | 16. .home .content-.landing destaque .Left { |
A cor, largura, altura e propriedades não são substituídos; isso significa que eles vão seguir em 480 resolução também até substituído. No exemplo, estamos usando o min-width para definir o ponto de interrupção; também pode utilizar-max para a mesma largura.
Note-se que o tamanho da fonte foi aumentada de 20px 34px como a largura aumenta. Isto é feito de modo semelhante para as imagens de fundo também; para algumas resoluções que é repetida, para alguns, é 130% esticada, e para alguns é como é.
Resumo
Neste artigo, nós cobrimos os conceitos básicos que podem ajudar-nos a alcançar a interface do usuário sensível que é compatível com vários dispositivos. Estes são os princípios básicos de design que precisam ser analisadas e decididas antes de começar qualquer aplicação. Estes devem ser uma parte da exigência, porque a clareza sobre os diferentes dispositivos suportados ajudará a criar o layout de acordo e aumentar melhor UI e produtividade do desenvolvedor.
