Ola, somos Arume

Desenvolvemos páxinas web, aplicacións para móbiles, capas de realidade aumentada e aplicacións para Facebook. Apaixónanos a informática e somos uns perfeccionistas incurables; por eso nos nosos proxectos utilizamos estándares.

tel. 625 519 694

Mendaña de Neyra, 34, 3º B, 15008, A Coruña

Autenticarse

Rexistrarse. Esqueceches o teu contrasinal?

Etiquetas

Saltar as etiquetas

Subscríbete ás RSS

Estás en:

  • Inicio >
  • Blog >
  • Iconas de aplicación e imaxes por defecto en iOS

Iconas de aplicación e imaxes por defecto en iOS

22 Xuñ 2012 por Cruz

Comentarios: 0

iOS

Vivimos nunha época na que a aparencia é importante, gústenos ou non, todo o mundo se fai unha opinión a partir da aparencia e sobre todo da primeira impresión. No mundo das aplicacións non é distinto, se temos unha aplicación moi boa, pero cunha imaxe pouco coidada, corremos o risco de que algúns usuarios nin se molesten en probala por pensar que é cutre ou que a proben partindo dunha valoración baixa.

O primeiro que verá un posible usuario das nosas aplicacións para iPhone/iPad é a icona que aparece en App Store. Para asegurarnos unha visualización óptima, é aconsellable utilizar as ferramentas que nos ofrece Apple para optimizar as iconas.

Da mesma forma, existe a posibilidade de configurar unha imaxe por defecto que será a que se vexa na aplicación mentres se carga.

Neste artigo describiremos os distintos formatos que se deben usar para estas dúas imaxes.

Iconas de aplicación

Antes de deseñar as iconas é recomendable ler a guía de Apple na que atoparemos información tan útil como as zonas de seguridade que se deben deixar en cada bordo, que non é necesario redondear as esquinas ou que se crea automaticamente o reflexo.

Volvendo ós formatos, Apple permítenos deseñar unha icona para cada unha das situacións nas que se vai a mostrar. As iconas deben ser sempre .png e o que varía son as dimensións.

No Info.plist existe unha propiedade CFBundleIcons que nos permite decidir o nome que usaremos para o ficheiro. Se modificamos esta propiedade para pór "EstaIcona" os ficheiros que creemos deberán chamarse "EstaIcona.png". Podemos prescindir de modificar o CFBundleIcons e as nosas imaxes deberán chamarse "Icon.png" (así o faremos neste artigo).

NOTA: É importante respectar as maiúsculas e minúsculas xa que esta funcionalidade é sensible a maiúsculas.

Para cada icona sempre podemos engadir a súa versión para dispositivos Retina simplemente engadindo @2x ó final do nome.

Táboa de dimensións e nome das iconas
TipoNomeDimensiónsDispositivo
Icona de aplicaciónIcon.png57x57 píxelesiPhone
Icona de aplicación para RetinaIcon@2x.png114x114 píxelesiPhone
Icona de aplicaciónIcon-72.png72x72 píxelesiPad
Icona de aplicación para RetinaIcon-72@2x.png144x144 píxelesiPad
Configuración e resultados de procuraIcon-Small.png29x29 píxelesiPhone/iPad
Configuración e resultados de procura para RetinaIcon-Small@2x.png58x58 píxelesiPhone/iPad
Resultados de procuraIcon-Small-50.png50x50 píxelesiPad
Resultados de procura para RetinaIcon-Small-50@2x.png100x100 píxelesiPad

Imaxes por defecto

É a imaxe que se mostra na pantalla mentres se cargan as configuracións iniciais. En aplicacións que carguen moi rápido poida que non chegue a verse, por iso non se debe pór información importante nela.

En aplicacións que tarden moito en cargar é importante crear esta imaxe para que o usuario vexa algo e non crea que o seu dispositivo se quedou colgado (pantalla en negro).

Do mesmo xeito que coas iconas de aplicación, no Info.plist existe unha propiedade para cambiar o nome por defecto desta imaxe: UILaunchImageFile. Se modificamos esta propiedade para pór "ImaxePorDefecto" os ficheiros que creemos deberán chamarse "ImaxePorDefecto.png". Podemos prescindir de modificar o UILaunchImageFile e as nosas imaxes deberán chamarse "Default.png" (así o faremos neste artigo).

NOTA: É importante respectar as maiúsculas e minúsculas xa que esta funcionalidade é sensible a maiúsculas.

Tamén poderemos engadir iconas para dispositivos Retina engadindo @2x ó final do nome.

O iPhone só admite imaxe para a orientación por defecto (Portrait), pero no caso do iPad permítese crear imaxes para as distintas orientacións.

A nomenclatura que se debe usar para as imaxes é: <Nome><orientación><escala><dispositivo>.png

  • Nome: O que se puxo en UILaunchImageFile, senón "Default".
  • Orientación (valor opcional): Se non se utiliza será para Portrait. A lista de opcións é:

    • -PortraitUpsideDown
    • -LandscapeLeft
    • -LandscapeRight
    • -Portrait
    • -Landscape
  • Escala (valor opcional): Sen valor para a resolución normal ou engadindo "@2x" para dispositivos Retina
  • Dispositivo: cos valores:

    • ~iPhone
    • ~iPad

En resumo, se só creamos "Default.png" será a imaxe que se usará para os dous dispositivos, todas as orientacións e con e sen Retina. Se queremos podemos ir engadindo as seguintes imaxes específicas:

  • Default@2x.png: para dispositivos con Retina.
  • Default~iPhone.png: para iPhone
  • Default@2x~iPhone.png: para iPhone con Retina.
  • Default-PortraitUpsideDown.png, Default-LandscapeLeft.png, Default-LandscapeRight.png, Default-Portrait.png, Default-Landscape.png: para as distintas orientacións do iPad.
  • Default-PortraitUpsideDown@2x.png, Default-LandscapeLeft@2x.png, Default-LandscapeRight@2x.png, Default-Portrait@2x.png, Default-Landscape@2x.png: para as distintas orientacións do iPad Retina.

Non é necesario engadir ~iPad posto que se non o atopa collerá a que non ten modificador.

Para finalizar déixovos as medidas que deben ter estas imaxes:

Táboa de dimensións para as imaxes por defecto
DispositivoOrientaciónsDimensiónsDimensións Retina
iPhonePortrait320x480 píxeles640x960 píxeles
iPhone 5Portrait640x1136 píxeles
iPadPortrait, PortraitUpsideDown768x1004 píxeles1536x2008 píxeles
iPadLandscape, LandscapeLeft, LandscapeRight1004x768 píxeles2008x1536 píxeles

Comentarios

0 comentarios. Comentar.

Comentar

Comentar de forma anónima

Podes comentar poñendo calquera nome ou alcume, exceptuando os nomes de usuarios rexistrados. Máximo de 50 caracteres.

Comentar como usuario rexistrado

Rexistrarse. Esqueceches o teu contrasinal?