Jak tworzyć oszałamiające cienie UI

Czysto płaskie interfejsy użytkownika nie są już trendem. Teraz wracamy do interfejsu użytkownika, który ma głębszą afordancję. Pierwszym krokiem do poprawy użyteczności elementów interaktywnych jest dodanie cieni.

01. Nie używaj domyślnych ustawień

Nie ma różnicy w jakim programie projektujesz. Sketch, Figma, czy Adobe XD. Domyślne ustawienia cienia są zawsze zbyt mocne i wyglądają przez to nie dobrze.

element interfejsu z domyślnymi ustawieniami cieni

02. Zrób cienie bardziej miękkie

Ładne cienie to te miękkie. Aby poprawić ich wygląd – zmniejsz krycie (10-30%) i ustaw wyższy poziom rozmycia (16px-40px). Taki cień wygląda od razu o wiele lepiej.

element interfejsu użytkownika z zmiękczonymi i rozmytymi cieniami

03. Do cieniowania użyj osobnej warstwy

Standardowy styl cieni jest łatwiejszy do wdrożenia, ale jeśli chcesz mieć większą kontrolę nad rozmyciem i położeniem spróbuj utworzyć osobną warstwę z rozmyciem jako cieniem.

dwa elementy interfejsu jeden z cieniem jako warstwa, drugi ma cień jako styl

04. Uczyń kolor cienia bardziej naturalnym

Szarość nigdy nie wygląda dobrze (z wyjątkiem czysto czarno-białego motywu). W prawdziwym świecie cienie nie są czarne. Dodaj ton neutralnego koloru interfejsu użytkownika, a będzie wyglądać znacznie lepiej.

element interfejsu użytkownika z cieniem bardziej naturalnym, nie czarnym ani szarym

05. Użyj koloru obiektu

Spójrz na niektóre materiały z prawdziwego świata, zwłaszcza te półprzezroczyste. Ich cienie dziedziczą kolor obiektu. Możesz użyć tych tonów do stworzenia ilustracji tego typu materiału. Będzie wyglądać super.

element interfejsu użytkownika w kolorze niebieskim, z cieniem który jest w kolorze tego obiektu

Potrzebujesz pomocy ze swoją stroną? Pisz!