Adobe Experience Design Tricks, Tips, dhe Teknikat

01 nga 07

Adobe Experience Design Tricks, Tips, dhe Teknikat

Kur Adobe prezantoi Dizajnin e Përvojave si një Pamje Publike , kompania arriti dy gjëra të mahnitshme në të njëjtën kohë. Së pari, ata hapën një hapësirë ​​në tregun e softuerëve në prototip të reja. Së dyti, ata krijuan një mundësi për përdoruesit për të luajtur me një "punë në vazhdim" dhe po i lejon përdoruesit të ndikojnë në atë përparim. Tani që aplikacioni ka qenë në dispozicion për disa muaj, mendoja se do të ishte një kohë e mirë për të ndarë disa truket, këshilla dhe teknika të Dizajnit të Përvojave.

Por së pari, mund të pyesni se çfarë nënkuptohet me Prototyping Software. Ndër lojtarët kryesorë në këtë hapësirë ​​janë Proto.io, Parimi, UXPin, Atomic.io , Dizajni i Përvojave dhe InVision. Ndryshe nga aplikacione të tilla si Sketch 3, Photoshop dhe Illustrator ku prodhohen skema statike, këta redaktorë grafik prezantojnë interaktivitetin, lëvizjen dhe karakteristikat e tjera të zakonshme në hapësirën e tanishme të celularit dhe web design.

Me ngritjen e celularit dhe fokusin e pashmangshëm, të ngjashëm me laserin, nuk është më e mjaftueshme që një projektues të ngre disa skica, të tërheqë së bashku disa comps dhe pastaj ta lirojë projektin ose ta ngarkojë atë në një server web. UI / UX workflow ka ndryshuar thelbësisht gjërat. Çdo hap i procesit, nga identifikimi i përdoruesit, skicat, telegramet, mockupet dhe prototyping tani i nënshtrohen testimit të gjerë të përdoruesve.

Është skena e fundit - prototyping - ku pikat e dhimbjes zbulohen dhe fiksohen përpara se projekti të kalojë në prodhim final. Kjo është ajo ku ndërveprimi, lëvizja, tranzicionet në ekran dhe vendosja e gjithçkaje në ekran janë kaq kritike. Çështjet dhe problemet nuk mund thjesht të tregohen si një imazh statik ose të shpjegohen me gojë. Pas të gjitha, këto produkte janë për njerëzit e vërtetë. Në vend që të lëvizin të gjithë këtë në kod, procesi i prototipimit gjithnjë e më shumë po ndërmerret nga softueri grafik i dizajnuar vetëm për këtë qëllim. Është më e lehtë për të ndrequr një gabim, për të zëvendësuar një imazh, për të rishkruar disa tekste, për të lëvizur një buton dhe kështu me radhë duke përdorur një redaktor vizual se sa vazhdimisht rishkrimin dhe kodin e debugging.

Në fakt, ky softuer është bërë një komponent kyç në mjedisin e sotëm të dizajnimit dhe zhvillimit "Rapid Prototyping".

Me tha kjo, le të kënaqemi me Dizajnin e Përvojave.

02 nga 07

Krijo një Pin Destinacioni me një Rrethi të thjeshtë në Adobe Experience Design

Një aspekt i zoti i XD është përdorimi i mjeteve vektoriale të vizatimit. Nuk mund të gjeni një ikonë? Nuk ka problem. Roll tuaj. Ja se si:

1. Zgjidhni Ellipse Tool dhe, me tastet Option / Alt-Shift shtypur, vizatoni një rreth.
2. Me rrethin e përzgjedhur, vendosni ngjyrën e Plotësoni në FF0000 dhe kufirin në "asnjë" në pronat.
3. Klikoni dy herë mbi rrethin për të treguar pikat e ankorimit. Zvarriteni poshtë spirancën e poshtme.
4. Klikoni dy herë mbi Anchor Point zgjedhur dhe kurbat zëvendësohen me linja.
5. Vizatoni një rreth tjetër të vogël me një mbushje të bardhë dhe pa bark. Zhvendoseni në pozicion dhe zgjidhni pinin dhe rrethin. Në panelin e Align në krye të Properties klikoni butonin Horizontal Center dhe Pin është krijuar.

03 nga 07

Krijo një sfond sfondi në Adobe Design Experience

Është e zakonshme që të ketë tekst ose përmbajtje tjetër mbi një imazh të sfondit. Problemi këtu është imazhi, më shpesh se jo, mbizotëron përmbajtjen mbi të. Një mënyrë e zgjidhjes së kësaj çështjeje është të turbullosh imazhin e sfondit. Ju mund të turbulloni imazhin në Photoshop ose softuer të tjerë të redaktimit të imazhit, por kjo është disi joefikase, veçanërisht pasi që XD tani mund ta trajtojë këtë detyrë për ju. Ja se si:

1. Krijo një tabelë të re dhe shtoni imazhin tuaj të sfondit.
2. Përzgjidhni mjetin Rectangle a nd vizatoni një drejtkëndësh mbi imazhin. Me drejtkëndëshin e përzgjedhur, vendosni Plotësoni në të bardhë dhe goditjen në Asnjë.
3. Me drejtkëndëshin e përzgjedhur, zgjidhni Sfungjeri Sfondi në panelin e pronave. Të tre rrëshqitësit janë Blur Shuma, Brightness dhe Opacity. Ja se çfarë bëjnë ata:

• Shuma e zbehta : Rregullon blurriness e imazhit nën formë. Vlera maksimale është +50.
• Ndriçimi: Rregullon pikat kryesore dhe hijet në imazh. Vlera minimale është -50 dhe vlera maksimale është +50.
• Perde: Ndikon transparencën e formës dhe dukshmërinë e imazhit nën formën. Vlerat shkojnë nga 0% në 100%.

Nëse vërtet dëshironi të "ndryshoni gjërat", ndryshoni ngjyrën e formës dhe luani me vlerën e errësirës për të ndryshuar "pamjen" e imazhit.

04 nga 07

Krijo një Scrim në Adobe Experience Design

Një problem i zakonshëm i dizajnit është elementi i elementëve të ndërfaqes që duhet të jetë një ngjyrë e zakonshme, por humbet kur vendoset mbi një imazh të prapavijës ose ngjyrë të ngurtë. Zgjidhja është një sfungjer. Një gërmoj është një gradient disi i errët i vendosur ndërmjet elementit të ndërfaqes dhe sfondit. Kjo është e lehtë për t'u arritur në XD. Ja se si:

1. Krijo artboard tuaj në XD, shtoni një imazh dhe kopjoni dhe ngjisni elementët e ndërfaqes nga Kit-i i duhur UI - Skedar> Open UI Kit ... - në artboard. Në imazhin e mësipërm foto bën që shiritin e gjendjes dhe shiritin e aplikacionit të vështirësohet.
2. Zgjidhni Tool Rectangle dhe vizatoni një drejtkëndësh. Në Panel Properties klikoni Plotësoni dhe zgjidhni Gradient nga pop poshtë në Picker Color. Vendosni ngjyrat e gradientit në të zezë dhe të bardhë. Vendosni vlerën A - Opacity - në 60% dhe vlerën e Bardhë në 0%.
3. Me Rectangle zgjedhur, zgjidhni Objekti> Organizoni> Dërgo mbrapa . Elementet e ndërfaqes tani janë të dukshme mbi imazhin.

05 e 07

Krijo një Avatar Avantazhi në Adobe Design Experience

Një model i zakonshëm i dizajnit gjendet në aplikacionet Chat ku njerëzit flasin me njëri-tjetrin dhe figura e folësit shfaqet në ekran. Këto avatars zakonisht janë imazhe që janë maskuar. Është e vdekur e thjeshtë të realizohet kjo në XD. Ja se si:

1. Ju filloni me një imazh dhe një rreth ose formë tjetër në tabelën e tabelave. Ju mund ta mbushni rrethin me çdo ngjyrë. Çfarë ju nuk keni nevojë të bëni është që të shtoni një ngjyrë goditje. Do të zhduket kur krijoni efektin, prandaj pse shqetësoni. Nëse keni nevojë të ushqeni rrethin, kopjoni atë në kujtesën.
2. Lëvizeni rrethin në figurë dhe zgjidhni si imazhin ashtu edhe rrethin. Me objektet e zgjedhura bot, zgjidhni Objekti> Maska me Shape . Kur lëshoni miun, Avatari është krijuar. Nga atje mund ta ndryshoni atë.
3. Nëse keni nevojë për të shtuar një goditje, ngjisni rrethin ulur në clipboard tuaj mbi artboard. Me kopjen e përzgjedhur fikni mbushni në Properties dhe shtoni një ngjyrë dhe gjerësi të goditjes. Për t'i klasifikuar ato, zgjidhni të dyja objektet dhe klikoni butonat e Align Center në opsionet e Align në krye të panelit të pronave.
4. Nëse dëshironi të lëvizni foton në maskë, klikoni dy herë mbi maskën. Kjo do të tregojë imazhin dhe formën e maskës. Klikoni mbi imazhin dhe tërhiqeni atë në pozitë. Kur lëshoni miun, imazhi do të jetë në pozicionin e ri brenda maskës.

06 nga 07

Luaj me Artworks Adobe Design Experience

Artboards Design Experience nuk janë vetëm për ju për të vendosur përmbajtje. Ata, gjithashtu, mund të manipulohen. Këtu janë disa gjëra që mund të bëni:

1. Nëse keni nevojë për versione Peisazhi dhe Portreti të një tabele të artit, kopjoni tabelën dhe, me kopjimin e përzgjedhur, klikoni butonin peizazh në panelin e pronave. Artboard do të ndryshojë në Orientimin e Peizazhit. Nëse Artboard ka përmbajtje mbi të, klikoni emrin e Artboard dhe pronat Artboard do të shfaqen në Panel Properties.
2. Për të shtuar një ngjyrë me porosi në Artboard dhe projektin për këtë çështje, zgjidhni Artboard dhe klikoni chip Chip plotësoni në seksionin Shfaqja e panelit Properties. Futni vlerën hexadecimal për ngjyrën dhe klikoni shenjën +. Ngjyra do të shtohet si një ngjyrë Custom. Për të aplikuar atë ngjyrë diku tjetër, përzgjidhni një objekt dhe klikoni në çipin Custom Color për të aplikuar ngjyrën.
3. Artboards mund të bëhen të kërcyeshme vertikalisht. Për ta bërë këtë, zgjidhni tabelën dhe ndryshoni lartësinë e saj ose në panelet e pronave ose duke zvarritur pjesën e poshtme të tabelave të tabelave poshtë. Në zonën Scrollable të panelit të pronave, zgjidhni vertikalë nga menyja e zbritjes dhe futni lartësinë e pamjes së ekranit për ekranin. Kjo vijë blu e thurur ju tregon fundin e portës. Për ta provuar atë, kliko butonin Play dhe lëvizni larg. Për të fikur scrolling, përzgjidhni Asnjë në zbritjen e Lëvizjes.

07 i 07

Redakto një komplet UI të celularit në dizajnin e përvojës së Adobe

Përvoja Design përmban një UI Kit për zhvillimin e iOS, Android dhe Windows UI's. Kur i hapni ato fillimisht, mund të mendoni se ato janë mjaft të mira. Jo mjaft, secili prej copave dhe pjesëve në këto kuti është plotësisht i redaktueshëm. Le të gjejmë duke ndërtuar një skelet tela Android.

1. Ju filloni duke përzgjedhur mjetin Artboard dhe duke zgjedhur Android Mobile në seksionin Google të panelit Properties .
2. Zgjidh File> Open UI Kit> Materiale Google . Kjo hap Komplet UI të Dizajnit të Materialit. Përzgjidhni Zmadhuesin dhe vendosni skedarin e tabelave të ekranit . Më pëlqen të filloj me këtë, sepse më jep udhëzues për vendosjen e duhur në ekran të elementeve të ndërfaqes. Nëse klikoni në njërën nga shiritat Blue ju do të shihni se është i bllokuar. Klikoni bllokimin e lidhur me secilën prej tyre për ta zhbllokuar . Vendosni tabelën dhe kopjoni përzgjedhjen në kujtesën. Kthehu në dokumentin tuaj dhe ngjisni ekranin në tabelën tuaj artistike.
3. Klikoni një herë në shiritin e aplikacionit që është në krye të tabelës. Vini re se si mund ta zgjidhni atë. Zgjidhni Objekti> Organizoni> Sillni përpara. Zgjedhja juaj tani është mbi udhëzimet e ekranit. Kjo duhet t'ju tregojë se secili nga elementet në ekran mund të redaktohet.
4. Double klikoni Status Bar në krye dhe, në panelin e pronave s et ngjyrën Plotësoni në 455A64 . Double klikoni në App Bar dhe vendosni mbushjen e saj në 607D8B. Kjo duhet t'ju tregojë se çdo element në një komplet UI mund të redaktohet për të përmbushur specifikimet e ngjyrave të projektit.
5. Po në lidhje me ikonat? Ja se si ta ndryshoni ngjyrën e tyre. Double klikoni në zemër për ta zgjedhur atë. Nëse shikoni në Panelin e Pronave, mund të supozoni se nuk mund të modifikoni përzgjedhjen. Jo mjaft. Double klikoni në zemër një herë më shumë . Prona të hapura dhe ju ndryshoni ngjyrën e mbushjes në FF0000. Përsëritni këtë mashtrim me dy klikime të dyfishta për ikonat e mbetura dhe tekstin.