|
|
|
Cracks In The Foundation
Dambudziko guru rekutanga kune yakagadziriswa-tafura yepfungwa yakauya kare muna 2000. Muchinyorwa chake chesemina, "A Dao yeWeb Design", John Allsopp akapikisa kuti nekuedza kumanikidzira webhu muzvipingamupinyi zvekudhinda, isu takanga tichishaya pfungwa yepakati zvachose. Akadana kuda kwepixel-kukwana "tsika" iyo yaifuratira kuyerera kwewebhu.
Kana svikiro idzva richikwereta kubva kune iripo, zvimwe zvezvainokwereta zvine musoro, asi kukwereta kwakawanda hakuna kufunga, “tsika,” uye kazhinji kunomanikidza nzira itsva. Nokufamba kwenguva, svikiro idzva rinogadzira zvibvumirano zvaro, richirasa zvibvumirano zviripo izvo zvisina musoro.
Zvakadaro, iyo "pixel-kukwana" yakaramba kufa. Nepo zvarinoreva zvachinja uye morphed kwemakumi emakore, hazvina kumbonyatsotsanangurwa. Vazhinji vakaedza, senge muna 2010 apo dhizaini yekugadzira ustwo yakaburitsa iyo Pixel Perfect Precision (PPP) (PDF) bhuku rekushandisa. Asi gore rimwe chetero, Inopindura Webhu Dhizaini yakawanawo simba guru, ichiuraya zvinobudirira pfungwa yekuti webhusaiti inogona kutaridzika zvakafanana pachiratidziro chega chega.
Asi, isu tiri pano, tichiri kushandisa izwi rakazvarwa kubva pamiganho yevatariri venguva ye'90s kutsanangura yakaoma interfaces ye2026.
Cherechedza: Tisati taenderera mberi, zvakakosha kuti tibvume zvasara. Kune, hongu, mamiriro ezvinhu apo pixel chaiyo isingagone kutaurirana. Icon grids, sprite sheets, canvas rendering, injini dzemitambo, kana bitmap kutumira kunze kwenyika kazhinji zvinoda chaiyo, pixel-level control kuti ishande nemazvo. Izvi, zvisineyi, zvinodiwa zvehunyanzvi, kwete mutemo wakajairwa wekuvandudzwa kweUI yemazuva ano.
Nei "Pixel Yakakwana" Iri Kutadza iyo Yemazuvano Webhu
Munzvimbo yedu yemazuva ano, kuomerera kune pfungwa ye "pixel kukwana" haisi kungofanana neanachronistic, inoshingaira kukuvadza kune zvigadzirwa zvatinovaka. Heino chikonzero.
Hazvina Kujeka Zvikuru
Ngatitangei nemubvunzo wakapfava: Kana mugadziri akakumbira "pixel-yakakwana" kuita, chii chavari kukumbira? Iwo mavara, kutaramuka, manyorero, miganhu, kurongeka, mimvuri, kudyidzana? Tora nguva yekufunga nezvazvo.
Kana mhinduro yako iri "zvese", saka iwe uchangobva kuona iyo yakakosha nyaya.
Izwi rekuti "pixel-yakakwana" yakazara-zvese zvekuti inoshaya chero chaiyo tekinoroji chaiyo. Icho chirevo chegumbeze chinovhara kushaikwa kwezvinodiwa zvakajeka. Kana tichiti "ita kuti ive pixel yakakwana," hatisi kupa rairo; tiri kuratidza kunzwa.
Iyo Multi-Surface Chokwadi
Pfungwa ye "standard screen size" yave chisaririra chekare. Isu tiri kuvaka kune dzinenge dzisingaperi dzakasiyana dzekutarisa, zvigadziriso, uye chimiro-chiyero, uye chokwadi ichi hachigone kuchinja chero nguva munguva pfupi. Uyezve, dandemutande harisati richiri kuganhurirwa kugirazi rakati sandara, rectangular; inogona kunge iri pafoni inopeteka inoshandura mareshiyo epakati pesesheni, kana pane spatial interface inoratidzwa mukamuri.
Yese yakabatana neInternet mudziyo ine yayo pixel density, kuyera zvinhu, uye kupa quirks.
Dhizaini "yakakwana" pane imwe seti yepixels, netsanangudzo, haina kukwana pane imwe. Kuvavarira imwe chete, yakamira "kukwana" inofuratira kuyerera, kuchinjika kwewebhu yemazuva ano. Kana iyo canvas ichigara ichichinja, iyo iyo pfungwa yekumisikidzwa kwepixel kuita inova tekinoroji isingagoneke.
Iyo Dynamic Mamiriro Ezvirimo
A static mockup chifananidzo chenyika imwe chete ine yakatarwa seti yedata. Asi zvirimo hazviwanzo mira zvakadai munyika chaiyo. Localization muenzaniso wakanaka: label inonyatsokwana mukati mebhatani chikamu muChirungu inogona kufashukira mugaba muchiGerman kana kuda imwe font yemitauro yeCJK.
Kupfuura kureba kwemavara, kugarisana kunoreva shanduko nezviratidzo zvemari, mafomati emazuva, uye masisitimu enhamba. Chero yeaya akasiyana anogona kukanganisa zvakanyanya kurongeka kwepeji. Kana dhizaini yakavakirwa kuita "pixel-yakakwana" zvichibva pane yakatarwa tambo yemavara, inongogara isina kusimba. Iyo pixel-yakakwana dhizaini inopunzika zvachose iyo nguva yemukati inochinja.
Kusvikika Ndiko Kukwana Kwechokwadi
Kukwana kwechokwadi kunoreva saiti inoshanda kumunhu wese. Kana dhizaini yakaoma zvekuti inotyoka kana mushandisi akawedzera saizi yavo yefonti kana kumanikidza yakakwira-musiyano modhi, haina kukwana - yakatyoka. "Pixel yakakwana" inowanzoisa pamberi pekuona aesthetics pamusoro pekuwanikwa kwekushanda, kugadzira zvipingamupinyi zvevashandisi vasingaenderane ne "standard" profile.
Funga Systems, Kwete Mapeji
Hatichagadziri mapeji; isu tinovaka masisitimu ekugadzira. Isu tinogadzira zvikamu zvinofanirwa kushanda zvakazvimiririra uye zvakasiyana-siyana, mungave mumusoro, mumapadivi, kana mune dynamic grid. Kuedza kuenzanisa chikamu kune chaiyo pixel kurongeka mune static mockup ibasa rebenzi.
Yakachena "pixel-yakakwana" maitiro anobata chiitiko chega chega sechando chakasiyana, inova fungidziro yezvivakwa, chikamu-chakavakirwa. Inomanikidza vanogadzira kuti vasarudze pakati pekutevera static mufananidzo uye kuchengetedza kutendeseka kwehurongwa.
Kukwana Chikwereti cheTechnical
Kana isu tikaisa pamberi chaiyo yekuona inofananidzwa pane inonzwika engineering, isu hatisi kungoita sarudzo yekugadzira; isu tiri kuita chikwereti chehunyanzvi. Kudzingirira iyo pixel yekupedzisira kunowanzo manikidza vanogadzira kuti vapfuure nebrowser yakasikwa dhizaini injini.
Kushanda mumayuniti chaiwo kunotungamira ku "nhamba dzemashiripiti", idzo dzinopokana-kumusoro-yepamusoro: 3px kana kuruboshwe: -1px hacks, yakasaswa mukati meiyo codebase kumanikidza chinhu kuti chiite chimwe chinzvimbo pane chaiyo skrini. Izvi zvinogadzira isina kusimba, brittle architecture, inotungamira kusinga peri kutenderera kwematikiti e "visual bug".
/* Iyo "Pixel Yakakwana" Hack */
.card-title {
margin-pamusoro: 13px; /* Inofananidza mockup chaizvo pa1440px */
kumucheto-kuruboshwe: -2px; /* Optical kugadzirisa kune chaiyo font */
}
/* Iyo "Design Chinangwa" Solution */
.card-title {
margin-top: var(--space-m); /* Chikamu chechiyero chinopindirana */
align-self: kutanga; /* Kurongeka kunonzwisisika */
}
Nekusimbirira papixel-kukwana, tiri kuvaka hwaro hwakaoma kuita otomatiki, yakaoma kugadzirisa, uye pakupedzisira, inodhura kuchengetedza. Isuiva neakawanda anochinjika nzira dzekuverenga saizi muCSS, nekuda kwehama mayunitsi.
Kufamba kubva kuPixels kuenda kune Chinangwa
Kusvika ikozvino, ndapedza nguva yakawanda ndichitaura pamusoro pezvatisingafaniri kuita. Asi ngativei pachena: Kuenda kure ne "pixel kukwana" haisi chikonzero chekuita zvisina musoro kana "pedyo zvakakwana" maitiro. Tichiri kuda kuwirirana, tichiri kuda kuti zvigadzirwa zvedu zvitaridzike uye zvinzwe zvemhando yepamusoro, uye tichiri kuda nzira yakagovaniswa kuti tiite izvozvo.
Saka, kana "pixel kukwana" chisisiri chinangwa chinogoneka, chii chatinofanira kunge tichivavarira?
Mhinduro, ndinotenda, iri mukushandura tarisiro yedu kubva kumapikisi ega ega kuenda kuchinangwa chekugadzira. Munyika ine mvura, kukwana hakusi kwekufananidza mufananidzo wakamira, asi kuve nechokwadi chekuti pfungwa yepakati uye kutendeseka kwekuona kwedhizaini kunochengetedzwa pane zvese zvinogoneka.
Dhizaini Chinangwa Pamusoro peStatic Values
Panzvimbo pekukumbira margin: 24px mudhizaini, isu tinofanirwa kunge tichibvunza: Nei iyi margin iri pano? Iko kugadzira kupatsanurwa kwekuona pakati pezvikamu? Icho chikamu chechiyero chinowirirana chepakati here? Kana tanzwisisa chinangwa, tinogona kuishandisa tichishandisa mayunitsi emvura uye mabasa (senge rem uye clamp (), zvichiteerana) uye toshandisa maturusi epamberi, senge CSS Container Queries, inobvumira dhizaini kufema uye kujairana ichiri kunzwa "chakanaka".
/* Chinangwa: Musoro unoyera zvakanaka nekutarisa */
h1 {
font-saizi: clamp (2rem, 5vw + 1rem, 4rem);
}
/* Chinangwa: Shandura marongero zvichienderana nehupamhi hwechikamu, kwete skrini */
.card-container {
mudziyo-mhando: inline-saizi;
}
@container (min-width: 400px) {
.kadhi {
kuratidza: grid;
grid-template-columns: 1fr 2fr;
}
}
Kutaura Nezviratidzo
Dhizaini tokeni ibhiriji pakati pedhizaini uye kodhi. Kana mugadziri uye mugadziri anobvumirana pachiratidzo senge --spacing-guru pachinzvimbo che32px, havasi kungoyananisa hunhu, asi panzvimbo pekufananidza pfungwa. Izvi zvinovimbisa kuti kunyangwe kana kukosha kwepasi kuchichinja kuti kugadzirise imwe mamiriro, hukama pakati pezvinhu hunoramba hwakakwana.
:mudzi {
/* Iyo logic inotsanangurwa kamwe chete */
--ruvara-primary: #007bff;
--spacing-unit: 8px;
--spacing-guru: calc(var(--spacing-unit) * 4);
}
/* Uye inoshandiswazve kwese kwese */
.bhatani {
kumashure-ruvara: var (--color-primary);
padding: var(--spacing-large);
}
Fluidity Sechinhu, Kwete Bug
Isu tinofanirwa kumira kuona kuchinjika kwewebhu sechinhu chinodzorwa totanga kuona kuchinjika uku sesimba rayo guru. Kuitwa "kwakakwana" ndekunotaridzika nemaune pa320px, 1280px, uye kunyangwe munzvimbo ye 3D. Izvi zvinoreva kugamuchira mukati mewebhu dhizaini yakavakirwa pakukura kwechinhu mune chero mamiriro ezvinhu - uye kushandisa maturusi emazuva ano eCSS kugadzira marongero "anoziva" maitiro ekuzvironga zvichienderana nenzvimbo iripo.
Rufu kune "Handover"
Munyika ino inotungamirwa nevavariro, "kupa" kwechinyakare dhizaini midziyo yave imwe chisaririra chekare. Isu hatichapfuure static Photoshop mafaera pamadziro edhijitari uye tariro yezvakanakisa. Pane kudaro, isu tinoshanda mukati mehupenyu hwekugadzira masisitimu.
Mazuva ano zvishandiso zvinobvumira vagadziri kuti vataure maitiro, kwete zvinzvimbo chete. Kana mugadziri anotsanangura chikamu, havasi kungodhirowa bhokisi; ivo vari kutsanangura zvinoimisa, zvikero zvemvura, uye hukama hwayo kune zviri mukati. Sevagadziri, basa redu nderekushandisa pfungwa iyoyo.
Hurukuro yabva pa "Sei mapixels matatu aya adzimwa?" ku "Chikamu ichi chinofanira kuita sei kana chigadziko chadzikira?" uye “Chii chinoitika kuvakuru vakuru kana zvinyorwa zvichishandurirwa kumutauro wakareba?”
Mutauro uri Nani, Zvirinani Migumisiro
Kutaura nezvenhaurirano, patinovavarira "pixel perfection", tinozvigadzirira kurwisana. Zvikwata zvakakura zvakagara zvichipfuura ichi chebinary "match-or-fail" mindset kuenda kune rimwe duramazwi rinotsanangura rinoratidza kuoma kwebasa redu.
Nekutsiva "pixel yakakwana" nemashoko akanyatsojeka, tinogadzira tarisiro yevamwe uye kubvisa nharo dzisina maturo. Heano mitsara mishoma yakandishandira zvakanaka panhaurirano dzine pundutso maererano nechinangwa uye kunyorova:
"Inooneka inopindirana nehurongwa hwekugadzira." Panzvimbo pekufananidza imwe mockup, isu tinoona kuti kuita kunotevera mitemo yakamiswa yehurongwa hwedu.
"Machisi nzvimbo uye hierarchy." Isu tinotarisisa hukama uye mutinhimira pakati pezvinhu kwete kurongeka kwazvo.
"Inochengetedza zviyero uye kurongeka kwemaitiro." Isu tinoona kuti chinangwa chechimiro chinoramba chakasimba, kunyangwe sezvachiri.zvikero nemashifiti.
"Musiyano unogamuchirika pamapuratifomu." Isu tinobvuma kuti saiti ichataridzika zvakasiyana, mukati meyakatsanangurwa uye yakabvumiranwa-pamusoro pemhando yekusiyana, uye izvo zvakanaka chero bedzi chiitiko chinoramba chiri chemhando yepamusoro.
Mutauro unogadzira chokwadi. Mutauro wakajeka hausi kungovandudza kodhi, asi hukama pakati pevagadziri nevagadziri. Zvinotiendesa kuhudyire hwakagovaniswa hwechigadzirwa chekupedzisira, chipenyu. Kana tichitaura mutauro mumwechete, "kukwana" kunomira kudiwa uye kunotanga kuve kubudirira kwekubatana.
Chiziviso kune Vangu Dhizaini Vandinoshanda navo
Paunopa dhizaini, usatipa hupamhi hwakagadziriswa, asi seti yemitemo. Tiudze chii chinofanira kutambanudza, chii chinofanira kugara chakatsiga, uye chii chinofanira kuitika kana zvirimo zvanyanya kufashukira. "Kukwana" kwako kunogara mune logic yaunotsanangura, kwete mapixels aunodhirowa.
The New Standard Of Excellence
Dandemutande harina kumborongedzerwa kuve static gallery yemapikisi akaomeswa nechando. Yakazvarwa kuti ive yakasviba, mvura, uye inobwinya isingafungidzike svikiro. Patinonamatira kumuenzaniso wekare we "pixel perfection", isu tiri kuedza zvinobudirira kuisa tambo pane dutu. Hazvisi zvechisikigo munharaunda yemazuva ano yekumberi.
Muna 2026, isu tine maturusi ekuvaka nzvimbo dzinofunga, kugadzirisa, uye kufema. Isu tine AI inogona kugadzira marongero mumasekonzi uye nzvimbo dzepakati dzinoshora iyo chaiyo pfungwa ye "skrini". Munyika ino, kukwana hakusi kurongeka kwakarongwa asi chivimbiso; ivimbiso yekuti pasinei nokuti ndiani ari kutarisa, kana kuti chii chavari kutarisa, mweya wekugadzira unoramba wakasimba.
Saka, ngativigei izwi kamwe chete uye zvachose. Ngatisiyei masendimita kune vagadziri uye spacer maGIF kumamyuziyamu edhijitari. Kana iwe uchida kuti chimwe chinhu chitaridzike zvakafanana kwemakore zana anotevera, chiveve mumatombo kana kudhinda pamakadhi emhando yepamusoro. Asi kana iwe uchida kuvakira webhu, gamuchira mhirizhonga.
Rega kuverenga pixels. Tanga kuvaka chinangwa.
Enjoyed This Article?
Get weekly tips on growing your audience and monetizing your content — straight to your inbox.
No spam. Join 138,000+ creators. Unsubscribe anytime.
