Designer-Handbuch zu DPI – Konvertieren in reale Größen

Offenlegung: Ihr Support hilft dabei, die Website am Laufen zu halten! Für einige der auf dieser Seite empfohlenen Dienstleistungen erhalten wir eine Empfehlungsgebühr.


Im Web steht DPI für Dichtepixel pro Zoll. PPI steht einfach für Pixel pro Zoll. (Obwohl DPI aus der Druckindustrie stammt, wird es aufgrund seiner modernisierten Definition häufig anstelle von PPI im Internet verwendet.)

Unabhängig davon, welchen Initialismus Sie bevorzugen, müssen Sie wissen, wie sich die DPI-Einstellungen auf die Darstellung Ihrer Grafiken auf dem Bildschirm auswirken, wenn Sie Websites oder Apps entwerfen.

Der inoffizielle Standard für Grafikdesign für das Web ist 72 DPI. Dies war die Standard-DPI-Einstellung von Photoshop in den Tagen des ersten Mac-Computers, des 128K. (Hier ist ein schöner Vergleich der Pixeldichte des 128K mit der eines iPad.)

Durch die Verwendung von 72 DPI war das Drucken zuverlässiger. Und 72 DPI sind zu Recht oder zu Unrecht bei uns geblieben.

In der Praxis haben viele der von uns verwendeten Geräte einen erheblich höheren DPI-Wert als 72, was viele Herausforderungen mit sich bringt. Glücklicherweise sind Konventionen bekannt, die Ihnen bei der Entwicklung Ihres Designs helfen.

Warum Bildschirmauflösung wichtig ist

Stellen Sie sich vor, Sie haben zwei Geräte mit derselben physischen Größe. Gerät 1 verfügt über eine Bildschirmanzeige von 72 DPI. Gerät 2 verfügt über eine Anzeige von 144 DPI.

Wenn Sie ein Bild mit 72 DPI entwerfen, wird das Bild genau in der Größe angezeigt, die Sie auf dem 72 DPI-Bildschirm beabsichtigt haben. Auf dem 144 PPI-Bildschirm ist er jedoch halb so groß wie beabsichtigt, da das Display doppelt so viele Pixel hat.

Denken Sie daran: Die physische Größe hat keinerlei Einfluss auf die DPI, außer dass kleinere Bildschirme billiger herzustellen sind und daher tendenziell eine höhere DPI aufweisen als große Bildschirme. Bei heutigen Geräten gibt es große Unterschiede bei der DPI, selbst bei Geräten ähnlicher Größe:

  • Apple Cinema Display: 99
  • Microsoft Surface: 148
  • Amazon Kindle Fire 7 “: 170
  • Apple 12 “MacBook: 226
  • BlackBerry Passport: 453
  • Samsung Galaxy S7: 576
  • Sony Xperia Z5 Premium: 801.

(Sie können die DPI Ihres Bildschirms sofort ermitteln, um zu sehen, wie sie verglichen wird.)

Wenn Sie dies in Ihren Designs nicht korrigiert haben, ist Ihre 72-DPI-Grafik auf dem Sony Xperia Z5 Premium winzig. Aus diesem Grund müssen Sie wissen, wie Sie mit großen Unterschieden in der Pixelauflösung umgehen können.

Verlassen Sie sich nicht auf Branding oder Marketing, um die Bildschirmauflösung auf konsistente Weise zu beschreiben. Das Retina-Branding von Apple beschreibt beispielsweise viele verschiedene Anzeigedichten, je nachdem, welches Gerät Sie betrachten. Die niedrigste Retina-Anzeige ist 218 DPI und die höchste ist mehr als 400.

Um konsistente Designs zu entwickeln, benötigen Sie einen anderen Ansatz.

Verwenden von Dp und Punkten für die einfache Skalierung

Sobald Sie die Maßeinheiten in iOS und Android verstanden haben, können Sie die Pixelmessung für Ihr Design vollständig ignorieren.

Stattdessen können Sie das Konzept der virtuellen Pixel oder CSS-Pixel verwenden:

Dies ist bei Android und iOS etwas anders:

  • dp steht für geräteunabhängiges Pixel oder dichteunabhängiges Pixel. Es wird unter Android verwendet. Ein dp misst 1/160 Zoll.
  • Punkte sind das Äquivalent für iOS. Ein Punkt misst 1/163 Zoll.

Obwohl es einen subtilen Unterschied in der Dichte gibt, sind die Systeme sehr ähnlich.

Wenn Sie eine dp-Messung für ein Android-App-Layout verwenden, müssen Sie nicht genau wissen, welche Messungen für jedes Gerät gelten, auf dem dieses Layout angezeigt wird. Das Gerät kennt seinen eigenen Multiplikator und wendet ihn auf den dp-Wert an, sodass Ihr Design automatisch in der beabsichtigten Größe gerendert wird. Weitere Informationen hierzu finden Sie in der Android-Entwicklerdokumentation.

Wenn Sie mit Punkten für iOS entwerfen, müssen Sie lediglich wissen, dass einige Apple-Geräte einen Punkt als 1-Pixel-Quadrat anzeigen, andere als 4-Pixel-Quadrat und andere als 9-Pixel-Quadrat. Mit anderen Worten, die Punktmessung unterliegt einem Multiplikator von 1, 2 oder 3, um die erforderliche Bildschirmauflösung für jedes iOS-Gerät zu erreichen.

Verwenden von Android Screen Density Qualifiers

Jedes Android-Gerät wird je nach Bildschirmdichte in Kategorien oder Buckets eingeteilt. Es gibt Tausende verschiedener Geräte, sodass dieses Konzept die Vorbereitungsarbeit eines Designers vereinfacht, indem die Geräte eingegrenzt werden, für die Bilder erstellt werden sollen.

Wenn Sie ein Bild für Android wie ein App-Symbol erstellen, müssen Sie sechs Qualifikationsmerkmale kennen:

  • Niedrig (LDPI): Jedes Gerät mit bis zu 120 DPI, Multiplikator von 0,75
  • Medium (MDPI): zwischen 120 und 160 DPI, Multiplikator von 1 (Basisdichte)
  • Hoch (HDPI): zwischen 160 und 240 DPI, Multiplikator von 1,5
  • Extra-High (XHDPI): 240 bis 320 DPI, Multiplikator von 2
  • Extra-Extra-Hoch (XXHDPI): 320 bis 480 DPI, Multiplikator von 3
  • Extra-Extra-Extra-Hoch (XXXHDPI): 480 bis 640 DPI, Multiplikator von 4.

Wenn Sie Ihre App-Bilder oder -Symbole erstellen, legen Sie sie einfach entsprechend den von Ihnen erstellten Buckets in Ordnern ab. Zusammen mit den dp-Messungen für das von Ihnen erstellte Layout wählt Android automatisch die besten Bilder für den Job aus.

Entwerfen für Berührung

Das DPI-Puzzle enthält ein letztes Teil, und das ist der Unterschied zwischen Touchscreens und normalen Displays. Obwohl es nicht direkt mit DPI zusammenhängt, ist es eine gute Sache, dies zu berücksichtigen.

Grafiken sehen auf Touchscreens oder Nicht-Touchscreens offensichtlich gleich aus, vorausgesetzt, sie haben dieselbe Bildschirmauflösung. Aber es gibt einen sehr wichtigen Unterschied: Die Leute navigieren nicht auf die gleiche Weise. Ein Fingertipp ist viel ungenauer als ein Mauszeiger.

Touch-Ziele sind 44x44pt in iOS und 48x48pt im Quadrat für Android. Sie müssen Ihre gesamte Navigation vergrößern und den Abstand vergrößern, um mögliche Fehler zu vermeiden.

Ressourcen

  • Konvertieren von DP in PPI: Eine Anleitung von der Android Developer-Website
  • Pixplicity DP zu PPI Konverter: Ein ausgezeichneter Rechner und Konverter
  • Tipps für Designer: Erfahren Sie mehr über die Dichtequalifizierer und dp-Berechnungen von Android
  • Richtlinien für die Barrierefreiheit von BBC-Mobilgeräten zur Größe von Touch-Zielen: Dieser Artikel bietet hervorragende Best-Practice-Tipps zum Entwerfen barrierefreier mobiler Layouts in HTML
  • iOS-Designrichtlinien: Deckt Auflösung, Downsampling, Symbole, Typografie, Standardlayoutkomponenten und automatische Symboleffekte ab.
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Adblock
    detector