Design de resolução de tela Retina: dicas e truques para Designers de interface do Usuário

Vandelay Design pode receber compensação de empresas, produtos e serviços cobertos em nosso site. Para mais detalhes, consulte nossa página de divulgação.

com o advento dos smartphones de alta resolução e do retina iMac, está se tornando evidente que os designers móveis da web & precisam considerar telas retina em seu processo de design. Mais dispositivos estão saindo da prateleira com uma resolução de tela retina que agrupa vários pixels no mesmo espaço físico da tela.Isso significa que o conteúdo ficará mais nítido se projetado corretamente. Então, como um designer de interface do Usuário deve estar trabalhando para lidar com telas retina? Qual tecnologia atual está disponível e qual é a melhor maneira de lidar com a maior base de usuários?

gostaria de cobrir os métodos mais confiáveis para lidar com telas retina / hi-DPI e criar interfaces que funcionem. Se você seguir junto com este guia, você vai ter certeza de ir embora com dicas aplicáveis e soluções práticas para o enigma retina display.

13" e 15" Macbook Resoluções

Tratamento de Retina Dispositivos

O primeiro passo é verificar o ecrã exibe com base em hi-DPI de resolução. Agora que alguns dispositivos têm tamanhos @3x, você deve verificar várias resoluções de tela antes de exibir imagens. Você sempre pode estar seguro com imagens @3x, mas elas também são muito maiores e exigem mais largura de banda para download.

esta verificação pode ser feita com srcset, mas também existem muitos métodos diferentes usando JavaScript. Confira este tutorial para mais informações.

um bom truque para ícones prontos para retina é usar um iconfont livre em vez de imagens de bitmap. Font Awesome é uma escolha muito popular que é totalmente gratuita, de código aberto, e fornece uma biblioteca de ícones para escolher.

Font awesome icons homepage

outra opção é usar imagens SVG em vez de bitmaps. Esses SVGs são vetores totalmente escaláveis que ganharam lentamente suporte total ao navegador.

caniuse svg check

a única dificuldade é projetar SVGs do zero e aprender a exportá-los corretamente, o que pode ser mais complicado do que apenas usar PNGs ou JPEGs. Além disso, o SVG não é útil para imagens detalhadas, como fotografias, pois é realmente um tipo de arquivo vetorial.

mas SVGs têm mais espaço para Animação personalizada que exibe nítido em todas as resoluções.

o objetivo é decidir tipos de arquivos e verificações do navegador caso a caso. Algumas imagens são melhores como JPGs e alguns sites são melhores com verificações de retina CSS vs JS. Eu pessoalmente prefiro CSS, mas recomendo tentar os dois para ver o que você prefere.

imagens de fundo CSS

a maneira mais simples de lidar com fundos personalizados é com imagens de fundo retina usando a propriedade Tamanho de fundo.

esta é muitas vezes a maneira mais rápida de verificar imagens retina, porque eles podem trabalhar em todos os dispositivos, mesmo dispositivos não-retina. Não custa nada ter uma imagem super otimizada em CSS se você não se importar com os tempos de carregamento estendidos.

o método alternativo seria carregar diferentes arquivos CSS com base em verificações de JavaScript ou verificações de servidor de back-end.

mas talvez a melhor maneira de lidar com CSS seja com uma consulta de mídia CSS retina. Essas consultas verificam a densidade de pixels e carregam imagens de fundo diferentes para esses dispositivos(também ajustando o tamanho do plano de fundo).

CSS é geralmente a maneira mais simples de lidar com imagens, mas não pode ser usado para imagens in-post. Estes são muito mais complicados e devem ser carregados na resolução mais alta possível ou atualizados com JavaScript.

se você não está tão preocupado com os tempos de carregamento, basta ir com a maior resolução para todas as suas imagens. Caso contrário, você desejará fazer upload de imagens @2x e @3x manualmente com uma biblioteca JavaScript gratuita, como Retina.js.

JavaScript verifica

se você quiser mais controle sobre o conteúdo de resolução retina, precisará de JavaScript. A maioria dos visitantes executa o código JS e é a maneira mais fácil de detectar resoluções com métodos JavaScript integrados.

você encontrará muitos tutoriais gratuitos para detectar telas Retina JavaScript, mas isso é apenas metade da batalha. Depois de saber a resolução da tela, você precisará atualizar as imagens de acordo.

eu recomendo usar uma solução pré-construída para economizar tempo e dores de cabeça durante o processo.

os desenvolvedores nunca querem reinventar a roda. Então, se alguém já resolveu esse problema, por que você deveria se preocupar em Começar do zero?

a única razão para rolar sua própria solução é se você precisar de Funcionalidade Personalizada. Nesse caso, confira os links abaixo para ver como você pode implementar uma verificação retina JS personalizada.

caso contrário, continue rolando e pegue uma das bibliotecas JS gratuitas que listei na próxima seção.

  • 5 Formas de Suporte de Alta Densidade Retina Apresenta
  • Fácil 2x retina imagens com jQuery
  • Servir Retina de Gráficos Para o Seu Site

Open Source Retina Ferramentas

Existem dezenas de costume retina ferramentas para a detecção e gestão de retina imagens. Estes nem sempre são os mais fáceis de implementar, mas podem tornar seu público muito mais feliz a longo prazo.

Então, qual você deve escolher para começar? Realmente não há resposta errada.

eu gostaria de fornecer algumas das ferramentas mais populares e dar-lhe a chance de escolher o que funciona melhor para o seu site.

Retina.js

retinajs open source javascript

A Retina.a biblioteca js é uma base de código JavaScript de código aberto gratuita que detecta automaticamente resoluções retina e tamanhos de tela. O script também verifica se há uma imagem de alta resolução existente seguindo as Diretrizes de design da apple e, em caso afirmativo, mudará para exibir a versão de alta resolução.

as Convenções de nomenclatura seguem um sufixo de @2x antes do tipo de arquivo. Então, se você tem my_image.jpg Você também vai querer ter [email protected] na mesma pasta.

este é um dos scripts mais simples porque realmente é apenas plug and play. Mas também requer algum conhecimento do conteúdo da retina para que funcione perfeitamente. Se você está apenas começando, este é realmente um ótimo script e não pode errar com a funcionalidade padrão.

jQuery Retina

jquery lightbox plugin retina

Outra opção é jQuery Retina alimentado pela biblioteca jQuery. Isso funciona um pouco diferente porque é executado em atributos de dados HTML5.

você simplesmente passa um valor de URL de imagem para o atributo data-retina em cada tag de imagem que requer uma alternativa de imagem retina. Ele requer codificação mais rígida, mas também é o mais fácil de reverter com opções personalizadas. A página GitHub tem mais informações com etapas básicas para instalação.

WP Retina 2x

wp wordpress retina @2x plugin

Se você é um usuário do WordPress, em seguida, WP Retina 2x pode ser uma ótima alternativa para adicionar um LIGHTBOX plugin a partir do GitHub. O plugin WP Retina funciona diretamente com o WordPress para verificar se há imagens do tamanho da retina e as substitui automaticamente.

é outra solução plug-and-play onde você acabou de ativar o plugin e deixá-lo funcionar. Super fácil de usar e definitivamente uma solução limpa para usuários WP não técnicos.

denso.js

densejs plugin jquery

o que eu mais gosto no denso.a biblioteca js é o suporte para diferentes proporções de dispositivos. Nem todos os monitores retina são simplesmente 2x o tamanho. Outras proporções podem incluir 1,5 x ou 3x.

este plugin detecta automaticamente qual densidade de tela está sendo usada e ajusta suas imagens de acordo. Existem muitas opções, então a personalização não é problema. Confira o GitHub para começar e os documentos online para obter mais informações.

se você estiver procurando por mais recursos de exibição retina, também recomendo esses plug-ins.

  • CSS Media Queries para iPads & iPhones
  • Adaptativa de Imagens em HTML
  • Swipebox jQuery
  • Grails Retina Imagens Plugin
  • Escolha Uma melhor resposta de Imagem Solução

Espero que este material oferece mais do que suficiente para ajudá-lo a lidar imagens e media no telas retina. Como o CSS será dimensionado automaticamente para todas as resoluções, você realmente não precisa se preocupar com coisas como margens ou larguras de página.

mas a mídia na página, como ícones e fotos, precisará ser projetada sob medida para dispositivos retina.

Deixe uma resposta

O seu endereço de email não será publicado.