Google-ийн Материалын дизайны тодорхойлолт нь анхлан Android платформ дээр платформын дизайны тогтвортой байдлыг санал болгодог арга зам юм.
01 - 06
Adobe Experience Design-д Материал дизайны картыг хэрхэн үүсгэх вэ?
Зохион бүтээгчид үүнийг даван туулж, түүний цаана байгаа бодлыг ойлгож эхэлсний дараа Материал дизайн вэбсайт болон гар утасны дизайны хамгийн нөлөө бүхий харааны философиудын нэг болсон байна. Бидний олж авч буй зүйл бол Pinterest дээр Material Design хайлт хийх явдал бөгөөд та төхөөрөмжүүд, таблетууд, тэр ч байтугай вэбсайтууд дээр хэдэн зуун жишээ, туршилтуудыг харах болно.
Материал дизайны гайхалтай тал нь Google-ийн аппликэшн нь гар утасны төхөөрөмж дээр хэрхэн ажиллах, хэрхэн ажиллах талаар бодож үздэг боловч ямар ч платформ дээр ямар ч хэмжээтэйгээр ямар ч дэлгэцийн дэлгэцэнд ашиглагдаж байна. Техникийн болон шинжлэх ухааны боломжийн шинэчлэлт, сайн чанарын дизайны сонгодог зарчмуудыг нэгтгэн, хэрэглэгчдэд зориулсан харааны хэлийг бий болгохын тулд бид өөрсдийгөө сорьж үзсэн. Энэ бол материаллаг дизайн. Энэ загвар нь материаллаг дизайныг тодорхойлсон хэвээр байгаа тул шинэчлэгдэх амьд баримт бичиг юм. "
Материаллаг ерєнхий нэр томьёоны талаархи материал бол цаас, материалын дизайны шинж чанар нь карт юм. Гадаргуу дээрх индекс картыг бодоод үзээрэй. Карт нь зураг, видео, текстийн холбоос гэх мэт элемент агуулсан элемент бөгөөд хамгийн олон интерактив загвараас ялгаатай нь тэд нэг сэдэв дээр төвлөрөх зорилготой юм. Картууд нь булангийн булангуудтай, гадаргуугаас дээгүүр байгаа харанхуй сүүдэртэй бөгөөд тэдгээр нь бүгд нэг хавтгайд байгаа бол тэдгээрийг "цуглуулга" гэж нэрлэдэг.
Энэ "Хэрхэн" дээр бид тусгайлсан загвар дээр суурилсан карт үүсгэх болно. Картыг янз бүрийн дүрслэл, зургийн хэрэгсэл ашиглан үүсгэхийн оронд бид өөр өөр чиглүүлэлтэд хүрэх болно. Бид Adobe-ийн туршлагын дизайныг ашиглах боломжтой бөгөөд Macintosh-д байгаа олон нийтийн урьдчилж харах боломжтой бөгөөд үнэгүй байдаг. Та эндээс татан авч болно.
Эхэлцгээе.
02 of 06
Adobe Experience Design зураг дээр Prototype Artboard үүсгэх CC
Ажиллагааны дизайн CC (XD) дээрээс эхлэх Дэлгэц дээрээс Android дэлгэцийг үүсгэх нь тодорхойгүй арга юм. XD-ийг нээхэд бид өмнө нь юу хийдэг байсан бэ гэвэл iPhone 6 сонголтыг сонгох бөгөөд интерфэйс нээгдэх үед Toolbar-ийн багажны доод талд байрлах Artboard хэрэгслийг сонгоод Android Mobile сонгоод Properties panel дээрээс сонгоно уу . Дараа нь бид сонгон шалгаруулалтын хэрэгсэл рүү шилжиж, Iphone artboard-ийн нэр дээр нэг удаа дарж, artboard устгах. Үгүй.
XD-ийн одоогийн хувилбарт iPhone 6-ийн хажууханд жижиг сум байдаг бөгөөд товчлуур дээр дарах цэсийг нээнэ. Тэндээс та Android Mobile хувилбарыг сонгож, интерфэйс дээр нээгдсэн Android Mobile artboard сонгоно.
Картанд зориулж дэлгэцийн зөв зай авахыг баталгаажуулахын тулд бид ихэвчлэн Sketch 3 руу очих ба Status Bar, Nav Bar, App bar зэргийг Материал Загвар Загвараас artboard руу хуулж, буулгана. Sketch 3.2 нь Материал дизайны загвар ( File> New from Template> Material Design ) -ийг багтаасан бөгөөд өөр нэг маш сайн үнэгүй бол Kyle Ledbetter-аас эндээс авч болно. Хэрэв танд Sketch байхгүй бол та Файл> Нээлттэй UI Kit> Google Материал дээрээс XD наалтаас хуулж, хуулж болно. Та үүнийг Google-ээс Photoshop, Illustrator, After Effects and Sketch дээр ашиглах боломжтой.
03 - 06
Adobe XD CC Artboard-д Материал дизайны карт нэмж оруулав
XD-ийн хамгийн ашигтай функцуудын нэг бол Apple iOS, Google Материал, Microsoft Windows UI Kit-ийг багтаасан. Ихэнх тохиолдолд тэд "Rapid Prototyping" гэсэн нэр томъёонд "Rapid" гэсэн үгийг нэмдэг ба энэ нь нийтлэг элементийн элементүүд нь дизайнерын ажлыг илүү хялбар болгодог. Жишээ нь Photoshop, Illustrator Sketch.
Бидэнд шаардлагатай UI элемент бол карт юм. Үүнийг авахын тулд бид Файл> Нээлттэй UI Kit> Google Материалыг сонгож, шинэ документ хэлбэрээр нээсэн хэрэгсэл. Бидэнд шаардлагатай элемент нь категорийн ангилалд байсан.
Эдгээрийн талаар бид юу мэддэг вэ гэвэл Агуулгын Блокийн онцлогт тусгагдсан Материалын Дизайны тодорхойлолтыг баримтжуулах, түүнчлэн текстийн загварт тавигдах текст формат болон зайг тохируулахыг шаарддаг.
Бидний хүсч байсан картын хэв маяг нь зүүн доод талд байсан. Бид зүгээр л хулганаараа энэ хавтсыг хуулж аваад клипийг нь хуулж авлаа. Харамсалтай нь, XD нь нээлттэй баримт бичигт зориулж tabbed интерфэйс агуулаагүй байна. Бидний хийдэг зүйл бол бидний ажиллаж байгаа зүйлийг ил гаргахын тулд нээлттэй документын цонхыг нээж, түүнийг сонгож, буулгана. Нээлттэй XD баримтуудын хооронд хурдан шилжих өөр нэг арга бол Command-'товчийг дарах явдал юм.
04 - 06
Adobe Experience Design-д Материал дизайн элементийг хэрхэн яаж засах вэ?
XD-д байгаа картыг клипон дээрээс ирэхэд заримдаа үүнийг ажиллуулж эхлээгүй байна. Хамгийн эхний зүйл бол картыг бүрдүүлэх хэсгүүдэд хандах хэрэгтэй. Үүнийг хийхийн тулд картыг сонгоод Object> Ungroup-г сонгоод эсвэл Shift-Command-G дарна уу .
Таны карт одоо гурван хэсэгтэй.
- Зургийн хувьд цайвар саарал хайрцаг.
- Текстийн дунд саарал хайрцаг
- Арын хайрцаг нь дэвсгэр байдлаар ашиглагддаг.
Эхний алхам бол цайвар саарал хайрцагыг устгах явдал юм. Зөвхөн түүний зорилго нь хэрэв та сонгох юм бол заавал хийдэг дүр зургийг ашиглах боломжтой.
Тексттэй хайрцаг нь үнэндээ 50% -тай харанхуй саарал байна. Энэ хайрцгийг текст дэвсгэр байдлаар ашиглаж болох бөгөөд та өнгийг өөрчилж болно.
Хэдийгээр энэ нь нэн даруй илрээгүй ч цайвар саарал хайрцаг нь Материалын Дизайны тестийн дагуу дээд өнцөг нь 2 пикселээр дугуйрсан байна. Хэрэв та зураг нэмж байгаа бол үүнийг санаарай. Энэ нь дүрслэх програмд эсвэл XD-д нэмж болох булангийн булангуудад хэрэгтэй болно.
Картны амгалан байдал нь хэрхэн сүүдэрлэхийг хардаг. Тодорхойлолт нь 2 пикселийн картын амрах цэгийг тодорхой болгодог. Үүнийг нэмэхийн тулд хар дэвсгэр хэлбэрийг сонгоод Y ба B (Blur) утгыг элементийн самбарт 2 болгож тохируулна.
05 - 06
Adobe XD CC-д Материал дизайны картанд зураг нэмэх
Картыг 344 пиксел өргөн, зургийн талбайн хэмжээ 150 пиксел ( цайвар саарал хайрцагны өндрийн хагас ) Бид Photoshop-ийн зургийг томруулж, зургийг Photoshop-ийн Экспортын As цонхонд @ 2x сонголтоор хадгалсан. хайрцаг. Энэ зураг Adobe XD-д импортлогдсон байна.
Дараа нь бид зурагт самбар дээр цайвар саарал хайрцгийг чирж, сонгогдсон Object> Mask With Shape . Үүний үр дүн нь хэлбэрийн булангийн булангуудыг дүрсэлсэн зураг юм. Дараа нь бид дүрсийг эцсийн байрлал руу шилжүүлсэн.
Дүрсийг байрлуулсаны дараа бид Дунд саарал хайрцагны өнгөний өнгөийг өөрчилсөн бөгөөд текстийг холбоос текстийн өнгөийг өөрчилсөн.
06 - 06
Adobe XD CC Grid Feature ашиглах
Карт дууссаны дараа одоо Материалын Загварын загварын дагуу зөв байрлуулсан байх шаардлагатай. Энэ нь картны аль нэг талд 8 пиксел байгаа бөгөөд картны апп-ийн доор 8 пиксел байх шаардлагатай гэсэн үг юм. Үүнийг хийхийн тулд, зургийн самбар дээр нэг удаа дарж, Properties Panel дээр Grid сонгоно уу. Энэ сүлжээ нь самбар дээр харагдаж байна.
Анхдагч сүлжээ нь 8 пиксел байгаа бөгөөд Материал дизайны хувьд сүлжээтэй ижил хэмжээтэй байна. Хэрэв та өөр хэмжээтэй байх хэрэгтэй бол Grid area-ийн утгыг өөрчлөх хэрэгтэй. Хэрэв та өнгөний өнгийг өөрчлөхийг хүсвэл өнгөний чип дээр дарж Color Picker-ээс өнгө сонгоно уу.
Сүлжээнд харагдахаар бол картан дээр дараад эцсийн байрлал руу шилжүүлнэ.
Дуусгахын тулд бид картыг сонгож, Дахин шалгах самбарын товч дээр дарж картын хоорондох зайг 8 пиксель болгон өөрчилсөн.