Lors de l'achat de smartphones, moniteurs et autres équipements dotés d'un écran, nous entendons souvent parler d'un concept tel que le ppi, mais peu d'entre nous peuvent dire exactement de quoi il s'agit et ce qu'il affecte.
Mais en fait, cette caractéristique est l'une des principales lors du choix.
Nous vous dirons quelle est réellement la signification de ce concept (après tout, vous pouvez trouver beaucoup de mythes sur cette question sur Internet). Va!
Page théorique et calculs
Le concept à l'étude représente les pixels par pouce, c'est-à-dire le nombre de pixels par pouce. Il se prononce aussi comme pi-pi-ai.
Cela signifie littéralement combien de pixels tiennent dans un pouce de l'image que nous voyons sur l'écran d'un moniteur, d'un smartphone, d'une tablette ou d'un autre équipement.
En outre, ce concept est appelé l'unité de mesure de la résolution. Cette valeur est calculée à l'aide de deux formules simples :
où:
- dp– résolution diagonale;
- di– taille diagonale, pouces;
- wp- largeur;
- HP- la taille.
La deuxième formule est conçue pour calculer la résolution diagonale et est basée sur le célèbre théorème de Pythagore.
Riz. 1. Largeur, hauteur et diagonale sur le moniteur
Pour montrer comment toutes ces formules sont utilisées, prenons un moniteur de 20 pouces avec une résolution de 1280x720 (HD) comme exemple.
Donc Wp est 1280, Hp est 720 et Di est 20. Avec ces données, nous pouvons calculer le pipi. Premièrement, nous utilisons la formule (2).
Et maintenant, nous appliquons ces données pour la formule (2).
Remarque : En fait, nous avons obtenu 73,4 pixels, mais il ne peut pas y avoir de nombre de pixels non entier, seules les valeurs entières de la valeur sont utilisées.
De la même manière, vous pouvez calculer les valeurs réelles du nombre de pixels par pouce dans n'importe quel appareil.
Pour comprendre combien c'est en centimètres, une valeur plus familière pour notre région, vous devez diviser le nombre résultant par 2,54 (il y a exactement autant de centimètres dans un pouce). Donc dans notre exemple c'est 73/2.54=28 pixels. dans un centimètre.
Dans notre exemple, il s'agit de 73, et 25,4/73=0,3. C'est-à-dire que la taille de chaque pixel est de 0,3 x 0,3 mm.
Est-ce bon ou mauvais?
Découvrons-le ensemble.
Cette valeur est-elle importante ?
Pee-pee-ay, basé sur ce qui précède, affecte la clarté de l'image que l'utilisateur reçoit sur son écran.
Plus la valeur de l'indicateur est élevée, plus l'image sera reçue par l'utilisateur.
En fait, plus cette valeur est grande, moins une personne verra de "carrés". C'est-à-dire que chaque pixel sera petit, pas grand, et cela permettra de ne pas y prêter attention du tout. La valeur de la caractéristique est clairement visible sur la figure 2
Riz. 2. Différence avec des indicateurs de moins en moins
Bien sûr, personne ne veut avoir une telle photo sur son smartphone ou sa tablette comme illustré à gauche. Par conséquent, lors du choix d'une telle technique, il est très important de faire attention à cette caractéristique. Cela est particulièrement vrai lorsque vous achetez sur Internet et que vous n'avez pas la possibilité d'évaluer l'image de vos propres yeux et de comprendre à quel point elle est claire.
Trouver un indicateur dans les caractéristiques d'un même smartphone est généralement facile. Habituellement, il est contenu dans la section "Affichage". Un exemple peut être vu dans la figure 3.
Riz. 3. Indicateur dans les caractéristiques du smartphone
Important! Sur Internet, vous pouvez souvent trouver des informations selon lesquelles ppi est plus important que, par exemple, la résolution ou la diagonale, et l'une de ces caractéristiques devrait jouer un rôle plus important lors du choix. Ce n'est pas vrai du tout. Comme nous avons pu le voir ci-dessus, ces trois concepts sont inextricablement liés.
Avantages et inconvénients
Le nombre de pixels. par pouce a un effet positif sur la clarté de l'image et, par conséquent, sur sa qualité.
Il sera beaucoup plus agréable pour l'utilisateur de regarder une image avec un grand indicateur.
Dans la figure 2, la photo de gauche a 30 ppi et la photo de droite en a 300. Vous trouverez ci-dessous un autre exemple similaire.
Mais ce concept a aussi ses inconvénients. On parle notamment de l'autonomie de l'appareil. Tout est assez simple - si l'image est claire, un smartphone, une tablette ou un autre appareil avec un écran ne pourra pas fonctionner longtemps sans se recharger. Vous pouvez même établir une règle simple : plus il y a de pip, moins la batterie a d'autonomie.
Bien sûr, ce n'est pas un problème pour un PC, puisque le moniteur est toujours branché sur la prise de toute façon, mais pour certains téléphones, cela peut être un gros problème. Par conséquent, lors du choix d'un appareil, assurez-vous de faire attention non seulement au nombre de pixels. par pouce, mais aussi sur la capacité de la batterie !
Ainsi, nous sommes passés en douceur au sujet du choix.
À propos du choix des écrans
Il existe plusieurs règles qui vous aideront à choisir le bon affichage en fonction des pixels, elles ressemblent à ceci :
1Assurez-vous de prêter attention au type d'affichage. La priorité devrait être AMOLED, encore mieux SuperAMOLED ou OLED. De tels appareils seront toujours meilleurs que IPS, LCD et autres.
Disons que nous venons au magasin et voyons, par exemple, deux excellents appareils - Samsung Galaxy J7 et Xiaomi Redmi Note 3. Leur prix est presque le même, le deuxième appareil, soit dit en passant, est plus puissant.
Les spécifications indiquent que Xiaomi a 400 ppi (pour une raison quelconque, certains écrivent 400,53, mais, comme nous l'avons dit plus haut, il ne peut pas y avoir de nombre non entier de pixels). Samsung a 267 PPI et la résolution est en conséquence inférieure (1280x720 contre 1920x1080). La diagonale est la même - 5,5 pouces.
Mais pour une raison quelconque, l'image est plus claire sur Samsung. Et tout cela grâce à l'utilisation de la technologie exclusive SuperAMOLED +. Vous pouvez voir par vous-même si vous prêtez attention à la figure 5.
2Essayez de trouver une occasion d'examiner personnellement tous les échantillons que vous avez choisis. Vous pouvez d'abord regarder leurs options sur Internet, puis vous rendre dans un magasin d'électronique et voir comment ils affichent vraiment les images. L'opinion personnelle dans ce cas est tout simplement irremplaçable.
3Faites attention à la batterie. Si nous parlons de smartphones, afin d'assurer un fonctionnement à long terme de l'appareil avec une image claire (ppi élevé et / ou bonne technologie), la capacité de la batterie doit être d'environ 3000 mAh.
Pour les tablettes, il devrait être encore plus élevé, puisque leur diagonale est plus grande que pour les téléphones.
4N'oubliez pas : plus la diagonale est petite et plus la densité de pixels (le nombre de pixels par pouce) est élevée, plus l'image est nette. Ne vous y trompez pas - vous ne pourrez pas obtenir une image très claire avec un grand écran et une petite valeur de pip. Il est important d'observer le juste milieu ici.
5Il est important de tenir compte de la couverture. Ainsi les écrans mats produiront une image moins claire et moins saturée, mais ils seront plus doux pour vos yeux.
Mais les écrans brillants affecteront négativement la vision, mais l'image sur eux sera beaucoup plus belle. Dans le même temps, leur valeur ppi peut être la même.
Cela est principalement vrai pour le choix des moniteurs pour PC et ordinateurs portables. Si vous travaillez à l'ordinateur à plein temps ou même plus, il vaut mieux rester sur l'option matte.
Tout cela vous permettra de choisir l'affichage le plus approprié pour vous-même.
Résultats
ppi ou pee est la densité de pixels ou le nombre de pixels par pouce d'une image. Pour convertir l'indicateur en centimètres, vous devez le diviser par 2,54. Il ne peut y avoir de quantité non entière, seulement un entier.
Plus celui-ci est affiché haut, plus il sera clair et agréable de regarder l'image. Lors du choix des smartphones, tablettes, moniteurs PC, ordinateurs portables et autres équipements dotés d'un écran, il est très important de prêter attention à cet indicateur.
Mais ce n'est pas fondamental. Il est également important de regarder la technologie et la couverture de l'écran. De plus, assurez-vous de regarder la capacité de la batterie et de garder un juste milieu entre le nombre de pixels. et la taille de l'écran.
Tous les écrans modernes produits aujourd'hui sont constitués de pixels colorés, et plus ils sont petits, plus l'image résultante est claire avec la même taille d'affichage. La densité de pixels est généralement mesurée en PPI - qui signifie pixel par pouce. Plus cette valeur est élevée dans les caractéristiques d'affichage, plus l'image affichée est détaillée.
Aussi, souvent PPI signifie et DPI qui signifie points par pouce (points par pouce), mais ce terme est utilisé dans l'impression papier. En règle générale, dans l'impression papier, une résolution standard de 300 DPI est utilisée, ce qui est suffisant pour une image de haute qualité, et une résolution de 266 DPI est parfois utilisée, ce qui maintient une clarté d'image optimale. Le plus souvent, une résolution de 300 DPI est imprimée dans des magazines, des livres ou des affiches sur papier glacé. Avec cela, la plupart des gens ne verront jamais des points individuels, à moins qu'ils ne soient vus avec une loupe. Les journaux utilisent généralement des résolutions beaucoup plus faibles, autour de 170 DPI.
Malgré le fait que ce chiffre soit presque deux fois inférieur à celui des magazines sur papier glacé, le texte reste parfaitement lisible. Certains journaux utilisent même 10 à 20 dpi et le texte est toujours lisible. Les smartphones, les tablettes et les écrans d'ordinateur sont généralement à une distance similaire à celle d'un journal ou d'un magazine, et une densité de 150 à 300 est la plus optimale. Vous devez également savoir que dans les appareils, la taille de l'écran affecte la densité de pixels, donc avec la même résolution de 768 par 1280 pixels, un écran de 4,5 pouces aura 332 dpi, et un écran de 10 pouces n'aura que 150 dpi, mais par analogie avec un journal, il reste parfaitement lisible à l'œil humain.
La première question à vous poser est la suivante : une densité de pixels élevée vous aidera-t-elle à taper des lettres plus rapidement ? Cela vous facilite-t-il la gestion de votre calendrier ? ou ajouter de nouveaux contacts ? Si nous parlons de 300 ppi, alors nous pouvons dire que oui, une bonne lisibilité permet de trouver plus rapidement du contenu à l'écran, avec moins de fatigue oculaire. Oui, c'est important, mais cela n'a pas une telle signification de masse.
Une bonne densité de pixels rend la visualisation des photos plus agréable, vous pouvez regarder des vidéos avec une résolution plus élevée, mais ce n'est pas si critique si la densité n'est que de 150 pixels. La photo peut être agrandie si vous le souhaitez et la vidéo sur le petit écran du smartphone peut être téléchargée dans la résolution ci-dessous.
Peut-être qu'une bonne densité rendra la navigation sur un site plus agréable ? mais avec l'avènement de l'ère mobile, tous les sites ont une version mobile, où tous les éléments sont suffisamment grands, et l'affichage haute définition n'est pas nécessaire
Selon des enquêtes auprès d'utilisateurs de smartphones, pour la plupart d'entre eux, des choses complètement différentes sont plus importantes dans un smartphone, par exemple, la qualité de l'image, s'il existe une fonction de charge sans fil, quelle est la capacité de la batterie ou quel type de micrologiciel est installé dans le cas d'Android.
La très haute densité de pixels d'un écran de smartphone est comme un compteur de vitesse avec une vitesse maximale élevée, à laquelle rarement personne n'accélère.
La haute densité (350 et plus) est logique pour une tablette - si vous avez une profession liée au graphisme ou à la photographie, il n'y a pas beaucoup de différence pour un smartphone. La différence sera bien sûr différente d'un affichage avec 500ppi par rapport à 320, mais ce ne sera pas si critique qu'il sera impossible de faire des opérations normales normalement.
Je ne sais pas tout, donc si vous pensez que je me trompe quelque part ou si vous avez besoin de clarifier quelque chose, ou si vous avez des suggestions ou des questions pour améliorer ce guide, envoyez un e-mail (en anglais) à [courriel protégé] Vous pouvez aussi me trouver Twitter, ou alors Facebook.
Qu'est-ce que le DPI et le PPI
DPI ou (Dots Per Inch) "points par pouce" est une mesure de la densité spatiale des points, utilisée à l'origine dans l'impression. C'est le nombre de gouttes d'encre que votre imprimante peut contenir dans un pouce. Un DPI inférieur donne une image moins détaillée.Ce concept est appliqué aux écrans d'ordinateur appelés PPI (pixels par pouce). Même principe : le nombre de pixels que l'écran peut afficher par pouce est compté. Le nom DPI est également utilisé dans les écrans.
Les ordinateurs Windows ont 96 PPI par défaut. Le Mac utilise 72, bien que cette valeur ne soit plus exacte depuis les années 80. Les PC ordinaires non rétiniens (les Mac également) auront un minimum de 72 PPI à environ 120 maximum. Concevoir avec un PPI entre 72 et 120 donnera à votre travail à peu près le même rapport d'aspect partout.
Voici un exemple appliqué : un écran Mac Cinema 27" a 109 PPI, ce qui signifie qu'il affiche 109 pixels par pouce d'écran. La largeur avec le cadre est de 25,7 pouces (65 cm). La largeur de l'écran réel est d'environ 23,5 pouces, soit 23,5 * 109 ~ 2560, ce qui donne une résolution d'écran physique de 2560x1440px. *Je sais que 23,5 * 109 n'est pas exactement égal à 2560. C'est en fait +23,486238532 pouces. Ce serait plus précis que pixels par centimètre, mais vous me comprenez.
Impact sur votre conception
Disons que vous dessinez un carré bleu de 109 * 109 px sur l'écran spécifié ci-dessus. Ce carré aura une taille physique sur l'écran de 1*1 pouce. Mais si votre utilisateur a un écran de 72 PPI, le carré bleu semblera physiquement plus grand, car à 72 PPI, l'écran aura besoin d'environ un pouce et demi pour afficher votre carré bleu de 109px. Voir la simulation d'effet ci-dessous.
Rappelles toi: En laissant de côté les problèmes de couleur et de résolution, gardez à l'esprit que tout le monde verra votre conception différemment. Vous devez viser le meilleur compromis et créer pour le pourcentage le plus élevé d'utilisateurs. Ne présumez pas que l'utilisateur a le même écran que vous.
Résolution d'écran (et résolution native)
La résolution de l'écran peut avoir un impact énorme sur la façon dont l'utilisateur perçoit votre conception. Heureusement, depuis que les moniteurs LCD ont remplacé les CRT, les utilisateurs ont désormais tendance à avoir des résolutions d'écran natives avec un bon rapport taille d'écran/PPI.La résolution détermine le nombre de pixels affichés à l'écran (par exemple : 2560 * 1440px pour un écran Cinéma 27 pouces) 2560 largeur, 1440 hauteur. Maintenant, bien sûr, quand vous savez ce que signifie PPI, vous comprenez qu'il ne peut pas s'agir d'une unité de mesure de la taille physique. Vous pouvez avoir un écran 2560x1440 de la taille de votre mur et un autre de la taille de votre tête.
Les moniteurs LCD modernes ont une résolution par défaut, c'est-à-dire native, qui gère le nombre exact de pixels que l'écran est capable d'afficher. Les moniteurs CRT plus anciens sont un peu différents, mais comme ils peuvent être considérés comme morts, n'entrons pas dans les détails (et n'affectons pas ma compréhension partielle des bons vieux téléviseurs).
Prenons notre écran Cinema 27 pouces, qui peut afficher 109 PPI à une résolution native de 2560*1440 px. Si vous diminuez la résolution, les éléments apparaîtront plus grands. Après tout, vous n'avez que 23,5 pouces horizontaux à remplir avec pratiquement moins de pixels.
J'ai dit virtuellement, car dans ce cas il en sera ainsi. L'écran a une résolution native de 2560 * 1440 px. Si la résolution est réduite, les pixels sont toujours affichés à 109 PPI. Pour remplir cet espace et tout l'écran, votre système d'exploitation étirera tout, votre GPU/CPU prendra tous les pixels et les calculera avec un nouveau ratio.
Si vous souhaitez faire une résolution de 1280*720 (demi-largeur, demi-hauteur) par 27 pouces, alors votre GPU devra simuler deux fois le pixel pour remplir l'écran. Quel sera le résultat ? Voici donc le flou. Pour l'instant, la division par deux rapports d'aspect semblera assez bonne à cause d'un simple diviseur, mais si vous voulez 1/3 ou 3/4 du rapport d'aspect, vous vous retrouvez avec des nombres avec des décimales, et vous NE POUVEZ PAS diviser un pixel . Voir l'exemple ci-dessous.
Note: gauche : rendu d'une fenêtre OSX à une résolution native (1400*900px) : droite rendu d'une fenêtre OSX à une résolution inférieure simulée (rétine 1024*640px).
Regardons un autre exemple ci-dessous. Prenons une ligne de 1 pixel sur l'écran en résolution native. Réduisons maintenant la résolution de 50 %. Pour remplir l'écran, le CPU devrait générer 150% de l'image en multipliant le tout par 1,5, 1 * 1,5 = 1,5, mais vous ne pouvez pas réduire de moitié les pixels. Et ce sera le suivant : il remplira les pixels environnants avec une fraction de la couleur (par une fraction de la couleur), créant un flou.
Remarque : à gauche, une ligne de 1 pixel d'épaisseur à n'importe quelle résolution par défaut, à droite une ligne de 1 pixel d'épaisseur à une résolution inférieure de 150 %.
Donc, si vous avez un Macbook Pro Retina et que vous souhaitez modifier la résolution, la fenêtre ci-dessous s'affichera, vous permettant de savoir (dans la capture d'écran ci-dessous) à quoi ressemblerait cette résolution 1280 * 800px. Il utilise l'expérience de la perception de l'utilisateur de la résolution de l'écran pour exprimer le rapport d'aspect.
C'est une vue très subjective car elle utilise la résolution en pixels comme unité de taille physique, mais c'est vrai, du moins de leur point de vue.
Rappelles toi: si vous voulez toujours voir votre conception (ou n'importe quelle conception) au pixel près, n'utilisez jamais une résolution non native pour votre écran. Oui, vous pourriez être plus à l'aise avec un rapport plus petit, mais en ce qui concerne les pixels, vous voulez être aussi précis que possible. Malheureusement, certaines personnes utilisent la résolution pour mieux voir ce qui se passe à l'écran (en particulier sur le bureau) alors qu'elles devraient utiliser les paramètres d'accessibilité. Cela rendra toujours votre design mauvais, mais de ce point de vue, les utilisateurs recherchent une meilleure lisibilité, pas de la brillance.
Qu'est-ce que 4k
Vous avez peut-être beaucoup entendu parler du terme 4K ces derniers temps (du moins quand j'en ai parlé début 2014), 4k est un sujet assez tendance. Pour comprendre ce que c'est, commençons par comprendre ce que "HD" signifie.
Attention, ceci est une simplification forte. Je ne parlerai que des autorisations les plus courantes. Il existe différentes catégories de HD. Le terme HD s'applique à toute résolution commençant à 1280x720px ou 720p pour les lignes horizontales de 720px. En outre, certains peuvent appeler cette résolution SD (définition standard ; définition standard).
Le terme Full HD s'applique aux écrans 1920x1080px. La plupart des téléviseurs et téléphones haut de gamme (Galaxy SIV, HTC One, Sony Xperia Z, Nexus5) utilisent cette résolution.
4K commence à 3840x2160 pixels. Il est également appelé Quad (quadruple) HD et peut être appelé UHD de Ultra (super) HD. Pour faire simple, sur un écran 4K, vous pouvez mettre 4 1080p, en termes de nombre de pixels. Une autre résolution 4K est 4096x2160. Il est légèrement plus grand et est utilisé pour les projecteurs et les caméras professionnelles.
Que se passe-t-il si je connecte un écran 4K à mon ordinateur
Les systèmes d'exploitation modernes ne mettent pas à l'échelle 4K, ce qui signifie que si vous branchez un écran 4K sur un Chromebook ou un MacBook, il utilisera les ressources DPI les plus élevées, dans ce cas 200% ou @2x (deux fois plus) et les affichera à leur normal rapport. Cela rendra tout beau, mais petit.
Exemple hypothétique : si vous connectez un écran 12" 4K à un ordinateur avec un écran 12" haute résolution (2x), tout paraîtra moitié moins grand.
Rappelles toi:
surveiller hertz
Ici, nous faisons une pause entre le PPI et la résolution de l'écran. Vous avez peut-être vu qu'à côté des paramètres de résolution d'écran, il y a une valeur de moniteur Hz. Cela n'a rien à voir avec le PPI, mais juste au cas où vous vous poseriez la question, le hertz d'un moniteur - ou taux de rafraîchissement - est l'unité de vitesse à laquelle votre moniteur affichera une image fixe ou une image par seconde de temps. Un moniteur avec 60 Hz pourra afficher 60 images par seconde. Moniteur 120 Hz - 120 fps, etc.
Dans le contexte de l'interface utilisateur, la valeur Hertz (Hz) déterminera la fluidité et le détail de votre animation. La plupart des écrans fonctionnent à 60 Hz. Veuillez noter que le nombre d'images affichées par seconde dépend également de la puissance de traitement et graphique de l'appareil. Connecter un écran 120Hz à un Atari 2600 serait totalement inutile.
Pour une meilleure compréhension, regardez l'exemple ci-dessous. Le T-Rex va du point A au point B avec le même rythme égal et rapide sur les écrans 60Hz et 120Hz. Un écran à 60 ips est capable d'afficher 9 images pendant l'animation, alors qu'un écran à 120 ips affiche logiquement deux fois plus d'images dans le même laps de temps. Les animations seront plus fluides sur un écran 120 Hz.
Rappelles toi: Certaines personnes peuvent dire que l'œil humain ne peut pas voir plus de 60 images par seconde. Ce n'est pas vrai. N'écoutez pas et partez en riant d'un rire hystérique.
Qu'est-ce qu'un affichage rétinien
Apple a introduit le terme "Retina Display" pour la sortie des smartphones iPhone 4. Il s'appelle Retina (rétine) parce que le PPI de l'appareil était si élevé qu'il est probable que la rétine humaine ne puisse pas voir les pixels individuels sur l'écran.Cette affirmation est vraie pour les tailles d'écran de la gamme d'appareils dans lesquels il est utilisé, mais alors que les écrans s'améliorent de plus en plus, nos yeux sont maintenant suffisamment formés pour percevoir les pixels - en particulier pour les éléments d'interface utilisateur arrondis.
Techniquement, ils affichent deux fois plus de pixels en hauteur et en largeur dans la même taille physique.
L'iPhone 3G/S était de 3,5 pouces avec une résolution de 480*320px et 163PPI.
L'iPhone 4/S mesurait 3,5 pouces avec une résolution de 960*640px et 326ppi.
BOOM! Environ deux fois. simple multiplicateur. Par conséquent, les éléments à l'écran, au lieu d'être plus petits, semblent visuellement deux fois plus nets car ils ont deux fois plus de pixels et exactement les mêmes dimensions physiques. Un pixel normal est égal à 4 pixels de rétine.
Considérez l'exemple ci-dessous pour une application directe dans une conception complexe.
Remarque sur l'image : il est difficile de simuler la qualité d'image différente de deux appareils à un troisième appareil, c'est-à-dire celui que vous regardez en ce moment. La qualité d'image sera deux fois meilleure et plus nette pour un lecteur de musique rétine, même en occupant le même espace physique. Si vous voulez le vérifier par vous-même, j'ai utilisé l'un de mes programmes gratuits, vous pouvez télécharger le code source.
Le terme écran "Retina" appartient à Apple, donc d'autres entreprises utiliseront "HI-DPI" ou "Super power pixel maximum sp33d display" (je vais déposer la dernière marque) ou aucune de celles-ci. Tout ce que vous avez à faire est de lire les spécifications de l'appareil et de déterminer quels sont le DPI et la taille de l'écran (quel plaisir).
Rappelles toi: Les produits Apple sont un excellent moyen de se familiariser avec les conversions DPI et de comprendre les différences entre la résolution, le PPI et le format d'image, car vous n'avez qu'à vous soucier d'un multiplicateur.
Qu'est-ce qu'un multiplicateur
Lorsqu'il s'agit de convertir votre conception en tous les PPI possibles, le multiplicateur sera votre sauveur en mathématiques. Si vous connaissez le multiplicateur, vous n'avez plus à vous soucier des caractéristiques détaillées de l'appareil.Prenons notre exemple iPhone 3G et 4. Vous avez deux fois plus de pixels dans la même taille physique. Votre multiplicateur est donc de 2. Cela signifie que pour rendre vos ressources graphiques compatibles avec la résolution 4G, il vous suffit de multiplier la taille de vos ressources graphiques par 2 et le tour est joué.
Disons que vous créez un bouton 44*44px, qui est la cible tactile recommandée par iOS (j'en reparlerai plus tard). Appelons-le le nom typique du bouton "JIM".
Pour faire un bon JIM sur l'iPhone 4, vous devez en créer une version double. C'est ce que nous faisons ci-dessous.
Note: gauche - 2px coins arrondis 16px taille de police, droite 4px coins arrondis 32px taille de police.
Assez simple. JIM a maintenant une version de Jim.png pour PPI normal (IPhone 3) et une version [courriel protégé] pour 200% PPI (iPhone 4).
Maintenant, vous demandez : « Mais attendez ! Je suis sûr qu'il existe d'autres multiplicateurs que deux. Oui, il y en a, et ici ça devient un cauchemar. D'accord, ce n'est peut-être pas un cauchemar, mais je suis sûr que vous préférez passer la journée à repasser vos chaussettes plutôt que de gérer de nombreux multiplicateurs. Heureusement, ce n'est pas aussi effrayant que vous le pensez, nous y reviendrons plus tard.
Parlons d'abord des unités, car maintenant vous aurez besoin d'une unité autre qu'un pixel pour décrire vos conceptions multi DPI. C'est alors que vient le temps pour DP et PT.
Rappelles toi: pour chaque conception sur laquelle vous travaillez, vous devez connaître le multiplicateur. Les multiplicateurs maintiennent ensemble ce monde de taille d'écran et de chaos PPI et le rendent compréhensible pour les humains.
Qu'est-ce que DP, PT et SP
DP ou PT est une unité de mesure utilisée pour décrire vos mises en page créées pour plusieurs appareils et DPI.DP ou DiP signifie Pixel indépendant de l'appareil et PT comme point. PT utilise Apple ; DP est utilisé dans Android, mais ils sont essentiellement identiques. En bref, ils déterminent la taille quel que soit le multiplicateur de l'appareil. Cela aide beaucoup quand on en discute. missions entre des sujets aussi divers que le designer et l'ingénieur.
Prenons notre exemple de bouton précédent, "JIM".
Jim mesure 44 pixels de large pour les écrans normaux sans rétine et 88 pixels de large pour les écrans rétine. Soyons techniques et ajoutons un rembourrage de 20 pixels autour de Jim car il aime les espaces blancs. Ensuite, le rembourrage sera de 40 pixels pour la rétine. Mais cela n'a pas vraiment de sens de prendre en compte les pixels de la rétine lors de la conception sur un écran non-rétine.
Nous procéderons de la manière suivante : nous prendrons comme base le format d'image 100% d'un écran normal non rétinien.
Dans ce cas, le JIM sera dimensionné 44*44DP ou PT et rembourré 20DP ou PT. Vous pouvez donner votre technologie. donné dans n'importe quel PPI, JIM sera toujours 44 * 44dp ou pt.
Android et IOS adaptent cette taille à l'écran et convertissent avec le bon multiplicateur. C'est pourquoi je pense qu'il est plus facile de toujours concevoir avec le PPI par défaut pour votre écran.
SP est utilisé séparément de DP et PT, mais fonctionne de la même manière. SP signifie pixels indépendants de l'échelle et est utilisé pour définir les tailles de police. SP dépend des paramètres de police des utilisateurs d'appareils Android. Pour un concepteur, la définition de SP est la même que la définition de DP pour tout le reste. Prenez comme base ce qui est lisible à l'échelle 1x (16SP, par exemple, est une taille de police idéale pour la lecture).
Rappelles toi: quand vous faites ceux-là. affectation, utilisez toujours des valeurs indépendantes de la résolution/de l'échelle. Toujours. Plus la taille/résolution de l'écran diffère, plus elle est importante.
Paramètre PPP
Maintenant que vous savez ce que sont le PPI, la rétine et le multiplicateur, il est important de dire quelque chose sur lequel on m'a très peu posé de questions et qui prête à confusion : "Que se passe-t-il si je change la configuration PPI dans mon éditeur graphique ?"Si vous vous êtes posé cette question, cela signifie que vous êtes un peu familier avec les éditeurs d'images. Maintenant, il est très important de comprendre ce qui m'a pris du temps : Tout ce qui n'est pas destiné à l'impression utilise des dimensions en pixels, quelle que soit la configuration PPI initiale.
Les paramètres PPI dans les programmes sont un héritage de l'industrie de l'impression. Si vous concevez uniquement pour le Web, le PPI n'aura aucun effet sur la taille de votre bitmap. C'est pourquoi nous utilisons des multiplicateurs et non des valeurs PPI spécifiques. Votre canevas et vos graphiques seront toujours pixélisés par le logiciel en utilisant le multiplicateur approprié.
Par example. Vous pouvez l'essayer vous-même dans un programme qui vous permet d'ajuster le PPI, tel que Photoshop. J'ai dessiné un carré de 80*80px et un texte de 16pt dans Photoshop avec une configuration de 72ppi. La seconde est la même avec la configuration 144PPI.
Comme vous pouvez le voir, le texte est devenu assez grand, deux fois plus grand pour être exact, tandis que le carré est resté le même. La raison en est que le programme (Photoshop dans ce cas) met à l'échelle (comme il se doit) les valeurs pt en fonction de la valeur PPI, ce qui double la taille du rendu du texte avec des paramètres PPI doubles. En revanche, ce qui était défini par les pixels - le carré bleu - reste exactement de la même taille. Un pixel est un pixel et restera un pixel quels que soient les paramètres PPI. Ils ne diffèrent les uns des autres que par le PPI de l'écran qui les affiche.
Il est important de se rappeler que lors de la conception pour le numérique, le PPI n'affectera que la façon dont vous percevez votre conception et votre flux de travail et les graphiques de taille pt tels que la police. Si vous incluez des fichiers source avec différents paramètres PPI dans votre travail, le programme redimensionnera toute image transférée entre différents fichiers selon le ratio PPI du fichier de réception. Cela deviendra un problème pour vous.
Décision? Utilisez un PPI (pour une conception 1x, de préférence dans la gamme 72-120) et respectez-le. Personnellement, j'utilise 72 ppp car c'est le paramètre par défaut de Photoshop et la plupart de mes collègues font de même.
Rappelles toi:
Gestion des PPI dans iOS
Il est temps de plonger dans la conception spécifique à la plate-forme. Jetons un coup d'œil aux appareils iOS au début de 2014. En termes de tailles d'écran et de DPI, il existe 2 types d'appareils mobiles et 2 types d'écrans d'ordinateurs portables/de bureau avec iOS. Dans la catégorie mobile, bien sûr, ils ont des iPhones et des iPads.Dans la catégorie téléphone, vous avez l'ancien 3GS (iOS6 toujours supporté) et supérieur. Seul l'iPhone 3GS n'est pas rétinien. L'iPhone 5 et les versions ultérieures utilisent un écran plus grand avec le même DPI que l'iPhone 4 et 4s. Voir la feuille de triche ci-dessous :
Note: 1) multiplicateur 1x, 2) multiplicateur 2x, 3) multiplicateur 2x.
En septembre 2014, Apple a introduit 2 nouvelles catégories d'iPhone : iPhone 6 et iPhone 6 Plus. L'iPhone 6 est plus grand que l'iPhone 5 (de 0,7 pouces), mais avec le même PPI. D'autre part, l'iPhone 6 introduit un tout nouveau multiplicateur pour iOS, @3x en raison de sa taille, 5,5 pouces.
Il y a quelque chose de spécial que vous devez savoir sur la façon dont l'iPhone 6 Plus gère son affichage par rapport à tous les autres iPhones.
Il réduit la taille des images.
Par exemple, lorsque vous concevez pour l'iPhone 6, vous concevez sur une toile de 1334*750 pixels et le téléphone restitue également 1334*750 pixels physiques. Dans le cas de l'iPhone 6 Plus, la résolution du téléphone est inférieure à l'image rendue, vous devez donc concevoir pour une résolution de 2208*1242px et le téléphone sera réduit à une résolution de 1920*1080px. Voir l'image ci-dessous :
La résolution physique est inférieure de 13 % à la résolution rendue. Cela crée quelques problèmes, tels que des demi-pixels, rendant les détails très fins flous. Bien que la résolution soit si élevée, elle ne sera pas perceptible à moins que vous ne regardiez de très près. Alors concevez sur une toile de 2208*1242px et faites attention aux très petits éléments de conception comme les super diviseurs. Voir ci-dessous pour une simulation de ce qui se passe :
Le guide pour Chrome OS n'a pas encore été publié, mais l'utilisation de Pixel (avec un écran tactile) n'est pas géniale non plus. Cependant, étant donné que toutes les applications Chrome OS sont basées sur le Web, je suggérerais quand même de concevoir pour les écrans tactiles. Ma recommandation serait d'appliquer le guide Android à des fins tactiles.
Web, appareils hybrides et avenir
Vous comprendrez clairement quelle décision prendre si vous développez pour mobile. Faites-le pour les écrans tactiles. Si vous développez pour le bureau, choisissez non tactile. Cela semble simple, mais cela ignore la nouvelle tendance croissante - les appareils hybrides.Un appareil hybride est un appareil censé fournir à la fois des commandes tactiles et non tactiles. Le Chromebook Pixel, Surface Pro et Lenovo Yoga en sont de bons exemples.
Que faire dans ce cas ? Eh bien, il n'y a pas de réponse facile ici, mais je vais sauter devant et vous en donner une : sélectionnez les commandes tactiles. C'est là que la technologie va évoluer.
Si vous concevez pour le Web, ou quelque chose comme ça, pensez tactile.
Rappelles toi:
Logiciel graphique
Un logiciel ne fera pas de vous un concepteur, mais choisir le bon logiciel pour la tâche à accomplir peut grandement améliorer votre productivité et faciliter votre travail. Le savoir-faire logiciel ne devrait pas être votre seule compétence, mais apprendre et maîtriser le bon outil contribuera grandement à donner vie à vos idées.Lorsqu'il s'agit de gérer les changements DPI dans la conception de l'interface, tous les programmes fonctionnent différemment. Certains sont meilleurs que d'autres à des tâches spécifiques. Voici les plus courants :
Photoshop
La mère des outils de conception d'interface. Probablement l'outil le plus utilisé aujourd'hui. Pour lui, il existe une infinité de ressources, de tutoriels, d'articles. Photoshop existe presque depuis l'aube de la conception d'interfaces.Comme son nom l'indique, le but premier du programme n'était pas la conception d'interfaces, mais la retouche de photographies ou de bitmaps. Il a évolué au cours d'une année et avec la naissance du design d'interface, les designers ont changé son objectif. C'était en partie parce qu'ils y étaient habitués et parce que c'était le seul programme capable de faire les choses aussi bien que nécessaire.
Photoshop est à ce jour le maître de l'édition bitmap et reste le programme le plus utilisé pour la conception d'interface utilisateur. Son héritage de dix ans fait de Photoshop un programme d'apprentissage difficile à trouver. En utilisant Photoshop comme un couteau suisse géant, vous pouvez tout faire, mais pas toujours de la manière la plus efficace.
Puisqu'il est basé nativement sur un bitmap, il dépend du DPI, contrairement à Illustrator et Sketch qui sont décrits ci-dessous.
Illustrateur
Éditeur vectoriel, frère de Photoshop. Comme son nom l'indique, il s'adresse aux illustrateurs, mais il peut aussi être utilisé comme outil de conception d'interface.Illustrator est adapté à la conception d'impression, et donc son interface, sa gestion des couleurs, son échelle, ses règles et ses unités de mesure peuvent vous décourager et il nécessite quelques ajustements afin d'être facilement utilisé uniquement pour la conception d'interface. Comme Photoshop, c'est un outil incroyablement puissant, avec une courbe d'apprentissage abrupte.
Il diffère de Photoshop en ce qu'il est indépendant du DPI en s'appuyant sur des formes vectorielles. Contrairement aux images raster, les graphiques réalisés à l'aide de formes vectorielles sont basés sur des formules mathématiques et seront recalculés par programmation sans perte de qualité.
Comprendre la différence entre bitmap et vecteur est la clé pour créer une conception visuelle et des ressources graphiques évolutives.
Si vous souhaitez commencer à utiliser Illustrator pour la conception Web/interface, je vous recommande de lire