← Rudi kwenye Vipengele
Free

Pima Umbali

Pima Umbali inakuruhusu kubonyeza vipengele viwili na kuona mara moja umbali sahihi kati yake.

Pima Umbali inakuruhusu kubonyeza vipengele viwili na kuona mara moja umbali sahihi kati yake.

Uhakiki wa Moja kwa Moja
example.com/layout Hali ya Kupima: WASHA
Logo
Kipengele A
Kitufe cha CTA
Kipengele B
X: 248px
Y: 140px
Diagonal: 285px
A: Logo (120×48) B: Kitufe cha CTA (140×48) | X: 248px Y: 140px D: 285px
Vipengele Muhimu

Upimaji wa Mibofyo Miwili

Bofya kipengele cha kwanza (kimeangaziwa kwa ukingo wa bluu), kisha ubofye kipengele cha pili (kimeangaziwa kwa ukingo wa kijani). Umbali kati ya bounding boxes zao unakokotolewa na kuonyeshwa papo hapo. Hakuna kuburuta, hakuna maingizo ya mwongozo — mibofyo miwili tu.

Thamani za Pande Tatu

Angalia umbali wa usawa (X), umbali wa wima (Y), na umbali wa mlalo (diagonal) kwa wakati mmoja — kila mmoja ukionyeshwa na mstari wake wa upimaji wenye rangi na lebo. X ikiwa katika rangi ya kahawia (amber), Y katika nyekundu, mlalo katika zambarau.

Mistari ya Kuunganisha ya Kuona

Mistari ya upimaji iliyokatwa-katwa inaunganisha vipengele viwili vilivyochaguliwa moja kwa moja kwenye ukurasa, huku lebo za umbali zikiwa zimewekwa katikati ya kila mstari. Uwakilishi wa kuona unafanya iwe wazi mara moja kile kinachopimwa.

Lebo za Vipimo vya Kipengele

Kila kipengele kilichochaguliwa kinaonyesha vipimo vyake vya upana × urefu katika lebo ndogo. Hii inakuwezesha kuona ukubwa vya kipengele na nafasi kati yao katika muonekano mmoja — bila kubadilisha zana.

Pima Tena Haraka

Bofya jozi mpya ya vipengele ili kusasisha vipimo papo hapo. Hakuna haja ya kuzima na kuwasha tena chombo. Mistari ya zamani ya upimaji inabadilishwa na mipya kwa ajili ya jozi mpya ya vipengele.

Muhtasari wa Bar ya Maelezo

Bar ya maelezo inayodumu chini ya viewport inaonyesha muhtasari mfupi: majina na vipimo vya vipengele vyote viwili, pamoja na thamani zote tatu za umbali (X, Y, mlalo). Inafaa kwa kunakili na kubandika kwenye ripoti za hitilafu au maoni ya usanifu.

Matumizi ya Kawaida

Kuthibitisha Sifa za Nafasi za Usanifu

Mockup inasema kifungo kinapaswa kuwa 24px chini ya kichwa. Bofya kichwa, bofya kifungo, na uthibitishe kuwa umbali wa Y ni 24px haswa. Inatambua tofauti ndogo za nafasi ambazo hazionekani kwa macho lakini zimeainishwa katika design tokens.

Kukagua Mapengo Thabiti ya Vipengele

Pima umbali kati ya Kadi ya 1 na Kadi ya 2, kisha kati ya Kadi ya 2 na Kadi ya 3. Ikiwa mapengo si sawa, umepata kutokubaliana — labda kumesababishwa na margins tofauti au tatizo la flexbox gap.

Uthibitishaji wa Nafasi Inayowajibika

Pima umbali wa vipengele katika upana wa desktop, kisha urekebishe kivinjari na upime tena katika upana wa simu. Thibitisha kuwa nafasi inaongezeka kwa usahihi katika breakpoints zote na kwamba marekebisho yanayowajibika ya margin/padding yanafanya kazi kama yalivyosanifiwa.

Nyaraka za Ripoti ya Hitilafu

Jumuisha vipimo sahihi katika ripoti zako za hitilafu: "Gape kati ya nav na hero ni 47px, inapaswa kuwa 32px kulingana na spec ya usanifu." Thamani za bar ya maelezo zinaweza kunakiliwa moja kwa moja kwenye tiketi za Jira au masuala ya GitHub.

Ukaguzi wa Upangaji (Alignment)

Bofya vipengele viwili ambavyo vinapaswa kupangwa kwa usawa. Ikiwa umbali wa Y ni 0px, vimepangwa kikamilifu. Thamani yoyote ya Y isiyo sifuri inaonyesha kutokupangwa kwa wima — namba hiyo inakuambia ni pikseli ngapi imepishana.

Jinsi ya Kutumia
1

Washa Pima Umbali

Fungua kizimbani kinachoelea cha DevSuite Pro na ubofye ikoni ya Measure Distance. Kielekezi kinabadilika kuwa crosshair, kikionyesha kuwa unaweza kuchagua kipengele cha kwanza.

2

Bofya Kipengele cha Kwanza

Bofya kipengele chochote kwenye ukurasa. Kimeangaziwa kwa ukingo wa bluu na kuitwa "Kipengele A" kikiwa na vipimo vyake (upana × urefu katika pikseli).

3

Bofya Kipengele cha Pili

Bofya kipengele cha pili. Kimeangaziwa kwa ukingo wa kijani na kuitwa "Kipengele B." Mistari ya upimaji inaonekana mara moja ikiunganisha vipengele hivyo viwili.

4

Soma Umbali

Mistari mitatu ya upimaji inaonekana: usawa (X) katika rangi ya kahawia, wima (Y) katika nyekundu, na mlalo katika zambarau. Kila mstari una lebo inayonyesha umbali wa pikseli. Bar ya maelezo iliyo chini inajumuisha thamani zote.

5

Pima Tena au Zima

Bofya jozi nyingine ya vipengele ili kupima umbali mpya mara moja. Bofya ikoni ya Measure Distance kwenye kizimbani ili kuzima chombo ukimaliza.

Uko Tayari Kujaribu?

Sakinisha DevSuite Pro bila malipo na ufungue zana 64+ za wasanidi kwa kivinjari chako.

Ongeza kwenye Chrome Ongeza kwa Edge Ongeza kwenye FireFox