Спецификацията за дизайна на материалите от Google първоначално бе насочена към платформата Android, като начин да се предложи последователност на дизайна на платформата.
01 от 06
Как да създадете карта за дизайн на материали в Adobe Experience Design CC
След като дизайнерите започнаха да го пробиват и да разбират мисленето зад себе си, Material Design тихо се превърна в една от най-влиятелните визуални философии в уеб и мобилния дизайн . Всичко, което трябва да направите, за да видите какво получаваме, е да извършите търсене в Material Design на Pinterest и ще видите стотици примери и експерименти на устройства, таблети и дори уеб сайтове.
Завладяващият аспект на дизайна на материалите е, че Google мисли за начина, по който трябва да се появяват приложенията и да работят на мобилни устройства, но концепциите се прилагат към всеки екран от всякакъв размер на всяка платформа. Както посочва в началния параграф на спецификацията на Google: "Ние предизвикахме себе си да създадем визуален език за нашите потребители, който синтезира класическите принципи на добрия дизайн с иновациите и възможностите на технологиите и науката. Това е материалният дизайн. Тази спецификация е жив документ, който ще бъде актуализиран, докато продължаваме да развиваме принципите и особеностите на материалния дизайн. "
Материалът, за който говорихме, в много общи положения е хартия и отличителен белег на Material Design е картата. Помислете за индексна карта на повърхността и сте на прав път. Картата е елемент, съдържащ снимки, видеоклипове, текстови връзки и т.н., но там, където те се различават от повечето интерактивни дизайни, те са предназначени да се съсредоточат върху един единствен предмет. Картите имат заоблени ъгли, съдържат леки сенки, показващи, че са над повърхността и ако са всички в една и съща равнина, те се наричат "колекция".
В това "Как да" ще създадем карта, базирана на спецификациите. Вместо да създаваме карта с разнообразни инструменти за изображения и рисуване, ще се появим от различна посока. Ще използваме инструментите в дизайна на опит на Adobe, който понастоящем е в публичен преглед само за Macintosh и е безплатен. Можете да го изтеглите тук.
Да започваме.
02 от 06
Създаване на Prototype Artboard в Adobe Experience Design CC
Няма очевиден начин да създадете екран с Android от началния екран в проект за опит CC (XD). Това, което направихме, когато отворихме XD, е да изберем опцията за iPhone 6 и, когато се отвори интерфейсът, изберете инструмента Artboard в долната част на лентата с инструменти и изберете Android Mobile от избора в панела Properties вдясно. След това превключваме към инструмента за избор, кликваме веднъж върху името на работния плот на iPhone и изтриваме графиката. Няма повече.
В текущата версия на XD има малка стрелка до iPhone 6, която, когато се кликне, отваря падащо меню. Оттам изберете версията за Android за мобилни устройства и избраният графичен таблет Android Mobile се отваря в интерфейса.
За да сме сигурни, че разполагаме с подходящото екранно пространство за картата, ние обикновено се отправяме към Sketch 3 и копираме и вмъкваме в графиката графика за състоянието, навигационната лента и лентата за приложения от шаблона за дизайна на материала. Sketch 3.2 съдържа шаблон за дизайн на материала ( File> New From Template> Material Design ) и още една наистина безплатна е от Kyle Ledbetter, която можете да получите тук. Ако нямате Sketch, можете да ги копирате и поставяте от стикерите XD, които са намерени в File> Open UI Kit> Google Material . Можете също така да ги изтеглите от Google за използване в Photoshop, Illustrator, After Effects и Sketch.
03 от 06
Добавяне на материална карта за дизайн към Adobe XD CC Artboard
Една от най-полезните функции на XD е включването на UI комплекти за Apple iOS, Google Материал и Microsoft Windows. В много отношения те добавят думата "Rapid" към термина "Rapid Prototyping", а освен това те правят работата на дизайнера по-лесна, тъй като елементите на потребителския интерфейс не трябва непрекъснато да се пресъздават в дизайна, като например Photoshop, Illustrator или Скица.
Елементът на потребителския интерфейс, от който имахме нужда, беше карта. За да стигнем до него, ние сме избрали File> Open UI Kit> Google Material и комплектът е отворен като нов документ. Елементът, от който имахме нужда, беше намерен в категорията "Картички".
Онова, което обичаме, е, че те се придържат към спецификацията на материала, както е описано в спецификациите на Content Blocks, както и текстовите формати и спецификациите на разстоянията, изложени в спецификациите за типография.
Стилът на карти, който искахме, беше този в долния ляв ъгъл. Просто го маркирахме с мишката и го копирахме в клипборда. За съжаление, XD не съдържа интерфейс с табове за отворени документи. Това, което правим, е да преместите малко отворения прозорец на документа, за да разкриете този, върху който работим, да го изберете и да го поставите. Друг начин за бързо превключване между отворените XD документи е да натиснете Command- ' .
04 от 06
Как да редактирате елемент на дизайна на материалите в Adobe Experience Design CC
Когато картата в XD пристига от клипборда, не започвайте да работите с нея. Първото нещо, което трябва да направите, е да унищожите картата, защото имате нужда от достъп до парчетата и парчетата, които съставят картата. За да направите това, изберете картата и изберете Object> Ungroup или натиснете Shift-Command-G.
Картата ви сега се състои от три части:
- Светло сива кутийка за изображението.
- Средно сива кутийка за текста
- Задната кутия се използва като фон.
Първата стъпка е да изтриете светло сивото поле. Единствената му цел е да действа като заместител на изображението, което го прави, ако решите, по избор.
Кутията с текста всъщност е тъмно сива с 50% непрозрачност. Това поле може да се използва като текстов фон и можете да промените цвета и непрозрачността на кутията.
Въпреки че не е очевидно, светло сивото кутия следва спецификацията на Material Design, тъй като горните ъгли са закръглени с 2 пиксела. Имайте предвид това, ако добавяте изображение. Той също така ще се нуждае от заоблени ъгли, които могат да бъдат добавени към приложение за изображения или в XD.
Виждайки как това е състоянието на почивка на картата, тя също така се нуждае от сянка. Спецификацията ясно показва, че има надморска височина на картата от 2 пиксела. За да добавите това, изберете формата на черния фон и задайте стойностите Y и B (Blur) на 2 в панела с свойства.
05 от 06
Как да добавите изображение към картата за дизайн на материал в Adobe XD CC
Знаейки, че картата е с широчина 344 пиксела и площта на изображението е 150 пиксела ( половината от височината на светло сивото ), отворихме изображението във Photoshop, изрязахме го на размера и го запазихме с помощта на опцията @ 2x в диалоговия прозорец Export As кутия. Изображението бе импортирано в Adobe XD.
След това изтеглихме светло сивото кутийка върху изображението върху картонената кутия и избрахме Object> Mask With Shape . Резултатът е изображението, което привлича заоблените ъгли на формата. След това преместихме изображението в крайното му положение.
След като изображението беше поставено, сменихме цвета на фона на средно сивата кутийка, сменихме текста и цвета на текста на връзката.
06 от 06
Използване на функцията за грид на Adobe XD CC
С попълването на картата трябва да бъде правилно поставена в съответствие с спецификацията на Material Design. Това означава, че има 8 пиксела от двете страни на картата и картата трябва да бъде 8 пиксела под лентата на приложението. За да направите това, щракнете веднъж върху името на artboard и в панела Properties изберете Grid. Решетката се показва над графичната дъска.
Размерът на мрежата по подразбиране е 8 пиксела, което се оказва, че е същият размер на мрежата за дизайна на материалите. Ако имате нужда от различен размер, променете стойността в областта на мрежата. Ако искате да промените цвета на решетката, щракнете върху цветния чип и изберете цвят от получения Color Picker.
С видимата решетка кликнете върху картата и я преместете в крайното й положение.
За да завършим, избрахме картата, кликнахме върху бутона "Повторение на решетката" и сменихме разстоянието между картите до 8 пиксела.