A Google Anyagtervezési specifikációja eredetileg az Android platformot célozta meg, hogy a platform konzisztenciáját javasolja.
01/06Hogyan készítsünk egy anyag tervező kártyát az Adobe Experience Design CC-ben?
Miután a tervezők elkezdték kipróbálni, és megértették a gondolkodás mögött, a Material Design csendben az egyik legbefolyásosabb vizuális filozófiává vált az internetes és mobil dizájnban. Mindössze annyit kell tenned, hogy megnézzük, mi is van, hogy anyagi tervezési keresést végezzünk a Pinteresten, és több száz példát és kísérletet fog látni az eszközökön, táblagépeken és még a weboldalakon is.
Az anyagtervezés lenyűgöző aspektusa, hogy a Google gondolkodik körül, hogyan kell megjelennie az alkalmazásoknak és működniük kell a mobileszközökön, de a koncepciót bármilyen platformon bármilyen méretű képernyőn alkalmazzák. Amint azt a specifikáció bevezető szakaszában a Google megjegyzi: "Kihívtunk magunkat, hogy vizuális nyelvet hozzunk létre a felhasználók számára, amely a jó design klasszikus elveit szintetizálja az innováció és a technológia és a tudomány lehetőségeivel. Ez anyagi tervezés. Ez a specifikáció egy élő dokumentum, amelyet frissíteni fogunk, miközben folyamatosan fejlesztjük az anyagtervezés elveit és sajátosságait. "
Az anyag, amely általánosságban elmondta, a papír, és az Anyagterv fémjelzése a kártya. Gondolj egy index kártyára a felületen, és jó úton jársz. A kártya olyan elem, amely fotókat, videókat, szöveges linkeket és így tovább tartalmaz, de ahol különböznek a legtöbb interaktív dizájntól, csak egyetlen témára kell összpontosítania. A kártyáknak lekerekített sarkok vannak, halvány árnyékokat tartalmaznak, jelezve, hogy a felszín felett helyezkednek el, és ha mind ugyanazon a síkon vannak, akkor ezeket "gyűjteménynek" nevezik.
Ebben a "Hogyan" formában létrehozzunk egy kártyát a spec alapján. Ahelyett, hogy a kártyát különféle képalkotó és rajzeszközökkel hoznánk létre, ettől eltérő irányba fogunk jönni. Az Adobe tapasztalattervezési eszközeit használjuk, amelyek jelenleg csak Macintosh-rendszerű nyilvános előnézetben vannak, és ingyenesek. Itt töltheti le.
Kezdjük el.
02. 06. szA Prototype Artboard létrehozása az Adobe Experience Design CC-ben
Nincs nyilvánvaló mód az Android-képernyő létrehozására a kezdőképernyőn a Experience Design CC (XD) alkalmazásban. Amit az XD megnyitásakor használtunk, az iPhone 6 opció kiválasztása és az interfész megnyitásakor az eszköztár alján található Artboard eszközt választjuk ki, és a Tulajdonságok panelen található jobb oldali beállítások közül válasszuk ki az Android Mobilot. Ezután átváltunk a kiválasztóeszközre, egyszer rákattintunk az iPhone rajztábla nevére, és töröljük a rajztáblát. Nem több.
Az XD jelenlegi verziójában egy kis nyíl látható az iPhone 6 mellett, amely kattintással megnyitja a legördülő menüt. Innen kiválasztja az Android Mobile verziót, és a kiválasztott Android Mobile artboard megnyílik a felületen.
Annak érdekében, hogy a kártya megfelelő képernyőterülete legyen, általában a Sketch 3 felé haladunk át, és átmásolunk egy beillesztést az Állapotsorra, a Nav Barra és az Alkalmazássávra az Anyagtervezési sablonból a rajztáblára. A 3.2. Vázlat tartalmaz egy Material Design sablont (Fájl> Új sablonból> Anyagtervezés), és egy másik igazán jó szabad a Kyle Ledbetter-től. Ha nincs Vázlat, akkor másolhatja és beillesztheti őket a talált XD matricákból Fájl> Open UI Kit> Google Material. Letöltheti őket a Google-tól a Photoshop, az Illustrator, az After Effects és a Sketch programban való használatra.
03/06Anyag-tervezési kártya hozzáadása egy Adobe XD CC Artboard-hoz
Az XD egyik leghasznosabb tulajdonsága az UI készletek felvétele az Apple iOS, a Google Material és a Microsoft Windows rendszerekhez. Sok szempontból a "Rapid" kifejezést a "Rapid Prototyping" kifejezéshez adják hozzá, és könnyebbé teszik a tervező munkáját abban az esetben, ha a közös UI elemeket nem kell folyamatosan újra létrehozni egy olyan Design alkalmazásban, mint például a Photoshop, az Illustrator vagy a Vázlat.
A felhasználói felületnek szüksége volt egy kártya. Ehhez választottuk Fájl> Open UI Kit> Google Material és a készlet új dokumentumként nyílt meg. A szükséges elem megtalálható a Kártyák kategóriában.
Amit imádunk, az megfelel a Material Design specifikációnak, ahogyan azt a Tartalomblokkok specifikációi, valamint a Typography specifikációban leírt szövegformázási és távolsági specifikációk tartalmazzák.
A kártya stílusa a bal alsó sarokban volt. Egyszerűen hozzárendeljük az egérrel, és átmásoltuk a vágólapra. Sajnos az XD nem tartalmaz lapos felületet a nyitott dokumentumok számára. Mit csinálunk, hogy a nyitott dokumentumablakot kissé lefelé mozgatjuk, hogy feltárjuk, melyikhez dolgozunk, kiválasztjuk és beillesztjük. A XD dokumentumok közötti gyors váltás másik módja nyomja meg a Command- '.
04/06Hogyan készítsünk egy anyagi tervezési elemet az Adobe Experience Design CC programban?
Ha az XD kártya a vágólapból érkezik, ne boldogan kezdjen dolgozni vele. Az első dolog, amit meg kell tennie A kártya csoportosítása mert hozzáférhet a kártyát alkotó bithez és darabokhoz. Ehhez válassza ki a kártyát és válassza az Object> Ungroup lehetőséget vagy nyomja meg a Shift-Command-G gombot.
A kártya most három darabból áll:
- Világos szürke doboz a képhez.
- Közepes szürke doboz a szöveghez
- A háttérben használt háttérdoboz.
Az első lépés a világosszürke mező törlése. Ennek egyetlen célja, hogy helyet foglaljon el a képnek, ami tetszőleges választást tesz lehetővé.
A szöveges doboz valóban sötétszürke, 50% -os opacitással. Ez a mező szöveges háttérként használható, és megváltoztathatja a színt és a négyzet átlátszatlanságát.
Bár ez nem azonnal nyilvánvaló, a világosszürke mező az Anyagszerkezet specifikációját követi, mivel felső sarkait 2 képpont kerekíti. Tartsa ezt szem előtt, ha egy képet ad hozzá. Szükség lesz olyan lekerekített sarkokra is, amelyek egy képalkotó alkalmazáshoz vagy XD-hez adhatók.
Ha látni szeretné, hogy ez a kártya nyugalmi állapota, árnyékra is szüksége van. A specifikáció egyértelművé teszi, hogy a 2 pixeles kártya pihentető magassága van. Hozzáadásához, válassza ki a fekete háttér formáját, és állítsa az Y és a B (Blur) értékeket 2-re a tulajdonságpanelen.
05/06Hogyan adhat képeket az Adobe XD CC anyagtanácsadó kártyájához?
A kártya ismerete 344 pixel széles és a képterület 150 képpont magas ( a világosszürke doboz fele ) A képet megnyitottuk a Photoshopban, levágtuk a méretre, és elmentettük a Photoshop-ban a @ 2x opcióval Export As párbeszédablak. A képet importálta az Adobe XD-be.
Ezután húztuk a világosszürke dobozt a kartonon lévő kép felett, és kiválasztottuk Objektum> Maszk formájú. Az eredmény a kép lekerekített sarkának felvétele volt. Ezután áthelyeztük a képet a végső pozícióba.
A képen a helyszínen megváltoztattuk a közepes szürke mező háttérszínét, megváltoztattuk a szöveg szövegét és a link szövegének színét.
06, 06Az Adobe XD CC Grid funkció használata
Ha a kártyát be kell fejezni, akkor az Anyagtípus specifikációnak megfelelően kell elhelyezni. Ez azt jelenti, hogy a kártya mindkét oldalán 8 pixel van, és a kártya 8 képpontnak kell lennie az alkalmazás sáv alatt. Ehhez kattintson egyszer a tételtábla nevére, és a Tulajdonságok panelen válassza a Grid lehetőséget. A rács megjelenik a rajztáblán.
Az alapértelmezett rácsméret 8 képpont, ami megegyezik az anyagtervezés azonos méretű rácsával. Ha más méretre van szüksége, módosítsa az értéket a Rácsterületen. Ha módosítani szeretné a rács színét, kattintson a színes chipre, és válasszon egy színt a kapott színválasztóból.
A rács látható, kattints a kártyára, és vigye végleges helyzetébe.
A befejezéshez kiválasztjuk a kártyát, rákattintunk az Ismétlődő rács gombra, és a kártyák közötti távolságot 8 pixelre cseréljük.
