Спецификацијата за материјален дизајн од Google првично беше насочена кон Андроид-платформата како начин да се сугерира конзистентност на дизајнот на платформата.
01 од 06
Како да креирате материјална Дизајн картичка во Adobe Experience Design CC
Откако дизајнерите почнаа да ја тресат и разбираат размислувањето зад него, материјалот Дизајн тивко стана една од највлијателните визуелни филозофии во веб и мобилниот дизајн . Сè што треба да направите за да го видите она што го добиваме е да направиме Материјал дизајн пребарување на Pinterest и ќе видите стотици примери и експерименти на уреди, таблети, па дури и веб-сајтови.
Фасцинантен аспект на Дизајн на материјали е тоа што Google размислува околу тоа како треба да се појават апликациите и да работат на мобилни уреди, но концептите се применуваат на било кој екран од која било големина на која било платформа. Како што наведува Гугл во параграфот за отворање на спецификацијата, "Ние се спротивставивме да создадеме визуелен јазик за нашите корисници што ги синтетизира класичните принципи на добар дизајн со иновативноста и можноста за технологија и наука. Ова е материјален дизајн. Оваа спецификација е жив документ кој ќе се ажурира додека продолжуваме да ги развиваме начелата и спецификите на материјалниот дизајн ".
Материјалот за кој се зборуваше, во многу општи термини, е хартија и белег на Материјалот Дизајн е картичката. Помислете на индекс картичка на површина и сте на вистинскиот пат. А картичка е елемент кој содржи фотографии, видеа, текстуални линкови и така натаму, но каде што тие се разликуваат од повеќето интерактивни дизајни е дека тие треба да се фокусираат на еден предмет. Картичките имаат заоблени агли, содржат слаби сенки кои укажуваат на тоа дека се над површината и ако сите се на истата рамнина тие се нарекуваат "колекција".
Во овој "Како да" ние ќе создадеме картичка врз основа на спецификацијата. Наместо да ја креираме картичката со различни алатки за снимање и цртање, ќе дојдеме од него од друга насока. Ќе ги користиме алатките во Дизајн на искуства на Adobe кој во моментов е во преглед на само за Macintosh и е бесплатен. Можете да го преземете овде.
Ајде да почнеме.
02 од 06
Креирање на Прототип Artboard во Adobe Experience Design CC
Не постои очигледен начин да се создаде Андроид екран од Start Screen во Experience Design CC (XD). Она што го правевме кога го отворивме XD, е да ја одбереме опцијата iPhone 6 и кога ќе се отвори интерфејсот, ние ќе ја одбереме алатката Artboard на дното на Toolbar и одберете Android Mobile од изборот на панелот Properties на десната. Потоа се префрлиме на алатката за избор, кликнете еднаш на името на името на iPhone таблата и избришете ја таблата. Нема повеќе.
Во тековната верзија на XD, има мала стрелка покрај iPhone 6 која, кога ќе кликне, отвара паѓачко мени. Од таму ќе ја изберете верзијата Android Mobile и ќе се отвори избраната плоча на Android Mobile во интерфејсот.
За да осигураме дека е соодветно отворен простор за картичка, обично се префрламе на Скица 3 и копирајте и ставете ја лентата за статус, Nav Бар и лентата со апликации од Дизајнот на материјал за дизајн во табла. Скица 3.2 содржи Материјал Дизајн на материјал ( Датотека> Ново од Шаблонот> Дизајн на материјал ) и уште еден навистина добар бесплатен е од Кајл Ледбеттер кој можете да го добиете овде. Ако немате Sketch, можете да ги копирате и залепите од XD налепниците пронајдени во Датотека> Отвори UI Kit> Google Материјал . Можете исто така да ги преземете од Google за употреба во Photoshop, Illustrator, After Effects и Sketch.
03 од 06
Додавање материјална Дизајн картичка на Adobe XD CC Artboard
Една од најкорисните карактеристики на XD е вклучувањето на UI Kits за Apple iOS, Google Material и Microsoft Windows. Во многу аспекти, тие го додаваат зборот "Брзо" на терминот "Брзо прототипирање". Исто така, тие ја олеснуваат работата на дизајнерот во тоа што заедничките UI елементи не мора постојано да се пресоздаваат во Дизајн апликација како Photoshop, Illustrator или Скеч.
На елементот на графичката околина што ни беше потребна беше картичка. За да стигнеме до него избравме File> Open UI Kit> Google Material и комплетот беше отворен како нов документ. Елементот што беше потребен беше пронајден во категоријата Картички.
Она што го сакаме за овие се тие се придржуваат до спецификацијата за материјален дизајн, како што е наведено во спецификациите за содржински блокови, како и спецификациите за форматирање и проред на текст што се дадени во Specography Typography.
Стил на картичката што ја сакавме беше оној во долниот лев агол. Ние едноставно го маркираме со глувчето и го копиравме до таблата со исечоци. За жал, 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 во дијалогот за извоз во Photoshop кутија. Сликата беше внесена во Adobe XD.
Потоа ја влечевме светло сивата кутија над сликата на картонот и избравме Object> Mask With Shape . Резултатот беше слика која ги собираше заоблените делови на обликот. Ние потоа ја преместивме сликата до крајната позиција.
Со сликата во место, ние ја сменивме бојата на позадината на средно сивата кутија, го сменивме текстот и бојата на текстот на врската.
06 од 06
Користење на функцијата Adobe XD CC грид
Со завршувањето на картичката сега треба да биде правилно поставена во согласност со спецификацијата Material Design. Ова значи дека има 8 пиксели од двете страни на картичката и картичката треба да биде 8 пиксели под лентата со апликации. За да го направите ова, кликнете еднаш на името на таблата и, во Панелот со својства, изберете Мрежа. Мрежата се појавува над таблата.
Стандардната големина на мрежата е 8 пиксели кои се појавуваат како иста големина на мрежа за Material Design. Ако ви требаат различна големина, променете ја вредноста во областа на грид. Ако сакате да ја промените бојата на мрежата, кликнете на чип во боја и изберете боја од добиениот избор на боја.
Со решетката видлива, кликнете на картичката и поместете ја во нејзината крајна позиција.
За да завршиме, ја избравме картичката, ја кликнавме копчето Repeat Grid и го сменивме растојанието помеѓу картичките и 8 пиксели.