Yadda za a ƙirƙirar Kayan Kayan Kayan Cikin Kwarewar Kwarewa ta Adobe

Abubuwan da aka tsara na Musamman daga Google an samo asali ne a kan dandalin Android kamar yadda wata hanya ce ta bayar da shawarar daidaito a kan dandamali.

01 na 06

Yadda za a ƙirƙirar Kayan Kayan Kayan Cikin Kwarewar Kwarewa ta Adobe

Ganin Tom Green

Da zarar masu zanen kaya sun fara ta hanyar ta kuma fahimtar tunanin da ke bayansa, Kayan Dabaru ya zama ɗaya daga cikin falsafancin falsafancin da suka fi tasiri a cikin yanar gizo da fasahar hannu . Duk abin da kake buƙatar ganin abin da muke samu shi ne don yin wani Maƙasudin Zane a kan Pinterest kuma za ku ga daruruwan misalai da gwaje-gwaje akan na'urorin, Allunan, har ma da yanar gizon.

Hanyoyin da ke da ban sha'awa na Design Design shi ne tunanin Google game da yadda alamun ya kamata ya bayyana kuma yayi aiki a kan na'urori masu amfani amma ana amfani da manufofi akan kowane allo na kowane girman a kowane dandamali. Kamar yadda Google ya bayyana a cikin sakin layi na ƙayyadaddun bayani, "Mun kalubalanci kanmu don ƙirƙirar wani harshe na gani don masu amfani da ke tattare ka'idoji masu kyau na kyawawan halaye tare da bidi'a da yiwuwar fasaha da kimiyya. Wannan shine zane-zane. Wannan samfurin shine rubutun rai wanda za a sabunta yayin da muke ci gaba da bunkasa kayan aiki da ƙayyadaddun kayan zane. "

Abubuwan da ke magana game da su, a cikin sharuddan mahimmanci, takarda ne da kuma zane-zane na Kayan Zane shine katin. Ka yi la'akari da alamar rubutu akan farfajiya kuma kana kan hanya madaidaiciya. Katin yana da wani ɓangaren da ke dauke da hotuna, bidiyo, alamomin rubutu da sauransu sai dai inda suka bambanta daga mafi yawan zane-zane masu mahimmanci shine ana nufin su mayar da hankali ga wani abu ɗaya. Cards sun kulla shinge, suna dauke da inuwa mai haskakawa suna nuna cewa suna sama da duniyar kuma idan duk suna cikin wannan jirgi an kira su "tarin".

A cikin wannan "Ta yaya To" za mu kirkirar katin da ya dogara da samfurin. Maimakon ƙirƙirar katin tare da nau'i-nau'i daban-daban da kayan aikin kayan aiki, za mu zo daga gare ta daga wata hanya dabam. Za mu yi amfani da kayan aiki a cikin Adobe Experience Design wanda yake a halin yanzu a cikin Macintosh-kawai samfoti ne kuma yana da kyauta. Zaku iya sauke shi a nan.

Bari mu fara.

02 na 06

Ƙirƙirar Abubuwan Hulɗa na Abubuwan Hulɗa a cikin Ƙwarewar Kwarewar Adobe

Yi amfani da kayan aikin artboard da samfurin artboard don farawa. Ganin Tom Green

Babu wata hanyar da za ta iya haifar da allon Android daga Fuskar allo a cikin Ƙwarewar Cikin CC (XD). Abin da muka saba yi lokacin da muka buɗe XD, shine zaɓin zaɓi na iPhone 6 kuma, lokacin da ƙirar ke buɗewa, za mu zaɓi kayan artboard a kasa na Toolbar kuma zaɓi Android Mobile daga zaɓin a kan Rukunin Properties zuwa dama. Sa'an nan kuma mu canza zuwa kayan aiki na zaɓi, danna sau ɗaya a kan sunan artboard na iPhone sannan ku share artboard. Babu sauran.

A cikin halin yanzu na XD, akwai ƙananan arrow kusa da iPhone 6 wanda, lokacin da aka danna, yana buɗe jerin menu. Daga can za ka zaɓi Android Mobile version da kuma Android Mobile artboard zabi ya buɗe a cikin dubawa.

Don tabbatar da cewa muna da tashar allo mai kyau don kati, zamu ci gaba da yin amfani da Sketch 3 da kwafa da kuma manna Barikin Yanayi, Bar Bar, da kuma Abubuwan Aikace-aikacen daga Tsarin Tsarin Zane a cikin artboard. Sketch 3.2 ya ƙunshi samfurin Tsarin Samfurin ( Fayil> Sabuwar Daga Template> Design Design ) kuma wani kyakkyawan kyauta kyauta daga Kyle Ledbetter wanda zaka iya samun a nan. Idan ba ku da Sketch, za ku iya kwafa da manna su daga maƙallan XD da ke cikin Fayil> Buɗe UI Kit> Google Material . Hakanan zaka iya sauke su daga Google don amfani a Photoshop, mai zanen hoto, Bayan Bayanai da Sketch.

03 na 06

Ƙara wani abu na zane-zane zuwa wani Adobe XD CC Artboard

Kits na UI sune mahimmanci a cikin abin da suka dace da Dattijon Tsarin Tsarin. Tsarin Tom Green

Ɗaya daga cikin siffofin XD mafi amfani shine hada da UI Kits don Apple iOS, Google Material, da Microsoft Windows. A yawancin hali, suna ƙara kalmar nan "Rapid" zuwa kalmar "Rapid Prototyping". Har ila yau, sun sa aikin mai zane ya fi sauƙi a cikin waɗannan abubuwa na UI na yau da kullum ba dole ba ne a sake rubutawa a cikin Aikace-aikacen Aikace-aikace kamar Photoshop, Mai Bayyanawa ko Sketch.

Halin UI da muke bukata shine katin. Don samun zuwa gare ta za mu zaba Fayil> Buɗe UI Kit> Rubutun Google kuma an bude kayan don sabon rubutun. Abinda muke bukata an samo a cikin Cards category.

Abin da muke ƙaunar waɗannan shine su bi da ƙayyadaddun kayan da aka tsara kamar yadda aka shimfiɗa a cikin Takardun Bincike na Abubuwan Hada da kuma rubutun rubutun da zangon jigilar bayanan da aka shimfiɗa a cikin Typography spec.

Yanayin katin da muke so shi ne wanda ke ƙasa a hagu. Muna kawai alama da shi tare da linzamin kwamfuta mu kuma kwafe shi a kan allo. Abin takaici, XD ba ta ƙunshe da ƙirar tabbed don bude takardu ba. Abin da muke yi shi ne matsar da rubutun bayanan bude wani dan kadan don bayyana abin da muke aiki a kan, zaɓi shi da manna. Wata hanya ta sauyawa da sauri tsakanin rubuce-rubucen XD ta bude shi ne danna Dokar- ' .

04 na 06

Yadda za a Shirya wani abu mai zane a cikin kwarewar Adobe Experience Design

Kowace ƙa'idar UI da aka kara zuwa aikin XD an haɗa shi. Tabbatar da haɗawa da abu kafin a gyara. Ganin Tom Green

Lokacin da katin a cikin XD ya zo daga kullun allo kada ku fara aiki tare da shi. Abu na farko da kake buƙatar ka yi shi ne to Ungroup katin saboda kuna buƙatar samun dama ga bit da ɓangarorin da ke hada katin. Don yin wannan, zaɓi katin kuma zaɓi Naɗa> Ƙararrawa ko latsa Shift-Command-G.

An hada katinku na uku guda uku:

Mataki na farko shine don share murfin launin toka. Dalilinsa kawai shi ne yin aiki a matsayin mai ɗaukar hoto don hoton da yake sa shi, idan ka zaɓa, ba zaɓin ba.

Akwatin da rubutu shi ne ainihin duhu launin toka tare da 50% opacity. Wannan akwatin za a iya amfani dashi azaman rubutun rubutu kuma zaka iya canza launi da akwatin opacity.

Kodayake ba a bayyana shi ba a fili, asalin gashin launin toka yana biye da Kayan Tsarin Zane a cikin cewa sassanta na sama sun kewaye 2 pixels. Ka kiyaye wannan idan kana ƙara hoto. Har ila yau, yana buƙatar sasanninta wanda za'a iya ƙarawa zuwa aikace-aikace na hoto ko XD.

Ganin matsayin yadda wannan yanayin yake da shi yana buƙatar inuwa. Lamarin ya bayyana a fili akwai tasirin sakonni na 2 pixels. Don ƙara wannan, zaɓi siffar baƙar fata da kuma saita dabi'u Y da B (Blur) zuwa 2 a cikin kamfanonin mallakar.

05 na 06

Yadda za a Ƙara wani Hotuna zuwa Kayan Kayan Kayan Kayan Kira a cikin Adobe XD CC

Ɗaya hanyar aiki tare da hotunan shine amfani da mai ɗaukar hoto don rufe fuskar da aka shigo. Ganin Tom Green

Sanin katin yana da 344 pixels fadi da kuma siffar hoto yana da 150 pixels high ( rabi na tsawo daga cikin haske launin toka ) Mun bude hoton a Photoshop, karkatar da shi zuwa girman da ajiye shi ta yin amfani da zaɓi na 2 2 a cikin Photoshop ta Export Kamar yadda maganganu akwatin. Hoton da aka shigo cikin Adobe XD.

Sai muka ɗora akwatin allon launin haske a kan hoton a kan ƙwanƙwasa kuma zaɓi Object> Masana Tare da Shafi . Sakamakon shi ne hoton ɗaukar kusurwar sasanninta na siffar. Sai muka sake hoton zuwa matsayinsa na karshe.

Tare da hoton a wuri, sai muka canza launin launi na akwatin akwatin gilashi, canza rubutun da launi na rubutun link.

06 na 06

Yin amfani da Adobe XD CC Grid Feature

Yi amfani da fasalin Grid na Adobe Experience Design CC don daidaitaccen jeri na abubuwa. Ganin Tom Green

Tare da katin kammala shi a yanzu yana buƙatar a sanya shi da kyau yadda ya dace da kayan Design Design. Wannan na nufin akwai 8 pixels a kowane gefen katin kuma katin yana buƙatar zama 8 pixels a ƙarƙashin mashigin app. Don yin wannan, danna sau ɗaya a kan sunan artboard kuma, a cikin Panel Properties, zaɓi Grid. Grid yana bayyana akan artboard.

Girman grid ɗin tsohuwar shi ne 8 pixels wanda ya zama nau'in grid na abu na Design.F kuna buƙatar girman daban, canza darajar a yankin Grid. Idan kana so ka canja launi na grid, danna gunkin launi kuma zaɓi launi daga Mai karɓar Maɓallin Lissafi.

Tare da grid a bayyane, danna kan katin kuma motsa shi zuwa matsayinsa na ƙarshe.

Don ƙare, mun zaɓi katin, danna maɓallin Grid Maimaita kuma canza canjin tsakanin katunan zuwa 8 pixels.