Kev Tsim Txuj Hauv Tsev Tsim Kev Siv Tsim, Tswv Yim, thiab Hom Phaj

01 ntawm 07

Kev Tsim Txuj Hauv Tsev Tsim Kev Siv Tsim, Tswv Yim, thiab Hom Phaj

Thaum tsev kawm ntawv pib ua Kev Tsim Kho Kev Tsim Ua Kev Lom Zej Zej Zog , lub tuam txhab tau ua tiav ob qho zoo nkauj feats tib lub sijhawm. Ua ntej, lawv staked tawm ib qhov chaw nyob rau hauv qhov emerging prototyping software lag luam. Thib ob, lawv tsim muaj lub sijhawm rau cov neeg siv ua si nrog "kev ua haujlwm-hauv-kev-vam meej" thiab cia cov neeg siv tau qhov kev nce qib ntawd. Tam sim no hais tias daim ntawv thov tau muaj nyob rau ob peb lub hlis, kuv xav tias nws yuav yog ib lub sijhawm zoo los qhia txog Qee Yam Kev Tsim Kho Tus Qauv, Cov tswv yim, thiab cov tswv yim.

Tab sis ua ntej, koj yuav tsum xav li cas los ntawm Prototyping Software. Ntawm qhov loj players hauv qhov chaw no yog Proto.io, Tus Txheej Txheem, UXPin, Atomic.io , Kev Tsim Tus Qauv Hauv thiab Kev Vam Meej. Tsis zoo li cov kev siv xws li Sketch 3, Photoshop thiab Illustrator qhov tsim tawm zoo li qub, cov graphical editors qhia txog kev sib txuas lus, tsab ntawv tsa suab thiab lwm yam nta nyob rau hnub no lub vev xaib thiab qhov chaw tsim web.

Nrog lub siab ntawm txawb thiab qhov tsis pom zoo, zoo li laser tsom rau ntawm Tus Neeg siv, nws tsis txaus rau tus tsim kom khij tuaj ob peb lub sketches, rub ua ke ob peb lub comps thiab ces tso tawm qhov project lossis upload nws mus rau lub web server. Txoj haujlwm UI / UX tau ua raws li qhov tseeb. Txhua kauj ruam ntawm tus txheej txheem, los ntawm kev txheeb xyuas tus neeg siv, cov duab kos, kab kev sib tw, kev sib tw, thiab cov qauv prototyping yog tam sim no rau cov neeg siv kev ntsuam xyuas dav dav.

Nws yog qhov kawg theem - prototyping - qhov twg cov ntsiab lus ntawm qhov mob tau tshwm sim thiab tsau ua ntej qhov kev tsiv mus rau qhov kawg. Qhov no yog nyob qhov twg interactivity, tsab ntawv tsa suab, kev tshuaj ntsuam kev hloov thiab kev tso kawm ntawm txhua yam ntawm qhov kev tshuaj ntsuam yog qhov tseem ceeb heev. Teeb meem thiab teeb meem tsis tuaj yeem pom tau tias yog ib qho duab zoo li qub los yog piav qhia lus. Tom qab tag nrho, cov khoom no yog rau cov tib neeg tiag. Es dua txav tag nrho cov uas mus rau chaws, cov txheej txheem prototyping yog nce ua undertaken los ntawm graphics software tsim rau cov hom phiaj ntawd. Nws yooj yim kho qhov yuam kev, hloov tus duab, rov sau dua ib co ntawv, txav ib lub pob thiab siv rau kev siv lub nrig txog kev pom dua dua li rov sau dua thiab kev debugging code.

Qhov tseeb, qhov software no tau los ua ib qho tseem ceeb hauv hnub no "Kev Ceev Nrho Prototyping" Kev Tsim Kho thiab Kev Tsim Kho.

Nrog hais tias, peb muaj kev lom zem nrog Kev Tsim.

02 ntawm 07

Tsim Muaj Chaw Pleev Qis nrog Ib Lub Vaj Huam Sib Ntev hauv Kev Tsim Txua Tsev Tsim

Ib qhov zoo ntawm XD yog nws siv cov cuab yeej kos duab vector. Nrhiav tsis tau ib lub cim? Tsis muaj teeb meem. Dov koj tus kheej. Ntawm no yog li cas:

1. Xaiv cov Ellipse Cov Cuab Yeej thiab, nrog rau Kev Xaiv / Kev Hloov hauv qib nias, kos lub voj voog.
2. Nrog lub voj voog xaiv, khij cov xim xim rau FF0000 thiab Ciam rau "tsis muaj" hauv cov khoom.
3. Ob-nias lub voj voog los qhia lub ntsiab lus ntawm lub tog rau nkoj. Luag txoj hlua khi hauv qab.
4. Ob-nias qhov xaiv lub thauj tog rau nkoj thiab cov curves yog hloov nrog cov kab.
5. Kos lwm lub voj voos me me uas muaj ib daim ntawv dawb thiab tsis muaj txoj hlua khi. Txav mus rau hauv txoj haujlwm thiab xaiv tus pin thiab lub voj voog. Hauv vaj huam sib luag rau saum toj ntawm cov khoom nias ntawm Kab Rov Tav Center khawm thiab tus PIN yog tsim.

03 ntawm 07

Tsim kom muaj ib qho Background Blur nyob rau hauv Kev Tsim Txuj Hauv Nruab Nrab

Nws yog ib qho uas muaj cov ntawv nyeem lossis lwm cov ntsiab lus hauv qab duab. Qhov teeb meem ntawm no yog daim duab, ntau zaus tshaj tsis, tshaj tawm cov ntsiab lus saum toj no. Ib txoj kev los daws qhov teebmeem no yog ua kom pom cov duab tom qab. Koj tuaj yeem phom cov duab hauv Photoshop lossis lwm yam duab editing software, tab sis qhov no yog me ntsis inefficient, tshwj xeeb tshaj yog vim tias XD muaj peev xwm tam sim no lis txoj hauj lwm no rau koj. Ntawm no yog li cas:

1. Tsim kom muaj daim duab kos duab tshiab thiab ntxiv koj cov duab tom qab.
2. Xaiv qhov Rectangle Tool thiab nd kos ib daim duab ntau dua daim duab. Nrog rau cov duab plaub hau, xaiv tus Sau Dawb thiab Stroke mus rau None.
3. Nrog rau cov duab plaub hau xaiv, xaiv Background Blur hauv cov khoom vaj huam sib luag. Peb lub sliders yog Blur tus nqi, Brightness thiab Opacity. Ntawm no yog lawv ua li cas:

• Plooj Cov Nyiaj: Txo qhov muag plooj ntawm daim duab hauv qab no. Qhov siab tshaj plaws yog + 50.
• Brightness: Adjusts cov highlights thiab ntxoov ntxoo hauv daim duab. Tus nqi tsawg tshaj plaws yog -50 thiab tus nqi siab tshaj plaws yog + 50.
• Opacity: Cuam tshuam tus txheej txheem ntawm cov duab thiab cov visibility ntawm daim duab nyob rau hauv lub duab. Qhov tseem ceeb ntawm 0% mus rau 100%.

Yog tias koj xav kom "hloov khoom", hloov cov xim ntawm cov duab thiab ua si nrog tus nqi ntawm Opacity kom pauv qhov "saib" ntawm daim duab.

04 ntawm 07

Tsim Tsaj Hauv Tsev Kawm Ntawv Kev Tsim

Ib qho teeb meem tsim teeb meem yog kev sib txuas ntawm cov ntsiab lus yuav tsum yog ib qho xim tiam sis, poob thaum muab tso rau tom qab duab lossis xim xim. Cov tshuaj no yog ib qho txhim khu. Ib lub nraub qaum yog ib qho yooj yim heev gradient muab tso rau nruab nrab ntawm lub caij pib thiab tom qab. Qhov no yog qhov yooj yim ua kom tiav hauv XD. Ntawm no yog li cas:

1. Ua kom koj daim duab hauv XD, ntxiv ib qho duab thiab daim ntawv thiab muab cov ntsiab lus ntawm cov khoom siv hauv UI - Ntaub Ntawv> Qhib UI Khoom ... - rau hauv daim duab. Nyob rau hauv cov duab saum toj no lub yees duab ua rau Bar qhov Status thiab App Bar nyuaj pom.
2. Xaiv qhov Rectangle Tool thiab kos tawm ib lub duab plaub. Hauv Khoom Vaj Huam Sib Sau Xaiv Sau thiab xaiv Gradient los ntawm cov xov hauv cov xim hauv Picker Color. Teem cov xim gradient rau Dub thiab Dawb. Teem caij rau A - Opacity - rau 60% thiab Dawb A tus nqi rau 0%.
3. Nrog rau duab plaub, xaiv Object> Npaj> Xa Rov Qab . Cov ntsiab lus ntawm cov ntsiab lus tam sim no pom nyob hauv daim duab.

05 ntawm 07

Tsim ib qho Image Avatar nyob rau hauv tsev kawm ntawv kev tsim

Ib lub qauv tsim qauv pom nyob rau hauv Tshaj apps uas tib neeg sib tham thiab sib tham tus duab tshwm ntawm qhov screen. Cov avatars no feem ntau yog cov duab uas tau raug masked. Nws yog qhov yooj yim ua tiav qhov no hauv XD. Ntawm no yog li cas:

1. Koj pib nrog ib daim duab thiab ib lub voj voos lossis lwm yam duab nyob hauv daim duab. Koj tuaj yeem sau lub voj voos uas muaj xim. Qhov koj tsis tas yuav ua yog ntxiv cov xim daj stroke. Nws yuav ploj thaum koj tsim cov nyhuv, li ntawd, vim li cas thab. Yog tias koj xav tau stoke lub voj voog, muab luam tawm rau cov ntawv teev cia.
2. Tshem lub voj voog rau ntawm daim duab thiab xaiv ob daim duab thiab lub voj voos. Nrog cov khoom xaiv bot, xaiv Object> Mask nrog Shape . Thaum koj tso tus nas, tus Avatar yog tsim. Los ntawm muaj koj tuaj yeem tsim kho nws.
3. Yog tias koj xav tau ntxiv mob stroke, paste lub voj voog zaum ntawm koj daim duab los qhia rau ntawm daim duab. Nrog rau daim ntawv xaiv xu siab rau qhov sau rau hauv Cov Khoom thiab ntxiv cov xim tawg thiab dav. Rau kab lawv, xaiv ob qho tib si khoom thiab nias qhov Center Align cov nyees khawm hauv cov kev sib haum xeeb rau saum toj ntawm cov khoom vaj huam sib luag.
4. Yog tias koj xav tawm lub yees duab ntawm lub npog ncauj, ob npaug nias lub npog ncauj. Qhov no yuav qhia cov duab thiab daim npog ntsej muag. Nyem ntawm daim duab thiab luag nws mus rau hauv txoj hauj lwm. Thaum koj tso tus nas, daim duab yuav nyob hauv nws txoj hauj lwm tshiab hauv lub npog ncauj.

06 ntawm 07

Ua Yeeb Yam Nrog Tsev Kawm Ntawv Kev Tsim Artboards

Cov Txuj Ci Tsim Cov duab kos tsis yog cia rau koj los muab cov ntsiab lus. Lawv, dhau lawm, yuav manipulated. Ntawm no yog ob peb yam koj ua tau:

1. Yog hais tias koj xav tau toj roob hauv pes thiab Portrait versions ntawm ib daim duab, sib txuas cov duab kos thiab, nrog cov kev xaiv uas xaiv, nias lub khawm thaj chaw hauv vaj huam sib luag. Tus Artboard yuav hloov mus rau kev cob qhia toj roob hauv pes. Yog tias Artboard muaj cov ntsiab lus ntawm nws, nias Artboard lub npe thiab Artboard cov khoom yuav tshwm nyob rau hauv Khoom Vaj Huam Sib Luag.
2. Ntxiv rau kev cai xim rau Artboard, thiab qhov project rau qhov teeb meem ntawd, xaiv cov Artboard thiab nias qhov sau xim xim nti rau hauv Kem tshooj ntawm Khoom Vaj Huam Sib Luag. Sau tus nqi hexadecimal rau cov xim thiab nias qhov + kos npe. Cov xim yuav raug ntxiv raws li Kev Cai Ncaws Pob. Siv qhov xim ntawm lwm qhov chaw, xaiv ib qho khoom thiab nias qhov Custom Chip los thov cov xim.
3. Artboards yuav ua rau scrollable vertically. Ua li no, xaiv cov artboard thiab hloov nws qhov siab los ntawm cov khoom vaj huam sib luag los yog cuam tshuam rau hauv qab ntawm qhov artboard downwards. Hauv thaj chaw Scrollable ntawm cov khoom vaj huam sib luag, xaiv ntsug ntawm cov nav hauv tshuab raj thiab nkag mus saib qhov siab rau qhov kev tshuaj ntsuam. Uas dashed xiav kab qhia koj hauv qab ntawm lub viewport. Yuav sim nws, nias lub khawm Ua Si thiab khawm tawm. Los tua tawm scrolling, xaiv Tsis yog hauv Scrolling pop cia.

07 ntawm 07

Kho kom raug cov khoom siv txawb UI hauv tsev kawm ntawv Kev Tsim

Kev Tsim Muaj Muaj Cov Khoom Siv UI los tsim cov iOS, Hauv Paus thiab Lub Xeem UI. Thaum koj qhib thawj zaug, koj yuav xav tias lawv zoo nkauj nyob hauv qhov chaw. Tsis yog-txhua qhov ntawm cov khoom me thiab cov khoom hauv cov khoom siv yog kev kho siab dav dav. Cia peb kawm tawm los ntawm kev tsim ib qho Android wireframe.

1. Koj pib los ntawm xaiv Artboard cuab tam thiab xaiv Android Mobile hauv Google seem ntawm Cov Vaj Huam Sib Luag Khoom .
2. Xaiv cov ntaub ntawv> Qhib UI Khoom> Google Khoom . Qhov no yuav qhib cov Khoom Siv Tsim UI. Xaiv cov pob zeb Magnifying thiab nws cov yeeb yaj kiab t Screen Screen cov kos duab . Kuv nyiam pib nrog qhov no vim nws muab kuv cov phoojywg rau kev tso tshuaj ntsuam ntawm qhov kev sib txuas ua ke. Yog tias koj nias rau ntawm Blue Bars koj yuav pom nws xauv. Nyem lub xauv rau txhua tus ntawm lawv los qhib nws . Hloov cov kos duab thiab sau cov ntawv xaiv rau cov ntawv teev cia. Rov qab mus rau koj daim ntawv thiab muab tshuaj ntsuam rau hauv koj daim duab.
3. Nyem ib zaug ntawm qhov App bar uas sab saum toj ntawm daim duab. Daim ntawv qhia tias koj tuaj yeem xaiv nws li cas. Xaiv qhov khoom> Npaj> Nqa mus rau pem hauv ntej. Koj xaiv yog tam sim no saum Screen Screen. Qhov no yuav tsum qhia koj txhua qhov ntawm cov ntsiab ntawm qhov screen yuav tau kho.
4. Ob nias nias Bar Qhov Ntsuas ntawm lub sab saum toj thiab, hauv Khoom Vaj Huam Sib Luag thiab qhov Sau Tseg rau 455A64 . Ob tug nias lub Bar Bar thiab muab nws sau rau 607D8B. Qhov no yuav tsum qhia koj txhua lub caij rau cov khoom siv ntawm UI tuaj yeem kho kom tau raws li qhov project cov xim tshwj xeeb.
5. Yuav ua li cas rau cov cim? Ntawm no yog yuav ua li cas hloov lawv cov xim. Ob nias lub plawv xaiv nws. Yog tias koj saib ntawm Cov Vaj Huam Sib Luag, koj yuav xav tias koj tuaj yeem tsis xaiv qhov kev xaiv. Tsis heev. Ob nias lub plawv ib zaug ntxiv . Cov khoom qhib thiab koj hloov xim rau FF0000. Rov ua li no ob-ob zaug-nias ua kom yuam kev rau cov seem uas yog cov cim thiab cov ntawv nyeem.