Como você vence o desafio de projetar para imóveis de tela grande? [fechadas]


10

Essa pergunta é um pouco mais subjetiva, mas espero ter uma nova perspectiva. Estou tão acostumado a projetar para um determinado tamanho de tela (normalmente 1024x768) que acho que esse tamanho não é um problema. Expandir o tamanho para 1280x1024 não comprará espaço suficiente na tela para fazer uma diferença significativa, mas me dará um pouco mais de espaço para respirar. Basicamente, acabei de expandir meu "tamanho da grade" e o mesmo design básico para a tela um pouco menor ainda funciona.

No entanto, nos últimos dois projetos, meus clientes estavam usando telas de 1080p (1920x1080) e queriam soluções para usar o máximo possível desse espaço. A largura de 1920 pixels fornece pouco menos do dobro da largura com que estou acostumada, e a tela ampla faz com que alguns dos meus velhos métodos de abordagem de design não funcionem tão bem. O problema que encontro é que, quando recebo tanto espaço, sou confrontado com alguns problemas importantes.

  • Quantas colunas devo usar? O formato amplo se presta a uma divisão de 3 colunas com uma divisão 2: 1: 1 (ou seja, a coluna de conteúdo maior que as outras duas). No entanto, se eu for com três colunas, o que faço com essa coluna extra?
  • Como faço para usar com eficiência o espaço na tela? Existe uma tentação de colocar tudo na tela de uma vez, mas muita informação realmente torna o aplicativo mais difícil de usar. O espaço em branco é importante para ajudar a entender informações complexas, mas demais faz com que os conceitos relacionados pareçam muito separados.
  • Normalmente, trabalho com aplicativos da Web que possuem dados complexos, e a visualização e a apresentação são essenciais para entender os dados brutos. Quando o usuário também possui uma tela grande (pelo menos 24 "), algumas informações ficam fora do alcance dos olhos e você precisa mover o ponteiro a uma longa distância. Como garantir que tudo o que é necessário permaneça dentro dos pontos visuais visuais?
  • Sites simples como blogs realmente se saem melhor quando a largura é limitada, o que resulta em muito desperdício de imóveis. Eu meio que me pergunto se ter a caixa de texto e a visualização de texto lado a lado seria um grande benefício para o lado administrativo desse tipo de tela? (Divisão em duas colunas 1: 1).

Para suas respostas, eu sei que quase tudo no design é "depende". O que estou procurando é:

  • Princípios gerais que você usa
  • Como sua abordagem ao design mudou

Estou descobrindo que tenho que me treinar para trabalhar com esse formato diferente. Cada aumento na resolução em que trabalhei até agora tem sido de cerca de 25%: 640 a 800 (aumento de 25%), 800 a 1024 (aumento de 28%) e 1024 a 1280 (aumento de 25%). No entanto, o salto de 1280 para 1920 é um bom aumento de 50% no espaço - o equivalente a um salto de 640 direto para 1024. Não havia tamanho médio comumente usado para ajudar a aprender as lições mais gradualmente.


Você poderia aumentar os controles da interface do usuário para preencher os espaços vazios ...?
FrustratedWithFormsDesigner

@ Frustrated: Isso não anularia o objetivo, a menos que você estivesse projetando para, digamos, uma tela de toque?
Michael K

@ Michael: bem, o OP não parece querer alterar o número de controles visíveis, pois tornaria o programa mais difícil de usar e também não gosta de ter espaço vazio. Se não houver novos recursos para preencher o espaço, o espaço precisará ser preenchido com ...?
FrustratedWithFormsDesigner

2
É mais uma questão de tentar expandir minha mente para novos controles e maneiras de interagir com o site. Apenas fazer tudo maior derrota o objetivo. Então você tem a "síndrome do grande botão vermelho brilhante" ou o texto que parece estar lendo um cabeçalho grande. Ao tentar equilibrar as preocupações do design, é realmente um problema complexo.
Berin Loritsch

11
@Berin: Se eles fizeram uma solicitação específica para o tamanho da interface de tamanho super e essa é a ÚNICA mudança importante, diga a eles que você tem preocupações com o layout e o design e pergunte se eles têm idéias sobre como o espaço poderia ser melhor utilizado. Afinal, eles são os usuários e devem ter um motivo para fazer essa solicitação específica. Talvez eles digam "coloque um widget do painel no espaço vazio" ou algo assim ... envie uma captura de tela da maquete com um enorme espaço em branco e um texto dizendo "O que você quer aqui?" Verifique se suas preocupações sobre esse design são conhecidas.
FrustratedWithFormsDesigner

Respostas:


1

É assim que eu abordaria esse problema.

Eu começaria dividindo meus dados em blocos lógicos. Eu até poderia criar um arquivo ascx diferente para cada bloco lógico. Cada bloco saberia como gostaria de ser exibido (larguras mín. / Máx.). Eu faria isso porque não gosto de reescrever código e, se houver uma chance de o aplicativo precisar ser expandido para oferecer suporte a vários tamanhos de resolução, isso ajudaria a facilitar o controle por controle.

Em seguida, eu criaria uma nova folha de estilos para uma resolução maior. Faça botões e rumo maiores. Adicione mais espaço em branco ao redor dos elementos. Dessa maneira, alternar entre os dois tipos de resolução é apenas uma troca de folhas de estilo.

Agora vem a parte difícil, o layout. Como você disse, o layout será muito diferente com a quantidade de imóveis. A resposta copiada seria permitir que o usuário coloque os elementos onde quiser, como uma página do iGoogle. O usuário pode escolher 2 ou 3 colunas como achar melhor. Como não sei que tipos de tela você está construindo, não sei se isso realmente funcionaria para você.

A segunda resposta copiada seria contratar um especialista em interface do usuário para ajudá-lo a criar essas páginas. Tendo trabalhado com um especialista em UI no passado, posso dizer que vale a pena 100% obter uma opinião de especialistas sobre coisas como essa. Eles podem identificar problemas e sugerir soluções antes que o cliente veja o produto.

Se eu tivesse que fazer isso sozinho, colocaria itens fixos nas laterais e aumentaria a área do meio para preencher o restante do espaço. Todos os dados que podem crescer preenchem a seção do meio.

Não tenho certeza do quanto isso é útil para você, mas espero que lhe dê algumas idéias.


Esta é provavelmente a resposta mais razoável que recebi da interface do usuário e dos programadores para esta pergunta. É muito mais útil do que "tornar tudo maior", como foi o que as pessoas da interface do usuário me disseram. NOTA: aspx é um termo específico da tecnologia, mas dividir a interface do usuário em arquivos separados é a abordagem correta.
Berin Loritsch


2

Não sou especialista em interface do usuário, mas uso uma tela de 1920 x 1080 todos os dias com o Eclipse. O Eclipse tem uma interface muito facilmente configurável, e aqui estão algumas das minhas observações ao alternar entre 1280 e 1920:

  • Nas duas resoluções, quero ver a janela em que estou trabalhando no mesmo tamanho. Na resolução menor, eu tendem a esconder os painéis extras, enquanto na resolução mais alta, eu coloco mais painéis.
  • Eu preferiria botões um pouco maiores. Eles ocupariam menos espaço proporcionalmente no monitor maior e tornariam as ações do mouse mais rápidas.
  • Costumo expandir visualizações para usar a tela inteira, ou seja, código à esquerda, visualização à direita. Isso acaba sendo um formato de duas colunas. Fora isso, eu uso 3 colunas com um rodapé:
    1. Esquerda: Navegação de arquivos
    2. Centro: Código (o maior, provavelmente com 2/3 da largura da tela)
    3. Direita: navegação e tarefas de código
    4. Rodapé: Status (console, servidores etc. Muito curto, talvez 1 / 5-1 / 6 de altura da tela)

Às vezes, também coloco visualizações e controladores próximos um do outro no modo de 2 colunas, mas isso é definitivamente específico do programador. :)

Quando estiver em uma tela maior, quero usá-la para ver o máximo de informações possível, além de ser fácil de encontrar. Mais espaço em torno dos componentes ajuda a diferenciar as coleções de informações. Os ícones nas guias são uma maneira de ajudar a atrair a atenção para o significado de cada componente.

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.