Један од најосновнијих аспеката сваке апликације су обрасци, јер нам они омогућавају да прикупимо корисничке информације о пословном моделу којим наша апликација управља.
Дизајн материјала Комбинујући најбоље праксе класичног дизајна и имплементацију оригиналних и иновативних ефеката, они нам омогућавају стварање образаца који не само да изгледају добро, већ и дају нашој апликацији додатну функционалност.
Погледајмо онда како створити основни облик користећи принципе Дизајн материјала.
ЗахтевиПре него што започнете овај водич, препоручујемо вам да прошетате кроз увод у дизајн материјала овде. Ослањаћемо се на оквир који се зове Материализе и важно је да разумемо како функционише контејнер наше апликације.
Контејнер за материјализацију
Контејнер од Материјализовати ради на исти начин на који ради БоотстрапУ случају да смо већ дотакли овај оквир, нећемо имати проблема са разумевањем како он функционише, али за оне који га не познају, то је углавном контејнер 12 колона, у којем можемо рећи нашим елементима колико колона може покрити.
Има прилично сличну хијерархију, има класу контејнера, следи класа реда и на крају класе применљиве на колоне, да видимо како би изгледала структура комплетног реда, након чега следи ред који би садржавао два елемента.
Ово је див са 12 колонаОво је див са 6 колонаОво је див са 6 колонаНачин на који то видимо је прилично једноставан, само морамо бити јасни да имамо дванаест колона за рад и на овај начин одржавати наш садржај организованим и визуелно боље представљеним. Већ смо видели како контејнер ради, пређимо на изградњу нашег основног облика.
Креирање обрасца
Креирајмо а ХТМЛ са нашом подразумеваном структуром и прва ствар коју ћемо учинити је да укључимо библиотеке обе ЦСС као ЈаваСцрипт оф Материјализовати и на овај начин применити жељену функционалност на наш образац.
Важно је да укључимо јКуери у најновијој верзији за исправно функционисање оквира, поред тога морамо укључити посебну линију која ће нам омогућити коришћење његових икона.
Када укључимо библиотеке, остаје конструкција нашег обрасца, већина елемената ће имати структуру сличну следећој, где ћемо имати класу ред, након чега следи час купус и број колона које ће елемент заузети.
ИмеПрезимеМатеријализовати Такође нам омогућава да потврдимо поља, у случају е -поште означавањем врсте коју можемо доделити порукама у случају да су информације важеће или не, да видимо:
Е-маилТакође можемо укључити познате иконе, функцију преузету из равног дизајна која нашој апликацији даје виши ниво употребљивости. За ово ћемо користити ознаку са одређеном класом:
е-маилКоначно, ниједан основни облик није потпун без познатог тектареа, текстуални оквири који нам омогућавају да прикупимо много више информација, као што су адреса корисника или описи неког садржаја.
Подручје за текстКада попунимо образац, морамо само да тестирамо његово функционисање, како Материјализовати Укључује многе ефекте у нашу форму и чини га врло визуелним, да видимо како то изгледа на следећем анимираном ГИФ -у.
Како видимо конструкцију основног облика користећи језик дизајна Дизајн материјала и подржано оквиром попут Материјализовати То може бити задатак који можемо да обавимо за неколико минута и добијемо квалитетан резултат који не само да пружа бољи визуелни изглед, већ и карактеристике које имају само најбоље апликације.
Најбоље је да га преузмете и испробате, сигурно ће вам се свидети.
форм-материал-десигн.хтмл 2.75К 647 преузимања
