Stylowe, płaskie przyciski o stylistyce płaskiej, aby pokazać afordancję i wyglądać „dobrze zaprojektowane”

Niedawno zacząłem tworzyć mały framework CSS. ( http://mincss.com, jeśli ktoś jest zainteresowany) Szybko opracowałem wstępny projekt niektórych przycisków. Po zapytaniu o opinię na temat UX StackExchange (i otrzymaniu wielu dobrych opinii), polecono mi przyjść tutaj, aby uzyskać dodatkowe porady na temat ich ulepszenia.

Tak wyglądają teraz, po informacji zwrotnej od UXStackExchange. Usunąłem czarną ramkę, dodałem „cień” 3px i usunąłem fazę 1px:

Idę na płaski wygląd.

Mam jeszcze 3 pytania:

• Czy te przyciski wykazują wystarczającą afordancję? (Wydaje się, że jest to problem z płaską konstrukcją)
• Czy sugerowałbyś dodanie małego gradientu?
• Czy wyglądają dobrze zaprojektowane? (wiem, subiektywnie, ale nie mogę wymyślić lepszego sposobu, aby o to zapytać)

Z przyjemnością powitam (i prawdopodobnie użyję) wszelkie opinie na temat tych przycisków.

Myślę, że bardzo subtelny gradient zdecydowanie poprawi estetykę przycisków. Ponieważ styl „Metro” systemu Windows 8 jest dużym zwolennikiem tego stylu, wykorzystam to jako przykład:

Na pierwszy rzut oka „kafelki” wyglądają, jakby miały płaski kolor, ale jeśli przyjrzysz się uważnie, zobaczysz bardzo niewielki gradient przechodzący od lewej do prawej. Jest bardziej zauważalny u niektórych niż u innych, ale wszyscy to mają. Jak powiedziała Yisela, chcesz, aby ten gradient był ledwo zauważalny, prawie podświadomy.

Jak już wspomniałeś, projektując płaskie przyciski, musisz uważać na kilka rzeczy. Po pierwsze, powiedziałbym: Czy to wygląda jak przycisk?

To niekoniecznie jest coś, co zależy tylko od przycisku, ale od reszty elementów interfejsu użytkownika. Jeśli używasz płaskich przycisków, sugeruję unikanie podobnych kształtów / stylów wszędzie indziej. Musisz zachować słownictwo wizualne, aby ludzie mogli natychmiast rozpoznać te elementy jako przyciski, a nie coś innego.

Cienie są do tego dobre, ponieważ dają wrażenie objętości. Dlatego są łatwiejsze do zobaczenia. Poza tym jesteśmy przyzwyczajeni do przycisków mających taki efekt. Zastanowiłbym się jednak nad użyciem koloru podobnego do koloru przycisku. Na przykład zamiast czarnego dla czerwonego przycisku, użyj czerwonego z 50% kryciem. Inną opcją uczynienia przycisków bardziej oczywistymi jest dodanie ikony (biała, ciągła).

Byłbym bardzo ostrożny z gradientami . Nie dlatego, że są złe, ale dlatego, że w obecnym bardzo prostym trendzie nie pasują tak dobrze. Zwłaszcza jeśli używane kolory lub odcienie są bardzo różne. Mały gradient może wyglądać naprawdę ładnie, ale musi być mały, ledwo zauważalny.

Krótko mówiąc, podoba mi się ich wygląd. Zmieniłbym tylko kolor cienia na coś jaśniejszego, a może też rozjaśniłbym tekst na pierwszym planie, prawdopodobnie biały. Czcionka jest ładna i używasz dobrego wypełnienia, więc dobra robota! Widzę, że używasz ich na stronie, ale pod nimi masz zestaw powiadomień w pastelowych kolorach, które w rzeczywistości wyglądają trochę podobnie. Ponownie zastanowię się nad ich stylem, ponieważ mogą być nieco mylące, i spróbuję użyć tych samych kolorów w całej witrynie (wszystkie pastele lub wszystkie kontrasty).

Chociaż mogę szanować tworzenie tak minimalnych przycisków, naprawdę musisz zastanowić się, czy / jak można je zastosować w Internecie na różnych stronach internetowych, ponieważ tworzysz strukturę. Jeśli udostępniasz przyciski, musisz upewnić się, że podasz prawie wszystko, czego ktoś mógłby użyć, takie jak tabele, formularze itp. (Na pewno nadal nad tym pracujesz).

Spójrz na Bootstrap, jeśli jeszcze tego nie zrobiłeś. Bootstrap to cudownie prosta i przejrzysta platforma CSS, którą można łatwo dostosować lub zintegrować z inną witryną internetową i może dać ci kilka pomysłów.

Teraz, jeśli chodzi o te rzeczywiste przyciski, bawiłbym się ramką, ponieważ pomaga to obudować komponent, a ramka jest dość powszechna dla wielu przycisków. Sprawdziłem witrynę i podoba mi się stan hover / click i myślę, że dobrze sobie z tym poradziłeś.

Jeśli chcesz wprowadzić gradienty, zachowaj spójność i upewnij się, że używasz ich również w innych elementach, w przeciwnym razie będziesz mieć konkurencyjne głębokości, które będą rozpraszać.

Guziki wyglądają dobrze, jednak rodzaj przycisków, które pokazują afordancję i czują się w ogólnym płaskim stylu, są raz, gdy część cienia jest umieszczona, to mały pasek na dole głównego elementu (przycisku) i jest przeważnie ciemniejszym odcieniem kolor przycisku.