Il y a longtemps, j'ai travaillé dans l'industrie de la fabrication de moniteurs LCD et de téléviseurs. Et un jour, j'ai participé à une conversation avec des ingénieurs de grandes entreprises développant des circuits de contrôle d'affichage. Ils ont accusé nous tous qui avons conçu et créé des écrans de « ingénierie du nez sur le verre » (N.O.G.E.).

Selon eux, nous nous sommes concentrés sur des améliorations qui ne peuvent être remarquées qu'en enfouissant le nez dans l'écran. Nous avons augmenté les indicateurs qui ne jouent aucun rôle dans l'usage quotidien. Et ils avaient absolument raison.

Aujourd’hui, l’industrie mobile fait la même chose. Faites attention à ce qu'on appelle les principales caractéristiques de l'écran d'une tablette et d'un smartphone. En gros, il ne s'agit que du nombre de pixels et, peut-être, d'une certaine technologie d'affichage (IPS, OLED ou autre). Mais est-ce vraiment les seuls détails auxquels vous devez prêter attention ? Et en général, sont-ils les plus importants ?

Revenons sept ans en arrière jusqu'au moment où l'iPhone 4 avec écran a été introduit. Apple a choisi ce nom car cet écran avait une densité de 326 pixels par pouce, ce qui correspondait à la résolution de l'œil humain (rétine).

Vous n’avez probablement pas besoin d’une densité plus élevée car vous ne pourrez pas faire la différence.

Certains experts, dont le Dr Ray Soneira de DisplayMate Technologies, ont contesté cette affirmation. Mais même les critiques s’accordent sur le fait que ce chiffre est très proche de la limite raisonnable pour application pratique. 300 dpi - la densité des photographies dans les magazines sur papier glacé. Et personne ne s'est jamais plaint de leur qualité.

Et maintenant sur le présent. La densité d'écran maximale d'un smartphone disponible sur le marché est de 806 pixels par pouce. Nous parlons du Sony Xperia Z5 Premium, dont l'écran de 5,5 pouces peut accueillir une image 4K complète (2 160 x 3 840 pixels). Il existe plusieurs téléphones avec une résolution d'environ 1 440 x 2 960 pixels et des tailles d'écran allant de 5,5 à 6 pouces, dont la densité dépasse 550 ppp.

Même Apple, qui a été le premier à nous assurer que 326 pixels par pouce serait suffisant, a augmenté ce chiffre à 458 sur l'écran Super Retina de l'iPhone X.

Le terme technique pour tout cela est folie.

Sans aucun doute, vous pouvez remarquer de minuscules différences jusqu’au niveau de densité de 500 ppi. À condition d’avoir une vision parfaite et de garder le téléphone à moins de 30 cm de vos yeux. Mais tout de même, si aujourd'hui il est possible de créer de tels produits, cela ne veut pas dire qu'il faut les créer. Cela ne signifie pas non plus que ces écrans fonctionnent globalement mieux que les autres.

Il faut plus de puissance de calcul et d’énergie pour faire fonctionner tous ces pixels. Plus il y a de points sur l'écran, moins il y a de place pour la « zone ouverte » – la partie qui émet de la lumière – dans chacun d'entre eux. Ainsi, la luminosité et l'efficacité énergétique du rétroéclairage - ou les deux - en souffrent.

À quels paramètres faut-il faire attention ?

Aujourd'hui, les écrans ne souffrent plus de problèmes tels que la distorsion et la perte de linéarité. Nous n'en avons pas vu depuis que les fabricants ont arrêté d'utiliser les écrans CRT il y a plus de dix ans. Alors nos présentoirs modernes ne sont-ils pas parfaits ? La réponse est bien sûr non. Je peux énumérer au moins trois propriétés d'affichage qui doivent être améliorées bien plus que le nombre de pixels.

Qualité d'image dans des conditions de lumière vive

Le premier est la qualité de l’image au soleil. Il peut être amélioré en augmentant la luminosité et le contraste visible par l'utilisateur. Pour que nous puissions regarder confortablement un écran émissif (émettant de la lumière), il doit afficher couleur blanche aussi lumineux que son environnement.

En plus de la luminosité (qui gaspille de l'énergie), l'écran doit offrir suffisamment de contraste pour fonctionner dans des conditions bien éclairées. Les caractéristiques des écrans OLED indiquent généralement un rapport de contraste de 100 000 : 1, voire de 1 000 000 : 1. Mais cela n’a pas non plus de sens. Vous obtenez de tels chiffres uniquement dans une pièce complètement sombre entre les couleurs d’affichage noir et blanc.

Dans des conditions de fonctionnement réelles, le contraste est réduit par la lumière ambiante. Et c'est un problème pour les écrans modernes. Il est rare qu'un écran puisse offrir un rapport supérieur à 50:1 dans une pièce typique, et dans des conditions d'éclairage plus lumineuses, le rapport est encore plus faible. Nous aimerions voir une technologie d’affichage réfléchissant en couleur, mais il n’y a encore rien sur le marché.

Précision des couleurs

La prochaine propriété qui devrait nous intéresser est la précision des couleurs. Mais ne le confondez pas avec les indicateurs de palette de couleurs. La valeur de cette dernière détermine la gamme de couleurs que l'écran est capable d'afficher. Les écrans OLED et désormais QLED imposent une large palette de couleurs, mais ils n'offrent pas une grande précision des couleurs.

Une large palette de couleurs serait idéale s’il existait un matériau source dont elle pourrait révéler le potentiel. Mais un écran typique avec un large palette de couleurs Cela rend simplement l’image trop lumineuse et caricaturale.

Au lieu de cela, nous avons besoin d'écrans qui reproduisent fidèlement les couleurs de la palette du créateur de contenu (sRGB ou Rec. 709). La précision de la transmission est exprimée par la métrique ΔE*, qui montre la différence entre deux couleurs. Si sa valeur atteint 1, l'erreur devient perceptible. Montrez-moi un paramètre d'affichage qui garantit une faible différence dans le calcul de ΔE* sur plusieurs tests, et nous aurons alors quelque chose.

Jouer un ton

La précision des couleurs et la qualité globale de l’image dépendent en grande partie de la reproduction des tons, une propriété mieux connue sous le nom de gamma approprié. La plupart des erreurs de couleur sur les écrans LCD et OLED sont dues à une reproduction incorrecte des tons au sein des trois couleurs primaires.

Conclusion

Arrêtez de compter les pixels. Exigons plutôt des améliorations des fonctionnalités qui peuvent réellement améliorer la qualité de l’image. Il existe de nombreuses autres façons de le faire bon écran, en plus de simplement mesurer le nombre de points.

Il existe une grande variété d’écrans disponibles, mais nous souhaitons vous donner quelques recommandations qui peuvent vous aider à choisir le bon écran. Qualité image transmise dépend de la résolution de l’écran, de la densité des pixels, du type d’écran et même de la taille. De nombreux facteurs déterminent si un affichage est bon ou non. Ainsi, il sera probablement utile à beaucoup de lire quel écran choisir pour un smartphone ou une tablette.

Résolution d'écran et densité de pixels :

Lorsque vous lisez des informations sur un appareil particulier, la première chose que vous voyez sur l'écran est la taille et la résolution de l'écran, ainsi que le nombre de pixels par pouce, c'est-à-dire densité de pixels. En raison du grand nombre d'appareils Android et, par conséquent, de leur échelle des prix, il existe un large éventail de résolutions d’écran différentes, nous ne pouvons donc couvrir que les plus populaires.

Lorsqu'une résolution d'affichage spécifique est donnée, elle inclut généralement la largeur et la hauteur. Voici quelques-unes des résolutions d’écran les plus populaires :

• 240 x 320. Cette autorisation L'affichage est le plus souvent utilisé dans les appareils dotés de très petits écrans ou dans les téléphones économiques (qui sont en voie de disparition).
• 320 x 480. Cette résolution est également le plus souvent obtenue par les téléphones dotés de petits écrans, généralement jusqu'à quatre pouces.
• 480 x 800 (WVGA). Il y a quelques années à peine, c'était la résolution utilisée dans les appareils haut de gamme tels que le Samsung Galaxy S2. Désormais, cette résolution est typique des smartphones de classe moyenne et économique dotés d'un écran de moins de cinq pouces.
• 960 x 540 (qHD). Auparavant, cette résolution était utilisée dans les appareils haut de gamme. Et maintenant, les téléphones de la classe moyenne l’ont.
• 1280 x 720 (HD/720p). Aujourd’hui, cette résolution d’écran est typique des smartphones haut de gamme. Parfois ils se rencontrent téléphones économiques et tablettes avec la même résolution.
• 1920 x 1080 (Full HD/1080p). En règle générale, une résolution aussi élevée est utilisée pour créer des téléviseurs modernes. Cette année, les smartphones/tablettes dotés d'écrans Full HD font leur apparition de plus en plus souvent. Cependant, les écrans Full HD ne sont actuellement disponibles que sur les smartphones et tablettes puissants.
• 2560 x 1600 (WQXGA). Comme vous l’avez probablement compris, il s’agit d’un écran à très haute résolution. Seuls les appareils les plus puissants peuvent le prendre en charge. Par exemple, la tablette Nexus 10 a reçu exactement cette résolution d'écran.

Ainsi, il est désormais clair que les smartphones de qualité inférieure ont une résolution d'écran proportionnellement faible, tandis que les écrans plus grands se caractérisent bien sûr par une résolution d'affichage élevée, et le prix dans ce cas ne sera pas minime.

Lorsqu'il s'agit de densité de pixels, elle est importante lorsqu'il s'agit de la netteté globale de l'écran. Par exemple, lorsque vous naviguez sur le Web ou lisez des livres électroniques, l'expérience visuelle dépend de la densité de pixels, qui varie en fonction de la résolution et de la taille de l'écran. Si l'écran est grand et la résolution est très faible, la densité de pixels sera faible.

Aujourd'hui, une densité de pixels de 300 ppi est considérée comme excellente car il est peu probable que l'utilisateur remarque des erreurs dans l'image ou ne voie même pas un seul pixel. Les densités de pixels inférieures à 200 ppi sont typiques des appareils à faible consommation et la qualité d'affichage est en conséquence inférieure. Par conséquent, il vaut la peine de choisir des smartphones et des tablettes avec une densité de pixels comprise entre 200 et 300 ppi et plus.

Qu'est-ce qu'un écran LCD ?

LCD signifie affichage à cristaux liquides et est le type d'écran le plus populaire pour appareils mobiles. La demande est si forte parce que bonne qualité images qu'il transmet et une consommation d'énergie relativement faible.

Écrans TFT :

Et c’est le type d’écran LCD le plus populaire, qui signifie Thin Film Transistor, c’est-à-dire transistor à couches minces. Il contient une matrice active qui contrôle réellement le transistor. Et le transistor, à son tour, est responsable de « l’activation et de la désactivation » de chaque pixel. Cela améliore le temps de réaction et offre un plus grand contraste d’image. De plus, d'autres types d'écrans LCD ne peuvent pas le faire, mais sont plus chers et consomment beaucoup grande quantitéénergie.

Écrans IPS :

Certains smartphones et tablettes haut de gamme utilisent des écrans IPS, qui sont un type d'écran TFT. L'écran IPS corrige tous les défauts des écrans LCD : il est capable de reproduire des couleurs plus claires et plus expressives, tout en offrant un angle de vision large. C'est idéal pour les utilisateurs qui aiment regarder des films en grand groupe : peu importe où une personne est assise, l'image restera lumineuse et claire.

Écrans Super LCD :

Malgré le fait que le créateur du premier Super technologies Écrans LCD est société Samsung, ces écrans sont le plus souvent utilisés par HTC. Cette technologie est capable d'éliminer l'éblouissement, alors qu'un tel écran consomme une petite quantité d'énergie de la batterie, et à l'extérieur, l'utilisateur n'a pas à se fatiguer les yeux pour voir l'image sur l'écran. L'écran Super LCD offre une visibilité extérieure supérieure à celle des écrans LCD conventionnels.

La dernière version de l'écran Super LCD, appelée LCD3, consomme encore moins d'énergie que tous Versions précédentes. Les smartphones HTC Butterfly, HTC Droid DNA et HTC One ont déjà reçu ce type d'affichage.

Qu'est-ce qu'un écran OLED ?

L'abréviation OLED signifie Organic Light-Emitting Diode et l'écran OLED lui-même est constitué d'un polymère organique. Dès que l'énergie est disponible, le polymère s'allume et, en conséquence, l'écran s'allume. Un écran OLED présente de nombreux avantages par rapport aux écrans LCD car il est plus fin, plus lumineux, consomme moins d’énergie et offre des angles de vision larges. Cela augmente le contraste et le temps de réponse.

Les écrans OLED les plus populaires sont les écrans AMOLED. AMOLED peut être déchiffré comme une diode électroluminescente organique à matrice active. Ces écrans consomment beaucoup moins d’énergie que les écrans OLED standards.

Le plus grand fabricant d'écrans AMOLED est bien entendu la société sud-coréenne Samsung, qui vend également des écrans Super Écrans AMOLED. La plupart des smartphones et tablettes utilisent des écrans Super AMOLED, mais pas une petite quantité appareils modernes travailler sur des écrans LCD.

Samsung installe parfois des matrices PenTile sur Divers types Écrans AMOLED. Celui-ci utilise deux sous-pixels, chacun utilisant la technologie RGBG (Rouge-Vert-Bleu-Vert) pour une belle reproduction des couleurs, au lieu du modèle RVB standard (Rouge-Vert-Bleu). Certains critiquent le capteur PenTile, affirmant qu'il ne donne pas à l'écran la netteté dont il a besoin, mais la plupart des utilisateurs conviennent que la densité de pixels plus élevée signifie qu'il n'y a pas de flou. La matrice PenTile est utilisée pour augmenter la durée de vie de l'écran.

Écrans AMOLED ou LCD : quel est le meilleur choix ?

Ces deux technologies ont leurs avantages et leurs inconvénients. Les écrans AMOLED sont connus pour leur contraste élevé et leurs noirs plus profonds et plus naturels, mais les écrans LCD ont tendance à produire des couleurs plus réalistes. Alors que les écrans AMOLED sont plus lumineux, les écrans LCD peuvent être visualisés en plein soleil et l'image sera plus claire.

Les écrans AMOLED sont considérés comme plus économes en énergie, tandis que les écrans LCD consomment moins de batterie lors de la navigation sur le Web. De plus, l'un des aspects positifs Les écrans AMOLED ont des angles de vision larges, mais les écrans LCD vous permettent de créer une image d'assez haute qualité même à basse résolution, car ils sont basés sur la technologie RVB au lieu du PenTile RGBG.

Bien sûr, si vous cherchez à acheter un smartphone économique, il est peu probable que vous trouviez de nombreux appareils dotés d'un écran AMOLED. Les utilisateurs qui recherchent un téléphone de milieu de gamme seront confrontés à la même situation. Eh bien, il est plus facile de choisir un smartphone/une tablette parmi les appareils haut de gamme, car ils disposent d’écrans de la plus haute qualité et utilisent les technologies les plus avancées.

En général, le choix d'un appareil avec un écran particulier dépend de vos souhaits - si vous souhaitez que l'écran reproduise des couleurs noires naturelles et crée un contraste élevé, choisissez les écrans AMOLED. Si vous souhaitez obtenir des couleurs plus naturelles et qu'il est important pour vous que l'image soit clairement visible même lorsque des lumières directes frappent l'écran rayons de soleil, puis choisissez les écrans LCD.

Vous avez trouvé une erreur ? Sélectionnez-le et appuyez sur Ctrl+Entrée

Lors de l'achat de smartphones, de moniteurs et d'autres équipements dotés d'un écran, nous entendons souvent parler de 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 la signification réelle de ce concept (après tout, vous pouvez trouver de nombreux mythes à ce sujet sur Internet). Aller!

Page théorique et calculs

Le concept en question signifie pixels par pouce, c'est-à-dire le nombre de pixels par pouce. Également prononcé pipi-pipi-ay.

Cela signifie littéralement combien de pixels contiennent un pouce de l'image que nous voyons sur l'écran d'un moniteur, d'un smartphone, d'une tablette ou d'un autre appareil.

Ce concept est également appelé unité de mesure de résolution. Cette valeur est calculée à l'aide de deux formules simples :
Où:

• dp– résolution diagonale;
• di– taille de la diagonale, en pouces ;
• Wp- largeur;
• HP- hauteur.

La deuxième formule est conçue pour calculer la résolution diagonale et est basée sur l'utilisation du célèbre théorème de Pythagore.

Riz. 1. Largeur, hauteur et taille diagonale sur le moniteur

Pour montrer comment toutes ces formules sont utilisées, prenons par exemple un moniteur de 20 pouces de diagonale avec une résolution de 1280x720 (HD).

Ainsi, Wp sera égal à 1280, Hp – 720 et Di – 20. Grâce à la présence de ces données, on peut calculer pi-pi-ai. Nous utilisons d’abord la formule (2).

Appliquons maintenant ces données à la formule (2).

Remarque : En fait, nous avons obtenu 73,4 pixels, mais il ne peut pas y avoir un nombre de pixels non entier, seules des valeurs entières 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 cela représente en centimètres, une valeur plus courante dans notre région, vous devez diviser le nombre obtenu 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. en centimètre.

Dans notre exemple, il s'agit de 73, et 25,4/73 = 0,3. Autrement dit, la taille de chaque pixel est de 0,3x0,3 mm.

Est-ce bon ou mauvais?

Voyons cela ensemble.

Cette quantité est-elle importante ?

Pee-pee-ay, sur la base de 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 que l'utilisateur recevra sera claire.

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. La différence entre les indicateurs est de moins en plus grande

Bien entendu, personne ne souhaite avoir une image comme celle présentée à gauche sur son smartphone ou sa tablette. Par conséquent, lors du choix d’un tel équipement, 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. Il est généralement 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 le ppi est plus important que, par exemple, la résolution ou la diagonale et certaines de ces caractéristiques devraient jouer un rôle plus important lors du choix. Ce n'est pas vrai du tout. Comme nous pouvons le voir ci-dessus, ces trois concepts sont inextricablement liés.

Avantages et inconvénients

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 indicateur plus élevé.

Dans la figure 2, la photo de gauche a 30 ppp et la photo de droite en a 300. Vous trouverez ci-dessous un autre exemple similaire.

Mais ce concept présente aussi des inconvénients. Nous parlons notamment de l'autonomie de l'appareil. Tout est assez simple - si l'image est claire, un smartphone, une tablette ou un autre appareil doté d'un écran ne pourra pas fonctionner longtemps sans recharge. Vous pouvez même établir une règle simple : plus il y a de pi-pi-ay, plus la durée de vie de la batterie est courte.

Bien sûr, pour un PC, ce n'est pas un problème, puisque le moniteur y est toujours branché sur la prise, mais pour certains téléphones, cela peut devenir gros problème. Par conséquent, lors du choix d'un appareil, veillez à ne pas seulement faire attention au nombre de pixels. par pouce, et aussi sur la capacité de la batterie !

Ainsi, nous sommes passés en douceur au sujet de notre choix.

À propos du choix des écrans

Il existe plusieurs règles qui vous aideront à choisir correctement l'affichage, en tenant compte des pixels, elles ressemblent à ceci :

1Assurez-vous de faire attention au type d’affichage. La priorité devrait être AMOLED, voire mieux SuperAMOLED ou OLED. De tels appareils seront toujours meilleurs que les IPS, LCD et autres.

Disons que nous venons au magasin et voyons, par exemple, deux excellents appareils - Samsung Galaxy J7 et Xiaomi Note Redmi 3. Leur prix est presque le même, le deuxième appareil étant d'ailleurs plus puissant.

Les spécifications indiquent que Xiaomi a 400 ppp (pour une raison quelconque, certains écrivent 400,53, mais, comme nous l'avons dit ci-dessus, il ne peut pas y avoir un nombre non entier de pixels). Samsung a 267 PPI et la résolution est proportionnellement 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 propriétaire SuperAMOLED+. Vous pouvez le constater par vous-même si vous prêtez attention à la figure 5.

2Essayez de trouver l’occasion d’examiner personnellement tous les échantillons que vous avez choisis. Vous pouvez d’abord consulter leurs options sur Internet, puis vous rendre dans un magasin d’électronique et voir comment ils affichent réellement les images. Dans ce cas, un point de vue personnel est tout simplement irremplaçable.

3Faites attention à la batterie. Si nous parlons de smartphones, alors pour garantir long travail appareil avec une image claire (ppi élevé et/ou bonne technologie), la capacité de la batterie doit être d'environ 3 000 mAh.

Pour les tablettes, il devrait être encore plus élevé, puisque leur diagonale est plus grande que celle des téléphones.

4Rappelez-vous : plus la diagonale est petite et plus la densité de pixels (le nombre de pixels par pouce) est élevée, plus l'image est claire. Ne vous trompez pas : vous ne pourrez pas obtenir une image très claire avec un écran immense et une petite valeur pi-ay. Il est important de maintenir ici un juste milieu.

5Il est également important de considérer la couverture. De cette façon, les écrans mats produiront une image moins claire et moins saturée, mais seront plus doux pour vos yeux.

Mais les écrans brillants affecteront négativement votre vue, mais l'image qu'ils afficheront sera beaucoup plus belle. Dans ce cas, leur valeur ppi peut être la même.

Ceci est principalement pertinent pour le choix des moniteurs pour PC et ordinateurs portables. Si vous travaillez sur un ordinateur à temps plein ou même plus, il est préférable d'opter pour l'option mate.

Tout cela vous permettra de choisir vous-même l'affichage le plus adapté.

Résultats

ppi ou pi-pi-ai est la densité de pixels ou le nombre de pixels par pouce d'une image. Pour convertir le chiffre en centimètres, vous devez le diviser par 2,54. Il ne peut y avoir de quantité non entière, seulement un tout.

Plus vous la montrez haut, plus l’image sera claire et agréable à regarder. Lors du choix des smartphones, tablettes, moniteurs de 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 d’examiner la technologie et la couverture de l’écran. Assurez-vous également de regarder la capacité de la batterie et de maintenir un juste milieu entre le nombre de pixels. et la taille de l'écran.

Dans l'industrie haute technologie Un nouveau plaisir prend de l'ampleur : placer autant de pixels que possible par unité de surface d'écran. Sinon, nous avons vraiment manqué les compétitions technologiques après que la course aux mégahertz et aux mégapixels soit devenue une chose du passé.

Apple a lancé une nouvelle course, comme cela a été le cas au cours de la dernière décennie. Le premier smartphone iPhone 4 doté d'un écran haute définition a été présenté par lui-même en juin 2010 Steve Emplois. Il s'agissait d'un écran plutôt petit de 3,5 pouces par rapport aux normes actuelles, mais il recevait une résolution matérielle de 960 x 640 pixels. La largeur d'un pixel sur un tel écran n'était que de 78 microns et la densité de pixels était de 326 pixels par pouce (128 pixels par cm). A titre de comparaison : densité de pixels de l'écran smartphone ordinaire– environ 160 ppi, et en écrans d'ordinateur et moins d'une centaine.

Le nouvel écran a été solennellement nommé Retina Display - de mot anglais, signifiant « rétine de l'œil », pour lequel une belle explication a été donnée : certaines études ont montré qu'une personne n'est pas capable de distinguer des points individuels à l'œil nu à une densité supérieure à 300 ppi à une distance de 10 à 12 pouces, c'est-à-dire environ 25-30 cm. À cette distance des téléphones portables, les yeux sont généralement maintenus, c'est pourquoi cette valeur a été choisie, un peu plus de 300 ppi.

Bien sûr, il y a eu immédiatement ceux qui ont voulu contester les résultats de ces études anonymes. Ainsi, le célèbre vulgarisateur scientifique et astronome américain Philip Plait a déclaré que si vous avez une vision aiguë, vous pouvez facilement distinguer des pixels individuels sur un tel écran même à partir de 30 cm, mais en même temps personne ordinaire ces points ne seront pas perceptibles.

Pendant ce temps, Raymond Soneira, expert en qualité d'image et président de DisplayMate Technologies, a noté que la résolution réelle de l'écran Retina est nettement inférieure à la résolution de la rétine. Le fait est que la résolution dépend en grande partie de l’angle sous lequel nous regardons l’objet. Pour une personne ayant une vision parfaite, la résolution de l’œil est d’environ 0,6 minute d’arc, soit 0,01 degré. Cela signifie que deux objet individuel, plus de 5 730 pieds, soit 1,75 km, seront perçus comme un seul point. Sur cette base, Soneira a conclu que si nous regardons un smartphone à une distance de 30 cm, la résolution de notre œil atteint 477 ppi, et si nous zoomons jusqu'à 20 cm, alors la totalité de 716 ppi. Pour obtenir 318 ppp, vous devez placer le téléphone à une distance de 45 cm.

Soneira n'a pas pris en compte une chose : en réalité, il n'y a pas beaucoup de personnes ayant une vision parfaite, et la résolution de la rétine d'une personne moyenne ayant une vision normale est d'environ 1 minute d'arc. Après avoir effectué la correction appropriée, nous obtiendrons les 300 ppi tant convoités - une valeur qui peut être dérivée par de simples calculs, et pas du tout par une recherche mythique dont Jobs a parlé.

Étant donné que la résolution des yeux dépend de la distance à laquelle nous observons l'objet, afin d'obtenir l'effet d'une image « sans pixel » sur les écrans de différents appareils, différentes densités de points sont nécessaires. Par conséquent, l'écran Retina de 9,7 pouces tablette iPad a une densité inférieure de 264 ppp (105 pixels par cm), et les écrans de 15 et 13 pouces des ordinateurs portables MacBook Pro sont de 220 ppp (87 pixels par cm) et 227 ppp (89 pixels par cm).

Jobs avait raison sur l'essentiel : pour arrêter de distinguer les pixels sur l'écran du gadget le plus proche des yeux - un smartphone, une densité d'un peu plus de 300 ppi suffit. Mais la gâchette avait déjà été appuyée et de nombreuses entreprises se sont lancées dans une course qui n’avait même pas de sens théorique pour augmenter la densité de pixels de l’écran. L'essentiel est de dépasser Apple, mais que cela ait un sens ou non est d'une importance secondaire.

Du coup, nous avons déjà reçu beaucoup de produits curieux, quand on les regarde on ne sait pas s’il faut pleurer ou rire. Le japonais Sharp a été l'un des premiers à lancer un smartphone doté d'un écran Full HD de cinq pouces pour les marchés étrangers : avec une résolution de 1920 x 1080, la densité de pixels de l'écran SH930W est de 440 ppp. Le HTC J Butterfly a un écran aux caractéristiques similaires (ou peut-être simplement exactement le même). Les chiffres sont impressionnants, mais, premièrement, on ne sait pas pourquoi un appareil de poche a besoin Pleine résolution HD sur un écran de cinq pouces, et deuxièmement, vous pouvez vous faire mal aux yeux en regardant les moindres détails sur des appareils moins high-tech.

Nouvelle résolution d'écran de dix pouces Tablette Google Le Nexus 10 est encore plus grand : 2 560 x 1 600 pixels. C'est-à-dire la même chose qu'un moniteur de bureau avec une diagonale de 27 à 30 pouces. La densité de pixels est de 300 pixels par pouce. Cela signifie-t-il que Google suggère de regarder l'écran de cette tablette à une distance de 25 à 30 pouces ? Avez-vous déjà essayé de regarder un téléviseur de 50 pouces à un mètre et demi de distance ? Le sentiment est à peu près le même.

L'apogée de la folie est un prototype d'écran de 9,6 pouces développé par la société japonaise Ortus Technology. Sa résolution est de 3840x2160 pixels, ce qui correspond exactement à la prometteuse norme de télévision Ultra HD, ou 4K, qui prévoit d'afficher quatre fois plus de pixels que le Full HD habituel. La densité de pixels de cet écran est de 485 pixels.

La redondance est déjà devenue une fin en soi : personne n'a besoin d'écrans dont les pixels ne peuvent être vus qu'au microscope : ils ne sont déjà pas visibles - lorsqu'ils sont traditionnellement utilisés par des personnes saines et sensées. Pendant ce temps, les écrans avec une densité de pixels accrue posent eux-mêmes de nombreux problèmes liés à la fois au matériel et aux logiciels des gadgets dans lesquels ils sont installés.

Tout d’abord, les écrans avec des résolutions et des densités de pixels plus élevées consomment beaucoup plus d’énergie que les écrans de taille similaire avec des résolutions inférieures. Et ce uniquement lors de l’affichage d’une image statique ! La prise en charge des résolutions ultra-hautes renforce considérablement les exigences relatives au sous-système graphique et, en général, aux ressources informatiques de l'appareil. Cela signifie non seulement une plate-forme beaucoup plus coûteuse, mais également une forte augmentation de la consommation électrique. Les smartphones modernes, même avec des écrans ordinaires, peuvent difficilement supporter une journée de travail sans recharge, mais que se passera-t-il si leur consommation d'énergie n'augmente même pas d'une fois et demie, mais d'au moins des dizaines de pour cent ?

Le problème logiciel est directement lié à la principale exigence d'un appareil électronique : la facilité d'utilisation. Et si, comme le montre la pratique, les gadgets sont sous Contrôle Android faire face à la mise à l’échelle sans trop de difficulté interface utilisateur et des applications avec une résolution plus élevée, alors la technologie Windows, assez curieusement, a de gros problèmes avec cela.

Par exemple, à Tablette Samsung Slate 7, équipé d'un écran de 11,6 pouces avec une résolution de 1366x768 pixels et une densité de pixels assez modeste de 135 ppp, il est impossible de configurer de manière optimale l'interface utilisateur pour Contrôle Windows 7 : Soit ses éléments paraissent trop petits, soit les bords des fenêtres sont masqués au-delà des limites de l'écran. Et c'est l'interface standard du système d'exploitation ! Que dire des applications tierces, dont les développeurs ne pensent pas particulièrement à la mise à l'échelle pour différentes résolutions : beaucoup d'entre elles sont conçues pour 96 ppp, et pas un pixel de plus ! Et même sous Windows 8, où, comme le vantait Microsoft, le problème de l'interface a été pratiquement résolu, il est toujours aussi pertinent que le problème des applications tierces, dont les fenêtres doivent être examinées à la loupe.

D'une manière ou d'une autre, le départ est donné, et nous assistons à une autre course aux beaux numéros, dont le sens n'est rien d'autre que celui de voler avec les Grues de Sibérie. Nous ne pouvons qu’espérer que les entreprises impliquées dans cet événement douteux proposeront des développements et des avancées technologiques vraiment utiles. Sinon, nous risquons à nouveau d’avoir des appareils photo inutiles de 20 mégapixels dotés d’optiques en plastique trouble.

Cette longue lecture est conçue pour les concepteurs avancés qui souhaitent en savoir plus sur la conception multi-DPI et multiplateforme à partir des bases.

Pas de mathématiques compliquées ni de graphiques illisibles, juste des explications simples divisées en courtes sections pour une meilleure compréhension et une application rapide dans votre processus de conception.

Que sont le DPI et le PPI

DPI ou Dots Per Inch est une mesure de la densité des points utilisée à l’origine dans l’impression. Il s'agit du nombre de points d'encre que votre imprimante peut contenir dans un pouce. Plus le DPI est bas, moins l’impression est détaillée.

Ce concept s'applique également aux écrans d'ordinateur appelés PPI ou Pixels Per Inch. Le principe est le même : la valeur compte le nombre de pixels que votre écran est capable d'afficher sur 1 pouce. Le terme DPI est également utilisé pour décrire les caractéristiques de l'écran.

Les ordinateurs Windows ont PPI=96 par défaut. Mac utilise PPI=72. Ces valeurs étaient dues au fait que les écrans produits à cette époque affichaient 72 « points » ou pixels par pouce. C'était le cas dans les années 80, et désormais les appareils sous Windows, Mac et d'autres plates-formes présentent de nombreuses variations dans la résolution d'écran PPI.

Résolution, pixel et taille physique

Demander à quelqu'un quelle est la taille d'un pixel est un excellent moyen de confondre la personne avec la complexité de la question. Un pixel n'a pas de taille, non signification physique ou un sens au-delà de sa représentation mathématique. Cela fait partie du lien entre taille physique de l'écran, exprimé en pouces, et résolution d'écran, exprimé en pixels par pouce, et taille de l'écran en pixels, exprimé en pixels. En termes généraux, cela ressemble à ceci :

Les écrans de bureau non rétiniens classiques (y compris Mac) auront un PPI compris entre 72 et 120. Concevoir avec un PPI compris entre 72 et 120 garantit que votre travail aura à peu près les mêmes proportions en taille.

Voici un exemple :

Le Mac Cinema Display 27" a un PPI de 109, ce qui signifie qu'il affiche 109 pixels par pouce de surface d'écran. La largeur chanfreinée est de 25,7 pouces (65 cm). La largeur de l'écran lui-même est d'environ 23,5 pouces, soit 23,5*109~2560, ce qui constitue la résolution d'écran native de 2560x1440px.

*Je sais que 23,5*109 n'est pas réellement égal à 2560. Ce serait en fait 23,486238532 pouces. Un résultat plus précis sera obtenu en comptant les pixels par centimètre, mais j'espère que vous comprenez l'idée.

Impact sur votre conception

Disons que vous avez dessiné un carré bleu de 109*109px sur l'écran dont nous venons de parler.

Ce carré aura une taille physique de 1*1 pouce. Mais si l'écran de l'utilisateur a un PPI de 72, votre carré bleu sera plus grand en taille physique. Puisque PPI = 72, il faudra environ un pouce et demi d’espace sur l’écran pour afficher un carré de 109 pixels de côté. Regardez une simulation de cet effet ci-dessous :

Quelles que soient les différences de couleur et de résolution, n’oubliez pas que chacun verra votre design différemment. Votre objectif devrait être de trouver le meilleur compromis couvrant le plus grand pourcentage d’utilisateurs. Ne vous attendez pas à ce que tous les utilisateurs aient le même écran que vous.

Résolution d'écran (et résolution native)

La résolution de l’écran peut avoir un impact significatif sur la façon dont un utilisateur perçoit votre conception. Depuis que les moniteurs CRT ont été remplacés par des écrans LCD, les utilisateurs disposent désormais d'une résolution native qui garantit un bon rapport taille/PPI.

La résolution détermine le nombre de pixels affichés sur l'écran (par exemple, 2560 * 1440px pour un écran cinéma de 27 pouces) - 2560 en largeur et 1440 en hauteur. Bien sûr, maintenant que vous savez ce que signifie PPI, vous réalisez qu’il ne peut pas s’agir d’une unité de mesure de la taille physique. Une image avec cette résolution peut être étirée sur tout le mur ou sur un très petit écran.

Aujourd'hui, les moniteurs LCD sont dotés d'une résolution prédéfinie ou native qui reflète le nombre de pixels que l'écran peut afficher. C'était un peu différent des anciens moniteurs CRT, mais comme ils appartiennent au passé, nous n'entrerons pas dans les détails (je peux aussi cacher mon manque partiel de connaissances dans le domaine des bons vieux téléviseurs).

Prenons notre Cinema Display de 27 pouces, qui peut afficher 190 PPI à sa résolution native de 2560*1440px. Si vous réduisez la résolution, les éléments seront plus grands. Mais en fait, vous disposerez de 23,5 pouces horizontalement pour remplir de pixels, mais avec moins d'entre eux.

J'ai dit « en fait » parce que dans ce cas, il en sera ainsi. L'écran a une résolution native de 2560*1440px. Si la résolution est abaissée, les pixels resteront en place, affichant 109PPI. Pour combler l'écart entre ces paramètres, votre système d'exploitation commencera simplement à tout étirer. Votre GPU prendra chaque pixel et calculera un nouveau rapport hauteur/largeur pour l'afficher.

Si vous définissez la résolution sur 1280*720 (la moitié de la largeur précédente, la moitié de la hauteur), votre GPU simulera un pixel deux fois plus grand qu'auparavant pour remplir l'écran. Quel sera le résultat ? Eh bien, les graphiques peuvent devenir flous. Alors que la demi-proportion semblera plus ou moins bonne car il s'agit d'un simple diviseur, alors si vous définissez la proportion sur ⅓ ou ¾, vous vous retrouverez avec des valeurs fractionnaires et vous NE POUVEZ PAS diviser le pixel. Voici un exemple :

Regardez l'exemple ci-dessous. Prenez une ligne de 1 pixel d'épaisseur sur un écran de résolution native. Appliquez maintenant une résolution 150 % plus petite. Pour remplir l'écran de graphiques, le processeur devra générer des graphiques à 150%, en multipliant le tout par 1,5. 1*1,5=1,5, mais nous n'avons pas de demi-pixels. En conséquence, les pixels extérieurs seront remplis d’une nuance de couleur fractionnée, ce qui créera un effet flou.

Ainsi, si vous possédez un Macbook Pro Retina et que vous devez mesurer la résolution, la fenêtre ci-dessous vous sera présentée, vous informant que la résolution sélectionnée « ressemblera » à 1280*800px. C'est ainsi que le système exprime les proportions de taille via la résolution de l'utilisateur.

C'est une idée très subjective car elle utilise la résolution en pixels comme mesure de la taille physique, mais ce n'est pas un mensonge, du moins de leur point de vue.

Conclusion: Si vous souhaitez toujours voir votre design avec une qualité au pixel près, n'utilisez jamais une résolution autre que votre résolution native. Oui, vous serez peut-être plus à l'aise avec un rapport hauteur/largeur plus petit, mais en ce qui concerne les pixels, il est conseillé d'être aussi précis que possible. Malheureusement, certaines personnes utilisent la résolution pour mieux voir ce qui est à l'écran (en particulier un écran d'ordinateur). Ici aussi, votre conception peut paraître mauvaise, mais ici, les utilisateurs se soucient davantage de la lisibilité que de l'authenticité de la conception.

Qu'est-ce que la résolution 4K ?

Vous avez dû beaucoup entendre le terme 4K ces derniers temps, ce sujet est actuellement à la mode. Pour comprendre de quoi il s’agit, regardons d’abord ce que signifie « HD ». N'oubliez pas qu'il s'agit d'une version ultra simplifiée de l'explication. Je vais simplement vous expliquer en utilisant les autorisations les plus courantes comme exemple. Il existe différentes catégories HD.

Le terme HD s'applique à toute résolution à partir de 1280x720px ou 720p par 720 lignes horizontales. Certains pourraient appeler cette résolution SD, selon la définition standard.

Le terme Full HD s'applique aux écrans 1920x1080px. La plupart des téléviseurs utilisent cette résolution, tout comme un nombre croissant de téléphones haut de gamme (Galaxy SIV, HTC One, Sony Xperia Z, Nexus5).

La résolution 4K commence à 3840 x 2160 pixels. On l'appelle aussi Quad HD, UHD d'Ultra HD. En gros, vous pouvez intégrer 4 x 1080p dans un écran 4K en fonction du nombre de pixels.

La deuxième résolution 4K est de 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

Moderne Système d'exploitation Ils ne mettent pas à l'échelle 4K, ce qui signifie que si vous connectez un écran 4K à un Chromebook ou un Macbook, il utilisera la source DPI la plus élevée, dans ce cas 200 % ou @2x, et l'affichera dans un rapport hauteur/largeur normal. Tout aura l'air bien, mais assez petit.

Exemple hypothétique : si vous connectez un écran 4K de 12 ″ à un ordinateur de 12 ″ haute résolution (2x), tout apparaîtra à la moitié de la taille.
Conclusion:

- La 4K est 4 fois plus grande que la Full HD.

- Si le système d'exploitation prend en charge la 4K, mais n'est pas mis à l'échelle, il n'existe pas de source 4K spéciale.

- Sur ce moment pas de téléphones ou de tablettes avec une résolution 4k.

Surveiller le taux de scintillement

Faisons une pause avec le PPI et les résolutions d'écran pendant un moment. Vous avez probablement vu que les paramètres de l'écran affichent également une valeur en Hertz (Hz). Cela n'a rien à voir avec le PPI, mais au cas où vous vous poseriez la question, le taux de scintillement du moniteur ou le taux de rafraîchissement de l'image est une unité de mesure de la vitesse à laquelle votre moniteur affichera une image ou une image fixe, par seconde. Un moniteur 60 Hz pourra afficher 60 images par seconde (60 ips). Moniteur avec une fréquence de 120 Hz - 120 ips, etc.

Dans le contexte d'une interface utilisateur, le taux de scintillement de votre moniteur déterminera la fluidité et le détail de votre animation. La plupart des écrans ont une fréquence de 60 Hz. N'oubliez pas que le nombre d'images affichées par seconde dépend également du processeur et de la puissance graphique de l'appareil. Cela ne sert à rien d’adapter un écran 120 Hz à Atari 2600.

Pour une meilleure compréhension, regardez l’exemple ci-dessous. Le T. rex va du point A au point B à un rythme rapide et précisément constant sur les deux écrans - 60 Hz et 120 Hz. Un écran à 60 ips est capable d'afficher 9 images lors du calcul, et un écran à 120 Hz peut logiquement afficher deux fois plus d'images dans la même unité de temps. Les animations seront bien plus fluides sur un écran 120 Hz.

Conclusion: Certains affirment que l’œil humain ne peut pas détecter les fréquences supérieures à 60 ips. C'est faux. N'écoutez pas des gens aussi intelligents, riez-leur au nez aussi évidemment que possible.

Qu'est-ce qu'un écran rétine

Le nom « Retina display » a été introduit par Apple avec la sortie de l'iPhone 4. L'écran s'appelait Retina car le PPI de l'appareil était si élevé que la rétine de l'œil humain (en anglais retina) n'était pas censée distinguer l'écran. pixels sur les écrans.

Cela est vrai pour certaines tailles d'écran, mais à mesure que les écrans s'améliorent, nos yeux sont désormais suffisamment entraînés pour voir les pixels, en particulier sur les éléments incurvés de l'interface utilisateur.

Techniquement, ces écrans affichent deux fois plus de pixels en hauteur et en largeur dans la même taille physique.

L'iPhone 3G/S avait une diagonale de 3,5 pouces et une résolution de 480*320px, ce qui correspond à 163PPI.

Le téléphone 4/S avait également une diagonale de 3,5 pouces et une résolution de 960*640px, ce qui correspond à 326PPI.

OUAH! Exactement deux fois. Multiplicateur simple. Ainsi, au lieu d’être plus petits, les éléments sur l’écran sont deux fois plus nets car ils ont deux fois plus de pixels et ont la même taille physique. 1 pixel normal = 4 pixels rétiniens, soit quatre fois plus de pixels.

Utilisez l’exemple ci-dessous aux fins prévues lors du développement de conceptions complexes.

Attention : assez difficile à simuler qualité différente images de deux appareils sur le troisième, c'est-à-dire que vous regardez maintenant. Un lecteur de musique Retina, même occupant le même espace physique, sera deux fois plus net et de meilleure qualité sur l'iPhone 4. Si vous souhaitez le vérifier, utilisez l'une de mes démos gratuites.

Le nom « Retina » appartient à Apple, donc d'autres sociétés utilisent « HI-DPI » à la place, voire aucun nom.

Conclusion: Les produits Apple sont un excellent moyen de se familiariser avec la conversion DPI pour comprendre les différences entre la résolution, le PPI et le rapport à la taille physique, car vous ne devez utiliser qu'un seul multiplicateur.

Qu'est-ce qu'un multiplicateur ?

Le multiplicateur est votre sauveur mathématique lorsqu'il s'agit de convertir des conceptions dans différentes résolutions PPI. Une fois que vous connaissez le multiplicateur, vous n'avez pas à vous soucier des spécifications détaillées de l'appareil.

Prenons comme exemple les iPhone 3G et 4. Vous disposez de 4 fois plus de pixels (2x largeur et 2x hauteur) pour la même taille physique. Votre multiplicateur est donc de 2. Cela signifie que pour rendre vos sources compatibles avec la résolution 4G, il vous suffit de multiplier la taille des sources par 2, et c'est tout.

Supposons que vous créiez un bouton de 44 x 44 px, ce qui correspond à la taille recommandée pour les boutons tactiles sous iOS (nous y reviendrons plus tard dans cet article). Appelons cela un bouton typique nommé « Jim ».
Pour que notre Jim ait fière allure sur l'iPhone 4, vous devrez créer une version deux fois plus grande. C'est ce que nous faisons ici :

C'est assez simple. Il existe désormais une version de Jim.png pour le PPI normal (iPhone 3) et une version [email protégé] pour 200% PPI (iPhone 4.)

Maintenant, vous dites : « Je suis presque sûr qu'il y a d'autres facteurs que deux. » Il en est ainsi, et c’est là que le cauchemar commence. Ce n'est peut-être pas un cauchemar, mais je suis sûr que vous préférez passer toute la journée à repasser des chaussettes plutôt que de travailler avec ces innombrables multiplicateurs. Dieu merci, ce n'est pas aussi effrayant qu'il y paraît à première vue. Nous reviendrons à cela plus tard.

Parlons d'abord des unités, car vous aurez besoin de l'unité, et non du pixel, pour spécifier des conceptions multi-DPI. Et c’est là que DP et PT entrent en scène.

Conclusion: Le multiplicateur est quelque chose que vous devez connaître pour toute conception sur laquelle vous travaillez. Tout ce monde de chaos repose sur des multiplicateurs, rendant toutes ces tailles d'écran, PPI et autres dimensions compréhensibles pour les humains.

Que sont DP, PT et SP ?

DP ou PT est une unité de mesure qui peut être utilisée pour décrire les dispositions de conception de nombreux appareils, à de nombreux DPI.

DP ou DiP est une abréviation de Device Independent Pixel, et PT signifie Point. PT fait référence à Apple, DP fait référence à Android, mais ils signifient à peu près la même chose.

En bref, ces unités déterminent la taille quel que soit le multiplicateur de l'appareil. Ceci est très utile lorsque vous devez discuter des spécifications avec différents participants au flux de travail, tels que le concepteur et l'ingénieur. Revenons à l'exemple du bouton-Jim.

La largeur de Jim est de 44 px sur les écrans normaux non Retina et de 88 px sur écrans rétiniens. Ajoutons un remplissage de 20 px autour du bouton car Jim aime espace libre. Ensuite, pour la rétine, le remplissage sera de 40 px. Mais compter les pixels rétiniens n’a aucun sens lorsque vous concevez des écrans non rétiniens.

Nous prendrons donc simplement la proportion normale de 100 % de non-rétine comme base pour tout.

Dans ce cas, la taille de Jim sera de 44*44DP ou PT et le rembourrage sera de 20DP ou PT. Vous pouvez donner des spécifications 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 trouve plus facile de toujours concevoir dans le PPI natif de votre écran.

SP est un terme distinct de DP et PT, mais fonctionne sur le même principe. SP est l'abréviation de Pixel indépendant de l'échelle. SP sera affecté par les paramètres de police de l'utilisateur sur l'appareil Android. En tant que designer, une mission SP me semble être une mission DP pour autre chose. basez-le sur ce qui est lisible à l'échelle 1x (16sp est une excellente taille de police, par exemple).

Conclusion: Utilisez toujours des valeurs indépendantes de la résolution et de l'échelle pour le remplissage. Toujours. Plus les tailles d’écran et les résolutions sont variées, plus cela devient important.

Configuration PPI

Maintenant que vous savez ce que sont l'IPP, la rétine et le multiplicateur, il est important d'en parler. « Que se passe-t-il si je modifie les paramètres PPI dans mon éditeur de conception ? »

Si vous vous êtes posé cette question, c'est que vous connaissez un peu les logiciels de conception. Voici quelque chose que j'ai mis un peu de temps à comprendre, et c'est un point important :

Tout le contenu non imprimé utilise des dimensions en pixels, quelle que soit la configuration PPI initialement définie.

La configuration du PPI dans le logiciel est l'apanage de l'imprimerie. Si vous concevez pour le Web, PPI n’affectera en aucune façon la taille de votre raster.

C'est pourquoi nous utilisons des multiplicateurs plutôt que des valeurs PPI directes. Votre toile et vos graphiques seront toujours convertis en pixels par le programme en utilisant le multiplicateur approprié.

Voici un exemple. Vous pouvez essayer de faire la même chose vous-même dans un programme prenant en charge les paramètres PPI, comme Photoshop. J'ai dessiné un rectangle de 80*80 px et un texte de 16 pts dans Photoshop avec des paramètres de 72 PPI. Le second est le même, mais avec des réglages à 144PPI.

Comme vous pouvez le constater, le texte est devenu un peu plus grand, deux fois plus précisément pour être précis, tandis que le carré n'a pas changé. La raison en est que le programme (Photoshop dans ce cas) met à l'échelle les valeurs pt (comme ils le devraient) en fonction de la valeur PPI, ce qui entraîne une taille deux fois plus grande lors du rendu du texte avec une configuration double PPI. En revanche, ce qui a été défini en pixels, c'est-à-dire le carré bleu reste de la même taille. Un pixel est un pixel et restera un pixel, quel que soit le PPI que vous définissez. Seul le PPI de l'écran qui l'affiche le modifiera.

Il est important de se rappeler que lors de la conception pour appareils numériques Le PPI n'affectera que la façon dont vous percevez le design, ainsi que le processus de création de celui-ci et les graphiques tels que les polices. Si vous incluez des sources avec différentes valeurs PPI dans votre processus de conception, le programme redimensionnera tous les fichiers en fonction de la proportion PPI du fichier résultant. Cela peut être un problème pour vous.

Solution? Utilisez un PPI (de préférence compris entre 72 et 120 pour les conceptions 1x). Personnellement, j'utilise 72PPI car c'est le paramètre par défaut dans Photoshop et la plupart de mes collègues l'utilisent également.

Conclusion:

- Les paramètres PPI n'ont aucun effet sur l'exportation Web.

- Les paramètres PPI n'affecteront que les graphiques générés à partir de mesures indépendantes du PPI comme PT.

- Le pixel est une unité de mesure pour tout graphique numérique.

- Soyez conscient des multiplicateurs et de la raison pour laquelle vous concevez au lieu de vous concentrer sur le PPI.

- Utilisez des paramètres PPI réalistes lors de la conception numérique. Utilisez quelque chose qui vous donne une idée claire de l'affichage final sur l'appareil (72-120ppi pour 1x web/bureau, par exemple).

- Utilisez la même valeur PPI sur tous les fichiers.
Ce problème est abordé plus en détail dans un article sur StackExchange.

Comment gérer le PPI sur iOS

Il est temps de plonger dans la conception spécifique à la plateforme.

Rappelons-nous quoi Appareils iOS est sorti début 2014.

En ce qui concerne la taille de l'écran et le DPI, iOS propose 2 types d'appareils mobiles et 2 types d'écrans pour les tablettes et les ordinateurs de bureau.

Dans la branche mobile, ils ont l'iPhone et, bien sûr, l'iPad.

Dans la catégorie des téléphones, il y a les anciens 3GS (toujours pris en charge par iOS6) et supérieurs. Seul l'iPhone 3GS n'est pas rétinien. Les iPhone 5 et supérieurs sont davantage utilisés écran long avec le même DPI que l'iPhone 4 et 4s. Voici une aide-mémoire pour vous :

En septembre 2014, l'Apple Keynote 2014 a été annoncée, vous disposez désormais de 2 nouvelles catégories d'iPhone : iPhone 6 et iPhone 6 Plus.

L'iPhone 6 est légèrement plus grand que le 5 (de 0,7″), mais le PPI est le même. L'iPhone 6 Plus, quant à lui, introduit un tout nouveau multiplicateur pour iOS - @3x, en raison de sa taille de 5,5 pouces.

Il y a quelque chose de spécial dans la façon dont l'iPhone 6 Plus gère son écran par rapport aux autres Modèles d'iPhone: Cela réduit les graphiques.

Lorsque vous créez un design pour l'iPhone 6, par exemple, vous dessinerez sur une toile de 1 334 x 750 pixels et le téléphone restituera 1 334 x 750 pixels physiques. Dans le cas de l'iPhone 6 Plus, le téléphone a une résolution inférieure à celle de l'image, vous devrez donc réaliser le design dans une résolution de 2208 * 1242px, et le téléphone le réduira déjà à la taille idéale. Découvrez l'illustration ci-dessous :

La résolution physique est 15 % inférieure à la résolution de rendu, il y aura quelques problèmes comme des demi-pixels, ce qui peut rendre les détails les plus fins un peu flous. La résolution est si élevée que ces imperfections seront presque invisibles, à moins d’y regarder de trop près. Dessinez donc sur une toile de 2 208 x 1 242 px et rappelez-vous les problèmes possibles pour les très petits détails comme les séparateurs. Regardez la simulation :

Conclusion, règles Android :

- Android dispose de 7 DPI différents, vous devez vous en préoccuper de 4 : mdpi, hdpi, xhdpi, xxhdpi plus un si vous souhaitez créer une future version, en XXXHDPI

- MDPI est le DPI de base avec un multiplicateur 1x

- Android utilise dp au lieu de pt pour les spécifications, mais c'est essentiellement la même chose

- Pixels ronds obtenus à partir de facteurs décimaux.

- Livrer les sources au format .png.

- Développer un système de dénomination unifié pour les fichiers sources en collaboration avec la personne responsable de leur mise en œuvre.

PPI sur Mac et Chrome OS

Mac (OSX) et Chrome OS se comportent de manière assez similaire en termes de PPI. Les deux systèmes d'exploitation prennent en charge le PPI standard (100 %) et les résolutions supérieures, y compris Retina (200 %). Comme pour les modèles iPhone et iPad, celui-ci utilise uniquement un multiplicateur 2x.

Même si la majorité de vos utilisateurs, Mac et Chrome OS, utiliseront des appareils basse résolution, je vous recommande fortement de préparer des versions d'écran dans haute résolution. Des sources pour l'avenir Versions Chrome Le système d'exploitation inclut des fichiers haute résolution. Croyez-moi, ce ne sera pas une perte de temps.

Il n'y a actuellement que trois ordinateurs portables utilisant ce PPI - Macbook Pro 13″, 15″ et Chromebook Pixel. De plus, le Chromebook Pixe est également tactile.

Sources requises, exemple Chrome

Un exemple parfait de cette similitude est le code source du bouton de la barre d’outils Chrome. Nous utilisons les mêmes boutons sur les deux plateformes. Même si le code est différent, les graphismes sont identiques. Regardez le menu Chrome et les boutons de favoris :

Conclusion:

- Chrome OS et OSX utilisent un multiplicateur, 2.

- Seulement Écran chromé Le système d'exploitation haute résolution prend également en charge les commandes tactiles.

Sources extensibles

Peu importe qu'il s'agisse d'un ordinateur de bureau ou application mobile vous développez, vous avez presque toujours besoin d’actifs extensibles. Cette source permet de redimensionner le code à la taille souhaitée sans perte de qualité lors du rendu.

Ce n’est pas la même chose avec les actifs reproductibles, qui fonctionnent différemment, même s’ils donnent parfois le même résultat.

Regardez l'exemple ci-dessous. La barre d'outils sur iOS est générée à partir d'une source ultra-mince qui se répète le long de l'axe X sur tout l'écran.

Voyons maintenant comment différentes plateformes utilisent des sources extensibles.

Sources extensibles sur iOS

iOS facilite le travail du concepteur car l'étirement est défini dans le code. Tout ce que vous avez à faire est de fournir une image de base et, si vous n'implémentez pas la conception vous-même dans le code, de lui donner des spécifications pour qu'elle s'étende horizontalement, verticalement ou les deux. Voici un exemple de bouton Chrome standard dans iOS.

Sources extensibles sur Android

Android utilise ces sources différemment d'iOS. La source elle-même est entourée de 4 lignes. Ils doivent être spécifiés dans la tranche/image dans le cadre des graphiques, affichant littéralement visuellement les spécifications de la source dans la source elle-même.

Ces 4 lignes définissent deux choses : la zone de zoom et la zone de remplissage. Si ces deux paramètres sont spécifiés, le code pourra simplement étirer la source et placer le contenu à l'emplacement spécifié. Regardez l'exemple ci-dessous : une version Android du bouton Chrome standard que vous avez déjà vu.

Comme vous pouvez le voir, l'image de 9 patchs est un ensemble de 4 bandes #000000 vierges. Ils doivent avoir une largeur de 1 px pour n’importe quel DPI ; Il s'agit d'une indication de code. La zone d'étirement n'inclut pas les coins arrondis car ce n'est pas quelque chose qui peut être répété (sinon cela aura l'air horrible). Dans ce cas, nous avons ajouté un remplissage de 10 dp autour du bouton. C’est quelque chose qui ne devra pas être précisé dans le cahier des charges.

L'utilisation de 9-patch nécessite d'ajouter .9 au nom du fichier, tout comme vous ajoutez @2x pour les sources iOS. Autre exemple avec notre bouton :

N'oubliez pas de faire attention à la taille de la source. Si je l'ai rendu assez grand à des fins de démonstration, il est important d'optimiser le poids de la source en réduisant sa taille au minimum, comme indiqué ci-dessous. J'ai laissé les coins tels qu'ils étaient, mais j'ai réduit au minimum l'étirement et la zone de contenu.

Assurez-vous que les marques à 9 patchs ne chevauchent pas votre conception afin que la source soit correctement recadrée. .9 doit être aussi proche que possible de l'original sans le chevaucher, essayez de ne pas mettre de retrait en ligne. L'exemple précédent avait des marges en ligne en raison de l'ombre.

Le patch 9 ne remplace pas l'exportation source pour chaque DPI. Cela doit être fait pour chaque version du code source.

Enfin, .9 peut contenir plusieurs zones extensibles (en haut et à gauche). Je ne l'ai pas utilisé très souvent, voire jamais, dans mon travail, mais cela mérite d'être mentionné.

Conclusion: Demandez toujours à la personne qui met en œuvre votre conception quelle solution est la meilleure à utiliser, en particulier pour les ordinateurs de bureau. Plus vous avez d'images, plus l'application sera lourde et plus il vous sera difficile de mettre à jour la source si des modifications sont nécessaires. 9-patch ne doit être utilisé qu'avec les noms corrects et la bonne organisation des sources.

Sources vectorielles

Alors que la variété d’écrans utilisant des plages DPI plus larges continue de croître, le passage à des sources vectorielles plutôt qu’à des sources raster vaut largement la peine d’être envisagé.

La forme de source vectorielle la plus fréquemment utilisée et la plus répandue est le format .svg. Il s'agit d'un fichier .xml lisible et modifiable par la plupart des programmes, y compris les navigateurs Web, puisqu'il a été créé à l'origine pour le Web. Un autre format prend en charge des vecteurs tels que .ai ( Adobe Illustrator), .eps ou encore .pdf.

Le principal avantage des images vectorielles est leur évolutivité. Il n'est pas nécessaire de créer des bitmaps pour toutes les variantes PPI, le vecteur sera automatiquement mis à l'échelle en fonction du multiplicateur d'écran.

Svg contient des informations XML sur la façon de dessiner des graphiques. Le logiciel/OS/navigateur interprète ensuite ces commandes pour restituer la source à la taille sélectionnée.

L'utilisation de ce format présente des avantages étonnants :

• Réduire la taille de l'application
• Réduction totale de l'utilisation du raster
• Plus facile de changer les couleurs par programme
• Mise à l'échelle automatique et non destructive

Même s'il y a quelques inconvénients :

• Moins de liberté visuelle, pas très pratique pour les graphiques complexes, notamment les ombres, dégradés et autres effets complexes
• Peut avoir un impact négatif sur l'application ou le site en raison des ressources de traitement requises.
• Aucun contrôle sur les pixels en raison de la mise à l'échelle automatique.

Avec l'évolution de la conception d'interface vers des styles plus "plats", moins d'utilisation des ombres, des dégradés, .vector devient de plus en plus utile et utilisé. Malgré cela, vous devez utiliser les sources vectorielles avec prudence.

Comme déjà mentionné dans les inconvénients, .svg peut grandement affecter les performances du produit. Le format fonctionne très bien sur le Web ; pour iOS et Android, des solutions vectorielles distinctes sont préférables. iOS utilise .pdf, Android - VecteurDrawable.

Les spécifications de Chrome OS à ce sujet n'ont pas encore été publiées. Cependant, étant donné que toutes les applications Chrome OS sont des applications Web, je suggère quand même de créer une conception tactile. Mon conseil : utilisez les standards tactiles Android.

Web, appareils hybrides et avenir

Si vous créez des conceptions pour des appareils mobiles, la voie à suivre sera claire - certainement le contrôle tactile. Si vous concevez pour le bureau, rendez-le non tactile. Cela semble simple, mais cela ignore la dernière tendance de plus en plus populaire : les appareils hybrides.
L’appareil hybride peut être contrôlé de manière tactile ou non. Les Chromebook Pixel, Surface Pro et Lenovo Yoga en sont de bons exemples.

Que faire dans ce cas ? Il n’y a pas de réponse simple à cette question, mais je vais essayer de vous conseiller de choisir les commandes tactiles. C’est dans cette direction que la technologie évolue.

Si vous concevez pour le Web, pensez à contrôle tactileà l'avance.
Conclusion:

- Quoi que vous fassiez pour l'avenir, pensez à vos projets en termes d'appareils mobiles et de commandes tactiles.

- Utilisez les normes de zone tactile pour chaque système d'exploitation. Cela contribuera à améliorer la conception et à assurer la cohérence. Tailles standards des zones tactiles plus donnéÀ titre indicatif, il n’est pas nécessaire de les suivre strictement. Vous contrôlez le processus et prenez vous-même les décisions.

Logiciel de conception d'interfaces

Le logiciel ne définit pas les compétences d'un concepteur, mais choisir le bon outil pour une tâche donnée peut améliorer considérablement la productivité et simplifier le processus de conception lui-même. Le savoir-faire en matière de logiciels ne devrait pas être votre seule compétence, mais l'apprentissage et la maîtrise des bons outils constitueront une excellente base pour transformer vos idées en réalité.

Différents logiciels ont différentes approches pour travailler avec les variations DPI dans la conception d'interface. Certains programmes sont particulièrement adaptés à certains objectifs. Voici les solutions les plus populaires :

Photoshop

La mère de tous les outils de conception. Peut-être le choix le plus populaire aujourd’hui en matière de conception d’interfaces. Il existe d'innombrables ressources, didacticiels et articles dédiés à Photoshop. Ce « vieil homme » est à l’origine du développement de l’industrie du design d’interfaces.

Initialement, le programme a été créé pour traiter des graphiques raster et des photographies, comme son nom l'indique. Au fil des années, il a évolué et les concepteurs ont commencé à l’utiliser pour la conception d’interfaces. Cela était en partie dicté par l'habitude, mais aussi par le fait qu'il s'agissait presque du seul outil capable de fournir la qualité requise.

Photoshop est de loin le leader en matière d'édition raster et se classe également au premier rang en termes de popularité pour la conception d'interfaces. En raison de son existence depuis des décennies, le programme est devenu envahi par les fonctionnalités, c'est pourquoi il n'est pas si facile à maîtriser. C'est exactement le cas lorsque presque tout peut y être fait, mais pas toujours de la manière la plus optimale.

Parce qu'il a été créé à l'origine pour les graphiques raster, Photoshop est indépendant du DPI, contrairement à Illustrator et Sketch, décrits ci-dessous.

Illustrateur

C'est le frère vectoriel de Photoshop. Comme son nom l'indique, il a été créé pour les illustrateurs, mais il est également activement utilisé dans la conception d'interfaces.

Illustrator est bien adapté aux conceptions imprimées, tout comme son interface. Travailler avec les couleurs, l'échelle, les règles et les unités de mesure peut être déroutant au début, il faudra un peu de temps et des modifications mineures pour s'adapter aux conceptions d'interface. Comme Photoshop, c'est un outil incroyablement puissant avec une courbe d'apprentissage très abrupte.

Contrairement à Photoshop, Illustrator est indépendant du DPI en raison de sa vectorisation. Contrairement aux images raster, Graphiques vectoriels basé sur formules mathématiques, et il peut être mis à l'échelle par programme sans perte de qualité.

Comprendre la différence entre raster et image vectorielle est la clé pour créer des conceptions et des sources évolutives.

Esquisse 3.0

Sketch est un outil relativement nouveau par rapport à Photoshop et Illustrator. Apparu il y a à peine 4 ans, ce programme a fait beaucoup de bruit (dans le bon sens) dans l'industrie de la conception d'interfaces. La raison en est que Sketch a été conçu à l’origine dans un seul but : la conception d’interfaces. Sketch se positionne comme un outil parfaitement adapté à son public de niche : les concepteurs d'interfaces.

Sketch convient au prototypage approximatif ainsi qu'à la conception visuelle plus complexe. Il est entièrement vectoriel, comme Illustrator, avec une interface minimaliste et très bien pensée. La combinaison des plans de travail avec la facilité d'utilisation et la flexibilité du système de génération de sources fait de Sketch la solution la plus rapide pour la conception multi-DPI et multi-plateforme. Les versions récentes en font une alternative très intéressante à Photoshop.

L’inconvénient est que Sketch est développé par une équipe plus petite et n’est toujours pas aussi populaire que Photoshop. De plus, il dispose d'un ensemble plutôt maigre de capacités de traitement raster. À cet égard, Photoshop est bien meilleur. Et enfin, étant encore assez jeune, il ne dispose pas d'autant de ressources, de tutoriels et d'une communauté aussi large que Photoshop. Mais il faut noter que la communauté est très active et motivée pour le développement.

Par expérience personnelle, j'utilise Photoshop depuis l'âge de 8 ans, mais je suis récemment passé à Sketch 3.0 pour la plupart des tâches de conception. Ce n’est pas un gage de qualité ; je pense que Photoshop reste un excellent outil. Sketch répond mieux à mes besoins.

Figma

Nouveauté fin 2015, Figma est un outil de conception vectorielle basé sur un navigateur (fonctionne principalement via Chrome). C'est comme une version cloud de Sketch avec des capacités de collaboration en équipe et une intégration Slack. Une prouesse d’ingénierie impressionnante pour tenter de réaliser l’outil de conception du futur.

Le plus grand avantage de Figma est sa multiplateforme (fonctionne partout où Chrome s'exécute) et sa capacité à collaborer et à éditer avec plusieurs personnes en même temps. Cependant, si vous ou votre entreprise n'êtes pas particulièrement habitués à travailler dans les services web, le choix risque d'être vain, car il n'y a pas de version locale programmes.

Conclusion: Il n’existe pas d’outils idéaux, mais il y a ceux avec lesquels vous êtes à l’aise de travailler. Si vous disposez de suffisamment de temps et d’argent, testez tous les programmes répertoriés pour vous faire votre propre opinion.