Adobe pieredze dizaina triki, padomi un metodes

01 no 07

Adobe pieredze dizaina triki, padomi un metodes

Kad Adobe iepazīstināja pieredzes dizainu ar publikas priekšskatījumu , tajā pašā laikā uzņēmums veica divus diezgan pārsteidzošus darbus. Pirmkārt, viņi izveidoja vietu jaunajā prototipēšanas programmatūras tirgū. Otrkārt, viņi radīja iespēju lietotājiem spēlēt ar "nepabeigtu darbu" un ļauj lietotājiem ietekmēt šo progresu. Tagad, kad pieteikums ir pieejams dažiem mēnešiem, es domāju, ka būtu labs laiks, lai dalītos pieredzē Dizaina triki, padomi un metodes.

Bet, vispirms, jums var būt jautājums, ko nozīmē Prototyping Software. Starp galvenajiem dalībniekiem šajā telpā ir Proto.io, Princips, UXPin, Atomic.io , Experience Design un InVision. Atšķirībā no tādām lietojumprogrammām kā Sketch 3, Photoshop un Illustrator, kur tiek izgatavoti statiskie dizaini, šie grafiskie redaktori ievieš interaktivitāti, kustības un citas funkcijas, kas ir kopīgas mūsdienu mobilajā un tīmekļa dizaina telpā.

Ar mobilo un neizbēgamo lāzera līdzīgu koncentrēšanos uz Lietotāju vairs nav pietiekami, ja dizainers saplēst dažas skices, savāc dažus comps, pēc tam atbrīvo projektu vai augšupielādē to tīmekļa serverim. UI / UX darbplūsma ir būtiski mainījusi lietas. Katram procesa posmam, sākot no lietotāja identificēšanas, skicēm, karkass, maketēm un prototipiem, tagad tiek veikta plaša lietotāju pārbaude.

Tas ir pēdējais posms - prototipēšana - kur sāpju punkti tiek atklāti un fiksēti, pirms projekts pārceļas uz galīgo ražošanu. Tas ir tik kritisks interaktivitātes, kustības, ekrāna pārejas un visu, kas izvietoti ekrānā. Problēmas un problēmas nevar vienkārši parādīt kā statisku tēlu vai izskaidrot mutiski. Galu galā šie produkti ir paredzēti reāliem cilvēkiem. Tā vietā, lai pārvietotu visu to uz kodu, prototipu veidošanas procesu aizvien vairāk veic grafikas programmatūra, kas izveidota tieši šim nolūkam. Vieglāk ir salabot kļūdu, aizstāt attēlu, pārrakstīt kādu tekstu, pārvietot pogu utt., Izmantojot vizuālo redaktoru, nevis pastāvīgi pārrakstot un atkļūdot kodu.

Faktiski šī programmatūra ir kļuvusi par galveno sastāvdaļu mūsdienu "Rapid Prototyping" dizaina un attīstības vidē.

Ar to pateicoties, pieredzēsim dizainu.

02 no 07

Izveidojiet Destination Pin ar vienkāršu loku Adobe Experience Design

Viens gudrs XD aspekts ir vektoru zīmēšanas rīku izmantošana. Nevarat atrast ikonu? Nekādu problēmu. Rullējiet savu. Lūk, kā:

1. Izvēlieties Ellipse Tool un, nospiežot opcijas / Alt-Shift taustiņus, izveidojiet loku.
2. Izmantojot izvēlēto loku, iestatījumam Aizpildīt krāsu uz FF0000 un Robežu iestatījumu rekvizītus "nē".
3. Divreiz uzklikšķiniet uz apļa, lai parādītu stiprinājuma punktus. Velciet apakšējo enkuru uz leju.
4. Veiciet dubultklikšķi uz izvēlētā enkurspunkta un līknes tiek aizvietotas ar līnijām.
5. Zīmējiet vēl vienu nelielu apli ar baltu pildījumu un bez stoka. Pārvietojiet to pozīcijā un atlasiet tapu un loku. Pareizu augšdaļā paneli Align (Spiediet) noklikšķiniet uz Horizontālās centrālas pogas un tiek izveidots PIN.

03 no 07

Izveidojiet fonta izplūšanu Adobe Experience Design

Fona attēlā ir kopīgs teksts vai cits saturs. Problēma šeit ir attēls, biežāk nekā nav, pārspēj saturu virs tā. Viens no šī jautājuma risināšanas veidiem ir fona attēla izplūdums. Attēlu var sajaukt ar Photoshop vai citu attēlu rediģēšanas programmatūru, taču tas ir nedaudz neefektīvs, jo īpaši tāpēc, ka XD tagad var izpildīt šo uzdevumu. Lūk, kā:

1. Izveidojiet jaunu mākonis un pievienojiet savu fona attēlu.
2. Izvēlieties taisnstūra rīku un izdariet taisnstūri pa attēlu. Izvēloties taisnstūri, iestatiet Fill to White un Stroke to None.
3. Izvēloties taisnstūri, īpašumu panelī izvēlieties Fona blurumu . Trīs slīdņus ir Blur Summa, Spilgtums un necaurredzamība. Lūk, ko viņi dara:

• Izplūdes daudzums: noregulē attēla blurumu zem formas. Maksimālā vērtība ir +50.
• Spilgtums: pielāgojas attēla izceltajiem un ēnojošiem elementiem. Minimālā vērtība ir -50 un Maksimālā vērtība ir +50.
• Caurspīdīgums : ietekmē formas pārredzamību un attēla redzamību formā. Vērtības svārstās no 0% līdz 100%.

Ja jūs patiešām vēlaties "mainīt lietas uz augšu", mainiet formas krāsu un atskaņojiet ar opcijas vērtību, lai mainītu attēla "izskatu".

04 no 07

Izveidojiet Scrim programmā Adobe Experience Design

Kopēja dizaina problēma ir interfeisa elementu elementi, kam jābūt kopīgai krāsai, bet tie tiek zaudēti, ja tos novieto fona vai vienkrāsainas krāsas veidā. Risinājums ir skrims. Skrims ir nedaudz necaurredzams gradients, kas novietots starp saskarnes elementu un fonu. To ir viegli izdarīt XD. Lūk, kā:

1. Izveidojiet savu MDP modeli XD, pievienojiet attēlu un nokopējiet un ielīmējiet interfeisa elementus no atbilstošā UI komplekta - Fails> Atvērt lietotāja interfeisu ... - uz galda. Iepriekš attēlā fotoattēls padara stāvokļa joslu un lietotņu joslu grūti saskatīt.
2. Atlasiet taisnstūra rīku un izvelciet taisnstūri. Opciju panelī atlasiet Aizpildīt un atlasiet Gradient no krāsu atlasītāja izvēlnes. Iestatiet gradienta krāsas melnā un baltā krāsā. Iestatiet vērtību A - Opacity - līdz 60% un White A vērtību līdz 0%.
3. Izvēloties taisnstūri, atlasiet Object> Arrange> Send backward . Saskarnes elementi tagad ir redzami virs attēla.

05 no 07

Izveidojiet attēla ikonu pakalpojumā Adobe Experience Design

Tērzēšanas lietotnēs tiek atrasts kopīgs dizaina modelis, kurā cilvēki runā viens ar otru un skaļruņa attēls tiek parādīts ekrānā. Šie attēli parasti ir maskēti. Tas ir vienkārši miris, izpildot to XD. Lūk, kā:

1. Jūs sākat ar attēlu, loku vai citu formu uz mākonis. Jūs varat aizpildīt apli ar jebkuru krāsu. Kas jums nav jādara, ir pievienot insulta krāsu. Izveidojot efektu, tas pazudīs, tad kāpēc uztraukties. Ja jums ir nepieciešams izdzēst loku, kopējiet to starpliktuvē.
2. Pārvietojiet apli uz attēlu un izvēlieties gan attēlu, gan loku. Izvēloties bot objektus, atlasiet Object> Mask with Shape . Atlaidot peli, Avatar tiek izveidots. No turienes jūs varat mainīt to.
3. Ja jums ir jāpievieno trieciens, ielīmējiet loku, kas atrodas starpliktuvē, uz mākonis. Ar atlasīto kopiju izslēdziet aizpildīt rekvizītus un pievienojiet insulta krāsu un platumu. Lai tos saskaņotu, atlasiet abus objektus un noklikšķiniet uz pogas Centrālas izlīdzināšanas, kas atrodas opciju Izlīdzināt opcijas īpašumu paneļa augšpusē.
4. Ja vēlaties pārvietot fotoattēlu maskā, veiciet dubultklikšķi uz maskas. Tas parādīs attēlu un maskas formu. Noklikšķiniet uz attēla un velciet to pozīcijā. Atlaidot peli, attēls atradīsies jaunā pozīcijā maskas iekšpusē.

06 no 07

Spēlējiet ar Adobe Experience dizaina mākslas darbu burtnīcām

Pieredzes dizaina dizains nav tikai vieta, kur ievietot saturu. Arī viņus var manipulēt. Šeit ir dažas lietas, ko varat darīt:

1. Ja jums ir nepieciešama mākoņa skapja ainavas un portreta versijas, dublējiet mākonis un, izvēloties dublikātu, noklikšķiniet uz ainavas pogas Properties panelī. Artboard mainīsies uz Ainavas orientāciju. Ja Artboard ir tajā saturs, noklikšķiniet uz Mapeja vārda un rekvizītu panelī parādīsies māklojuma rekvizīti.
2. Lai mākslas lapai pievienotu pielāgotu krāsu un projektu par šo jautājumu, izvēlieties mākonis un noklikšķiniet uz krāsu mikroshēmas aizpildīšanas, kas atrodas rekvizītu paneļa sadaļā Izskats. Ievadiet krāsas heksadecimālo vērtību un noklikšķiniet uz + zīmes. Krāsa tiks pievienota kā pielāgota krāsa. Lai šo krāsu pielietotu citur, izvēlieties objektu un noklikšķiniet uz pielāgotās krāsas mikroshēmas, lai piemērotu krāsu.
3. Artboards var būt vertikāli ritināms. Lai to paveiktu, izvēlieties moduļu paneli un mainiet tā augstumu rekvizītu panelī vai velkot malu apakšā uz leju. Resursu paneļa Ritināmā apgabalā izvēlieties vertikāli no nolaižamās izvēlnes un ievadiet ekrāna skatījuma laukuma augstumu. Šī baltā zilā līnija parāda skatu punkta apakšdaļu. Lai to pārbaudītu, noklikšķiniet uz pogas Atskaņot un ritiniet prom. Lai izslēgtu ritināšanu, ritināšanas skata lejā atlasiet Nav.

07 no 07

Rediģējiet mobilā lietotāja interfeisa komplektu programmā Adobe Experience Design

Pieredzes dizains ietver UI komplektu, lai izstrādātu iOS, Android un Windows lietotāja saskarnes. Kad jūs vispirms atverat tos, jūs domājat, ka tie ir diezgan labi izveidota vietā. Ne gluži katrs no šiem komplektiem sastāvošajiem bitiem un gabaliņiem ir pilnībā rediģējams. Noskaidrosim, izveidojot Android korpusu.

1. Jūs sākat, izvēloties rīku Meklet un atlasot Android Mobile opciju paneļa Google sadaļā .
2. Atlasiet File> Open UI Kit> Google Material . Tas atver Material Design UI komplektu. Atlasiet palielināmā stikla un marķējuma ekrāna ceļvežu modeli . Man patīk sākt ar šo vienu, jo tas dod man rokasgrāmatas, lai pareizi izvietotu interfeisa elementus uz ekrāna. Ja jūs noklikšķināsit uz kāda no Blue bars, jūs redzēsiet, ka tas ir bloķēts. Noklikšķiniet uz katras no tām piestiprinātas atslēgas, lai to atbloķētu . Marķējiet mākonis un kopējiet atlasi starpliktuvē. Atgriezieties pie sava dokumenta un ielīmējiet ekrānu savā māklodziņā.
3. Lietojumprogrammas joslā vienu reizi noklikšķiniet uz kārtas augšdaļu. Piezīme, kā to var izvēlēties. Atlasiet Object> Arrange> Bring to Front. Jūsu izvēle tagad ir virs ekrāna ceļveža. Tam vajadzētu pateikt, ka katru no ekrāna elementiem var rediģēt.
4. Dubultklikšķi uz statusa joslas augšdaļā un rekvizītu panelī un aizpildīt krāsu uz 455A64 . Veiciet dubultklikšķi uz lietotņu joslas un iestatiet aizpildījumu uz 607D8B. Tam vajadzētu pateikt, ka katrs lietotāja interfeisa komplekta elements var tikt rediģēts, lai izpildītu projekta krāsu specifikācijas.
5. Kā ar ikonām? Tālāk ir norādīts, kā mainīt krāsu. Divreiz noklikšķiniet uz sirds, lai to atlasītu. Ja paskatās uz Properties Panel, jūs varat pieņemt, ka jūs nevarat rediģēt atlasi. Ne īsti. Dubultklikšķi uz sirds vēl vienu reizi . Atveras Properties un jūs maināt aizpildījuma krāsu uz FF0000. Atkārtojiet šo dubultklikšķi uz triks pārējām ikonām un tekstu.