10 przydatnych fragmentów kodu projektowania materiałów

Szał projektowania materiałów szturmem podbija świat sieci. Co miesiąc znajduję nowe strony działające w stylu materialnym za pomocą frameworków lub niestandardowych zestawów UI.

Ale to nie jest zła rzecz, wręcz przeciwnie! Jest to sposób na uproszczenie procesu projektowania poprzez pracę ze sprawdzonymi trendami, które Google rozpoznaje jako preferowany język projektowania.

Jeśli interesujesz się stylem projektowania materiałów, te fragmenty kodu są dla Ciebie. To tylko 10 moich ulubionych, które oferują różnorodne projekty i komponenty do wyboru.

Responsywna tabela

Oto fragment projektu Material Design z unikalnym akcentem. Ta responsywna tabela stworzona przez Sergeya Kupletsky'ego zawiera inne łącza do fragmentów projektu materiału. Całkiem fajne!

Jest to naturalnie tworzone przy użyciu technik projektowania materiałów, więc stół powinien idealnie pasować do Twojego własnego układu. Jednak najtrudniejszą częścią projektowania mobilnego jest tworzenie stołów, które działają na mniejszych ekranach.

Myślę, że ta metoda jest jednym z najlepszych sposobów radzenia sobie z tym. Twój kod pozostaje również czysty, co sprawia, że ​​kodowanie, czyszczenie i zarządzanie jest bardzo łatwe, niezależnie od rozmiaru tabeli.

Przejścia w interfejsie karty

Deweloper Ivan Villamil zbudował ten wyjątkowy projekt interfejsu użytkownika karty z kilkoma dość szalonymi animacjami.

Spójrz na stronę i spróbuj kliknąć dowolną z kart. Otrzymasz unikalny animowany efekt, w którym zawartość karty jest animowana nad pojemnikiem i pojawia się w widoku. To jak coś, czego można się spodziewać w aplikacji mobilnej, ale przeniesione do sieci!

Efekty animacji są bezbłędne i pokazują, jak wiele możesz dziś zrobić w sieci. Nie wspominając o stylu materiału, który jest doskonały dla tego połączonego interfejsu internetowego/mobilnego.

Kompaktowe logowanie

Przez lata jako projektant widziałem kilka bardzo fajnych formularzy logowania. Ale ten szalony projekt może po prostu zająć ciasto ze względu na interaktywne funkcje i niepowtarzalne style.

Po kliknięciu jasnoróżowej ikony w prawym górnym rogu pojawi się pole rejestracji, które pojawi się nad stroną. Jest cholernie wyjątkowy i tworzy naprawdę użyteczny interfejs.

Więc jaki jest haczyk? To używa dużo JavaScript, więc nie jest to najlepsze rozwiązanie pod względem kodu. Ale wciąż doskonały przykład projektowania z kompaktowymi funkcjami.

Wypełnij animację

Scott Kellum opracował ten intrygujący układ karty materiałowej, który automatycznie wypełnia się po załadowaniu strony. Rozwija się to w siatce, na której możesz najechać kursorem na każdą kartę, aby zobaczyć elementy projektu materiału w akcji.

Nie potrafię powiedzieć, na ile jest to przydatne w bezpośrednim projekcie ani jak wiele można z tego wyciągnąć. Ale to zabawny fragment, który pokazuje projekt sieciowy poza siatką, mieszając odrobinę posmaku materiału z animacjami najechania kursorem.

Przyciski materiałowe BS4

Spośród wielu dostępnych online szablonów Bootstrap lepiej uwierz, że niektóre z nich wykorzystują Material Design. A to pióro prezentuje wszystkie fajne rzeczy, które możesz zrobić z projektowaniem materiałów w Bootstrap 4.

Tak naprawdę jest to tylko zbiór przycisków przestylizowanych na język materiałów Google. Ale wszystko działa na najnowszym frameworku BS4, więc możesz dodać je do dowolnej strony opartej na Bootstrap.

Jeśli poważnie myślisz o Bootstrapie, zajrzyj do najnowszej wersji, aby zobaczyć, co myślisz. Świetnie sprawdza się jako podstawa do wszystkiego, a dotyczy to zwłaszcza witryn z materiałami.

Projekt materiału Wybierz menu

Rozwijane menu wyboru są podstawą projektowania formularzy. Pozwalają użytkownikom wybierać spośród kilku odpowiedzi na istotne tematy, takie jak stany, kraje, języki i tak dalej.

Ten wybór projektu materiału przenosi popularne menu wyboru HTML na zupełnie nowy poziom.

Nie opiera się na typowym stylu dokumentu podczas wybierania opcji. Zamiast tego używa nieuporządkowanej listy z jQuery obsługującym animacje i proces selekcji. I muszę przyznać, że ta rzecz podkreśla styl materiału.

Materialne cienie

Google naprawdę popycha cienie do głębi w swojej dokumentacji materiałowej. To właśnie zobaczysz w tym długopisie, gdzie wszystkie okręgi mają swoje własne, wyraźne efekty cienia.

Za pomocą cieni możesz określić hierarchię elementów strony, tak aby jedne pojawiały się na górze, a inne na dole. Tworzy iluzję przestrzeni na ekranie, co jest szczególnie przydatne na ekranach dotykowych.

Całkiem fajny efekt i na pewno coś, co możesz skopiować we własnych projektach.

Interfejs karty pogodowej

Deweloper Thomas Vallez stworzył tę niesamowitą kartę pogody działającą w czystym HTML i CSS. Wykorzystuje prosty efekt zanikania podczas ładowania strony, ale prawdziwym pięknem jest tutaj styl Material Design.

Wszystko, od kolorów po czcionki, a nawet ikonę pogody, wszystkie opierają się na stylach z naturalnych materiałów.

Możesz wziąć ten szablon i użyć go do prawie każdego rodzaju układu karty. To fenomenalny i na pewno jeden z prostszych projektów na tej liście.

Zakładki materiałów

Oto ciekawy projekt, który opiera się na pomyśle zakładek Material Design. Michael Richins stworzył to pióro przy użyciu podstawowego JavaScriptu i pewnej wiedzy na temat wytycznych projektowych Google.

Karty działają tak, jak można się spodziewać na innych podobnych urządzeniach, takich jak smartfony lub tablety z Androidem. Nie wspominając o tym, że ta rzecz działa na zwykłym JavaScript , więc nigdy nie musisz się martwić o jQuery lub cokolwiek z tych rzeczy.

Całkiem fajny efekt, jeśli szukasz zakładek na swojej stronie. Po prostu przetestuj style, aby sprawdzić, czy naturalnie komponują się z Twoją stroną.

Kliknij Animacja odpowiedzi

Deweloper Emmanuel Pilande stworzył ten fajny efekt odpowiedzi jako prosty sposób na odtworzenie mikrointerakcji Google z materiałami.

Kliknij w dowolnym miejscu na kartach materiałów, aby zobaczyć efekt. Możesz to zastosować do praktycznie wszystkiego, od przycisków po kontenery stron lub pola wejściowe.

Opiera się na pewnym JavaScript, ale można go również łatwo dodać do dowolnego projektu. Więc jeśli chcesz uzyskać naturalny wygląd materiału, jest to świetny fragment do zapisania.