Googles materialdesign fortsätter att vara ett populärt tillvägagångssätt för modern webbdesign. En nästan platt stil, den uppsättning principer som ursprungligen utformades som riktlinjer för varumärken för Google, beskriver ett lagerbaserat tillvägagångssätt för UI-design.

Förutom det förskrivande färgschemat är den noggrant neutrala typografi och Disney-esque animation, Material Designs flytande knappkoncept, kanske den mest igenkännliga aspekten av stilen. Den Flytande Åtgärdsknappen verkar emellertid följa samma bana som Hamburgermenyn. från frälsare till paria om några få månader.

Flytande åtgärdsknappar sitter bortsett från resten av ett användargränssnitt, utformat för att verka som om de flyter över innehållets topp. Nästan exklusivt en cirkel, de är en behagligt minimal form, som lämpar sig för animering. Flytande Action Knappar är den naturliga utvecklingen av den klibbiga huvudet som har varit populärt de senaste åren. Språnget som Google gjorde för att flytta bortom det klibbiga huvudet var att koppla bort den flytande åtgärdsknappen från resten av navigeringen. Detta påverkades till stor del av mobilbanans uppkomst; Placering av den flytande åtgärdsknappen längst ned till höger på skärmen (som det nästan alltid är fallet) gör det enkelt för tummen att trycka på den.

Google Plus

Användningen av en flytande åtgärdsknapp i Google+ omkonstruktion uppmuntrar dig att lägga in innehåll snarare än att hjälpa dig att konsumera det. Dessutom är det diametralt motsatta resten av navigeringen ett besvär på större skärmar.

Eftersom den flytande åtgärdsknappen befinner sig i mönster för skärmar som är större än en telefon blir bekvämligheten med den nedersta högerplaceringen alltmer ett hinder. Liksom Hamburger-menyn innan den upptäcker, upptäcker Floating Action Button att mobila första lösningar inte alltid översätts till skrivbordet.

Deras form, position och färg säkerställer att flytande åtgärdsknappar sticker ut från resten av ett användargränssnitt, främst på grund av att nuvarande trender för platt, halvplans och materialdesignar alla andra element som vanliga rektanglar. Men det är viktigt att erkänna att precis som den flytande åtgärdsknappen är visuellt distinkt på en sida, är den visuellt igenkännlig över en rad olika projekt. Material Design är först och främst ett företags varumärke; med varumärkesidentitet som en viktig affärsmässig tillgång är det osannolikt att det kommer att mäta Googles värde för kundens verksamhet.

vkplayer

De VKPlayer-app använder en flytande åtgärdsknapp för att växla kontroller, vilket ser cool ut, men skulle inte en uppspelning / paus knapp vara den primära åtgärden här?

Enligt Material Design specifikation Flytande åtgärdsknappar används som en genväg till den primära åtgärden på en sida. lägger till ett nytt objekt eller initierar en ny sökning. I det scenariot är ikonerna för funktionen relativt kanoniska, och den åtgärd som knappen är förknippad med är tydlig. Ofta representerar en enskild ikon inte en tillräcklig funktion.

Vad som är mer problematiskt är att enheten ska reducera en webbplats eller en app till en enda användning. Som framhävt i Teo Yu Siang s detaljerad kritik av den flytande åtgärdsknappen Användningen av flytande åtgärdsknappar ställer en designers avsikt på användaren; De uppmanas att skriva ett email när de vill läsa igenom inkorgen. De uppmanas att ta ett nytt foto när de vill granska sina tidigare bilder.

Knappen Flytande åtgärd är avsedd att göra en primär åtgärd ur användargränssnittet som en bekvämlighet, men om användargränssnittet kräver en primär åtgärd, varför är det inte mer fokuserat?

beegit

Den annars utmärkt Beegit använder en flytande åtgärdsknapp för att ge snabb åtkomst till hjälpmeddelanden och nyhetsuppdateringar på plattformen. Är det verkligen den primära funktionen hos en komposition sida?

Att parafrasera en gemensam design truism finns inga dåliga designmönster, bara dåliga designers. Liksom Hamburger-menyn har Floating Action Button ett bra användningsfall, men det användarfallet förekommer sällan; Liksom Hamburger-menyn är den flytande åtgärdsknappens achilleshälla ofta felaktig användning. De MD avsnitt på flytande knappar föreskriver att funktionaliteten mappad till Floating Action Knappar är "viktig och allestädes närvarande nog", men de brukar användas som en stil när det bättre alternativet skulle vara ett mer fokuserat användargränssnitt.

Liksom Hamburger-menyn löser Floating Action Button designerns problem, inte användarnas.