Bawo ni lati Ṣẹda kaadi ohun elo ti o wa ni Adobe Experience Design CC

Awọn alaye nipa Awọn ohun elo ti a ṣe lati Google ni a ti ni iṣaju pẹlu Syeed Android gẹgẹbi ọna lati daba pe aiṣedeede ti oniru lori aaye ayelujara.

01 ti 06

Bawo ni lati Ṣẹda kaadi ohun elo ti o wa ni Adobe Experience Design CC

Laifọwọyi ti Tom Green

Lọgan ti awọn apẹẹrẹ bẹrẹ si nlọ nipasẹ rẹ ati agbọye ero ti o wa lẹhin rẹ, Ẹrọ Awọn ohun elo ti di idakẹjẹ di ọkan ninu awọn imọran ti o ni agbara julọ ni oju-iwe wẹẹbu ati apẹrẹ alagbeka . Ohun gbogbo ti o nilo lati ṣe lati wo ohun ti a nbọ ni lati ṣe Iṣawari Ṣiṣe Ẹri lori Pinterest ati pe iwọ yoo ri awọn ọgọrun ti awọn apẹẹrẹ ati awọn adanwo lori ẹrọ, awọn tabulẹti, ati paapa awọn aaye ayelujara.

Ẹya ti o wuni julọ ti Ẹrọ Oniru ti o jẹ ero Google ni bi o ṣe yẹ ki awọn apẹrẹ yẹ ki o han ki o si ṣiṣẹ lori ẹrọ alagbeka ṣugbọn awọn agbekale ti wa ni lilo si eyikeyi iboju ti eyikeyi iwọn lori eyikeyi Syeed. Gẹgẹbi Google ṣe n ṣalaye ninu akọsilẹ ti n ṣalaye naa, "A wa laya fun ara wa lati ṣẹda ede wiwo fun awọn olumulo wa ti o ṣajọpọ awọn ilana ti o dara julọ ti aṣa ti o dara pẹlu imudaniloju ati ilọsiwaju ti imọ-ẹrọ ati imọ-ẹrọ. Eyi jẹ apẹrẹ ohun elo. Eyi jẹ akọsilẹ ti o wa laaye ti a yoo ṣe imudojuiwọn bi a ba n tẹsiwaju lati ṣe agbekalẹ awọn ohun elo ati pato fun awọn ohun elo. "

Awọn ohun elo ti a sọrọ nipa, ni awọn gbolohun ọrọ gbogbogbo, jẹ iwe ati ami itẹwọgba ti Ẹrọ Oniru ni kaadi. Ronu ti kaadi afihan lori oju kan ati pe o wa lori ọna ọtun. A kaadi jẹ ẹya ti o ni awọn aworan, awọn fidio, awọn ọrọ ọrọ ati bẹbẹ lọ ṣugbọn nibiti wọn ti yato si ọpọlọpọ awọn ibaraẹnisọrọ awọn ibaraẹnisọrọ ti wọn ni lati ṣe idojukọ lori koko-ọrọ kan. Awọn kaadi ti ni igun apa, ni awọn ojiji gbigbona ti o nfihan pe wọn wa ni oke kan ati ti wọn ba wa lori ọkọ ofurufu kanna ti a pe wọn bi "gbigba".

Ni yi "Bawo ni Lati" a yoo ṣe ṣẹda kaadi ti o da lori spec. Dipo ki o ṣẹda kaadi pẹlu oriṣiriṣi awọn aworan ati awọn ohun elo fifẹ, a yoo wa ni ori rẹ lati itọsọna miiran. A nlo awọn irinṣẹ ni Adobe Experience Design eyiti o wa ni wiwo Macintosh-nikan ni ojulowo eniyan ati pe o jẹ ọfẹ. O le gba lati ayelujara nibi.

Jẹ ki a bẹrẹ.

02 ti 06

Ṣiṣẹda Apẹrẹ Atilẹyin Artboard ni Adobe Experience Design CC

Lo apẹrẹ artboard ati awoṣe artboard lati bẹrẹ. Laifọwọyi ti Tom Green

Ko si ọna ti o daju lati ṣẹda iboju Android kan lati Ibẹrẹ Iboju ni Idagbasoke Oniru CC (XD). Ohun ti a lo lati ṣe nigbati a ṣii XD, ni lati yan aṣayan iPhone 6 ati, nigbati wiwo ba ṣii, a yan ọpa Artboard ni isalẹ ti Ọpa ẹrọ ati ki o yan Android Mobile lati awọn ayanfẹ lori ile-iṣẹ Properties si ọtun. Nigbana ni a yipada si ohun elo ọpa, tẹ lẹẹkan lori orukọ artboard ti iPhone ati pa paadi. Ko si mọ.

Ninu ẹyà XD ti o wa lọwọlọwọ, aami kekere kan wa pẹlu iPhone 6 eyiti, nigbati o ba tẹ, ṣii akojọ aṣayan silẹ. Lati ibẹ o yan Android Mobile version ati apẹrẹ Mobile Mobile ti a yan ṣi ni wiwo.

Lati rii daju pe a ni oju iboju to wa fun kaadi, a maa n ṣakoso si Sketch 3 ati daakọ ati lẹẹ lẹẹmọ Pẹpẹ Ipo, Nav Bar, ati Pẹpẹ igi lati Apẹrẹ Ẹrọ Oniruwe sinu apẹrẹ. Sikoti 3.2 ni awoṣe Awọn ohun elo ti Awọn ohun elo ( Oluṣakoso> Titun Lati Àdàkọ> Ohun elo Ṣiṣe ) ati ẹlomiiran ti o dara pupọ lati Kyle Ledbetter eyiti o le gba nibi. Ti o ko ba ni Atilẹyin, o le daakọ ati lẹẹ mọ wọn lati awọn ohun elo XD ti a ri ni Oluṣakoso> Open UI Kit> Google Material . O tun le gba lati ayelujara lati Google fun lilo ni Photoshop, Oluyaworan, Lẹhin Ipa ati Sketch.

03 ti 06

Fifi ohun elo oniruwe si ohun elo Adobe XD CC Artboard

Awọn ohun elo UI ni o wulo julọ ni pe wọn ṣe deede si asọye Ẹkọ Awọn ohun elo .Ọnu ti Tom Green

Ọkan ninu awọn ẹya ti o wulo jùlọ ni XD jẹ ifasi awọn KI UI fun Apple iOS, Google Material, ati Microsoft Windows. Ni ọpọlọpọ awọn ọna, wọn fi ọrọ naa jẹ "Rapid" si oro "Rapid Prototyping". Bakannaa wọn ṣe iṣẹ iṣẹ onise julọ ni pe awọn ohun elo UI ti ko wọpọ ko ni lati ni atunṣe nigbagbogbo ni Ẹrọ Oniru gẹgẹbi Photoshop, Oluyaworan tabi Sketch.

Iwọn UI ti a nilo ni kaadi. Lati wọle si wa a ti yan Faili> Open UI Kit> Ohun elo Google ati ohun elo ti o ṣii bi iwe titun. A ri idi ti a nilo wa ninu Ẹka Awọn kaadi.

Ohun ti a nifẹ nipa awọn wọnyi ni wọn ṣe ifojusi si alaye ti Ẹkọ Awọn ohun elo ti o wa ni Awọn Akọsilẹ Awọn ohun amorindun bi daradara bi awọn kikọ ọrọ ati awọn sisọ awọn aaye ti o wa ni Typography spec.

Iwọn kaadi ti a fẹ ni ọkan ni isalẹ osi. A ṣe afiwe rẹ nikan pẹlu irun wa ki o si ṣe apẹrẹ rẹ si apẹrẹ iwe. Laanu, XD ko ni itọnisọna ti a ṣayẹwo fun awọn iwe ṣiṣi. Ohun ti a ṣe ni gbe oju-iwe iwe idanimọ silẹ kekere kan lati fi han ẹni ti a n ṣiṣẹ lori, yan o ati lẹẹ. Ona miiran ti yi pada kiakia laarin awọn iwe XD tuka ni lati tẹ Iṣẹ- ' .

04 ti 06

Bawo ni lati ṣatunkọ Ẹrọ Oniru Ohun elo ni Adobe Experience Design CC

Iyatọ UI kọọkan ti a fi kun si iṣẹ XD ti wa ni akojọpọ. Rii daju lati ṣajọpọ ohun naa ṣaaju ṣatunkọ. Laifọwọyi ti Tom Green

Nigbati kaadi ti o wa ni XD lati ori apẹrẹ alaifọwọyi ko ni irọrun bẹrẹ ṣiṣẹ pẹlu rẹ. Ohun akọkọ ti o nilo lati ṣe ni lati Ungroup kaadi nitori pe o nilo wiwọle si bit ati awọn ege ti o ṣe kaadi naa. Lati ṣe eyi, yan kaadi naa ki o si yan Ohun> Ikoropọ tabi tẹ Yi lọ-Gigun-G.

Kaadi rẹ ti ni awọn ege mẹta:

Igbesẹ akọkọ ni lati pa apoti grẹy ina. Idi kan kan nikan ni lati ṣe bi olutọju fun aworan ti o mu ki o, ti o ba yan, aṣayan.

Apoti pẹlu ọrọ naa jẹ kosi awọ dudu kan pẹlu 50% opacity. Yi apoti le ṣee lo bi ọrọ lẹhin ati awọn ti o le yi awọn awọ ati awọn opacity apoti.

Bi o ṣe jẹ pe ko han gbangba lẹsẹkẹsẹ, apoti apoti grẹy ti o tẹle Ẹkọ Oniru Ohun elo ni pe awọn igun oke rẹ ni awọn piksẹli ti yika. Pa eyi mọ boya o nfi aworan kun. O tun nilo awọn igun ti o ni igun ti a le fi kun si ohun elo aworan tabi ni XD.

Ri bi bi eleyi ṣe jẹ ipo isimi ti kaadi naa o nilo ojiji kan. Awọn apẹrẹ ti o mu ki o wa ni ipo isinmi ti kaadi ti 2 awọn piksẹli. Lati fi eyi kun, yan apẹrẹ dudu ati ki o ṣeto awọn iye Y ati B (Blur) si 2 ninu awọn ile-iṣẹ.

05 ti 06

Bawo ni lati Fi aworan kan kun si Ohun elo Kọọnda Ohun-elo ni Adobe XD CC

Ọna kan ti ṣiṣẹ pẹlu awọn aworan ni lati lo oluṣọ lati tọju aworan ti a ko wọle. Laifọwọyi ti Tom Green

Mọ kaadi jẹ 344 awọn piksẹli to gaju ati agbegbe aworan 150 awọn piksẹli giga ( idaji awọn giga ti apoti grẹy ina ) A ṣii aworan ni Photoshop, kilọ si iwọn naa ati pe o ti nlo aṣayan aṣayan 2x ni Export As Photoshop's Export As dialog apoti. Aworan naa ti wole sinu Adobe XD.

Nigbana ni a ṣajọ apoti apoti grẹy ti o wa lori aworan lori iwe paati ati Ti a yan Ohun> Boju-boju pẹlu apẹrẹ . Esi naa ni aworan ti n gbe awọn igun ti a fika ti apẹrẹ naa. A tun gbe aworan naa lọ si ipo ipo rẹ.

Pẹlu aworan ni ibi, lẹhinna a yipada awọ ti o wa ninu apoti apoti Gigun, yipada ọrọ ati awọ ti ọrọ asopọ.

06 ti 06

Lilo ẹya ẹya Adobe XD CC Grid

Lo ẹya-ara Grid ti Adobe Experience Design CC fun ipolowo ti awọn eroja. Laifọwọyi ti Tom Green

Pẹlu kaadi ti o pari ni bayi o nilo lati wa ni gbe daradara gẹgẹbi Ẹrọ Oniru Ohun elo. Eyi tumọ si pe awọn piksẹli 8 wa ni ẹgbẹ mejeeji ti kaadi ati pe kaadi nilo lati jẹ awọn piksẹli 8 ni isalẹ igi idaniloju. Lati ṣe eyi, tẹ lẹẹkan lori apẹrẹ artboard ati, ninu Awọn Imọ Abuda, yan Akoj. Ikọju han lori apẹrẹ.

Iwọn irọrun aiyipada jẹ awọn piksẹli 8 ti o jẹ iwọn kanna grid fun Ohun elo Oniru. Ti o ba nilo iwọn ti o yatọ, yi iye pada ni agbegbe Grid. Ti o ba fẹ yi awọ ti akojopo pada, tẹ ẹrún awọ ki o yan awọ kan lati ọdọ Picker Agbejade.

Pẹlu akojopo ti o han, tẹ lori kaadi ki o gbe o si ipo ipo rẹ.

Lati pari, a ti yan kaadi naa, te bọtini Bọtini Atunwo naa pada ki o si yi aye pada laarin awọn kaadi si awọn piksẹli 8.