Bildschirme & Layouts

Überschriften und Menüs schwimmen in gefrorenen Glasbehältern Hervorheben Überschriften und Menüs schwimmen in runden Glasbehältern, die… Glaskopf

Überschriften und Menüs schwimmen in runden Glasbehältern, die sich beim Scrollen verflüchtigen. Verwendet den gefrosten Glas-Effekt (Hintergrund-Blur + semi-transparenter Oberflächen). Verschwindet, während Sie die Seite nach unten scrollen.

  • Glaskopf
  • Navigation
  • Behälter
  • Design
Post-Import-Ergebnisse-Modale Nach dem Importieren der Kontakte wird ein animierter Modalscreen Ihr … angezeigt Import

Drei gleichzeitige post-import Oberflächen (Toast, automatisch startende Tour, auftauchende Avatare) werden durch eine ruhige Modalaufnahme ersetzt. Eine 3-Sekunden-Verschiebung lässt die Avatare sich erst beruhigen, bevor die Modalaufnahme erscheint. Die Tour startet nur, wenn der Benutzer explizit einwilligt.

  • Import
  • Onboarding
  • Modalscreen
  • Statistik
  • Tour
  • Sprache
Heldentitelzeile auf einem Farbverlauf mit einem Versteck-Artwork-Wechsler Die Heldentitelzeile sitzt auf dem Saropa Farbverlauf mit einem… Heldin

Der Schaltzustand wird pro Gerät gespeichert, anstatt bei jedem Start zurückgesetzt, sodass jeder, der eine kompakte Liste bevorzugt, dieses Layout auf jedem Bildschirm beibehält, ohne jedes Mal erneut die Kunstwerke zu verstecken.

  • Heldin
  • Gradient
  • zusammenklappen
  • ein-/ausschalten
  • Vorliebe
Gitter passen die Spaltenanzahl an große Textgrößen an Grid layouts reduzieren ihre Spaltenanzahl, wenn der Systemtext… Barrierefreiheit

Die Spaltenanzahl wird aus dem aktiven Text-Scaling-Faktor berechnet, anstatt aus einem festen Gerätbreitensprung, sodass ein Smartphone und ein Tablet bei gleicher Zugänglichkeitseinstellung beide genügend Breite pro Zelle für vollständige Beschriftungen behalten.

  • Barrierefreiheit
  • Textskala
  • Spalten
  • responsiv
  • Gitter
Hero Artwork in einem eingebetteten Kartenkärtchen, das sich beim Scrollen zusammenklappt Screen artwork sitzt in einem runden eingebetteten Kartenkärtchen, das sich zusammenklappt… Heldin

Die Kartenhöhe wird durch den Scroll-Offset anstatt durch eine feste Animationsdauer bestimmt, sodass der Zusammenbruch die Fingerbewegung präzise verfolgt, und die Haptikfeedback nur einmal auslöst, wenn sie den Header-Bereich erreicht.

  • Heldin
  • scrollen
  • zusammenklappen
  • animation
  • Karte
  • Haptik
Instant Screen Artwork mit keinem Pop-In Hero artwork und Screen-Bilder werden beim Wiederholen aus dem Cache geladen… Leistung

Decodierte Bilder bleiben im Arbeitsspeicher-Cache gespeichert, der nach dem Asset-Pfad indiziert ist, sodass das Zurückkehren zu einer Ansicht den Decodierungsschritt vollständig überspringt, anstatt das Bild erneut von der Festplatte zu laden und zu rendern.

  • Leistung
  • Bildcache
  • Heldin
  • laden
Unterstützung für rechts-bis-links-Layout auf Hero-Screens Hero-Überschriften verwenden Richtungspositionierung, damit Screens lay… RTL

Die Masthead-Elemente lesen die umgebende Textrichtung, anstatt links auszurichten, sodass Titel, Rückwärtsnavigationskontrollen und Kunstwerke korrekt gespiegelt werden anstatt nur den Text zu invertieren, während die Icons links fixiert bleiben.

  • RTL
  • Layout
  • Barrierefreiheit
  • Heldin
  • internationalization
Erweiterbare Abschnittsüberschriften auf sechs Screens Tippen Sie auf Buchstabenüberschriften, um Gruppen zu verstecken/zu zeigen auf Organizations,… Arbeitsablauf

Das Tippen auf einen Buchstabenkopf schaltet nun die Sichtbarkeit aller Kontakte unter diesem Buchstaben, wodurch ein Weg zur Zusammenfassung langer alphabetischer Listen auf sechs datenintensiven Screens ohne wiederholtes Scrollen vorbei an Einträgen geboten wird.

  • Arbeitsablauf
  • interaction
Narrative-Länge-Levels mit visueller Unterscheidung Drei farbige Icons (brief/standard/full) mit Stil… Narrativ

Die Ersetzung von Häkchen durch farbige Icons und benannte Ebenen gibt jedem Erzählungsformat eine eindeutige visuelle Identität, wodurch das ausgewählte Element auf einen Blick erkennbar ist, anstatt ein Häkchen zur Bestätigung benötigt zu werden.

  • Narrativ
  • ux
Erinnerungsnarrative mit Titel und Absätzen Erinnerungsnarrative enthalten Titel ("In Memory of…") und… Narrativ

Der generierte Gedenktext beginnt mit einem formellen Überschrift und wechselt in separate Absätze, sobald sich der Gegenstand der Beschreibung ändert (Karriere, Familie, Erbe), anstatt als ein dichter Block zu erscheinen.

  • Narrativ
  • Gedenkstein
Leichter Zugang, um Kontaktnarrative hinzuzufügen Kontaktprofile zeigen einen nützlichen Link, um mehr Story… hinzuzufügen ui

Kontakte mit einer dünnen oder leeren Erzählung zeigen nun einen klickbaren Call-to-Action-Link inline an, der direkt zum Editor für das Hinzufügen von Geschichten führt, anstatt den Nutzern zu erlauben, ihn in den Einstellungen zu finden.

  • ui
  • Narrativ
  • cta
Erinnerungsgürtel ist nun dauerhaft bei verstorbenen Kontakten Todsgürtel zeigt ganze Jahr über bei Gedenk-Kontakten, nicht nur… kontakte

Der Gedenk-Indikator bleibt jetzt kontinuierlich auf dem Avatar eines verstorbenen Kontakts sichtbar, anstatt nur um die Jahreszeit des Verstorbenen zu erscheinen.

  • kontakte
  • avatar
  • Gedenkstein
  • Verstorbene
Karte lädt sich schneller Kartenblätter laden mit glatter Gradienten-Hintergrund, was Karten… Karten

Der Farbverlauf-Platzhalter passt sich den Abmessungen der Tile-Grid an und verblasst, sobald reale Bilder eintreffen, wodurch das Netzwerk-Round-trip, das Kartenanbieter benötigen, bis die Pixel ankommen, versteckt wird.

  • Karten
  • laden
  • ux
QR-Codes integrieren Saropa Mark QR-Codes zeigen den Saropa Brandmark in Marineblau in der Mitte an mit… Markenimage

Die marine Saropa Marke sitzt in der Mitte des QR-Codes, während die Fehlerkorrektur-Redundanz im umgebenden Muster den Code scannbar bleibt, selbst wenn das Logo einen Teil davon überlappst.

  • Markenimage
  • QR-Codes
  • Teilen
Hilfsseiten können eingeklappt und den Zustand merken Hilfsseiten sind einklappbar, farbcodiert und merken … Navigation

Jeder Hilfeabschnitt behält eine eindeutige Farbe und erinnert sich daran, ob er zwischen Besuchen geöffnet oder geschlossen war, sodass ein teilweise gelesenes Hilfeseitenfenster dort fortgesetzt wird, wo es aufgehört hat.

  • Navigation
  • Hilfe
  • personalisierung
  • kollabierbar
Willkommenscreens führen neue und upgradende Benutzer an Animierte Willkommenscreens mit glatten Übergängen führen… Navigation

Separate Willkommensflüsse für brandneue Installationen im Vergleich zu Versionen-Updates bedeuten, dass zurückkehrende Benutzer sehen, was für sie spezifisch geändert wurde, anstatt eines allgemeinen ersten-Lauf-Tutorials, das für Neulinge gedacht ist.

  • Navigation
  • Onboarding
  • animations
  • Start-up
  • upgraden
Erststart Willkommensanimation mit Marken-Title Buchstaben stürzen ein pro Glyph mit Regenbogen-Flash bei Start. animation

Jeder Buchstabe des Wordmarks animiert einzeln mit einer Farbschleife über ihn, wodurch der kalte Startmoment in einen markenbezogenen Schwung verwandelt wird, anstatt in eine statische Logoanzeige.

  • animation
  • Onboarding
  • visuell
Einmalige Upgrade Willkommensmodal Isar-Ära Upgrader sehen Beruhigungseinführung bei erst… Onboarding

Das Modal erscheint nur einmal, basierend auf der Erkennung einer abgeschlossenen Migration vom alten Isar-Speicher-Engine, damit es Upgrader beruhigt, dass ihre vorhandenen Daten überlebt haben, ohne bei jedem späteren Start wiederholt zu werden.

  • Onboarding
  • upgraden
  • ux
Landschaftsmodus auf Smartphones Smartphones können in den Landschaftsmodus drehen (Standard: aus) während… Layout

Telefone standardisieren sich auf Porträtmodus, da die Funktion weniger gründlich auf Handyschmuckformfaktoren getestet wurde, während Tablets standardmäßig frei drehbar sind, da ihre größeren Bildschirme beide Orientierungen bereits gut beherrschen.

  • Layout
  • rotation
  • Barrierefreiheit
Über-Bildschirm: Saropa Mission und Name-Geschichte. Zwei neue Abschnitte auf Über-Bildschirm — Unsere Mission (Säulen von… Marke

Der Abschnitt „Our Mission“ beschreibt die vier Säulen, die die Entwicklung der App antreiben, während die Namensgeschichte die Identität der App mit der Sikh-Tradition verknüpft, aus der der Begriff Saropa stammt.

  • Marke
  • Vertrauen
  • Transparenz
Einfachere Verwaltung von Telefon und E-Mail auf Tablets Auf Tablets in Landscape-Modus ordnen sich die Telefon- und E-Mail-Reihen in 2… an tablet

Der zwei-Spalten-Layout wird durch die Erkennung der Landschaftsorientierung anstatt nur der Bildschirmgröße gesteuert, sodass ein Tablet, das aufrecht gehalten wird, immer noch das ein-Spalten-Liste verwendet.

  • tablet
  • organisation
Die Startseite passt sich an mit einziehbaren Abschnitten Ordnen Sie nach, indem Sie Abschnitte einziehen; Tablets zeigen breitere Ansichten an Startseite

Der zusammengeklappte Zustand wird pro Abschnitt gespeichert, sodass ein Abschnitt, der auf einem Smartphone geschlossen wurde, auch nach dem Wechsel zu einem Tablet oder nach der Drehung des Geräts geschlossen bleibt.

  • Startseite
  • Navigation
  • kollabierbar
  • sections
  • tablet
  • responsiv
Tablet-Header platzieren Identität und Aktionen zusammen Identität links mit Aktionstasten rechts tablet

Das Verschieben der Aktionen zur hinteren Kante sorgt dafür, dass sie auf einem breiten Landschafts-Tablet immer noch im Fingerreich liegen, wo ein ausschließlich führendes Layout andernfalls die Schaltflächen an eine Seite verlagern würde.

  • tablet
  • Heldin
  • Kopfzeile
  • Layout
Jeder Home-Ordner kann eingeklappt werden Tippen Sie auf jeden Abschnittstitel, um ihn zu verbergen oder anzuzeigen. Notfall,… organisation

Der zusammengeklappte Zustand bleibt pro Abschnitt bestehen, anstatt bei jedem Neustart der App zurückgesetzt zu werden, sodass ein zuvor eingerichtetes Startfenster so bleibt, wie es zurückgelassen wurde.

  • organisation
  • Nutzbarkeit
Kontakt-Header wird auf Tablets im Landschaftsmodus angepasst Auf Tablets im Landschaftsmodus erscheinen das Foto und der Name Ihres Kontakts… tablet

Die Anordnung der Landschaft verschiebt Identität und schnelle Aktionen in eine einzelne horizontale Bande anstatt sie zu stapeln, wodurch vertikalen Raum beansprucht wird, der im Porträt-Layout sonst ungenutzt bleiben würde.

  • tablet
  • responsiv
Klarerer Kontakt-Detail-Layout Kontaktabschnitte sind mit vereinfachten… leichter zu navigieren Bildschirmübergänge

Die Reduzierung verschachtelter Gruppierungen auf der Detailansicht bedeutet, dass weniger Taps benötigt werden, um auf ein bestimmtes Feld zu gelangen, wodurch der Abstand beim Scrollen zwischen verwandten Abschnitten verringert wird.

  • Bildschirmübergänge
  • details-anzeige
  • simplification
Zusammenklappbare Kontaktschnittstellen mit Status Kontaktschnittstellen klappen ein und merken den Status über… kontakt-details

Der Kollapses-Zustand wird pro Kontakt und pro Sitzung gespeichert, sodass ein Kontakt später wieder geöffnet wird, und die Abschnitte genau so angezeigt werden, wie sie verlassen wurden, anstatt auf vollständig expandiert zurückzusetzen.

  • kontakt-details
  • organisation
  • Persistenz

Dein Adressbuch ist ein Lebenshilfe. Behandle es wie eines.

Nutzen Sie alle Screens & Layouts-Funktionen von — kostenlos für private Nutzung, privat gestaltet und bereit, sobald Sie sie installieren.