floating-actions-buttons2

Neuer Design-Trend: Floating-Action-Buttons

Der neue Android Trend ist der Floating-Action-Buttons, den du immer mehr im Web siehst. Hier kommt die Umsetzung auf die du achten musst.

Der Floating-Action-Button wird die Benutzerfreundlichkeit sehr verbessern, ebenso wird die primäre Navigation unterstützt. Der Floating-Action-Button ist ein dynamisches und sehr schickes UI-Element. Der neue Button leitet sich vom Material-Design ab, bringt aber auch einige Vorgaben mit sich. Die Inhalte von Buttons sind zwar abhängig vom Content, ermöglicht aber unter anderem eine schnellere Navigation.

Anwendung von den Floating-ActionButtons

Bei der Verwendung der Floating-Action-Buttons sollte Vorsicht geboten sein. Es sollte bei jedem Screen maximal nur 1 Floating-Action-Button sein, der dann eine primäre Funktion hat. Der Button sollte auch eine positive Funktion aufweisen, z.B. Erstellen, Teilen usw. Der Floating-Action-Button sollte nicht für unwichtige oder negative Funktionen eingesetzt werden.

Außerdem sollten die Material-Design-Vorgaben eingehalten werden. Da ist die Form des Floating-Action-Buttons, dieser sollte ein Kreis sein und nicht ein Recht- oder Viereck, zumal die Zweidimensionalität und die Menge Optionen beim Klick des Buttons besteht. Hier gilt es: ein Richtwert sind mindestens drei und maximal sechs, jedoch wird der Hauptbutton hier mit eingerechnet.

Die Umsetzung des Floating-Action-Buttons

Folgende Abbildung ist eine vereinfachte Version des französischen Entwicklers Louis Gernad. Sein vollständiges Tutorial kannst du auf seiner Seite finden. Die unten aufgeführten Abbildungen bestehen aus fünf Classes: ein button-floating als Hauptbutton, der die Animation schaltet und vier button-sub.

<div id="wrapper">
    <div class="button button-floating"></div>
    <div class="button button-sub" data-color="purple"></div>
    <div class="button button-sub" data-color="green"></div>
    <div class="button button-sub" data-color="pink"></div>
   <div class="button button-sub" data-color="indigo"></div>
</div>

Man sollte zuerst eine aktuelle jQuery-Lib einbinden. Dann wird die jQuery-Funktion toggleClass eingebunden und sie fügt dem Eltern-Element eine Class zu, mit der dann die Sichtbarkeit der Buttons gesteuert wird.

$(document).ready(function() {
    $(".button-floating").click(function() {
        var $wrapper = $("#wrapper");
    
        if (!$wrapper.hasClass("button-floating-clicked"))
        {
            $wrapper.attr("class", "center");
            $wrapper.toggleClass("button-floating-clicked-out");
        }
        $wrapper.toggleClass("button-floating-clicked");
        $(".button-sub").click(function() {
            var color = $(this).data("color");
        });
    });
});

Für einen sanften Übergang wird dann durch eine CSS3-Animation gesorgt und die Bounce-im-Animation wird dann auf die Class button-floating gelegt.

.button-floating-clicked .button-sub {
    opacity: 1;
    cursor: pointer;
    -webkit-animation-name: bounceIn;
    animation-name: bounceIn;
}

@keyframes bounceIn {
    0% {opacity: 0; transform: scale(.3);}
    50% {opacity: 1; transform: scale(1.05);}
    70% {transform: scale(.9);}
    100% {transform: scale(1);}
}

Jetzt fragst du dich bestimmt, wo kann ich Floating-Action-Button im Web nutzen, dazu zeigt dir ein Video von courseMine die Anwendungspraktiken.