Comunitat DSTSC
Publicat a Comunitat DSTSC (https://comunitatdstsc.diba.cat)

Inici > Splash corporatiu

Splash corporatiu

Taula de continguts 
  • 1. Mides segons SO
    • 1.1. Android
    • 1.2. iOS
  • 2. Imatge 9-patch
  • 3. Entregables

En una aplicació mòbil el splash és la imatge que surt en el lapse de temps entre que l'usuari clica la icona de l'app i es carrega l'aplicació. Aquesta imatge pot no arribar a sortir mai, pot estar uns pocs mil·lisegons o varis segons segons l'aplicació.

screen-iphone-portrait.png

Per a una correcte visualització en tots els dispositius cal generar varies imatges segons la mida, proporcions i resolució de cada dispositiu.

1. Mides segons SO

1.1. Android

  • screen-hdpi-landscape.png: 800x480 píxels
  • screen-hdpi-portrait.png: 480x800 píxels
  • screen-ldpi-landscape.png: 320x200 píxels
  • screen-ldpi-portrait.png: 200x320 píxels
  • screen-mdpi-landscape.png: 480x320 píxels
  • screen-mdpi-portrait.png: 320x480 píxels
  • screen-xhdpi-landscape.png: 1280x720 píxels
  • screen-xhdpi-portrait.png: 720x1280 píxels

1.2. iOS

  • screen-ipad-landscape-2x.png: 2008x1536 píxels
  • screen-ipad-landscape_1024x768.png: 1024x768 píxels
  • screen-ipad-portrait-2x.png: 1523x2008 píxels
  • screen-ipad-portrait_768x1024.png: 768x1024 píxels
  • screen-iphone-landscape-2x.png: 960x640 píxels
  • screen-iphone-landscape.png: 480x320 píxels
  • screen-iphone-portrait-2x.png: 640x960 píxels
  • screen-iphone-portrait-568h-2x.png: 640x1136 píxels
  • screen-iphone-portrait.png: 320x480 píxels
  • screen-ipad-landscape_2048x1536.png: 2048x1536 píxels
  • screen-ipad-portrait_1536x2048.png: 1536x2048 píxels

2. Imatge 9-patch

Aquesta és una solució específica per a la gran varietat de dispositius Android que consisteix en crear una imatge central i després permetre estirar el marge de la imatge sense deformar la part central per adaptant-se a diferents proporcions de pantalla sense deformar la imatge central.

Per generar una imatge ajustable 9-path cal deixar una vora transparent de 1px i després marcar amb 4 píxels negres (#000000) els punts d'expansió. El sistema ajustarà automàticament la imatge expandint i deformant la zona que defineixen els quatre punts negres i mantindrà intacte i sense deformació la zona central.

Per tant, una imatge de 100x100px expandible en realitat ocuparà 102x102px i tindrà un marc transparent de 1px pels quatre cantons amb quatre píxels negres que marcaran els límits de la zona d'expansió.

Exemple:
azv2v.png

3. Entregables

  • Fitxer o fitxers de treball amb capes .psd o vectorial .ai
  • 8 PNGs 24 bits (no alpha) amb les mides per a Android.
  • 8 PNGs 24 bits (no alpha) amb les mides per a Android versió 9-patch.
  • 9 PNGS 24 bits (no alpha) amb les mides per a iOS.
Categories: 
Disseny i maquetació web
Categories: 
Aplicacions mòbils
Categories: 
Apps i mobilització
AdjuntMida
screen-hdpi-landscape.png [1]30.03 KB
screen-hdpi-portrait.png [2]46.49 KB
screen-ldpi-landscape.png [3]9.64 KB
screen-ldpi-portrait.png [4]15.37 KB
screen-mdpi-landscape.png [5]18.73 KB
screen-mdpi-portrait.png [6]28.94 KB
screen-xhdpi-landscape.png [7]48.82 KB
screen-xhdpi-portrait.png [8]77.17 KB
screen-ipad-landscape-2x.png [9]127.91 KB
screen-ipad-portrait-2x.png [10]159.42 KB
screen-iphone-landscape-2x.png [11]43.11 KB
screen-iphone-landscape.png [12]18.73 KB
screen-iphone-portrait-2x.png [13]63.38 KB
screen-iphone-portrait-568h-2x.png [14]65.53 KB
screen-iphone-portrait.png [15]28.94 KB
screen-ipad-landscape_2048x1536.png [16]128.55 KB
screen-ipad-portrait_1536x2048.png [17]159.79 KB
screen-ipad-landscape_1024x768.png [18]48.17 KB
screen-ipad-portrait_768x1024.png [19]67.38 KB
Direcció de Serveis de Tecnologies i Sistemes Corporatius. Recinte Mundet - Pavelló Migjorn. 08035 Barcelona

URL d'origen: https://comunitatdstsc.diba.cat/wiki/splash-per-a-cordova

Enllaços:
[1] https://comunitatdstsc.diba.cat/sites/comunitatdstsc.diba.cat/files/screen-hdpi-landscape.png
[2] https://comunitatdstsc.diba.cat/sites/comunitatdstsc.diba.cat/files/screen-hdpi-portrait.png
[3] https://comunitatdstsc.diba.cat/sites/comunitatdstsc.diba.cat/files/screen-ldpi-landscape.png
[4] https://comunitatdstsc.diba.cat/sites/comunitatdstsc.diba.cat/files/screen-ldpi-portrait.png
[5] https://comunitatdstsc.diba.cat/sites/comunitatdstsc.diba.cat/files/screen-mdpi-landscape.png
[6] https://comunitatdstsc.diba.cat/sites/comunitatdstsc.diba.cat/files/screen-mdpi-portrait.png
[7] https://comunitatdstsc.diba.cat/sites/comunitatdstsc.diba.cat/files/screen-xhdpi-landscape.png
[8] https://comunitatdstsc.diba.cat/sites/comunitatdstsc.diba.cat/files/screen-xhdpi-portrait.png
[9] https://comunitatdstsc.diba.cat/sites/comunitatdstsc.diba.cat/files/screen-ipad-landscape-2x.png
[10] https://comunitatdstsc.diba.cat/sites/comunitatdstsc.diba.cat/files/screen-ipad-portrait-2x.png
[11] https://comunitatdstsc.diba.cat/sites/comunitatdstsc.diba.cat/files/screen-iphone-landscape-2x.png
[12] https://comunitatdstsc.diba.cat/sites/comunitatdstsc.diba.cat/files/screen-iphone-landscape.png
[13] https://comunitatdstsc.diba.cat/sites/comunitatdstsc.diba.cat/files/screen-iphone-portrait-2x.png
[14] https://comunitatdstsc.diba.cat/sites/comunitatdstsc.diba.cat/files/screen-iphone-portrait-568h-2x.png
[15] https://comunitatdstsc.diba.cat/sites/comunitatdstsc.diba.cat/files/screen-iphone-portrait.png
[16] https://comunitatdstsc.diba.cat/sites/comunitatdstsc.diba.cat/files/screen-ipad-landscape_2048x1536.png
[17] https://comunitatdstsc.diba.cat/sites/comunitatdstsc.diba.cat/files/screen-ipad-portrait_1536x2048.png
[18] https://comunitatdstsc.diba.cat/sites/comunitatdstsc.diba.cat/files/screen-ipad-landscape_1024x768.png
[19] https://comunitatdstsc.diba.cat/sites/comunitatdstsc.diba.cat/files/screen-ipad-portrait_768x1024.png