Матэрыял спецыфікацыі Дызайн ад Google першапачаткова была накіравана на Android платформе, такім чынам, каб прапанаваць паслядоўнасць праектавання на платформе.
01 з 06
Як стварыць матэрыял Дызайн карты ў Adobe Experience Design CC
Пасля таго, як дызайнеры пачалі тыкаць праз яго і зразумець мысленне за ім, матэрыял Дызайн ціха стаў адным з самых уплывовых візуальных філасофій ў Інтэрнэце і мабільных прыладах . Усё, што вам трэба зрабіць, каб убачыць, што мы атрымліваем на гэта, каб зрабіць матэрыял пошук Design на Pinterest, і вы ўбачыце сотні прыкладаў і эксперыментаў на прыладах, планшэтных ПК і нават вэб-сайтаў.
Займальны аспект матэрыял Дызайну гэта мысленне Google вакол, як прыкладання павінны паўставаць і працаваць на мабільных прыладах, але паняцці прымяняюцца на любы экран любога памеру на любой платформе. Як Google гаворыцца ў першым абзацы спецыфікацыі, «Мы паставілі перад сабой задачу стварыць візуальны мову для нашых карыстальнікаў, сінтэзуе класічныя прынцыпы добрага дызайну з інавацыямі і магчымасці тэхналогій і навукі. Гэта матэрыял канструкцыі. Гэтая спецыфікацыя ўяўляе сабой дакумент, які будзе абнаўляцца па меры мы працягваем развіваць прынцыпы і асаблівасці матэрыяльнага дызайну «.
Матэрыял казалі, у самых агульных рысах, гэта папера і прыкмета Матэрыялаў з'яўляецца візітнай карткай. Падумайце аб картатэцы на паверхню, і вы на правільным шляху. Карта ўяўляе сабой элемент, які змяшчае фатаграфіі, відэа, тэкставыя спасылкі і гэтак далей, але дзе яны адрозніваюцца ад большасці інтэрактыўных праектаў, яны прызначаны, каб засяродзіцца на адной тэме. Карты маюць закругленыя куты, ўтрымліваюць слабую цень з указаннем іх над паверхняй, і калі яны знаходзяцца на адной і тую ж плоскасць, яны згадваюцца як «калекцыя».
У гэтым «Як» мы збіраемся стварыць карту на аснове спецыфікацыі. Замест таго, каб стварыць карту з рознымі малюнкамі і інструментаў для малявання, мы збіраемся прыйсці на гэта з іншага боку. Мы будзем выкарыстоўваць інструменты Experience Design Adobe, які ў цяперашні час у Macintosh толькі грамадскага прагляду і з'яўляецца бясплатным. Вы можаце спампаваць яго тут.
Давайце пачнем.
02 з 06
Стварэнне прататыпа ў Adobe мантажнай вобласці Experience Design CC
Там няма яўнага спосабу стварэння Android экран з экрана Start ў Experience Design CC (XD). То , што мы прывыклі рабіць , калі мы адкрываем XD, каб выбраць варыянт iPhone 6 і, калі адкрыецца інтэрфейс, мы выбіраем інструмент палатна у ніжняй частцы панэлі інструментаў і абярыце Android Mobile ад выбару на панэль уласцівасцяў справа. Затым мы пераходзім да прылады выбару, націсніце адзін раз на імя палатна iPhone і выдаліць палатно. Няма больш.
У бягучай версіі XD, ёсць невялікая стрэлка побач з iPhone 6, які пры націску адкрывае выпадальнае меню. Адтуль вы выбіраеце версію Android Mobile і Android Mobile мантажнай вобласці абраны адкрываецца ў інтэрфейсе.
Для таго, каб гарантаваць, што мы маем правільнае прастору экрана адкрытае для карты, мы звычайна над галавой эскіза 3 і скапіяваць і ўставіць радок стану, Nav Bar і App бар ад дызайну пра шаблон матэрыялу ў палатне. Эскіз 3,2 змяшчае матэрыял шаблон дызайну (Файл> Стварыць з шаблону> Material Design) , а другі сапраўды добры бясплатны адзін ад Kyle Ледбеттер , які вы можаце атрымаць тут. Калі вы не маеце эскіз, вы можаце капіяваць і ўстаўляць іх з налепак XD , знойдзеных у File> Open Kit UI> Google матэрыялу. Вы таксама можаце загрузіць іх з Google для выкарыстання ў Photoshop, Illustrator, After Effects і эскіз.
03 з 06
Даданне дызайну карты матэрыялу да Artboard Adobe XD CC
Адной з найбольш карысных функцый XD з'яўляецца ўключэнне набораў UI для Apple , IOS, Google Матэрыялы і Microsoft Windows. У многіх адносінах, яны дадаюць слова «Rapid» на тэрмін «хуткага прототипирования». Як яны робяць працу дызайнера лягчэй у гэтым агульным UI элементы не павінны быць пастаянна ўзнаўляецца ў дызайн прыкладанняў, такіх як Photoshop, Illustrator або эскіз.
Элемент карыстацкага інтэрфейсу нам патрэбна была карта. Для таго, каб дабрацца да яго мы абралі File> Open Kit UI> Google Матэрыял і камплект адкрыты як новы дакумент. Элемент нам трэба было знайсці ў катэгорыі карт.
Тое, што мы любім іх, яны прытрымліваюцца матэрыялу спецыфікацыі канструкцыі як паказана ў спецыфікацыі Змест блокаў, а таксама фарматаванне тэксту і распорных спецыфікацый, выкладзеных у Друкарні спецыфікацыі.
Стыль карты мы хацелі быў адзін у левым ніжнім куце. Мы проста намёт ягоны з нашай дапамогай мышы і скапіяваць яго ў буфер абмену. На жаль, XD не ўтрымлівае інтэрфейс з закладкамі для адкрытых дакументаў. Тое, што мы робім, гэта перамясціць адкрытае акно дакумента трохі ўніз, каб выявіць той, які мы працуем, выберыце яго і ўставіць. Іншы спосаб хуткага пераключэння паміж адкрытымі дакументамі XD гэта націснуць Command- ».
04 з 06
Як рэдагаваць матэрыял элемент дызайну ў Adobe Experience Design CC
Калі карта ў XD паступае з буфера абмену не весела пачаць працаваць з ім. Першае , што вам трэба зрабіць , гэта разгруппировать карту , таму што вы павінны мець доступ да біту і часткі , якія складаюць карту. Каб зрабіць гэта, абярыце карту і абярыце Object> Разгруппировать або націсніце Shift-Command-G.
Ваша карта цяпер складаецца з трох частак:
- Светла-шэры скрыню для малюнка.
- Сярэдні шэры скрыню для тэксту
- Задняя скрынка выкарыстоўваецца ў якасці фону.
Першы крок, каб выдаліць светла-шэрую скрынку. Яго адзіная мэта складаецца ў тым, каб выступаць у якасці запаўняльніка для малюнка, якое робіць яго, калі вы выбіраеце, апцыянальна.
Акно з тэкстам на самай справе цёмна-шэры з 50% непразрыстасцю. Гэта поле можа быць выкарыстана ў якасці фону тэксту, і вы можаце змяніць колер і непразрыстасць прыстаўкі.
Хоць гэта не адразу відаць, светла-шэры скрыню варта Матэрыял Дызайн спецыфікацыі у тым, што яе верхнія вуглы закруглены на 2 пікселя. Майце гэта на ўвазе, калі вы дадаеце малюнак. Акрамя таго, трэба будзе закругленыя куты, якія могуць быць дададзеныя да дадатку візуалізацыі або ў XD.
Бачачы, як гэта стан спакою карты ён таксама мае патрэбу ў цені. Спецыфікацыя растлумачвае ёсць якія спачываюць вышыня карты 2 пікселя. Для дадання гэтага абярыце чорны фон форму і ўсталяваць значэння Y і В (Размыццё) 2 у панэлі уласцівасцяў.
05 з 06
Як дадаць малюнак у дызайн карты матэрыялу ў Adobe XD CC
Ведаючы карты складае 344 пікселяў у шырыню і плошча малюнка вышынёй 150 пікселяў (палова вышыні светла - шэрай скрынцы) Мы адкрылі малюнак у Photoshop, абрэзаць яго па памеры і захавалі яго з дапамогай опцыі @ 2x ў Экспарт ў Photoshop какдиалоговое скрынка. Выява было імпартавана ў Adobe XD.
Затым перацягнуў светла - шэры скрыню над малюнкам на мантажным стале і абранага аб'екта> Маска з формай. Вынік быў чынам збірання закругленых кутоў формы. Затым мы перанеслі малюнак у канчатковае становішча.
З выявай на месцы, мы тады змянілі колер фону сярэдняга шэрага скрыні, змянілі тэкст і колер тэксту спасылкі.
06 з 06
Выкарыстанне функцыі Adobe XD CC Сеткі
З картай завяршэння цяпер павінна быць правільна размешчаны ў адпаведнасці з Material Design спецыфікацыі. Гэта азначае, што ёсць 8 пікселяў на кожнай баку карты і карта павінна быць 8 пікселяў ніжэй панэлі прыкладання. Каб зрабіць гэта, націсніце адзін раз на імя палатна і, у панэлі уласцівасцяў выберыце Сетку. З'явіцца сетка палатна.
Памер сеткі па змаўчанні 8 пікселяў, якія адбываюцца такі ж памер сеткі для матэрыялу Design.If вам патрэбен іншы памер, зменіце значэнне ў галіне Grid. Калі вы хочаце змяніць колер сеткі, абярыце чып колеру і выбраць колер з які з'явіўся Color Picker.
З сеткай бачным, націсніце на карту і перамясціць яго ў канчатковае становішча.
Каб скончыць, мы выбралі карту, націснулі на кнопку Repeat сеткі і змяняць адлегласць паміж картамі да 8 пікселяў, а таксама.