Anzeige
Anzeige
Ratgeber
Artikel merken

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.

Von Jessy Kösterke
2 Min. Lesezeit
Anzeige
Anzeige

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.

Anzeige
Anzeige

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.

Anzeige
Anzeige

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.

Anzeige
Anzeige

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.

Anzeige
Anzeige

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: 

Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
Schreib den ersten Kommentar!
Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

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

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Anzeige
Anzeige