Entwerfen Sie in Adobe XD CC einen Ein-/Aus-Schalter, der App-Anwendern visuelles Feedback über UI-Einstellungen gibt.
create-ui-switch_1000x560

Laden Sie die Beispieldatei herunter, um die Schritte in diesem Tutorial nachzuvollziehen, oder wenden Sie die hier beschriebenen Funktionen auf ein eigenes Design an. 

Gestalten Sie mit Grundformen den Ein- und den Aus-Zustand des Schalters. Der Schalter besteht aus einem Rechteck mit abgerundeten Ecken und einem Kreis. In diesem Beispiel wurde als Erstes der Aus-Zustand designt. Der Kreis liegt über der linken Hälfte des Rechtecks. Anschließend wurden die beiden Formen dupliziert und der Kreis nach rechts verschoben, um den Schalter im Ein-Zustand darzustellen.

create-ui-switch_step1

Experimentieren Sie mit Farben, Formen und Schatten im Bedienfeld „Erscheinungsbild“, bis Sie den gewünschten Look haben. Fügen Sie optional Text zu den Schalterelementen hinzu, der den jeweiligen Zustand beschreibt.

create-ui-switch_step2

Für das Appdesign in diesem Beispiel wurden folgende Schalterelemente verwendet.

create-ui-switch_step3

Kombinieren Sie die einzelnen Komponenten jedes Schalters zu einer Gruppe, und ziehen Sie die Gruppe auf Ihre Zeichenfläche. Wechseln Sie in den Modus „Prototyp“, und verdrahten Sie den Schalter im Aus-Zustand mit der Zeichenfläche im Ein-Zustand und umgekehrt. Aktivieren Sie „Bildlaufposition merken“, um eine konsistente User Experience sicherzustellen.

create-ui-switch_step4

Jetzt wissen Sie, wie Sie Schalter für UI-Einstellungen in Apps designen.

02/25/2019

Adobe Stock-Anbieter: Farknot Architect

War diese Seite hilfreich?