Спецификација материјала дизајна од стране Гоогле-а је првобитно била усмерена на Андроид платформу као начин да предложи доследност дизајна на платформи.
01 од 06
Како креирати материјалну дизајнерску картицу у Адобе Екпериенце Десигн ЦЦ
Једном када су дизајнери почели да га покрећу и схватају размишљање иза тога, Материјал Дизајн је тихо постао једна од најутјецајнијих визуелних филозофија у веб и мобилном дизајну . Све што треба да урадите да бисте видели шта смо добили јесте да урадимо материјално претраживање на Пинтересту и видећете на стотине примера и експеримената на уређајима, таблетима, па чак и на веб локацијама.
Фасцинантан аспект материјалног дизајна је да Гоогле размишља како би се апликације појављивале и радиле на мобилним уређајима, али се концепти примјењују на било који екран било које величине на било којој платформи. Како Гоогле наводи у првом ставу спецификације, "Ми смо изазвали себе да створимо визуелни језик за наше кориснике који синтетизују класичне принципе доброг дизајна са иновацијом и могућношћу технологије и науке. Ово је материјални дизајн. Ова спецификација је живи документ који ће бити ажуриран док настављамо да развијамо принципе и специфичности дизајна материјала. "
Материјал о којем говоримо, уопштено говорећи, је папир и ознака Материјал Дизајн је картица. Помислите на индексну картицу на површини и на правом сте месту. Картица је елемент који садржи фотографије, видео записе, текстуалне везе и тако даље, али где се разликују од већине интерактивних дизајна, оне су фокусиране на један предмет. Картице имају заобљене углове, садрже слабе сенке које указују да су изнад површине и ако су сви на истој равни, називају се "колекција".
У овом "Како" ћемо креирати картицу засновану на спецификацији. Уместо да креирамо картицу са разним алатима за сликање и цртање, долазимо до тога из другог правца. Користићемо алате у Адобеовом искуству дизајна који је тренутно у прегледу само за Мацинтосх и бесплатан је. Можете га преузети овде.
Хајде да почнемо.
02 од 06
Креирање прототипа Артбоард у Адобе Екпериенце Десигн ЦЦ
Не постоји очигледан начин за креирање Андроид екрана са почетног екрана у Екпериенце Десигн ЦЦ (КСД). Оно што смо радили када отворимо КСД јесте да изаберемо опцију иПхоне 6, а када се отвори интерфејс, бирање артборда на дну алатне траке изаберите и изаберите Андроид Мобиле из опција на панелу Пропертиес на десној страни. Затим прелазимо на алат за селекцију, кликните једном на име плоче иПхоне-а и обришите артбоард. Не више.
У тренутној верзији КСД-а налази се мала стрелица поред иПхоне-а 6, која, када се кликне, отвара падајући мени. Одавде изаберете Андроид Мобиле верзију и отвара се Андроид Мобиле табла у интерфејсу.
Да бисмо осигурали да имамо прави простор за екран који је отворен за картицу, обично се налазимо на Скетцх 3 и копирамо и налепимо статусну траку, Нав Бар и Апп бар из Материјала дизајна у таблу. Скица 3.2 садржи Шаблон материјала ( Филе> Нев Фром Темплате> Материал Десигн ), а други заиста добар бесплатан је од Киле Ледбеттер који можете добити овде. Ако немате Скетцх, можете их копирати и налепити са КСД наљепница пронађених у Филе> Опен УИ Кит> Гоогле Материал . Можете их такође преузети са Гоогле-а за коришћење у Пхотосхоп-у, Иллустратор, Афтер Еффецтс и Скетцх-у.
03 од 06
Додавање материјала за дизајн материјала на Адобе КСД ЦЦ Артбоард
Једна од најкориснијих карактеристика КСД-а је укључивање УИ Китс за Аппле иОС, Гоогле материјал и Мицрософт Виндовс. У многим аспектима, додају ријеч "брзо" на израз "брзо израда прототипова". Такође, олакшавају посао дизајнера у томе да се обични елементи УИ не морају константно стварати у апликацији за дизајн као што су Пхотосхоп, Иллустратор или Скица.
Елемент УИ који нам је био потребан је картица. Да бисте дошли до њега, изабрали смо Филе> Опен УИ Кит> Гоогле Материал и комплет је отворен као нови документ. Елемент који нам је потребан налазио се у категорији Картице.
Оно што ми се свиђамо јесте да се придржавају спецификације материјала за дизајн како је наведено у спецификацијама Цонтент Блоцкс-а, као и спецификацијама за форматирање текста и размака постављених у спецификацији Типограпхи.
Стил који смо желели био је онај у доњем левом углу. Једноставно смо га обележили мишем и копирали у клипборд. Нажалост, КСД не садржи интерфејс са картицама за отворене документе. Оно што радимо је померање отвореног прозора док се не открије онај коме радимо, изаберемо га и залепимо. Други начин брзе пребацивања између отворених КСД докумената је да притиснете Цомманд- ' .
04 од 06
Како промијенити елемент дизајна материјала у Адобе Екпериенце Десигн ЦЦ
Када картица из КСД-а стигне из клипборда, не радосно почните да радите с њим. Прва ствар коју треба да урадите је да раздвојите картицу јер вам је потребан приступ биту и комади који чине картицу. Да бисте то урадили, изаберите картицу и изаберите ставку Обухватити групу или притисните Схифт-Цомманд-Г.
Ваша картица је сада састављена од три дела:
- Светлосива кутија за слику.
- Средња сива кутија за текст
- Полеђина се користи као позадина.
Први корак је да избришете светлосиву кутију. Његова једина сврха је да дјелује као место за слику која чини, ако изаберете, опционо.
Кутија са текстом је заправо тамно сива са 50% прозирности. Ово поље се може користити као позадина текста и можете промијенити нејасност боја и кутије.
Иако није одмах евидентно, светло сива кутија прати Материал Десигн спецификацију у томе што су његови горњи углови заокружени за 2 пиксела. Имајте ово на уму ако додате слику. Такође ће бити потребни заобљени углови који се могу додати у апликацију за снимање или у КСД.
Гледајући како је ово стање одмора на картици, потребна је и сенка. Спец спецификује да постоји повишена висина картице од 2 пиксела. Да бисте ово додали, изаберите облик црне позадине и поставите вредности И и Б (Блур) на 2 на панелу својстава.
05 од 06
Како додати слику на материјалну картицу у Адобе КСД ЦЦ
Познавање картице је ширине 344 пиксела и површина слике је висока 150 пиксела ( пола висине сиве боје бок-а ) Отворили смо слику у Пхотосхоп-у, исечили је до величине и сачували га помоћу опције @ 2к у дијалогу Екпорт Ас Пхотосхоп-а бок. Слика је увезена у Адобе КСД.
Затим смо повукли светлосиву кутију преко слике на картону и изабрали Објецт> Маск Витх Схапе . Резултат је био слика која је покупила заобљене кутове облика. Затим смо преселили слику у свој крајњи положај.
Са именом на месту, ми смо променили боју позадине средње сива кутија, променили текст и боју текста линка.
06 од 06
Коришћење функције Адобе КСД ЦЦ Грид
Са комплетном картицом сада је потребно правилно поставити у складу са Спецификацијом материјала материјала. То значи да на обје стране картице има 8 пиксела, а картица мора бити 8 пиксела испод траке апликације. Да бисте то урадили, једном кликните на име табле, а на Пропертиес Панел-у одаберите Грид. Мрежа се појављује изнад таблоида.
Подразумевана величина мреже је 8 пиксела који се заиста разликују за мрежну величину за Дизајн материјала. Ако вам је потребна друга величина, промените вредност у области Грид. Ако желите да промените боју мреже, кликните на обојени чип и изаберите боју из резултирајућег избора боја.
Када је мрежа видљива, кликните на картицу и померите је у њен крајњи положај.
Да завршимо, изабрали смо картицу, кликнули на дугме Репеат Грид и променили размак између картица и на 8 пиксела.