20 Основни принципа на дизайна на материала – La Grande Dipper, какъв е дизайнът на материала? Определение на материала на дефиниция Google

<h1>Дизайн на материали, потребителски интерфейс според Google</h1>
<blockquote>В съвременния сценарий, ако искате да включите движение, ще трябва да го направите истински, зачитайки законите на физиката и функционалността на нещата в реалния свят. Всъщност потребителите са свикнали да усещат движение в ежедневието си. Това привлича вниманието им и им помага по -добре да разберат функционалността на нещата.</blockquote>
<h2>20 Основни принципа на дизайна на материала</h2>
<p>Дизайнът на материала е набор от принципи и насоки, които ръководят дизайна на съвременните и елегантни потребителски интерфейси (IU). Стартиран от Google през 2014 г., този визуален език има за цел да създаде кохерентни и хармонични интерфейси на всички устройства, независимо от операционната система или използвания интерфейс.</p>
<p>Дизайнът на материала се основава на три основни стълба: физическата вселена, цвят и пространство. Всеки компонент на интерфейса трябва да се съчетава в тази вселена, зачитайки пропорциите и цветовете, специфични за всеки материал. Пространствата също трябва да са добре дефинирани, така че потребителят да може лесно да се движи от един елемент на друг.</p>
<h2>Какъв е дизайнът на материала ?</h2>
<h3>Ето какво ?</h3>
<p>Дизайнът на материала е набор от правила за дизайн, създаден от Google през 2014 г. Този инструмент улеснява управлението на компонентите на платформата. Всъщност дизайнерите на Google са разбрали, че компонентите трябва да имат специфични физически свойства.</p>
<p>По този начин дизайнът на материала включва директиви за всичко:</p>
<ul>
<li>Ширината</li>
<li>Скорост</li>
<li>Сянката</li>
</ul><ul>
<li>Типографията</li>
<li>Решетки</li>
<li>Пространство</li>
<li>Цветът</li>
<li>Скалата</li>
<li>Изображения</li>
</ul>
<p>По този начин потребителите имат впечатление, че са в контакт с физически елементи на реалния свят.</p>
<p>По същия начин, дизайнът на материала е не само въпрос на показване на дизайнерите как да работят върху появата на продукти и услуги. Освен това позволява на дизайнерите да създават умишлени дизайни.</p>
<h3>Защо да изберем материала дизайн ?</h3>
<p>Подобно на повечето дизайнерски системи, е създаден дизайн на материали, за да осигури по -добро потребителско изживяване на различни устройства и платформи. Целта е потребителите да имат съгласуван опит .</p>
<p>Дизайнът на материала не е прост набор от указания за стил. Това е пълна дизайнерска система.</p>
<p>За разлика от други по -малко пълни дизайнерски системи, той може да управлява дизайнерски ситуации, със сложни случаи на използване.</p>
<p>По същия начин, дизайнът на материала е доста гъвкава дизайнерска библиотека. В директивите голяма част от спецификите на изпълнението на дизайна са изцяло оставени на дизайнера.</p>
<h2>Списък на принципите на материалния дизайн</h2>
<h3>Принцип 1: Запознайте се с ключови ресурси</h3>
<p>Ако искате да придобиете конкретни знания за дизайна на материалите, най -доброто решение е да се консултирате с официалния ресурс на Google.</p>
<p>Той се актуализира непрекъснато и съдържа всички пълни и необходими подробности за дизайна на дизайна на материали.</p>
<p>Най -доброто предимство по отношение на този ресурс е, че той не се ограничава само до специфични аспекти в Android. Напротив, той обхваща целия аспект на дизайна на материала, във всеки проект какъвто и да е типът на приложението или в мрежата.</p>
<p>Препоръчително е да разглеждате поне първите глави на този ресурс, за да можете да се запознаете с неговите основни принципи.</p>
<h3>Принцип 2: Знайте какво е “материал” в дизайна на материала</h3>
<p>Името дизайн на материала далеч не е безобиден. Дизайнът на материала е имитация на материала и физическия свят. Тя е вдъхновена от своите текстури, дори от отражението на светлината и проекцията на сенките. Повърхностите на материалите преоткриват хартията и мастилото.</p>
<p>Всъщност централната идея на принципите на дизайна на материала е фокусирана върху създаването на дизайн, имитиращи обекти на реалния свят.</p>
<h3>Принцип 3: Използвайте сенки за дефиниране на визуални йерархии</h3>
<p>Основните инструменти за проектиране на материали са:</p>
<ul>
<li>Ръбове</li>
<li>Повърхности</li>
<li>Осветление</li>
<li>Реалистични сенки</li>
</ul>
<p>Например, сенките ви помагат да дадете приоритет на различните елементи, за да имате пълен дизайн.</p>
<h3>Принцип 4: Използвайте ярки цветове</h3>
<p>Дизайнът на материала несъмнено е дизайн, направен при минималистичен подход. С други думи, не е нужно да използвате много инструменти за дизайн и стил.</p>
<p>Едно от малкото материални неща, които можете да използвате, е цветът. Точно, яркият цвят. Всъщност ярките цветове играят важна роля за подобряване на дизайна на материала. Те привличат вниманието на потребителите и ги насърчават да си взаимодействат с дизайна.</p>
<h3>Принцип 5: Не пренебрегвайте първичния цвят и акцентният цвят</h3>
<p>Най -добрият начин за адаптиране на този принцип към всеки тип дизайн е да изберете три нюанса, които ще служат като основна палитра, с цвят, който ще служи като акцент.</p>
<p>Избраните от вас основни цветове могат да се използват в ключови елементи на интерфейса, включително:</p>
<ul>
<li>Полетата</li>
<li>Кутии</li>
<li>Фоновете</li>
<li>Шрифтове и т.н.</li>
</ul>
<p>И цветът на акцента, както подсказва името му, подчертава и привлича вниманието към основен елемент. Не забравяйте, че избраният цвят на акцента трябва да бъде по -контрастен от този на първичните цветове.</p>
<h3>Принцип 6: Използвайте добре белите пространства</h3>
<p>Белите пространства играят ключова роля в оформлението на текста и типографията. В действителност бялото пространство е инструмент за привличане на внимание, потребител и насочване на вниманието им към определен елемент.</p>
<p>Така че не се колебайте да:</p>
<ul>
<li>Използвайте голяма типография за основни заглавия</li>
<li>Добавете много бели пространства</li>
<li>Дръжте достатъчно празно място във вашия глобален дизайн.</li>
</ul>
<h3>Принцип 7: Следвайте новата тенденция на изображения от ръб до ръба</h3>
<p>Дизайнът на материалите са напълно адаптирани към изображението. Така че, ако сте решили да добавите изображения към вашия дизайн, те трябва да имат основна роля.</p>
<p>Изображенията, включени в дизайна на материала, трябва да следват режима на ръба до ръба. Тоест не трябва да има маржове, отделяне на ръба на изображението от ръба на прозореца или екрана.</p>
<h3>Принцип 8: Всичко трябва да е реактивно</h3>
<p>Направете нещата достъпни и използваеми на всяко устройство, независимо от размера на екрана му, е един от основните принципи на дизайна на материала. Целта е да се предложи съгласувано преживяване. По този начин потребителят няма да се чувства объркан по време на прехода от едно устройство към друго, тъй като няма да получи нов интерфейс всеки път, когато ще промени устройството.</p>
<p>В този случай дизайнът трябва да бъде реактивен. За щастие, благодарение на усъвършенстваните рамки, половината от работата ви вече е свършена. Следователно създаването на реактивен дизайн няма да бъде трудна задача за вас.</p>
<h3>Принцип 9: Размери</h3>
<p>В мрежата оста z се използва за суперпозиция, а не за перспективата. От друга страна, 3D светът се основава на оста y.</p>
<p>Дизайнерският материал се използва главно 3d, така че оста y. Просто погледнете дизайна на Google, за да забележите изометричната перспектива. Този начин на дизайн е вдъхновен от реалния свят, оттук и името &bdquo;материал&ldquo;.</p>
<h3>Принцип 10: Не забравяйте, че успехът е подробно</h3>
<p>В дизайна на материала всичко трябва да е просто. Най -добрият пример може да бъде скеоморфният дизайн . Тази техника има за цел да имитира реални обекти по време на проектирането на виртуални обекти. Следователно трябва да гарантирате, че всеки елемент от вашия дизайн изглежда, доколкото е възможно, за нещата от реалния живот.</p>
<h3>Принцип 11: Движението трябва да има значение</h3>
<p>Според Google движението дава смисъл на дизайн. Когато работите с дизайна на материала, движението е компонент, който трябва да бъде включен.</p>
<p>В дизайна на материала движението трябва да има тези 3 характеристики:</p>
<ol>
<li>Бъдете информативни: Трябва да се знае на потребителите къде и кога действието е било налично.</li>
<li>Помогнете да се концентрирате и насочете потребителите към най -важните части на страницата.</li>
<li>Бъдете изразителни и добавете малко личност и динамизъм към интерфейса.</li>
</ol>
<h3>Принцип 12: Движението трябва да бъде автентично</h3>
<p>В съвременния сценарий, ако искате да включите движение, ще трябва да го направите истински, зачитайки законите на физиката и функционалността на нещата в реалния свят. Всъщност потребителите са свикнали да усещат движение в ежедневието си. Това привлича вниманието им и им помага по -добре да разберат функционалността на нещата.</p>
<p>Ето защо Google е запазил отделен раздел от директивите на дизайна на материала, за да подробно опише концепцията за автентично движение.</p>
<h3>Принцип 13: Ускорение и забавяне на движенията</h3>
<p>Трябва да предложите ясен и практичен преход за потребителите. Процесът на движение трябва да бъде вероятен и реалистичен, тъй като материалният дизайн цели възпроизвеждането на явления от реалния свят.</p>
<p>Дизайнерите трябва да намерят най -доброто време за всяко движение на обекта.</p>
<p>От една страна, прекомерната бавност на елементите може да разсее потребителите и дори да има отрицателно въздействие върху потока на потребителите. От друга страна, твърде динамичните движения могат да нарушат интернет потребителите.</p>
<p>В този случай трябва да сте в дясната среда, като гарантирате оптимална продължителност и добра четимост на анимациите. Необходимо е да дадете достатъчно време на потребителите, за да могат да забележат промените. Но, не ги карайте да чакат. Изследванията доказват, че 200 до 500 ms са най -добрите скорости на анимация.</p>
<h3>Принцип 14: Възползвайте се от анимациите на иконите</h3>
<p>Понякога иконите могат да бъдат създадени с контекстни бутони с ефект на кръгово разкритие.</p>
<p>Вярно е, че потребителите на интернет не забелязват често тези подробности, но са важни да създадат положително влияние върху глобалното потребителско изживяване. </p>
<h3>Принцип 15: Създаване на различни срокове за различни движения</h3>
<p>Анимираните обекти, които се появяват един по един, са по -интересни и по -живи. Такъв подход предлага на потребителите възможността да разгледат всеки елемент.</p>
<p>От друга страна, представете всички елементи на страницата едновременно обърква потребителите, защото те не знаят къде да търсят.</p>
<h2>Дизайн на материали, потребителски интерфейс според Google !</h2>
<p><img src=”https://www.usabilis.com/wp-content/uploads/2018/04/material-design-definition.jpg” alt=”Дефиниция на дизайна на материала” width=”600″ height=”450″ /></p>
<p>Дизайнът на материала е визуален и интерактивен език, създаден от Google. Но това е и ръководство за проектиране на графичен интерфейс (дизайнерска система). Този дизайн е “материал”, защото е вдъхновен от реални предмети, хартия и мастило какво, се различава от плоския дизайн. Google използва дизайн на материали, за да обедини графичния стил на своите приложения и платформи. Следователно интерфейсът му има предимството да бъде много подходящ за използване за всяко устройство и всички резолюции на дисплея. Тя също е достъпна. Дизайнът на материала ще оптимизира UX, като същевременно предлага ресурси на разработчиците и дизайнерите на интерфейса. Както при всеки графичен ток, той има своите аматьори и нарушители.</p>
<p><em>Дизайнът на материала е преди всичко метафора. Материална метафора като обединяваща теория за рационализирано пространство и система за движение. Материалът е закотвен в тактилна реалност, вдъхновен от изучаването на хартия и мастило, но технологично напреднал и отворен за въображение и магия.</em></p>
<h2>Какъв е дизайнът на материала ?</h2>
<p>Името “Дизайн на материала” съответства на набор от <strong>Правила за проектиране</strong> Предложено от Google. Понякога се превежда от &bdquo;дизайн на материали&ldquo; или &bdquo;контекстуален дизайн&ldquo;. На първо място беше дизайн, предназначен за мобилни приложения (Mobile First). След това той стана една от основните тенденции в дизайна на интерфейса. Подходът на Google припомня <strong>Плосък дизайн</strong> (или плосък дизайн): минимализъм, геометрични форми и цветни, без излишни (за разлика от скеоморфизма). Но в този случай това е плосък дизайн … с дебелина и облекчение. Всъщност, ето основните характеристики:</p>
<ul>
<li>A <strong>Метафора</strong> хартия и мастило от цифрово оборудване.</li>
<li>Смел дизайн и <strong>диаграма</strong>.</li>
<li>Създаването на <strong>движения</strong> За подобряване на привилегията и UX. Действията на потребителя причиняват значителни микроинтекции.</li>
</ul>
<h2>Полимерната библиотека</h2>
<p>За да използва графичните елементи на дизайна на материала (хартиени елементи) и основни компоненти (основни елементи), Google създаде своята библиотека, Polymer, предназначена за разработчици на уеб приложения. Оттогава Google предлага различни сайтове и инструменти, които да помогнат на дизайнерите да проектират с този стил на дизайн.</p>
<p>Вижте тази декларация под формата на &bdquo;Манифест&ldquo;, която се намира при въвеждането на материалното референтно място.Io:</p>
<p><em>&bdquo;Предизвикахме се да създадем визуален език за нашите потребители, които синтезират класическите принципи на добрия дизайн, иновативни и възможностите, предлагани от технологиите и науката. Наричаме го: Материален дизайн.&raquo;</em></p>
<h2>WebDesign според Google</h2>
<p>Следователно дизайнът на материала е различен от плоския дизайн. Това е нов вид уеб дизайн. Можем да кажем, че той е <strong>Отзивчив WebDesign</strong> (Auto Adaptive) Центриран върху потребителското изживяване. Целта е да се получи дизайн:</p>
<ul>
<li><strong>Интуитивен</strong> За всички потребители (включително и не са опитни)</li>
<li><strong>Подходящ за всички опори</strong> (компютър, таблет, смартфон и т.н.)</li>
<li><strong>Интерактивен</strong> Благодарение на динамичните анимации.</li>
<li><strong>Хомогенни</strong> между всички интерфейси</li>
</ul>
<p>Според Google този дизайн използва технологични и научни възможности за предоставяне на уеб решения на съвременните ергономични и дизайнерски проблеми. Във видеото по -долу дизайнерите на Google изразяват първоначалните си мотиви, начина, по който са работили и &bdquo;физическите&ldquo; преживявания. Отбелязваме, че ако този дизайнерски език е закотвен в реалност, той оставя важно място за въображението на потребителя. Терминът “магия” често се връща за дизайна на материала.</p>
<h2>Препроектиране на Google</h2>
<p>За да разберете напълно подхода на Google, трябва да се върнете към произхода на Google и значението, което фирмата на Montain View атакува дизайна. Ами не много … според инициаторите на дизайна на материала.</p>
<p>Виждането на това видео ни дава добра представа за важността на носенето на &bdquo;визия&ldquo; за предприемане на този проект: препроектиране на Google.</p>
<h2>Защо дизайнът на материала ?</h2>
<p>Видимо във версия 5.0 от Android, дизайнът на материали беше представен за първи път на 25 юни 2014 г. от Matias Durate, директор на потребителското изживяване на Android в Google. Това беше като част от конференцията в Google I/O. С тази нова дизайнерска харта Google създаде своя собствена <strong>визуален език</strong>, Идентифицируемо каквото и да е услугата или продукта, от мобилни приложения до свързани обекти.</p>
<p>Матиас Дуарте изложи метафората за хартия (Android / материал) през 2014 г. през 2014 г.).</p>
<p>Гледайте това видео, за да отпразнувате първата годишнина от този дизайнерски подход. Беше един след старта, през май 2015 г. Matias Durate разглежда ретроспективен поглед през изминалата година и вече можеше да оцени с това, което дизайнерите на ентусиазма, но и разработчиците, бяха присвоили принципите, представени година по -рано.</p>
<h2>За или против дизайна на материала ?</h2>
<p>Този дизайн също е проектиран да <strong>Обогатете потребителското изживяване</strong> И ефективността на интерфейса (нови шрифтове, четими на няколко езика, по -добра помощ …) Година по -късно Google разкри, наред с други неща, комплектът за дизайн на материали за уеб проекти (изтеглете комплекта тук).</p>
<p>Дизайнът на материала предизвика различни реакции. Някои одобриха това &bdquo;подобрение&ldquo; на плосък дизайн, считан за опростен и скучен. Всъщност това е “течност” и движещ се дизайн. В състава, портите, отговорите и динамиката, структурирайте интерфейса. Пространствата, подравняването и цветовете са от съществено значение във фазата на проектиране. Всички тези елементи дават приоритет на съдържанието и улесняват навигацията на потребителя. Анимации, базирани на законите на физиката, успокояват потребителя по отношение на резултата от неговите действия.</p>
<p>За други обаче Google се стреми да наложи своето <strong>Графичен стил</strong>, с риск от ограничаване на креативността на дизайнерите/графичните дизайнери. След това всички уебсайтове ще започнат да изглеждат като приложения за Android, в ущърб на <strong>Качество на потребителското изживяване</strong>.</p>
<h2>Как работи ? Приложение с Android</h2>
<p>Трябва да имаме предвид, че това са &bdquo;материални елементи&ldquo;. По този начин е невъзможно да се пресече елемент. Само компонентът, засегнат от потребителя, ще реагира. В дизайна на материала,<strong>Околната среда е 3D</strong>. Всеки обект, или “материал”, има 3 координати: x, y, z. Оста Z се отнася до издигането на обекта. Можем да вземем решение за издигането на обекта, неговите размери и повредените сенки, но дебелината остава тази на лист хартия. Последният не може да се огъне. От друга страна, тя се движи по всички оси.</p>
<p><img src=”https://www.usabilis.com/wp-content/uploads/2018/04/02-material-design-environment-3D.png” alt=”Дизайн на материала 3D среда” width=”700″ height=”700″ /></p>
<p>Android предоставя три теми (тема на тъмен или лек материал, тема на светлинния материал с Dark ActionBar), които да бъдат внедрени директно в приложението чрез промяна, ако желаете, някои от атрибутите. The <strong>забавление</strong> Прилагайте се към обекти/елементи на интерфейса са две: анимацията Tween (за преходи, например чрез въртене на изображението) и анимацията на рамката (показване на няколко изображения). LoadAnimation ви позволява да ги заредите и стартиране на активирането им/изстрелването им.</p>
<h2>Примери за интерфейси за проектиране на материали</h2>
<p>Теоретични обяснения – метафората на интелигентната хартия, която оживява и взаимодейства с потребителя – може да изглежда неясна. Но наблюдавайте интерфейсите конкретно улеснява разбирането на концепцията на Google.</p>
<p>Вижте източниците на възходящите (истории.привилегии.com)</p>
<p><img src=”https://www.usabilis.com/wp-content/uploads/2018/04/03-uplab-material-design.jpg” alt=”Дизайн на материала на възходящите материали” width=”394″ height=”151″ /></p>
<p>Друг източник, богат на примери: Блогът за дизайн на материали</p>
<h2>Икони за дизайн на материали</h2>
<p>Тази дизайнерска система трябваше да произвежда свои собствени икони. Голяма библиотека е достъпна на различни източници, спестявайки значително време на дизайнерите на потребителски интерфейс, когато знаете сложността на дизайна на хомогенни кохерентни икони.</p>
<p>Препрочетете нашите статии към тази тема:</p>
<p>Вижте Ръководството за GitHub за използването на тези икони в различни среди.</p>
<p><img src=”https://www.usabilis.com/wp-content/uploads/2018/04/10-icones-material-design.jpg” alt=”Икони за дизайн на материали” width=”600″ height=”519″ /></p>
<p>Други икони на материали (за да изтеглите тук)</p>
<p><img src=”https://www.usabilis.com/wp-content/uploads/2018/04/11-icones-material-design.jpg” alt=”Икони за дизайн на материали” width=”600″ height=”492″ /></p>
<p>Можете да изтеглите тук много икони за дизайн на материали</p>
<p><img src=”https://www.usabilis.com/wp-content/uploads/2018/04/12-icones-material-design.jpg” alt=”Икони за дизайн на материали” width=”600″ height=”557″ /></p>
<p>Друг източник на икони за дизайн на материали, които да изтеглите тук</p>
<p><img src=”https://www.usabilis.com/wp-content/uploads/2018/04/13-icones-material-design.jpg” alt=”Дизайн на материала и плоски дизайнерски икони” width=”600″ height=”365″ /></p>
<p>Голям избор на икони на материали в плосък дизайн, които да използвате по вашите проекти, но също така ръководства да ги използвате (тук)</p>
<h2>Някои източници и вдъхновения</h2>
<ul>
<li>Референцията за дизайна на материала: Материал.io<ul>
<li>Движение</li>
<li>Стил</li>
<li>Оформление</li>
<li>Компонент</li>
<li>Модели</li>
<li>Растеж и комуникации</li>
<li>Използваемост</li>
<li>Платформи</li>
</ul><ul>
<li>На сайта на Google Design ще намерите казуси и практически ръководства (много ресурси и възможност за абониране за много богат бюлетин)</li>
</ul>
<h2>Заключение</h2>
<p>Дизайнът на материалите в Google се възползва от <strong>Простота на плоския дизайн</strong>. Интерфейсът е изискан и визуално балансиран. Като плосък дизайн, той отговаря на изискванията на <strong>Адаптивен дизайн</strong>. Но където плоският дизайн често е критикуван заради неговите <strong>Липса на достъпност</strong>, Google Честно <strong>Част от скеоморфизма</strong> на високо ниво на абстракция. По този начин, интелигентното използване на анимации, типографски избор и метафората на хартията подобряват потребителското изживяване. Степента на графичните елементи, предлагани на разработчиците. Разбира се, както при всяка дизайнерска тенденция, изборът за използване на този тип дизайн зависи от целевите потребители и бизнес цели/марка. На дизайнера/дизайнера да реши дали той трябва напълно да следва <strong>Харта за проектиране на материали</strong>, Да се ​​вдъхновява от него или да се обърне.</p>
<ul>
<li>Дизайн на материалите в Google, формализация на дизайна</li>
<li>Какво е дизайн на услуги ?</li>
<li>Какво е дизайнерското мислене ?</li>
<li>Каква е достъпността ?</li>
<li>Какво е плосък дизайн ?</li>
<li>Какво е скеоморфизъм ?</li>
<li>Определение на емоционалния дизайн, мястото на емоциите в дизайна</li>
</ul>
<p>Вижте нашите услуги:</p>
<ul>
<li>Нашето обучение за проектиране на системен дизайн</li>
<li>Нашето 2 -дневно обучение за дизайн.</li>
</ul>