O melhor pedaço da Maçã.

Design de interface para iOS: xScope

Abençoado seja o xScope.

Publicidade

Este aplicativo para Mac é uma ajuda e tanto para testar a interface de apps em iPads e iPhones/iPods touch, além de ter um kit de ferramentas que complementam suas funções no próprio desktop.

Espelhar

xScopeEsta função de “espelhar” sua tela nos iGadgets é a grande estrela do xScope, pois você pode ir editando a interface — no Photoshop, por exemplo — e acompanhar as mudanças de imediato na tela do iPhone (Retina ou não) ou do iPad.

Pra que isso serve? As telas do iPhone/iPad podem ter uma leve variação de cores, brilho e contraste, deixando a mesma imagem excelente no seu monitor, mas um tanto diferente na tela menor. Além disso, principalmente no caso do Retina Display, não adianta deixar o zoom com 50% ou redimensionar a imagem: você só verá o resultado final no próprio iPhone 4/4S (e tudo indica que em breve também no iPad 3).

Houve um tempo em que, para fazer esses testes, eu exportava a imagem, enviava para o iPhone/iPad e via no próprio álbum — também conhecido como “método pré-histórico”, hehe! Depois cheguei a usar o Review, um app que só funcionava no iPhone, era todo bugado e, sem explicações, sumiu da App Store.

Apesar de conhecer outros aplicativos com essa função de mirroring, queria um específico para arrumar os pixels fielmente e me ajudar nesse tipo de teste — ou prévia, se preferirem.

O xScope é matador nesse critério.

Publicidade

Primeiro, porque a conexão entre as máquinas é muito fácil: abrir o aplicativo no Mac e, no app do iPhone (ou iPad) selecionar o nome do seu desktop. A partir daí você “encaixa” o pedaço da tela que quer fixar no mobile, trava com o cadeadinho da interface e pode sair editando.

O espelhamento não é em tempo real, então rola um delay, mas que realmente não interefe na ideia de acompanhar as mudanças. Os pixels são fielmente representados para nenhum designer chato exigente botar defeito.

Dimensions

Além do “Mirror”, o xScope deixa um conjunto de ícones na barra de menus do Mac OS X para usar a qualquer momento, como o Dimensions.

A ideia é que você posicione o cursor sobre uma imagem, espaço ou qualquer área delimitada na tela para ele passar as dimensões em pixels. Isso facilita bastante para ver o tamanho de um banner num site, por exemplo, ou mesmo medir a largura/altura de uma imagem qualquer.

Rulers

Essa tem a função de colocar réguas de pixels “por cima” da tela para medir algum espaço, permitindo mudar sua posição, tamanho e ângulo para ajustar no item que você queira medir.

Screens

Deixa uma moldura na tela seguindo a resolução de diversos devices — iPhone (com ou sem Retina Display) na vertical ou horizontal, iPad, Android e até em monitores de polegadas diversas. No caso no iPhone, por exemplo, você pode colocar a moldura em torno da imagem que quiser e adicionar guias visuas da GUI do iOS, como status bar, teclado e outras.

Loupe

A “Lupa” nada mais é que… uma lupa. A ideia é dar um belo zoom onde o cursor estiver posicionado (ou onde a janela estiver, dependendo da configuração) para ver a cor do pixel centralizado na seleção.

Guides

O nome deste item também não deixa muita dúvida, adicionando guias sobre a tela para ajudar em alinhamentos, medidas, etc.

Frames

A função posiciona uma área delimitada sobre a tela, podendo marcar o espaço de um banner, por exemplo. Essa área também pode ser dividida em partes (grids), dependendo do uso final, e é possível salvar, carregar e criar mais de uma caixa na mesma tela.

Crosshair

Pra completar o kit, esse é o mais básico, marcando a posição do cursor com a distância vertical e horizontal — coordenadas x, y — a partir do primeiro pixel da tela ou de um ponto específico.

·   ·   ·

Eu disse que era uma ajuda e tanto para facilitar a etapa de design de apps e também de sites ou qualquer criação gráfica produzida num Mac. O bichinho da Iconfactory custa US$30 na Mac App Store [8,4MB; requer o OS X 10.6.6 ou superior] e seu auxiliar xScope Mirror é gratuito [~800KB; requer o iOS 4.0 ou superior] e universal para iPads e iPhones/iPods touch. Lembre-se: é um investimento.

Confiram as outras dicas de design de interface aqui do site! 😉

Ver comentários do post

Compartilhe este artigo
URL compartilhável
Post Ant.

↪ Apple implementa uma série de novidades e melhorias na iTunes Store japonesa

Próx. Post

Apple começa a contratar profissionais em Israel, onde empresa abrirá um centro de pesquisas

Posts Relacionados