Ich und mein Kollege haben gerade das Design einer sehr komplexen Weboberfläche abgeschlossen. Wir müssen jedoch mit dem Design der Tablet-Oberfläche fortfahren. Gibt es eine Möglichkeit, die Designs zu verkleinern, damit sie auf das Tablet passen, oder müssen wir die gesamte Benutzeroberfläche basierend auf der Tablettgröße neu gestalten?
Bitte helfen Sie!
Was Sie erreichen möchten, wird als Responsive Webdesign bezeichnet. Normalerweise weiß der Entwickler, den Sie mit der Erstellung der App beauftragen, wie er das Design für kleinere Bildschirmgrößen verkleinern kann.
Verkleinern Sie nicht das gesamte Design (dadurch werden auch die Schriftgrößen verkleinert). Erstellen Sie zuerst eine neue Zeichenfläche mit der gleichen Größe wie der Bildschirm, auf den Sie abzielen. Arbeiten Sie dann mit jedem Modul (Chunks/Boxen). Wenn Sie im ursprünglichen Design mit einem einfachen 12/16-Spaltenraster gearbeitet haben, sollte dies sehr einfach zu bewerkstelligen sein. Sie müssen ein ähnliches Raster für die neue Zeichenfläche haben und jedes Modul verkleinern, um es an die neuen Rastergrößen anzupassen.
Zum Beispiel. Angenommen, das ursprüngliche Design ist ein 12-Spalten-Raster. Und Sie haben ein Feature-Modul, das 3 Spalten breit ist. Und Sie haben 4 solcher Funktionen. Sie belegen also eine ganze Reihe (3x4). Jetzt ändern Sie für Ihre Zeichenfläche in Tabellengröße die Größe des Moduls, damit es in 4 Spalten passt. Passen Sie die Schriftgröße und die Auffüllung in diesem Modul an, falls der Text nicht richtig umbrochen wird. (Stellen Sie sicher, dass Sie, wenn Sie die Schriftgröße für etwas wie einen Überschriftenstil ändern, diese auf der gesamten Zeichenfläche replizieren sollten). Sieht das Modul zu beengt aus? Dann machen Sie es 6 Spalten breit und besetzen Sie zwei Zeilen (je 6x2)
So funktioniert der Entscheidungsprozess für Responsive Design. Es geht nicht darum, das Ganze neu zu gestalten, da einige Teile Ihres Designs möglicherweise nicht vollständig überarbeitet werden müssen, Sie müssen beispielsweise nur den Hintergrund verringern. Sie müssen sich bei Bedarf auch mit der Größenänderung von Komponenten befassen - wie Polsterung für die Schaltflächen, Rand unter den Absätzen. Wenn also der Wert für die Polsterung um den Text in einer Schaltfläche 30 Pixel für Desktop-Bildschirme beträgt, können Sie ihn für Tablets auf 20-24 Pixel reduzieren.
Es ist nicht genau möglich, den gesamten Prozess zu erklären. Es gibt viele Online-Ressourcen, die Ihnen Tipps und Einblicke geben. Hier auf Lynda.com gibt es ein ähnliches Video . Sie können auf YouTube nach ähnlichen Videos suchen. Viel Glück.