So entwerfen Sie Apps für alle Bildschirmgrößen von Apple

Apfel

Apples App-Ökosystem hat sich in letzter Zeit massiv erweitert

Als der App Store zum ersten Mal eintraf, war das Design für Apple-Mobilgeräte relativ einfach. Sicher, Entwickler mussten sich mit Touchscreens und gestischen Interaktionen auseinandersetzen und die visuelle Sprache für Smartphone-Apps und -Spiele überdenken, eine Welt abseits der Desktop-Konventionen. Das iPhone war jedoch ein Gerät mit einer Bildschirmgröße und einem Interaktionsmodell.

Die heutige Landschaft ist ganz anders. Universelle Apps unterstützen möglicherweise alles von der Apple Watch bis zum iPad Pro. Die Bildschirmgrößen variieren enorm, ebenso die Skalierung - ein 9,7-Zoll-iPad Air-Display bietet die gleiche Pixelanzahl wie ein 7,9-Zoll-iPad Mini. Auch die Interaktionsmodelle für Apples iOS-, watchOS- und tvOS-Geräte sind sehr unterschiedlich.



Mit Apples aktuellem Angebot an Touchscreen-Geräten bleibt die Eingabe ähnlich wie beim ersten iPhone, es gibt jedoch neue Gesten und zusätzliche Funktionen in iOS, hauptsächlich für die größeren iPad-Displays. Die Apple Watch akzeptiert jedoch neben der Verwendung der digitalen Krone und der Spracheingabe auch die Interaktion mit Berührungen. Und Sie interagieren mit dem neuen Apple TV über eine Fernbedienung, anstatt Objekte auf einem Bildschirm direkt zu bearbeiten.

App-Entwickler haben ihre Arbeit für sie ausgeschnitten.

Das Spiel spielen

Entwickler, die Spiele für iOS- und tvOS-Geräte entwickeln, scheinen weitgehend unbesorgt zu sein. Aber dann kommen Spiele oft gut mit Bildschirmen sehr unterschiedlicher Größe zurecht. 'Ich mache alle meine Layouts so, dass sie relativ zu den Abmessungen eines Bildschirms skaliert sind', sagt der Spieledesigner Paul Pridham , der zugibt, dass dies 'nicht viel ausmacht, da die meisten meiner Spiele von Natur aus klobig und lo-fi sind'. Nitrom MD Matthew Annal verwendet einen weiteren gängigen Trick für geräteübergreifende Handyspiele: Seine Titel haben eine 'sichere Zone'. Wichtige Elemente bleiben in diesem Rahmen erhalten, und längliche Bildschirme zeigen einfach mehr von der Umgebung.

Ulysses ist derzeit nur für das iPad verfügbar und die App muss ihr Aussehen für das iPhone ändern

Ulysses ist derzeit nur für das iPad verfügbar und die App muss ihr Aussehen für das iPhone ändern

Mit Apps mit konventionelleren Menüs, Schaltflächen, Bedienfeldern und Arbeitsbereichen wird es schwieriger. Texteditor Ulysses Derzeit wird nur das iPad unterstützt, eine iPhone-Version steht jedoch unmittelbar bevor. Mitschöpfer Max Seelemann von The Soulmen erklärt, dass die App daher zwei Bildschirmmodi verwendet: eine geteilte Ansicht, in der Abschnitte nebeneinander liegen, und ein schmaleres 'gestapeltes' Layout.

wie man Text im Kino hinzufügt 4d

Modusänderungen werden automatisch von iOS ausgelöst, was laut Seelemann hilfreich ist, da das Betriebssystem von Apple immer komplexer wird - ein iPhone 6 Plus in Landschaftsaffen ist ein iPad, und iPad Split View ähnelt einem großen iPhone. Trotzdem muss viel darüber nachgedacht werden, wie selbst relativ einfache Schnittstellen von den kleinsten iPhones bis zum iPad Pro skaliert werden können.

Seelemanns Ansatz erinnert an modernes Webdesign: Konzentrieren Sie sich auf Inhalte und zeigen Sie mehr, wenn der verfügbare Platz zunimmt. Software für ewige Stürme Gründer Matthias Gansrigler hält dies für noch wichtiger, wenn es um Apple Watch und Fernseher geht: 'Beginnen Sie mit der Gestaltung Ihrer Benutzeroberfläche mit dem kleinsten Gerät, auf das Sie abzielen.' Mit zunehmender Größe der Bildschirme können Sie mehr Elemente einführen, obwohl Gansrigler warnt, dass dies nicht immer erforderlich ist: „Manchmal ist es vorteilhaft, die Dinge auf ein Minimum zu beschränken, obwohl der Platz mehr zulässt. Es geht nur um die Benutzererfahrung: Jemanden zu überwältigen kann genauso schlimm sein wie ihn zu überwältigen. '

wie man gopro videos auf dem ipad bearbeitet

Was fühlt sich richtig an?

Karottenwetter

Die unterschiedlich großen Apps von CARROT Weather wurden organisch erstellt

Bei der Erstellung von CARROT Weather für iOS, watchOS und tvOS, Entwickler Brian Mueller Zugegeben, er hat sich oft nur für das entschieden, was sich richtig anfühlte: „Ich habe mit Layouts gespielt, damit es sich auf meinem Haupttestgerät, einem iPhone 6 Plus, gut anfühlte, aber ich wusste, was anderswo funktionieren würde. Ich musste einige Elemente für kleinere Bildschirme ausschneiden und Dinge auf dem iPad hinzufügen, damit sich der Bildschirm nicht leer anfühlte. Aber das war es im Grunde - das zu tun, was natürlich kam, während darüber nachgedacht wurde, wie die Dinge funktionieren könnten, wenn sie skaliert oder gedreht werden. '

Entwickler James Thomson PCalc ist auch auf jeder Apple-Plattform verfügbar. In diesem Prozess muss herausgefunden werden, was auf einem bestimmten Gerät sinnvoll ist. Er erklärt: „Ich kann nicht mehr als 15 verwendbare Tasten auf einem Bildschirm haben, und selbst das kann eng werden. Aber auf einem Fernseher bist du quer durch den Raum, also willst du alles so groß wie möglich. '

Wie bei Ulysses ist die Unterscheidung auf iPad und iPhone unübersichtlicher - PCalc auf dem ersteren nutzt Platz durch Seitenleisten und Popover, anstatt zwischen Vollbildansichten zu wechseln. In den Multitasking-Modi des iPad verwendet die App jedoch das iPhone-Layout, wenn Platz verfügbar ist verengt sich.

Manchmal wirken sich andere praktische Überlegungen auf das Layout aus Streifen Der Schöpfer Quentin Zervaas erklärt: 'Das Erstellen von Streifen für die Arbeit mit über zwanzig Sprachen zwang uns zu Überlegungen, wie Text passen und angeordnet werden würde, was es natürlich einfach machte, auf verschiedene Gerätegrößen zu skalieren.' Zum Beispiel nimmt eine deutsche Textfolge mehr Platz ein als die englische - 'das ist so, als würde man etwas, das für einen 4,7-Zoll-Bildschirm entwickelt wurde, in einen 3,5-Zoll-Bildschirm einpassen' -, während chinesische Schriftzeichen weniger Platz benötigen. Das automatische Layout von Apple war ein Segen, der das Layout auf mehreren Geräten unterstützte und auch eine robuste Sprachunterstützung ermöglichte.

Eine Frage der Größenordnung

Das iPad

Die geteilte Ansicht des iPad bedeutet, dass App-Entwickler seitlich denken müssen

Bildschirmgrößen sind nicht das einzige Problem, das sich aus mehreren Anzeigegrößen ergibt - die Pixeldichte muss ebenfalls berücksichtigt werden. Sogar iPads mit unterschiedlichen Abmessungen haben die gleichen Auflösungen. und einige Apple-Geräte benötigen @ 2x-Grafiken, während andere @ 3x bevorzugen. 'Das hat mich bei der Herstellung von CARROT Fit durcheinander gebracht', gibt Müller zu. 'Ich habe bei @ 2x Hunderte von Übungsposen als Rasterbilder erstellt, weil das alles war, was ich ursprünglich brauchte.' Als @ 3x-Geräte angezeigt wurden, mussten alle Assets neu erstellt werden. Mueller empfiehlt jetzt Vektoren: 'Mit CARROT Weather wird alles als PDF gespeichert, und Xcode übernimmt die Asset-Generierung. Ich verwende auch den PaintCode von PixelCut, um Assets im Code zu generieren und verschiedene Größen dynamisch zu erstellen. '

Raster können immer noch funktionieren, aber Sie müssen vorausplanen. Hersteller Ron Packard, Jr. sagt, auch er habe 'Schwierigkeiten gehabt, Bildgrößen zu aktualisieren' und 'sich der entmutigenden Aufgabe gestellt, alle unsere Renderings zu wiederholen'. Für das Spiel Castle Breakout sind 'alle Renderings gigantisch und können bei Bedarf auf kleinere Bildschirme herabgestuft werden'. Für Annal, dessen Spiele hauptsächlich Pixelkunst verwenden, kann die Skalierung ebenfalls ein Problem sein: „Wir tendieren daher dazu, eine Pixelgröße beizubehalten, die viel niedriger als die Bildschirmdichte ist und der Dichte der Geräte mit der niedrigsten Unterstützung entspricht. Auf diese Weise sehen Pixel auf älteren Geräten gestochen scharf aus, und neuere haben eine so hohe Pixeldichte, dass sowieso alles gut aussieht. '

In Bezug auf bestimmte Benutzerinteraktionen fragen wir, ob die Skalierung ein Problem sein kann, nicht zuletzt auf dem iPad Mini. Seelemann, dessen Ulysses hauptsächlich über die Tastatur gesteuert wird, überlegt, dass 'Apple 44pt als Mindestgröße für jedes Element festgelegt hat'. Solange Sie dem folgen, sollten Sie in Ordnung sein. 'Obwohl einige Geräte unterschiedliche PPI-Werte haben, haben sich die Benutzer darauf eingestellt. Wir sehen keine Notwendigkeit, von den Empfehlungen von Apple abzuweichen. '

Ein Gefühl der Konzentration

Die Apple Watch hat App-Entwicklern weitere Herausforderungen gestellt

Die Apple Watch hat App-Entwicklern weitere Herausforderungen gestellt

Eine andere Sache, auf die man achten sollte, sagt Öffnen Sie die Planet Software Mitbegründer Gordon Murrison ist der Meinung, dass sich eine App manchmal perfekt für ein bestimmtes Gerät anfühlt und daher möglicherweise die Entscheidung trifft, andere nicht zu unterstützen. Dies war beim Stop-Motion-Tool Smoovie der Fall, dessen reichhaltige Benutzeroberfläche für das iPad so ideal war, dass eine iPhone-Version nie zustande kam. Mit anderen Worten, Ihre Apps tun dies nicht haben überall sein.

Tatsächlich sagen einige Entwickler, dass das schnell wachsende Ökosystem von Apple solche Entscheidungen bald alltäglich machen könnte. 'Ich entwerfe für ein' Hauptgerät 'und passe dann meine Arbeit für andere an, aber dann haben Indie-Entwickler nicht Zugriff auf die gesamte Palette von Geräten zum Testen', erklärt der Entwickler Álvaro Maroto Conde . Conde kann es sich nicht alle leisten, alle sechs Monate in neue Hardware zu investieren. Conde sagt, sie müssen ihr Risiko mit einem oder zwei und dem 'Buggy-Emulator' eingehen. Er fügt hinzu, dass Apples Geheimhaltung in Verbindung mit dem „Wettlauf gegen die Startdaten“ auch zu App Stores führt, die mit Software gefüllt sind, die „nicht richtig getestet“ wurde, und dass dies möglicherweise Apples überraschende Entscheidung ausgelöst hat, Apple TV-Entwicklungskits herauszugeben.

wie man Figuren in Acryl malt

Wenn möglich, sollten Entwickler laut Gansrigler versuchen, mindestens ein Beispiel für jedes wichtige Kit zu erhalten, für das sie etwas versenden möchten. Dies liegt in erster Linie daran, dass Simulatoren selten so nuanciert sind wie das Original: „Der Xcode tvOS-Simulator wird beispielsweise der Siri Remote nicht gerecht. Sie verwenden eine Maus oder ein Trackpad, aber der berührungsempfindliche Bereich der Fernbedienung wird mit einem Daumen verwendet. Sie müssen es versuchen und ein Gefühl dafür bekommen, wie es funktioniert. ' Darüber hinaus müssen beim Interportieren von Apps von anderen Systemen möglicherweise neue Interaktionsmethoden berücksichtigt werden: „Tippen Sie auf eine Siri Remote-Touchpad-Kante und konzentrieren Sie sich einen Schritt in diese Richtung. Diese Interaktion ist unter iOS nicht sofort verfügbar und muss daher berücksichtigt werden, wenn eine App auf Apple TV übertragen wird. '

Zusammen, aber getrennt

iPad und iPhone, einst in zwei Größen erhältlich, gibt es jetzt in sechs Varianten

iPad und iPhone, einst in zwei Größen erhältlich, gibt es jetzt in sechs Varianten

Sollten sie angesichts der Unterschiede zwischen den Geräten als separate Plattformen betrachtet werden? Und wenn ja, wie schaffen Sie Kohärenz, wenn eine einzige universelle App (in Wirklichkeit separate Binärdateien, die für den Benutzer jedoch unsichtbar sind) für alle verfügbar gemacht wird? 'Es kommt viel darauf an, zu brandmarken und dem Geist Ihrer App treu zu bleiben', schlägt Annal vor. 'Wenn Sie dieselbe visuelle Identität wiedergeben und gleichzeitig das Besondere an Ihrem Produkt beibehalten, spielt es keine Rolle, dass sich Eingaben oder Bildschirmgrößen ändern.'

Dies muss laut Zervaas mit einem Bewusstsein für den Gebrauch verbunden sein. Bei Streaks ist eine wichtige Funktion die Auszahlung, die Menschen beim Tippen auf eine Aufgabe empfinden, um sie als erledigt zu markieren. 'Dieses Interaktionsmodell ist jedoch auf Apple Watch oder Apple TV nicht möglich', sagt er. 'Auf der Apple Watch verwenden wir daher Force Touch, ein anderes Interaktionsmodell, das jedoch immer noch das viszerale Gefühl vermittelt, eine Aufgabe erledigt zu haben. Beim Streaks Workout für Apple TV verwenden wir einen einfachen Klick auf die Fernbedienung, um die Übung als erledigt zu markieren. Dies passt zum Stil der App, aber Sie erhalten immer noch die Auszahlung einer Animation, die den Fortschrittsbalken ausfüllt und das große Häkchen anzeigt. '

Jeder Gedanke, zu weit zu gehen und dieselbe App plattformübergreifend effektiv zu erstellen, wird rundweg abgelehnt. 'Unser Ziel als Designer und Entwickler ist es nicht, unsere Arbeitsbelastung zu reduzieren, sondern großartige Produkte herzustellen', sagt Murrison. Erinnern Sie sich an gängige UI-Frameworks für Mac und Windows? Schrecklich. Sie haben etwas, das nirgendwo zu Hause ist. Dies gilt auch für das Erstellen von Apps für verschiedene Gerätefamilien im Apple-Ökosystem. '

OfficeTime auf der Apple Watch

OfficeTime auf der Apple Watch

OfficeTime Gründer Stephen Dodd stimmt zu: „Es reicht nicht aus, Designs nur plattformübergreifend zu portieren. Sie könnten versucht sein, eine 'Lite' -Version einer iPhone-App für die Apple Watch zu entwerfen, aber das letztere Gerät wird in kurzen Begegnungen verwendet. Sie sollten stattdessen fragen, was wertvoll genug ist, um einen Benutzer bei solchen Mini-Interaktionen zu zeigen, anstatt nur sein iPhone herauszunehmen. '

Passt perfekt

Bei der erfolgreichen Entwicklung des modernen Apple-Ökosystems geht es also in erster Linie um den Kontext. Wie Thomson feststellt, müssen Sie „nach Möglichkeit die Stärken jeder Plattform berücksichtigen“. Mit PCalc begründet er, dass die Leute keine langen mehrstufigen Berechnungen an einer Uhr durchführen, sondern möglicherweise Lebensmittel zusammenzählen oder eine Rechnung aufteilen. 'Während meine App unter tvOS, iOS und watchOS aus Codierungssicht ähnlich ist, sind die Benutzeroberflächen so konzipiert, dass sie passen - selbst auf iPhone und iPad machen Sie die Dinge anders.'

Dodd hat dasselbe bei OfficeTime festgestellt - Benutzer verwenden den Zeiterfassungsprogramm auf verschiedenen Plattformen, jedoch nicht für dieselben Aufgaben: „Sie können einen Timer auf einer Uhr starten, ihn auf einem iPhone stoppen, Details auf einem iPad bearbeiten und Rechnungen erstellen auf einem Mac: 'Jede App hat zunehmend mehr Leistung, aber etwas höhere Interaktionskosten. Jeder spielt mit den Stärken des Geräts. '

wie man einen Pinselstift zum Zeichnen benutzt

All diese Entscheidungen könnten jedoch auch als Warnung vor einer immer komplexeren Zukunft dienen. Wir stellten zunächst fest, dass die Dinge einst einfach waren: ein Gerät; eine Bildschirmgröße; ein Interaktionsmodell. Obwohl Apples Ökosystem niemals die Vielfalt von Android haben wird, wird es jetzt weiter wachsen. 'Sie werden neue Herausforderungen sehen, wie beispielsweise die geteilte Ansicht des iPad', sagt Seelemann. 'In einer Version wurden fünf völlig neue Benutzeroberflächengrößen mit beispiellosen Seitenverhältnissen eingeführt. Es wurde klar, dass Apps jede beliebige Bildschirmgröße unterstützen müssen. Eine Optimierung für alle ist nicht mehr möglich und macht keinen Sinn mehr. '

Laut Entwickler Enrico Susatyo Wer Apps für das Apple Kit erstellt, sollte von solchen Änderungen nicht mehr überrascht sein. 'Apple ist gut darin, Entwickler in die Zukunft seiner Plattformen zu führen, ohne viel preiszugeben', sagt er. '2011 haben wir Auto Layout erhalten, ein Jahr vor dem iPhone 5. Größenklassen erschienen ein Jahr vor dem iPhone 6, was Entwicklern die Unterstützung größerer iPhones und iPads erleichtert. Image Assets wurden vor @ 3x Retina-Geräten eingeführt. '

Er rät daher, darauf zu achten, was Apple tut, damit Sie nicht überrascht werden: „Apple möchte, dass wir neue Technologien einführen. Sie sind vielleicht nicht sofort offensichtlich, aber früher oder später werden sie alle für neue Funktionen übernommen. '

Zum Thema passende Artikel:

  • Wie Apple Watch Apps für immer verändert
  • So erstellen Sie eine App : Beginnen Sie mit diesen großartigen Tutorials
  • Verspotten Sie Smartwatch-Apps mit dem CSS Apple Watch Generator