Ich versuche, eine App für Android-Geräte zu entwerfen, aber sie gibt es in allen Größen und so ... mit unterschiedlichen Auflösungen und es ist ein bisschen verwirrend. Was ist der beste Weg, es zu tun?
Arbeiten Sie mit der größten Auflösung und der Programmierer skaliert dann alles für andere Geräte herunter? ... Das Problem ist, dass Geräte mit unterschiedlichen Auflösungen geliefert werden und die Proportionen nicht übereinstimmen ... also bin ich wirklich verwirrt, wenn er herunterskaliert und die Proportionen nicht beibehält ... das ganze Design wird ruiniert. ..
Welchen Ansatz sollte ich beim Entwerfen für Bildschirme mit unterschiedlichen Proportionen verfolgen? Alle Tipps, Workflows, Links, Ratschläge ... sind mehr als willkommen.
Ich habe das auf der Android-Website gefunden , es ist ziemlich nützlich ... aber ich frage mich, ob ich eine Antwort von jemandem bekommen kann, der ein Design für eine App gemacht hat ... wie war der Workflow?
Vielen Dank.
Diese Antwort bezieht sich ausschließlich auf die Website.
Die Medienabfrage, mit freundlicher Genehmigung von CSS3, gibt uns mehr Kontrolle darüber, wie eine Website bei verschiedenen Auflösungen aussieht. Wenn Sie die Breite des Browsers verkleinern, wechselt er zum Code für diese Breite.
Einige Informationen zu Medienabfragen - http://www.stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries
Das fällt unter Responsive Webdesign, das ist der aktuelle Schrei.
Einige Informationen zu responsivem Webdesign und Medienabfragen - http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries
Nun zur Kehrseite des responsiven Designs – responsive/skalierende Bilder:
„Das Anzeigen einer reaktionsschnellen Website auf einem mobilen Gerät zwingt die CPU und den Speicher davon, während die Größe von Bildern geändert wird, da Sie ein großes Bild herunterladen, es in den Speicher Ihres Telefons dekomprimieren und dann die Größe ändern, um es auf einen kleinen Bildschirm anzupassen. Dieser Vorgang dauert etwa 3 Byte pro Pixel Speicherplatz, sodass ein 1024×768-Bild etwa 2,36 MB Speicherplatz benötigt. Die meisten Clients fordern zu diesem Zeitpunkt im Durchschnitt nur 4 Bilder an, aber 9,44 MB sind immer noch viel für das Laden einer Seite. Eine empfohlene Dateigröße für Bilder in a Der mobile Kontext könnte 100×100 sein, aber das ist irgendwie utopisch, da ein geeignetes Bild für Desktop-Websites diese Auflösung übersteigt." - http://www.webdesignshock.com/responsive-design-problems/
Dafür gibt es mehrere Lösungen:
http://stuffandnonsense.co.uk/projects/320andup/
Es ist eine relativ neue Art, Websites zu erstellen, aber es gibt eine Menge Informationen online, von überwältigenden Zeitschriften bis hin zu einer Liste .
*Bearbeiten: Sie werden wahrscheinlich viel mehr Antworten erhalten, wenn die Frage auf Stackoverflow oder Webmaster gestellt wurde.
Ok, viele dieser Antworten sind großartig, aber lassen Sie mich Ihnen ein paar Gedanken von einem Designer geben.
Im Moment haben Sie 3 verschiedene Dichten zum Entwerfen (mdpi, hdpi und xhdpi).
Obwohl die Wahl einer Dichte zu Beginn Ihre Präferenz ist, würde ich empfehlen, mit hdpi zu beginnen und Ihr Design von dort aus zu skalieren. Wenn Sie die Statistiken darüber nachschlagen, wie viele Menschen xhdpi-Geräte verwenden, ist es ziemlich niedrig. Und mdpi-Geräte sind physisch nur klein, und Sie möchten wahrscheinlich etwas detaillierter mit dem Design beginnen. Hoffentlich entwerfen Sie nicht für den Benutzer, der ein mdpi-Gerät besitzt ;)
Was den Prozess betrifft, öffne ich normalerweise Photoshop, erstelle ein neues Dokument und mache die Leinwand auf 480 x 800 (durchschnittliche HDPI-Geräteauflösung). Von dort aus werde ich die gesamte App entwerfen. Sobald das Design fertig ist, beginne ich mit dem Schneiden von Assets (es sei denn, Ihr Entwickler kennt sich mit einem Photoshop-Dokument aus). Während des Schneidens der HDPI-Assets skaliere ich jedes einzelne Asset in Photoshop, um es an die entsprechende Dichte anzupassen, und speichere es dann.
Skalierung ist ein weiteres Problem. Hier einige Kurzreferenzen:
hdpi > mdpi = -66 %
hdpi > xhdpi = +133 %
Skalieren Sie jeweils, indem Sie einen Prozentsatz subtrahieren oder addieren. Nachdem Sie ein Asset skaliert haben, überprüfen Sie es unbedingt auf falsch ausgerichtete Pixel, bevor Sie es speichern.
Tut mir leid, wenn das lang geworden ist, aber ich dachte, du würdest dich über eine ausführliche Antwort freuen. Ich weiß, wie großartig es ist, einen Designerkollegen zu haben, der mithilft.
Viel Glück!
Zunächst einmal, werden Sie nur Telefone oder auch Tablets unterstützen?
Zweitens hast du ziemlich recht. Meine Erfahrung stammt aus Spielen, aber ich bin sicher, dass sie genauso gut auf andere Apps zutrifft. Erstellen Sie einfach zuerst Ihre High-Res-Assets und skalieren Sie sie dann entsprechend für Med- und Low-Res-Geräte. Sie sollten sich keine Gedanken über winzige Unterschiede in der Bildschirmgröße machen müssen, sagen wir weniger als 20 Pixel, da der Inhalt dank der Funktionsweise von Android-Apps gut fließen kann. Dies ist eine andere Sache, die man im Hinterkopf behalten sollte. Sie müssen Ihre Anwendung so gestalten, dass sie ein wenig frei fließen kann.
Die Quintessenz ist, entwerfen Sie Ihre grafischen Assets basierend auf Pixeldichten und nicht auf Auflösungen und lassen Sie Ihr Layout stattdessen basierend auf den Auflösungen anpassen. (Die Anwendung wählt automatisch die entsprechenden Res-Assets basierend auf den ppi des Geräts aus)
Hoffe das hilft! :)
Android verwendet dichteunabhängige Pixel und skaliert die Benutzeroberfläche, um sie an die Auflösung des Gerätebildschirms anzupassen. Da es eine Vielzahl unterschiedlicher Hersteller gibt, erstellen Designer Assets in der Regel mit 160ppi , 240ppi und 320ppi , was Skalen von 100%, 150% und 200% entspricht.
Aus den Android-Entwicklerrichtlinien :
„Das dichteunabhängige Pixel entspricht einem physischen Pixel auf einem 160-dpi-Bildschirm, was die Basisdichte ist, die das System für einen Bildschirm mit „mittlerer“ Dichte annimmt. Zur Laufzeit handhabt das System bei Bedarf transparent jede Skalierung der dp-Einheiten basierend auf der tatsächlichen Dichte des verwendeten Bildschirms. Die Umrechnung von dp-Einheiten in Bildschirmpixel ist einfach: px = dp * (dpi / 160). Auf einem 240-dpi-Bildschirm entspricht beispielsweise 1 dp 1,5 physischen Pixeln.“
Wenn Sie Ihre Arbeit skalieren, sollten Sie die Methode „Nächster Nachbar“ verwenden, um eine Skalierung mit schlechter Qualität für unterschiedliche Auflösungen zu vermeiden. Bjango verfügt über eine nützliche Reihe von Photoshop-Aktionen , um das Designen für Mobilgeräte etwas einfacher zu machen.
Flavius Franz
DBUK
huzzah