Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Ratgeber

UI-Design fürs iPhone X: So gestaltest du die Bottom-Elemente

Alles dreht sich um das neue iPhone X. Auch unter den Designern wird heiß diskutiert, wie man UI und UX am besten umsetzt. Wir stellen euch ein paar Beispiele vor.

Das neue iPhone X bringt einige Herausforderungen für Designer und Entwickler mit sich. In einem t3n-Artikel haben wir bereits über den von Apple veröffentlichten Design-Leitfaden fürs iPhone X berichtet.

Das Web ist voll mit kreativen Ideen für die Umsetzung für das User-Interface (UI) – besonders rund um die Kerbe (Notch) beim iPhone X.

Doch wie steht es eigentlich um den unteren Teil des iPhone X? Die abgerundeten Ecken sind ein weiteres herausforderndes UI-Feature von Apple. Der schwedische Visual- und User-Interface-Designer Max Rudberg hat sich dieser Herausforderung gestellt und teilt auf seinem Blog die Ergebnisse.

UI-Design für Bottom-Elemente: iPhone X

In der Vergangenheit wollte Apple so viel wie nur möglich ist aus den kleinen Bildschirmen holen und führte mit iOS7 unter anderem die Edge-to-Edge-Buttons ein. Zwar bleiben diese Proportionen laut iOS Human Interface Guidelines dieselben, so richtig schön sehen sie allerdings nicht aus – besonders nicht der große Weißraum nach unten.

Rudberg erfindet mit seiner Lösung das Rad zwar nicht neu, dennoch ist sie für das iPhone X eine äußerst schicke Idee. Seine Absicht ist klar: Er will weg vom Edge-to-Edge-Stil. Mit einem geringen Abstand nach unten lässt er die Bottom-Bar floaten. Um das Ganze zu harmonisieren, verwendet er denselben Radius wie beim Bildschirm.

Links ist der Edge-to-Edge-Button, rechts Rugbergs Design für das iPhone X zu sehen. (Grafik: blog.maxrudberg.com)

In den iOS-Human-Interface-Guidelines befindet sich der Home-Indicator im Button-Element und lässt beide Elemente schnell als ein Gemeinsames wahrnehmen. Mit Floating-Buttons und einem Abstand nach unten schafft Rudberg das Problem aus Welt. Hier kommt  übrigens wieder die Frage auf: Wo ist Apples Liebe zum Detail hin? Den Home-Indicator in einer Bottom-Bar zu platzieren ist weder nutzerfreundlich noch ein ausgeklügeltes Design.

Auch hier ist rechts das Design von Rudberg zu sehen. Die vollständigen Grafiken gibt's in Rudbergs Blog. (Grafik: blog.maxrudberg.com)

Ihr habt Lust aufs Designen bekommen und wollt auch ein wenig ausprobieren? Auf iosdesignkit.io findet ihr alle neuen Komponenten von iOS 11 als Sketch-Datei zum Download.

Das könnte dich auch interessieren: 

Bitte beachte unsere Community-Richtlinien

Schreib den ersten Kommentar!

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.