Google-ден материалдық-техникалық жабдықтау ерекшелігі бастапқыда платформаға дизайнның дәйектілігін ұсыну әдісі ретінде Android платформасына бағытталған.
01-ден 06-ге дейін
Adobe Experience Design CC-да Материалдық Дизайн картасын жасау
Дизайнерлер дизайнерлер оны ойластырып, артынан ойлауды түсіндіре бастағаннан кейін, Материал дизайн веб және мобильді дизайндағы ең ықпалды көрнекі философияның біріне айналды. Сізге не керек екенін көру үшін бәрін жасау керек - Pinterest-те материалды дизайн іздеуді жасау, сіз құрылғыларда, планшеттерде және тіпті веб-сайттарда жүздеген мысалдар мен эксперименттерді көресіз.
Материалдық дизайнның қызықты аспектісі - Google компаниясының мобильді құрылғыларда қалай көрінуі және жұмыс істеуі туралы ойлауы, бірақ тұжырымдар кез келген платформадағы кез келген экранға қолданылуда. Google ерекшеліктердің бастапқы параграфында айтылғандай, «Біз өзімізге жаңа технология мен ғылым мен инновациялармен жақсы дизайнның классикалық қағидаларын синтездейтін біздің пайдаланушыларымызға визуалды тіл жасауды талап еттік. Бұл материалдық дизайн. Бұл спецификасы материалдық дизайн принциптері мен ерекшеліктерін дамытуды жалғастыра отырып жаңартылатын тірі құжат. «
Материал, әдетте, материал болып табылады және материалды дизайнның ерекше белгісі болып табылады. Индекс картасын жер бетінде ойлап көріңіз және сіз дұрыс жолдасыз. Карточка - бұл фотосуреттер, бейнелер, мәтіндік сілтемелер және т.б. бар элементтер, бірақ олардың көпшілігі интерактивті жобалардан ерекшеленетін болса, олар бір тақырыпқа назар аударуға арналған. Карталар бұрыштарды дөңгелектейді, олар бетінің үстінде орналасқан және егер олар бірдей жазықтықта болса, олар «жинақ» деп аталатын нәзік көлеңкелерді қамтиды.
Бұл «қалайша» біз ерекшелігі негізінде картаны жасауды жоспарлап отырмыз. Әртүрлі кескіндеме және сызу құралдарымен картаны жасаудың орнына, біз оған басқа бағытпен келеміз. Біз құралдарды қазіргі уақытта тек Macintosh-та ғана жалпыға қолжетімді қарап шығуда тұрған және тегін болатын Adobe's Experience Design жобасында қолданамыз. Сіз оны осында жүктей аласыз.
Бастайық.
02-ден 06-ге дейін
Adobe Experience Design CC-да прототип түрін жасау
Experience ScreenContent CC (XD) бағдарламасындағы Бастау экранынан Android экранды жасаудың айқын жолы жоқ. Біз XD ашқан кезде не істейтін болсақ, iPhone 6 опциясын таңдап, интерфейс ашылғанда, құралдар тақтасының төменгі жағындағы «Арт-панель» құралын таңдап, «Properties» панелінің оң жағындағы таңдаулардан Android Mobile параметрін таңдаңыз . Содан кейін біз іріктеу құралына ауысып, iPhone-ның жұмыс атауында бір рет басыңыз және жұмыс тақтасын жойыңыз. Басқа жоқ.
XD-нің ағымдағы нұсқасында, iPhone 6-ның жанындағы кішкентай көрсеткі бар, ол басылғанда, ашылмалы мәзірді ашады. Осы жерден Android Mobile нұсқасын таңдап, таңдалған Android Mobile интерфейсі интерфейсінде ашылады.
Карта үшін дұрыс экран кеңістігін қамтамасыз ету үшін, біз әдетте Sketch 3-ке көшіп, Материал-конструкция үлгісінен мәртебелі жолақ, Нав-бар және Қолданбалар тақтасын көшіріп, қойыңыз. Эскиз 3.2 Материал дизайн шаблонын ( Файл> Жаңадан үлгісіндегі > Материал дизайны ) және тағы бір шынымен жақсы еркіндікті осы жерден алуға болатын Кайл Ледбеттерден алады. Егер сізде Эскиз болмаса, оларды Файл> Ашық UI Қоймасы> Google Материалындағы XD жапсырмасынан көшіруге және қоюға болады. Сондай-ақ, оларды Google-дан Photoshop, Illustrator, After Effects және Sketch-да пайдалану үшін жүктеп алуға болады.
03 06
Материалдың дизайны картасын Adobe XD CC тақтасына қосу
XD ең пайдалы ерекшеліктерінің бірі - Apple iOS, Google Material және Microsoft Windows үшін UI жиынтықтарын қосу. Көптеген жағдайларда олар «Rapid Prototyping» терминіне «Rapid» сөзін қосады.Осы жалпы UI элементтерінде дизайнердің жұмысын жеңілдетеді, мысалы, Photoshop, Illustrator немесе Эскиз.
Бізге қажетті UI элементі карта болды. Оған жету үшін біз File> Open UI Kit> Google Material және жаңа құжат ретінде ашылған жиынтығын таңдадық. Бізге қажетті элемент Карталар санатында табылды.
Бұларға деген сүйіспеншілігіміз, Content Blocks ерекшеліктерінде көрсетілгендей Материалдық жабдықтау ерекшеліктеріне, сондай-ақ Typography ерекшеліктерінде жазылған мәтінді пішімдеуге және аралық ерекшеліктерге сәйкес келеді.
Біз қалаған картаның стилі төменгі сол жақта орналасқан. Біз оны тінтуірмен ғана орналастырып, аралық сақтағышқа көшіріп алдық. Өкінішке орай, XD ашық құжаттар үшін қойынды интерфейсі жоқ. Біз не істеп жүргенімізді ашып, оны таңдап, қоюға ашық құжат терезесін аздап жылжытамыз. Ашық XD құжаттары арасында жылдам ауысудың тағы бір жолы - Command-'түймесін басу .
04 04
Adobe Experience Design CC-да материалды дизайн элементтерін қалай өңдеу керек
XD-тегі карта аралық сақтағыштан келгенде, онымен жұмыс істемейді. Біріншіден, сіз картаны жинауды жоспарлап отырсыз, себебі картаны жасайтын битке және бөліктерге кіру қажет. Ол үшін картаны таңдап, Объект> Топтаманы топтау немесе Shift-Command-G басыңыз.
Сіздің картаңыз үш бөліктен тұрады:
- Кескінге арналған ашық сұр ұя.
- Мәтін үшін орташа сұр жәшік
- Артқы қорап фон ретінде пайдаланылады.
Алғашқы қадам - ашық сұр ұяны жою. Оның жалғыз мақсаты - таңдайтын, міндетті емес болса, оны жасайтын сурет үшін толтырғыш ретінде әрекет ету.
Мәтіні бар қорап, шын мәнінде, 50% ашықтығы бар қара сұр болып табылады. Бұл қорапты мәтіннің фоны ретінде қолдануға болады және түс пен терезенің ашықтығын өзгерте аласыз.
Ашық емес сұрғылт жәшігі бірден байқалмаса да, материалдың құрылымдық ерекшеліктеріне сәйкес оның жоғарғы бұрыштары 2 пикселге дейін дөңгелектеледі. Егер сурет қоссаңыз, бұл есіңізде болсын. Сондай-ақ, бейнелеу қосымшасына немесе XD-ге қосылатын дөңгеленген бұрыштарды қажет етеді.
Картаның тыныш күйі қалай екендігін көріп, көлеңкеге де ие болу керек. Ерекшеліктер, 2 пиксель картасының тыныштық биіктігін анықтайды. Осыны қосу үшін, қара фондық пішінді таңдап, Y және B (Blur) мәндерін сипаттар тақтасында 2 етіп орнатыңыз.
05 06
Adobe XD CC ішіндегі материалдық-техникалық картаға сурет салу әдісі
Карточканы білу кең 344 пиксельді және суреттің аумағы 150 пиксель биіктігі ( ашық-сұр корпустың жартысының биіктігі ) Photoshop-дегі кескінді ашып, оны өлшемге бөліп, оны Photoshop's Export As диалогында @ 2x опциясын қолданып сақтап қойдық қорапта. Кескін Adobe XD-ге импортталды.
Содан кейін біз ақшыл сұр терезені суреттегі кескіннің үстіне апардық және Таңдалған Object> Mask With Shape бөлімін таңдадық. Нәтижесінде пішіннің дөңгеленген бұрыштарын алып тастау бейнесі болды. Содан кейін кескінді соңғы орынға ауыстырдық.
Кескінді орната отырып, біз орта сұр сұр түстердің өңдік түсінін өзгертіп, сілтеме мәтінінің мәтінін және түсінін өзгерттік.
06 06
Adobe XD CC Grid функциясын пайдалану
Карточканы толығымен аяқтағаннан кейін, материалдық дизайн ерекшеліктеріне сәйкес дұрыс орналастыру керек. Бұл картаның екі жағында 8 пиксел бар екенін және картаның бағдарлама жолағының астынан 8 пиксел болуы керек екенін білдіреді. Бұл әрекетті орындау үшін, бір жұмыс орнына бір рет нұқыңыз және Сипаттар тақтасындағы Тор таңдау түймешігін басыңыз. Тор жұмыс үстелі үстінде пайда болады.
Стандартты тор өлшемі Материал Дизайн үшін бірдей тордың өлшемі болып табылатын 8 пиксел. Егер сіз басқа өлшемді қажет етсе, Grid аумағындағы мәнді өзгертіңіз. Тордың түсін өзгерту керек болса, түсті чипті нұқып, нәтиже түс Picker-ден түсті таңдаңыз.
Торды көріп, картаны басып, оны соңғы орынға жылжытыңыз.
Аяқтау үшін біз картаны таңдадық, Қайталау торын нұқып, карталар арасындағы аралықты 8 пикселге ауыстырдық.