Ny tetikasa noforonina noforonina avy amin'ny Google dia nofinofy tany amin'ny sehatra Android ho toy ny fomba iray hanolorana soso-kevitra eo amin'ny sehatra.
01 of 06
Ahoana no hamoronana karatra fanovozam-material ao amin'ny Adobe Experience Design CC
Indray mandeha ny mpanakanto dia nanomboka nanamboatra izany ary nahatakatra ny fisainana tao ambadik'izany, ny Material Design dia nanjary lasa iray amin'ireo filôzôfia hita maso be indrindra amin'ny tranonkala sy ny finday . Ny zavatra rehetra tokony hataonao mba hijerena ny zavatra ataonay dia ny hanaovana Fikarohana momba ny Material Design amin'ny Pinterest ary ho hitanao ireo ohatra an-jatony sy fanandramana momba fitaovana, takelaka, ary tranokala.
Ny endrika mahavariana amin'ny Design an'ny Material dia ny fisainan'i Google amin'ny fomba tokony hipoitra sy ampiasaina amin'ny fitaovana finday fa ny hevitra dia ampiharina amin'ny efijery amin'ny habeny amin'ny sehatra rehetra. Araka ny filazan'i Google ao amin'ny fehintsoratr'ity fanokafana ity, "Nanao fanamby izahay mba hamoronana fiteny iray ho an'ireo mpampiasa anay izay mampiavaka ny fitsipika fototra amin'ny endrika tsara sy ny fahaiza-manaon'ny teknolojia sy ny siansa. Izany no endri-javatra. Ity tahirin-kevitra ity dia tahiry velona izay havaozina rehefa manohy mamolavola ireo tenimiafina sy ireo singa manokana momba ny famolavolana fitaovana. "
Ny lahatsoratra dia miresaka, amin'ny ankapobeny, ny taratasy ary ny marika momba ny Material Design no karatra. Eritrereto ny karatra famantarana eo amin'ny faritra iray ary eo amin'ny làlana marina ianao. Ny karatra dia singa iray ahitana sary, horonan-tsarimihetsika, rohy an-tsoratra ary ny sisa, saingy ny tsy maha-samihafa azy ireo no tena tanjon'izy ireo fa mifantoka amin'ny foto-kevitra iray. Manana kiraro ny kafe, misy alokaloka maranitra manondro fa ambonin'ny ambony izy ireo ary raha izy rehetra dia mitovy amin'ny fiaramanidina izay antsoina hoe "fanangonana".
Ao amin'ity "How To" ity isika dia hamorona karatra mifototra amin'ny tsipika. Raha tsy mamorona karatra miaraka amin'ny fitaovana fitadiavana sy fanodinana samihafa, dia ho avy eo amin'ny lalana hafa isika. Ho ampiasaintsika ireo fitaovana ao amin'ny Adobe's Experience Design izay eo am-piandohan'ny Macintosh ihany no misokatra ary malalaka. Azonao atao ny maka azy eto.
Andao isika hanomboka.
02 of 06
Famoronana ny Prototype Artboard ao amin'ny Adobe Experience Design CC
Tsy misy fomba mazava ahafahana mamorona sarimihetsika Android miainga amin'ny Exit Start ao amin'ny Experience Design CC (XD). Ny zavatra efa nataonay rehefa misokatra XD izahay, dia ny mifidy ny safidy iPhone 6 ary rehefa misokatra ny interface dia misafidy ny fitaovana Artboard any amin'ny farany ambany ny Toolbar ary misafidy android mobile amin'ny fantenana ao amin'ny tontonana Properties ankavanana. Avy eo dia mifidy ny fitaovana mifantina isika, kitiho indray mandeha amin'ny anaran'ny artboard an'ny iPhone ary esory ny artboard. Tsy misy intsony.
Ao amin'ny XD ankehitriny, misy zana-tsipika kely eo akaikin'ny iPhone 6 izay, rehefa sidina, dia manokatra ny menio fanala. Avy any dia misafidy ny dikan-teny Android Mobile ianao ary ny sehatra Android Mobile nosafidiana tao amin'ny interface.
Mba hahazoana antoka fa misokatra ho an'ny karatra ny seho an-tserasera, dia matetika isika no manapaka amin'ny Sketch 3 ary mamaky sy mametaka Barazy Status, Nav Bar, ary App avy amin'ny Templet Material Design ao amin'ny sari-tany. Sketch 3.2 dia misy temitra fanoratana material ( File> New From Template> Material Design ) ary iray hafa tena tsara afaka avy amin'i Kyle Ledbetter izay azonao eto. Raha tsy manana Sketch ianao, dia azonao atao ny mamaky sy mametaka azy ireo amin'ny X-Stickers hita ao amin'ny File> Open UI Kit> Google Material . Azonao atao koa ny mandefa azy ireo amin'ny Google ho ampiasaina amin'ny Photoshop, Illustrator, After Effects ary Sketch.
03 of 06
Manampia karatra fanodinana fitaovana amin'ny Adobe XD CC Artboard
Ny iray amin'ireo endriny tena ilaina amin'ny XD dia ny fampidirana ireo kitsy UI ho an'ny iOS iOS, ny Google Material, ary ny Microsoft Windows. Amin'ny lafiny maro, manampy ny teny hoe "Rapid" amin'ny teny hoe "Prototyping Rapid" izy ireo. Manao izay hahamora kokoa ny asany amin'ny endrik'ireo mpamorona ireo singa UI ireo fa tsy voatery haverina amin'ny endrika fampiharana toy ny Photoshop, Illustrator na sary Sketch.
Ny singa UI nilainay dia karatra. Mba hahatongavana amin'izany dia nifidy ny solosaina> Open UI Kit> Google Material izahay ary ny kitay misokatra ho toy ny taratasy vaovao. Ny singa nilainay dia hita ao amin'ny sokajy Card.
Ny zavatra tiantsika momba izany dia ny fomban-drazana Material Design araka ny voafaritra ao amin'ny Content Blocks specs ary koa ny format-endritsoratra sy ny fialan-tsasatra napetraka ao amin'ny karazana typografika.
Ny endriky ny karatra tadiavinay dia ilay iray teo amin'ny farany ambany. Izahay dia nanamboatra izany tamin'ny totozy ary dia navoakanay tao anaty boaty. Indrisy anefa, XD dia tsy ahitana takelaka fanoratana ho an'ny tahirin-kevitra misokatra. Ny zavatra ataontsika dia manosika ny varavarankelin'ny varavarana misokatra mba hampisehoana ny iray izay miasa antsika, mifidiana ary asio. Fomba iray hafa amin'ny fifindrana eo amin'ny tahiry XD misokatra dia ny fanindriana ny Command- ' .
04 of 06
Ahoana no hanovana singa fananganana fitaovana ao amin'ny Adobe Experience Design CC
Rehefa tonga any amin'ny clipboard ilay karatra ao amin'ny XD dia aza manomboka miara-miasa aminy. Ny zavatra voalohany tokony hataonao dia ny fametrahana ny karatra satria mila ny fahafahana miditra amin'ny sombintsombiny sy ny singa mamorona ny karatra. Raha manao izany, dia fidio ilay karatra ary tsindrio Objet> Ungroup na tsindrio ny Shift-Command-G.
Ny karatra misy anao izao dia misy ampahany telo:
- Kitapo maitso maitso ho an'ny sary.
- Fonosana mainty hoditra ho an'ny soratra
- Ny boaty aoriana ampiasaina ho toy ny fototra.
Ny dingana voalohany dia ny famafana ny boaty mainty maivana. Ny hany tanjona dia ny manao ny asan'ny tompon-toerana ho an'ny sary izay mahatonga azy io, raha misafidy, tsy mety.
Ny boaty misy ilay lahatsoratra dia tena maitso matevina miaraka amin'ny 50% marefo. Ity boaty ity dia azo ampiasaina ho rakitra an-tsoratra ary azonao atao ny manova ny loko sy ny opacity.
Na dia tsy miharihary avy hatrany aza izany, ny bozaka maivana dia manaraka ny mari-pamantarana Material Design satria ny boribory lehibe dia boribory amin'ny 2 pixels. Ataovy ao an-tsaina izany raha mampiditra sary ianao. Ilaina ihany koa ny kibon'ny boribory izay azo ampidirina amin'ny fampiharana sary na amin'ny XD.
Ny mahita ny hoe ny toetry ny karatra dia mila aloka ihany koa. Ny pitsopitsony dia mampiseho mazava fa misy ny fipetrahan'ny fitsangantsanganana ny karatra 2 pixels. Raha ampiana izany, dia fidio ny endrika mainty mainty ary alatsaho ny soatoavina Y sy B (Blur) ho 2 ao amin'ny tontonana.
05 of 06
Ahoana ny fametrahana sary iray amin'ny karazana Design amin'ny endrika Adobe XD CC
Ny fahalalana ny karatra dia 344 piksela malalaka ary ny sary dia 150 pixel avo ( ny haavon'ny loko maitso maitso ) Nosokafanay ny sary tao amin'ny Photoshop, nopotehina ny habe ary namonjy azy tamin'ny alàlan'ny safidy @ 2x ao amin'ny Photoshop's Export As dialog boaty. Nalefa tao amin'ny Adobe XD ilay sary.
Avy eo dia notarafina ny boaty mainty hoditra teo amin'ilay sary teo amin'ilay boaty kely ary nofantenana Object> Masasky miaraka amin'ny endrika . Ny vokatra dia ny sary manangona ireo kofehy boribory. Avy eo dia nafindra ny endriky ny sary.
Miaraka amin'ilay sary eo amin'ny toerany, dia novainay ny loko afara misy ny boaty mainty Medium, dia nanova ny lahatsoratra sy ny lokon'ny rohy rohy.
06 of 06
Mampiasa ny Adobe XD CC Grid Feature
Amin'ny alàlan'ny karatra dia tsy maintsy apetraka tsara araka ny tetikasa Material Design. Midika izany fa misy piksela 8 eo amin'ny lafiny roa amin'ny karatra ary ny karatra dia mila piksela eo ambanin'ny baiko app. Mba hanaovana izany, tsindrio indray amin'ny anaran'ny artboard ary ao amin'ny Properties Panel, dia mifidiana Grid. Mipetaka eo amin'ny latabatra ilay rihana.
Ny haavon'ny sehatr'asa dia 8 pixels izay mitovitovy amin'ny halavan'ny rindrankajy ho an'ny Material Design. Raha mila fari-kafa ianao, dia manova ny sandany ao amin'ny faritra Grid. Raha te-hanova ny loko ao amin'ny gidro ianao dia tsindrio ny lokon'ny solosaina ary mifidiana loko avy amin'ny Color Picker.
Ampiasao amin'ny karatra ilay kaody ary tsindrio mankany amin'ny toerana farany.
Mba hahavitana azy dia nifidy ilay karatra izahay, ary nizara ny bokotra Repeat Grid ary nanova ny elanelana misy ny karatra ho 8 pixels.