Verhindern Sie, dass Navi+ Menüs andere Apps überlappen

Warum wird dies ein Problem sein?

In vielen Fällen müssen Sie mehrere Anwendungen, die auf Ihrer Website eingebettet sind, verwenden. Dies kann ein übliches Usability-Problem verursachen, da sich Schnittstellenelemente überlappen (siehe das Bild unten). Ein einfaches Beispiel ist, wenn Sie häufig eine Chat-Anwendung wie Shopify Inbox oder WhatsApp verwenden. Typischerweise nehmen diese Chat-Apps eine prominente Position in der unteren rechten Ecke des Telefonbildschirms ein. Wenn Sie sich entscheiden, Navi+ zu verwenden, um die Navigation auf Ihrer Website erheblich zu verbessern, tritt dieses Problem auf. Hier sind einige Möglichkeiten, um dieses Problem zu lösen.

Lösung 1: Passen Sie die Position der schwebenden Schaltflächen an (Demo mit Shopify Inbox)

Lösung 2: Richten Sie das Padding des Navi+ Menüs ein, um Überlappungen mit Anwendungen zu vermeiden.

Padding und Margin sind weit verbreitete und leistungsstarke Werkzeuge in der Technologie, insbesondere in HTML5/CSS. Durch das Festlegen des Paddings entsprechend der Position dieses Bereichs können Sie Überlappungen von Anwendungen vermeiden. Sie können auch den Abstand vom Navi+ Menü zu den Rändern einstellen, indem Sie das Margin anpassen.

Lösung 3: Ersetzen Sie untere Leisten durch obere Leisten/Unterstützungsleisten oder schwebende Aktionsschaltflächen

Obwohl die untere Leiste das effektivste Werkzeug ist, um Benutzer zu führen, das von fast allen mobilen nativen Apps oder mobilen Web (langsamer) verwendet wird, möchten Sie manchmal Ihr Navi+ Menü an einer anderen Position platzieren, z. B. oben (obere Leiste), rechts/links (Unterstützungsleiste), schwebend über der Schnittstelle (schwebende Aktionsschaltfläche). Oder Sie können sie kombinieren, um die beste Navigationseffizienz zu erzielen. Überprüfen Sie die folgenden Optionen von Navi+, um zu verstehen, wie Sie es tun können; manchmal dauert es nur 1 Sekunde, und Sie lösen Ihr Problem.

Z-Index - Priorisierung der Anzeige-Reihenfolge von “schwebenden Anwendungen”

Die Z-Index-Eigenschaft gibt die Stapelreihenfolge eines Elements an. Ein Element mit einer höheren Stapelreihenfolge befindet sich immer vor einem Element mit einer niedrigeren Stapelreihenfolge. Siehe das Bild unten, um mehr zu verstehen.

Der Standard-Z-Index für das Navi+ Menü ist auf 50 für alle eingestellt, da wir ‘uns nicht wichtiger als andere Apps betrachten’, aber 50 ist auch die Zahl, die ausreicht, um gut auf allen Shopify-Themen angezeigt zu werden. Manchmal müssen Sie den Z-Index Ihres Navi+ Menüs in den folgenden Fällen anpassen:

  1. Wenn Sie mehrere Navi+ Menüs auf einer Seite verwenden und möchten, dass sie sich überlappen, aber ein Menü über den anderen erscheint.
  2. Wenn andere Objekte/Apps Ihr Navi+ Menü überlappen, in diesem Fall wird der Z-Index alles lösen.

Es gibt eine herausfordernde Frage: Welchen Z-Index sollten Sie für Ihr Navi+ Menü festlegen, um Überlappungen wie gewünscht zu vermeiden? Wenn Sie mehrere Navi+ Menüs haben, können Sie sie nach Ihren Vorlieben anordnen, ohne sich Sorgen machen zu müssen – deshalb bauen wir Navi+ so vielseitig wie möglich für aktuelle ‘schwebende Anwendungen’ auf Shopify.

Wenn Sie den Z-Index für Ihr Navi+ Menü einrichten müssen, um Konflikte mit anderen Apps zu lösen, können Sie Ihren Z-Index von einem Minimum von 0 bis zu einem Maximum von 2.147.483.647 suchen. Dies mag etwas schwierig erscheinen, aber es ist der einfachste und beste Weg, da der Z-Index Ihre Schnittstellendarstellung nicht beeinflusst, abgesehen von dem Problem, mit dem Sie konfrontiert sind. Wenn Sie Erfahrung mit CSS und HTML-Debugging haben – ist das einfach, schalten Sie einfach den Inspektionsmodus ein, um zu sehen, welchen Z-Index die konfliktierende App hat. Oder, der einfachste Weg, klicken Sie einfach auf das Crisp-Chat-Symbol, um mit einem Navi+-Berater zu chatten; wir helfen Ihnen gerne bei diesem Problem.