\n Zaczynajmy!\n<\/p>\n
\n Podstawowe zasady projektowania materia\u0142\u00f3w\n<\/p>\n
\n Metafora materia\u0142u:
\n<\/h5>\n
\n Projektowanie materia\u0142\u00f3w k\u0142adzie ogromny nacisk na to, aby elementy, animacje i przej\u015bcia by\u0142y tak realistyczne, jak pojawiaj\u0105 si\u0119 w prawdziwym \u017cyciu. Po intensywnych badaniach papieru i atramentu zesp\u00f3\u0142 Google zdecydowa\u0142 si\u0119 u\u017cy\u0107 materialnej metafory jako jednolitej zasady zracjonalizowanej przestrzeni i systemu ruchu. W skr\u00f3cie mo\u017cna powiedzie\u0107, \u017ce projektowanie materia\u0142\u00f3w to nic innego jak po\u0142\u0105czenie r\u00f3\u017cnych klasycznych koncepcji projektowania i podstawowych w\u0142a\u015bciwo\u015bci fizycznych.\n<\/p>\n
\n Namacalne powierzchnie:
\n<\/h5>\n
\n W projektowaniu materia\u0142\u00f3w powierzchnie i kraw\u0119dzie materia\u0142u tworz\u0105 fizyczn\u0105 struktur\u0119, aby da\u0107 u\u017cytkownikom wskaz\u00f3wki wizualne, kt\u00f3re pomog\u0105 im szybko zrozumie\u0107, czego mog\u0105 dotyka\u0107 i przesuwa\u0107. Wykorzystuj\u0105c zasady projektowania druku, projektowanie materia\u0142\u00f3w utrzymuje wa\u017cne tre\u015bci przed oczami u\u017cytkownika, ignoruj\u0105c inne, mniej przydatne tre\u015bci. Wykorzystanie znanych, intuicyjnych i naturalnych atrybut\u00f3w pozwala m\u00f3zgowi u\u017cytkownika pracowa\u0107 mniej i szybko zrozumie\u0107 afordancje.\n<\/p>\n
\n Afordancje wymiarowe:
\n<\/h5>\n
\n Je\u015bli na twoim biurku le\u017cy stos papier\u00f3w, zyskuj\u0105 one wymiar wraz z ochron\u0105 ich cieni. Podobnie w projektowaniu materia\u0142\u00f3w, gdy zastosujesz t\u0119 w\u0142a\u015bciwo\u015b\u0107 do interfejsu u\u017cytkownika, b\u0119dziesz mie\u0107 hierarchi\u0119 i cienie, aby zwr\u00f3ci\u0107 uwag\u0119 u\u017cytkownika na najwa\u017cniejszy obiekt, z kt\u00f3rym powinien wchodzi\u0107 w interakcj\u0119. Korzystaj\u0105c z podstaw \u015bwiat\u0142a, powierzchni i ruchu, projektowanie materia\u0142\u00f3w przekazuje spos\u00f3b interakcji obiektu z u\u017cytkownikami. Ponadto realistyczne o\u015bwietlenie pozwala u\u017cytkownikom uzyska\u0107 najbardziej realistyczny widok zaprojektowanego przez Ciebie interfejsu.\n<\/p>\n
\n Jeden projekt adaptacyjny:
\n<\/h5>\n
\n Projektowanie materia\u0142\u00f3w wykorzystuje jeden podstawowy system projektowania w celu zorganizowania przestrzeni i interakcji. Koncepcja jednego adaptacyjnego projektu zapewnia sp\u00f3jno\u015b\u0107 na r\u00f3\u017cnych urz\u0105dzeniach, co oznacza, \u017ce \u200b\u200bujednolicony projekt tworzy wyspecjalizowane widoki dla r\u00f3\u017cnych typ\u00f3w urz\u0105dze\u0144. Ka\u017cdy widok jest dostosowany w unikalny spos\u00f3b do interakcji i rozmiaru odpowiedniego dla konkretnego urz\u0105dzenia. Z drugiej strony nie wprowadza si\u0119 \u017cadnych zmian w hierarchii, ikonografii, kolorystyce i relacjach przestrzennych.\n<\/p>\n
\n \u015amia\u0142a i zamierzona tre\u015b\u0107:
\n<\/h5>\n
\n Kolejn\u0105 rzecz\u0105, kt\u00f3r\u0105 zauwa\u017cysz w tym nowym j\u0119zyku wizualnym, jest jego odwa\u017cny projekt z jasn\u0105 kolorystyk\u0105. Czerpi\u0105c wskaz\u00f3wki z ta\u015bmy do znakowania nawierzchni, wsp\u00f3\u0142czesnej architektury, znak\u00f3w drogowych i boisk sportowych, Google wprowadzi\u0142 fantastyczne i \u017cywe kolory, kt\u00f3rych nigdy si\u0119 nie spodziewa\u0142e\u015b. Ponadto gruntownie udoskonalili czcionk\u0119 Roboto<\/a>, czyni\u0105c j\u0105 nieco szersz\u0105 i bardziej okr\u0105g\u0142\u0105, aby czytanie by\u0142o przyjemniejsze. Co wi\u0119cej, celowa bia\u0142a przestrze\u0144 i obrazy od kraw\u0119dzi do kraw\u0119dzi zapewniaj\u0105 przejrzysto\u015b\u0107 i zanurzenie.\n<\/p>\n \n Projektowanie materia\u0142\u00f3w k\u0142adzie du\u017cy nacisk na uczynienie interakcji mi\u0119dzy u\u017cytkownikami a powierzchniami bardziej cyfrowymi, magicznymi i responsywnymi. W tym stylu projektowania, gdy kto\u015b wchodzi w interakcj\u0119 z interfejsem u\u017cytkownika, ca\u0142y projekt zmienia si\u0119 w zaskakuj\u0105cy spos\u00f3b. Graficzna ekspresja z kolorem, powierzchni\u0105 i ikonografi\u0105 daje u\u017cytkownikom jasne wyobra\u017cenie o tym, co mo\u017ce zrobi\u0107 obiekt, podczas gdy responsywna interakcja zach\u0119ca u\u017cytkownika do g\u0142\u0119bokiego zbadania interfejsu: co si\u0119 stanie, je\u015bli tego dotkn\u0119? A co dzieje si\u0119 dalej?\n<\/p>\n \n Kiedy cz\u0142owiek dotyka powierzchni wody i tworzy fale, energia pochodz\u0105ca z jego dzia\u0142a\u0144 w celu wprowadzenia zmian w interfejsie daje mu rzeczywiste i namacalne do\u015bwiadczenie. W ten sam spos\u00f3b projektowanie materia\u0142\u00f3w umo\u017cliwia u\u017cytkownikom dotykanie interfejsu u\u017cytkownika tak, jak robi\u0105 to w prawdziwym \u017cyciu. W tym celu Google sugeruje projektantom wzi\u0119cie pod uwag\u0119 dodatkowego wymiaru interakcji, jakim jest \u201einformacja zwrotna o ruchu”. Dzi\u0119ki temu u\u017cytkownik mo\u017ce poczu\u0107 si\u0119, jakby by\u0142 s\u0142yszany przez powierzchni\u0119 podczas przewijania, przeci\u0105gania, przesuwania i stukni\u0119cia.\n<\/p>\n \n W prawdziwym \u015bwiecie ka\u017cda akcja ma sw\u00f3j pocz\u0105tek i koniec. Na przyk\u0142ad, kiedy otwierasz karton w prawdziwym \u017cyciu, stukasz w niego gdzie\u015b i pokazujesz, co jest w \u015brodku. Podobnie wszystkie dzia\u0142ania u\u017cytkownika w projektowaniu materia\u0142\u00f3w odbywaj\u0105 si\u0119 w ujednoliconym \u015brodowisku. Ka\u017cdy obiekt jest prezentowany u\u017cytkownikowi za pomoc\u0105 szybkiej, p\u0142ynnej i ci\u0105g\u0142ej animacji, kt\u00f3rej choreografi\u0119 tworzy si\u0119 na wsp\u00f3lnej scenie. Poniewa\u017c wszystkie zasoby projektowania materia\u0142\u00f3w poruszaj\u0105 si\u0119 w rytmie, ekran wydaje si\u0119 bardziej fascynuj\u0105cy i interaktywny ni\u017c kiedykolwiek.\n<\/p>\n \n Jak wszyscy wiemy, dla Google wra\u017cenia u\u017cytkownika s\u0105 wa\u017cniejsze ni\u017c cokolwiek innego. Ta sama zasada dotyczy ostatniej zasady projektowania materia\u0142\u00f3w. Zasada ta m\u00f3wi, \u017ce ruch powinien by\u0107 odpowiedni, sensowny i starannie opracowany, a nie mo\u017ce by\u0107 u\u017cywany tylko po to, by zaimponowa\u0107 u\u017cytkownikom. Ruch w projektowaniu materia\u0142\u00f3w powinien by\u0107 nie tylko pi\u0119kny, ale tak\u017ce budowa\u0107 znaczenie funkcjonalno\u015bci i relacji przestrzennych, zachowuj\u0105c jednocze\u015bnie pi\u0119kno i prostot\u0119 p\u0142ynnego do\u015bwiadczenia u\u017cytkownika.\n<\/p>\n \n Nie znasz jeszcze polimeru<\/a>? Dobrze! Polymer to \u015bwietny zestaw narz\u0119dzi interfejsu u\u017cytkownika, kt\u00f3ry umo\u017cliwia wprowadzanie projektowania materia\u0142\u00f3w do sieci. Dzi\u0119ki kolekcji element\u00f3w papierowych<\/a> firmy Polymer uzyskasz dost\u0119p do wszystkich mo\u017cliwo\u015bci projektowania materia\u0142\u00f3w i b\u0119dziesz m\u00f3g\u0142 zapewni\u0107 namacalno\u015b\u0107, odwa\u017cn\u0105 grafik\u0119 oraz p\u0142ynne przej\u015bcia i animacje w swoich aplikacjach internetowych. Mo\u017cesz zobaczy\u0107 wzorce projektowania polimer\u00f3w i materia\u0142\u00f3w w akcji dzi\u0119ki Topeka<\/a>, zabawnej aplikacji do quiz\u00f3w.\n<\/p>\n \n Teraz zbadam papierowe elementy Polymer i poka\u017c\u0119, jak mo\u017cesz wykorzysta\u0107 ten nowy paradygmat projektowania w swoich projektach internetowych.\n<\/p>\n \n Przewodnik<\/a> dla pocz\u0105tkuj\u0105cych w Polymer jest dostarczany w pakiecie z kr\u00f3tkim samouczkiem i projektem startowym, kt\u00f3re pomog\u0105 Ci zapozna\u0107 si\u0119 z kluczowymi koncepcjami Polymer. Najpierw nale\u017cy pobra\u0107 projekt startowy,<\/a> kt\u00f3ry zawiera wszystkie zale\u017cno\u015bci i biblioteki wymagane do pracy z Polymerem. Po pobraniu projektu startowego rozpakuj go gdzie\u015b na dysku lokalnym.\n<\/p>\n \n Zanim zaczniesz, potrzebujesz dzia\u0142aj\u0105cego szybkiego serwera HTTP. Je\u015bli masz ju\u017c zainstalowany j\u0119zyk Python, uruchom jedno z poni\u017cszych polece\u0144 na najwy\u017cszym poziomie przyk\u0142adowego projektu.\n<\/p>\n \n Python 2.x:\n<\/p>\n \n Python 3.x:\n<\/p>\n \n Teraz za\u0142aduj gotow\u0105 wersj\u0119 projektu, aby przetestowa\u0107 serwer WWW. Na przyk\u0142ad, je\u015bli lokalny serwer nas\u0142uchuje na porcie 8000:\n<\/p>\n \n http:\/\/localhost:8000\/zako\u0144czono\/<\/a>\n<\/p>\n \n Nast\u0119pnie musisz zainstalowa\u0107 elementy papierowe, korzystaj\u0105c z jednego z trzech poni\u017cszych sposob\u00f3w:\n<\/p>\n \n Zip<\/strong>: Pobierz<\/a> plik Zip i rozpakuj go do katalogu g\u0142\u00f3wnego projektu.\n <\/p>\n<\/li>\n \n Bower<\/strong>: Uruchom powy\u017csze polecenie z katalogu g\u0142\u00f3wnego projektu:\n <\/p>\n \n Aby uzyska\u0107 wi\u0119cej informacji, przejd\u017a do instalacji za pomoc\u0105 Bower<\/a>.\n <\/p>\n<\/li>\n \n Github<\/strong>: Uruchom powy\u017csze polecenie z katalogu g\u0142\u00f3wnego projektu:\n <\/p>\n \n Po umieszczeniu papierowych element\u00f3w w katalogu g\u0142\u00f3wnym projektu zaimportuj komponent, umieszczaj\u0105c nast\u0119puj\u0105cy kod w pliku HTML:\n<\/p>\n\n \n \n \n Ze wzgl\u0119du na sw\u00f3j deklaratywny charakter elementy papierowe s\u0105 r\u00f3wnie \u0142atwe w u\u017cyciu, jak komponenty innych framework\u00f3w front-endowych. Poni\u017cej pokaza\u0142em implementacj\u0119 niekt\u00f3rych najcz\u0119\u015bciej u\u017cywanych element\u00f3w interfejsu u\u017cytkownika w projektowaniu materia\u0142\u00f3w.\n<\/p>\n \n Aby utworzy\u0107 prosty przycisk menu, kt\u00f3ry otwiera rozwijane menu po klikni\u0119ciu, musisz u\u017cy\u0107 nast\u0119puj\u0105cego kodu:\n<\/p>\n \n \n \n Ponadto p\u0142ywaj\u0105cy przycisk akcji mo\u017cna zmniejszy\u0107, stosuj\u0105c klas\u0119 mini.\n<\/p>\n \n Mo\u017cesz tworzy\u0107 zak\u0142adki za pomoc\u0105 nast\u0119puj\u0105cego kodu:\n<\/p>\n \n To jedno\/wielowierszowe pole tekstowe, w kt\u00f3rym u\u017cytkownicy mog\u0105 wprowadza\u0107 wymagane warto\u015bci. Ten element papierowy mo\u017ce opcjonalnie posiada\u0107 etykiet\u0119.\n<\/p>\n\n Podkre\u015bl dzia\u0142ania:
\n<\/h5>\n\n Zmiana zainicjowana przez u\u017cytkownika:
\n<\/h5>\n\n Choreografia animacji:
\n<\/h5>\n\n Sensowny ruch:
\n<\/h5>\n\n Wdra\u017canie projektowania materia\u0142\u00f3w dla sieci za pomoc\u0105 polimeru
\n<\/h3>\n\n Pierwsze kroki:
\n<\/h5>\npython -m SimpleHTTPServer<\/code><\/pre>\npython -m http.server<\/code><\/pre>\n\n Zainstaluj elementy papierowe:
\n<\/h5>\n\n
bower install Polymer\/paper-elements<\/code><\/pre>\ngit clone https:\/\/github.com\/Polymer\/paper-elements.git components\/paper-elements<\/code><\/pre>\n<\/li>\n<\/ul>\n\n
U\u017cywanie komponent\u00f3w Material UI:<\/code>
\n<\/h5>\nPodobnie jak <a href=\"http:\/\/foundation.zurb.com\/\">Foundation<\/a> i <a href=\"https:\/\/getbootstrap.com\/\">Bootstrap<\/a>, kolekcja element\u00f3w papierowych Polymer jest wype\u0142niona oknami dialogowymi, zak\u0142adkami i formantami formularzy. Poni\u017cej znajduje si\u0119 lista standardowych element\u00f3w interfejsu u\u017cytkownika zawartych w elementach papierowych:<\/code>\n<\/p>\n\n
przycisk papieru<\/code>\n <\/li>\npapierowe pole wyboru<\/code>\n <\/li>\npapier-dialog-przej\u015bcie<\/code>\n <\/li>\npapierowe okno dialogowe<\/code>\n <\/li>\nrozwijane menu papieru<\/code>\n <\/li>\nFabryka papieru<\/code>\n <\/li>\nz mo\u017cliwo\u015bci\u0105 ogniskowania na papierze<\/code>\n <\/li>\nprzycisk-ikona-papieru<\/code>\n <\/li>\nwej\u015bcie papieru<\/code>\n <\/li>\nelement papierowy<\/code>\n <\/li>\npapier-przycisk-menu<\/code>\n <\/li>\npost\u0119p papieru<\/code>\n <\/li>\npapierowy przycisk radiowy<\/code>\n <\/li>\npapierowa grupa radiowa<\/code>\n <\/li>\nfalowanie papieru<\/code>\n <\/li>\npapierowy cie\u0144<\/code>\n <\/li>\npapierowy suwak<\/code>\n <\/li>\nspinacz do papieru<\/code>\n <\/li>\nzak\u0142adka papierowa<\/code>\n <\/li>\npapierowe zak\u0142adki<\/code>\n <\/li>\npapierowe tosty<\/code>\n <\/li>\nprzycisk prze\u0142\u0105czania papieru<\/code>\n <\/li>\n<\/ul>\nIkony to kolejny kluczowy element projektowania materia\u0142\u00f3w. \u017bywio\u0142 polimeru zapewnia szereg ikon, kt\u00f3rych mo\u017cesz u\u017cy\u0107. Mo\u017cesz zainstalowa\u0107 <a href=\"https:\/\/www.polymer-project.org\/components\/core-icons\/demo.html\">podstawowe ikony<\/a> w taki sam spos\u00f3b, jak instalowa\u0142e\u015b elementy papierowe.<\/code>\n<\/p>\n\n przycisk-menu-papieru:
\n<\/h5>\n\n<\/code><\/pre>\nWeb Design<\/code>\n<\/div>\n\n<\/pre>\n
WordPress<\/code>\n<\/div>\n\n<\/pre>\n
JavaScript<\/code>\n<\/div>\n\n<\/pre>\n
HTML5<\/code>\n<\/div>\n\n<\/pre>\n
Responsive<\/code>\n<\/div>\n\n<\/pre>\n
Podgl\u0105d przycisku menu b\u0119dzie wygl\u0105da\u0142 mniej wi\u0119cej tak:<\/code>\n<\/p>\n<a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-326738-6384400ef322e.webp\" data-rel=\"lightbox\"><img class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-326738-6384400ef322e.webp\" alt=\"\" \/><\/a><\/code><\/p>\n\n
Fabryka papieru:<\/code>
\n<\/h5>\nJest p\u0142ywaj\u0105cym przyciskiem akcji, kt\u00f3ry jest u\u017cywany do promowanych akcji. Aby utworzy\u0107 p\u0142ywaj\u0105cy przycisk akcji, musisz u\u017cy\u0107 kodu podanego poni\u017cej:<\/code>\n<\/p>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-326738-63844012501f5.webp\")
<\/a><\/p>\n\n zak\u0142adki papierowe:
\n<\/h5>\n\n ITEM ONE\n ITEM TWO\n ITEM THREE\n<\/code><\/pre>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-326738-638440158a793.webp\")
<\/a><\/p>\n\n wk\u0142ad papieru:
\n<\/h5>\n\n<\/code><\/pre>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-326738-638440184876c.webp\")
<\/a><\/p>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-326738-6384401bedf34.webp\")
<\/a><\/p>\n