Ni 2026. Turimo gukora mugihe cyo gusimbuka tekinoloji idasanzwe, aho ibikoresho byateye imbere hamwe na AI byongerewe akazi byahinduye muburyo twashushanyije, kubaka, no guca icyuho hagati yabyo. Urubuga rugenda rwihuta kuruta ikindi gihe cyose, hamwe nibintu bitandukanya ibintu nibisanzwe bigaragara buri munsi. Nyamara, hagati yibi byihuta byihuta, hari ikintu kimwe twajyanye natwe kuva muminsi yambere yo gucapa, interuro yumva igenda idahuye nukuri kwacu kugezweho: "Pixel Itunganye."
Nzaba inyangamugayo, ntabwo ndi umufana. Mubyukuri, nizera ko igitekerezo cyuko dushobora kugira pigiseli-itunganijwe mubishushanyo byacu byahindutse kujijisha, bidasobanutse, kandi amaherezo bivuguruza uburyo twubaka kurubuga rwa kijyambere. Nkumuryango wabateza imbere nabashushanya, igihe kirageze ko dusuzumana ubwitonzi iki gitekerezo cyumurage, tukumva impamvu bitunanira, kandi tukongera gusobanura uko "gutungana" mubyukuri bisa mubikoresho byinshi, isi yuzuye amazi. Amateka Mugufi Yubwenge Bwuzuye Kugira ngo twumve impamvu benshi muritwe bagamije intego ya pigiseli itunganijwe uyumunsi, tugomba gusubiza amaso inyuma aho byose byatangiriye. Ntabwo byatangiriye kurubuga, ariko nkumuntu wacitse intege kuva igihe software yimiterere yatwemereye gukora igishushanyo mbonera cyacapwe kuri mudasobwa bwite, hamwe nigishushanyo cya GUI guhera mumpera za 1980 na 90. Mu nganda zandika, gutungana byari byuzuye. Igishushanyo kimaze koherezwa mubinyamakuru, buri kadomo ka wino kari gafite umwanya uhamye, udahinduka kurupapuro rwumubiri. Iyo abashushanya bahinduye kurubuga rwo hambere, bazanye iyi mitekerereze "page yanditse". Intego yari yoroshye: Urubuga rugomba kuba rwuzuye, pigiseli-ya-pigiseli ya kopi ya static mockup yakozwe mubishushanyo mbonera nka Photoshop na QuarkXPress.
Ndakuze bihagije kwibuka kwibuka nabashushanyaga impano bari barangije umwuga wabo wose mwisi yandika. Batanga ibishushanyo mbonera byurubuga kandi, babikuye ku mutima, bashimangira kuganira ku miterere ya santimetero na santimetero. Kuri bo, ecran yari ikindi gipapuro gusa, nubwo cyaka. Muri iyo minsi, "twahinduye" urubuga kugirango tubigereho. Twifashishije imbonerahamwe ishingiye kumeza, dushyira ibyiciro bitatu byimbitse, kandi turambuye 1 × 1 pigiseli “space GIFs” kugirango dukore icyuho cyuzuye. Twashizeho igisubizo kimwe, "gisanzwe" (mubisanzwe 800 × 600) kuko, icyo gihe, twashoboraga kwitwaza ko tuzi neza ibyo umukoresha abona.
Ibice Muri Fondasiyo Ikibazo cya mbere gikomeye ku mitekerereze ihamye y’ameza cyaje kuva mu 2000. Mu kiganiro cye cyiswe “A Dao of Web Design”, John Allsopp yavuze ko mu kugerageza guhatira urubuga imbogamizi z’icapiro, twabuze aho twifashisha. Yavuze ko gushakisha pigiseli-gutunganirwa ari "umuhango" wirengagije imiyoboro y'urubuga. Iyo uburyo bushya butira inguzanyo ihari, bimwe mubyo iguza birumvikana, ariko ibyinshi mu kuguza ntibitekerezwa, "umuhango," kandi akenshi bibuza uburyo bushya. Igihe kirenze, uburyo bushya buteza imbere amasezerano yabwo, guta amasezerano ariho adafite ishingiro.
Nubwo bimeze bityo, "pigiseli-itunganijwe" yanze gupfa. Mugihe ibisobanuro byayo byahindutse kandi bigahinduka mumyaka mirongo, ntabwo byasobanuwe neza. Benshi baragerageje, nko mumwaka wa 2010 mugihe ikigo cyashushanyaga ustwo cyasohoye igitabo cyitwa Pixel Perfect Precision (PPP) (PDF). Ariko muri uwo mwaka, Igishushanyo mbonera cyurubuga nacyo cyagize imbaraga nyinshi, cyica neza igitekerezo cyuko urubuga rushobora kuba rusa kuri buri ecran. Nyamara, hano turiho, turacyakoresha ijambo ryavutse ku mbibi za monitoreri zo muri 90 kugirango dusobanure intera igoye yo muri 2026.
Icyitonderwa: Mbere yo gukomeza, ni ngombwa kwemeza ibitemewe. Hano, birumvikana ko ibintu byerekana aho pigiseli idasobanutse neza. Agashushondanga, impapuro za spite, kwerekana canvas, moteri yimikino, cyangwa bitmap byohereza hanze akenshi bisaba neza, pigiseli-urwego rwo kugenzura gukora neza. Ibi, ariko, nibisabwa tekinike yihariye, ntabwo ari itegeko rusange kuriiterambere rya kijyambere UI.
Impamvu "Pixel Itunganye" Yananiwe Urubuga Rugezweho Muri iki gihe turimo, gutsimbarara ku gitekerezo cya "pigiseli itunganijwe" ntabwo ari ibintu bidasanzwe, byangiza cyane ibicuruzwa twubaka. Dore impamvu. Ntibisobanutse neza Reka duhere kubibazo byoroshye: Iyo uwashushanyije abajije ishyirwa mubikorwa rya "pigiseli-nziza", mubyukuri basaba iki? Nibara, umwanya, imyandikire, imipaka, guhuza, igicucu, imikoranire? Fata akanya ubitekerezeho. Niba igisubizo cyawe ari "byose", noneho umaze kumenya ikibazo nyamukuru. Ijambo "pigiseli-itunganye" irikubiyemo byose kuburyo idafite ubuhanga bwihariye bwa tekiniki. Nibisobanuro bitwikiriye guhisha kubura ibisabwa bisobanutse. Iyo tuvuze ngo "kora pigiseli itunganye," ntabwo tuba dutanze amabwiriza; turimo kwerekana ibyiyumvo. Ubuso bwinshi Igitekerezo cy "ubunini busanzwe bwa ecran" ubu ni ibisigisigi byahise. Turimo kubaka kubintu bitandukanye bitagira umupaka byo kureba, imyanzuro, hamwe na aspect-ratios, kandi uku kuri ntigushobora guhinduka mugihe gito. Byongeye kandi, urubuga ntirukigarukira ku kirahure kibase, cy'urukiramende; irashobora kuba kuri terefone igendanwa ihindura ibice bigereranijwe hagati, cyangwa kuri interineti igaragara mucyumba. Igikoresho cyose gihujwe na interineti gifite pigiseli yacyo, ibintu bipima, hamwe no gutanga ibisobanuro. Igishushanyo "cyuzuye" kumurongo umwe wa pigiseli, mubisobanuro, bidatunganye kurindi. Guharanira ikintu kimwe, gihamye "gutungana" birengagiza imiterere, ihuza imiterere y'urubuga rugezweho. Iyo canvas ihora ihindagurika, igitekerezo ubwacyo cyo gushyira mubikorwa pigiseli ihamye ihinduka tekiniki idashoboka.
Imiterere idasanzwe yibirimo Igicucu gihamye nigishushanyo cya leta imwe hamwe namakuru yihariye. Ariko ibirimo ntibisanzwe bihagaze nkibyo kwisi. Kwimenyekanisha ni urugero rwibanze: ikirango gihuye neza imbere ya buto igizwe nicyongereza gishobora kurenga kontineri mu kidage cyangwa igasaba imyandikire itandukanye rwose kururimi rwa CJK. Kurenga uburebure bwinyandiko, kwimenyekanisha bisobanura impinduka hamwe nibimenyetso byifaranga, imiterere yitariki, na sisitemu yumubare. Icyo ari cyo cyose muri ibyo bihinduka kirashobora guhindura cyane imiterere y'urupapuro. Niba igishushanyo cyubatswe kuba "pigiseli-itunganye" ishingiye kumurongo wihariye winyandiko, iba yoroshye. Imiterere ya pigiseli-yuzuye isenyuka rwose mugihe ibintu bihindutse.
Kugerwaho Nukuri Byuzuye Gutungana kwukuri bisobanura urubuga rukorera abantu bose. Niba imiterere itoroshye kuburyo ivunika mugihe umukoresha yongereye imyandikire yimyandikire cyangwa agahatira uburyo butandukanye cyane, ntabwo butunganye - buracitse. "Pixel itunganijwe" akenshi ishyira imbere ubwiza bwamashusho kurenza uburyo bwo gukora, bigatera inzitizi kubakoresha badahuje umwirondoro "usanzwe". Tekereza Sisitemu, Ntabwo ari Urupapuro Ntabwo twongeye kubaka impapuro; twubaka sisitemu yo gushushanya. Dushiraho ibice bigomba gukora mubwigunge hamwe nuburyo butandukanye, haba mumitwe, muruhande, cyangwa muri gride ya dinamike. Kugerageza guhuza ibice kuri pigiseli yihariye ihuza muri static mockup ni ikosa ryibicucu. Uburyo bwiza bwa "pigiseli-butunganye" bufata buri rugero nkurubura rwihariye rwa shelegi, arirwo rwirwanya ibintu binini, bishingiye ku bwubatsi. Ihatira abitezimbere guhitamo hagati yo gukurikira ishusho ihamye no gukomeza ubusugire bwa sisitemu. Gutungana ni umwenda wa tekiniki Iyo dushyize imbere ibishushanyo mbonera bifatika kuruta amajwi yubuhanga, ntabwo tuba duhisemo igishushanyo mbonera; dufite umwenda wa tekiniki. Kwirukana pigiseli yanyuma akenshi bihatira abitezimbere kurenga moteri yimiterere ya mushakisha. Gukorera mubice nyabyo biganisha kuri "numero yubumaji", izo margin-hejuru: 3px cyangwa ibumoso: -1px hack, zaminjagiye muri codebase kugirango uhatire ikintu mumwanya runaka kuri ecran runaka. Ibi birema imyubakire yoroheje, yoroheje, iganisha kumurongo utazigera urangira amatike ya "visual bug". / * "Pixel Itunganye" Hack * / Ikarita-Umutwe { margin-top: 13px; / * Ihuza mockup neza kuri 1440px * / margin-ibumoso: -2px; / * Guhindura neza kumyandikire yihariye * / } / * "Igishushanyo mbonera" Igisubizo * / Ikarita-Umutwe { margin-top: var (- umwanya-m); / * Igice cyurwego ruhoraho * / guhuza-kwigira: gutangira; / * Guhuza byumvikana * / }
Mugutsimbarara kuri pigiseli-itunganijwe, twubaka urufatiro rugoye gukora, kugorana, kandi amaherezo, bihenze kubungabunga. Twebweufite uburyo bworoshye bwo kubara ingano muri CSS, dukesha ibice bifitanye isano. Kwimuka Kuva kuri Pixel Kuri Intego Kugeza ubu, namaze igihe kinini mvuga kubyo tutagomba gukora. Ariko reka tubyumve neza: Kwimuka ukava kuri "pigiseli itunganijwe" ntabwo ari urwitwazo rwo gushyira mubikorwa nabi cyangwa imyifatire "yegeranye bihagije". Turacyakeneye guhuzagurika, turacyashaka ko ibicuruzwa byacu bisa kandi byunvikana neza, kandi turacyakeneye uburyo busangiwe kugirango tubigereho. Noneho, niba "pigiseli itunganijwe" itakiri intego ifatika, twakagombye guharanira iki? Igisubizo, ndizera ko kiri muburyo bwo guhindura ibitekerezo byacu kuva kuri pigiseli kugiti cyacu. Mwisi yisi yuzuye, gutungana ntabwo bijyanye no guhuza ishusho ihamye, ahubwo ni ukwemeza ko logique yibanze hamwe nuburinganire bwibishushanyo mbonera byabitswe mubihe byose bishoboka. Gushushanya Intego Kurenga Indangagaciro Aho gusaba margin: 24px mugushushanya, twakagombye kubaza: Kuki iyi margin iri hano? Nugukora itandukaniro rigaragara hagati yibice? Nibice bigize intera ihamye? Iyo dusobanukiwe intego, turashobora kubishyira mubikorwa dukoresheje ibice byamazi nibikorwa (nka rem na clamp (),) hanyuma tugakoresha ibikoresho bigezweho, nka CSS Container Queries, ituma igishushanyo gihumeka kandi kigahinduka mugihe tukumva "neza".
/ * Intego: Umutwe ufite umunzani neza hamwe no kureba * / h1 { ingano yimyandikire: clamp (2rem, 5vw + 1rem, 4rem); } / * Intego: Hindura imiterere ukurikije ubugari bwibigize, ntabwo ari ecran * / Ikarita-Ikarita { ubwoko bwa kontineri: inline-size; } @ububiko (min-ubugari: 400px) { Ikarita { kwerekana: grid; grid-template-inkingi: 1fr 2fr; } }
Kuvuga muri Tokens Ibishushanyo mbonera ni ikiraro kiri hagati yubushakashatsi na kode. Iyo umushushanya nuwitezimbere bumvikanye kukimenyetso nka --umwanya-munini aho kuba 32px, ntabwo bahuza indangagaciro gusa, ahubwo bahuza logique. Ibi byemeza ko niyo agaciro kibanze gahinduka kugirango habeho imiterere yihariye, isano iri hagati yibintu ikomeza kuba nziza. : umuzi { / * Ubwenge bwasobanuwe rimwe * / --ibara-ibanze: # 007bff; - Umwanya-Umwanya: 8px; --umwanya-munini: kubara (var (- intera-unit) * 4); }
/ * Kandi yongeye gukoreshwa ahantu hose * / .button { inyuma-ibara: var (- ibara-ibanze); padi: var (- intera-nini); }
Amazi Nka Ikiranga, Ntabwo ari Bug Tugomba guhagarika kureba imiterere yurubuga nkikintu cyo gutozwa no gutangira kubona ibyo guhinduka nkimbaraga zayo zikomeye. Ishyirwa mu bikorwa "ritunganye" nimwe risa nkana kuri 320px, 1280px, ndetse no mubidukikije bya 3D. Ibi bivuze kwakira igishushanyo mbonera cyurubuga rushingiye ku bunini bwa kamere muburyo ubwo aribwo bwose - no gukoresha ibikoresho bya CSS bigezweho kugirango ukore imiterere "izi" uburyo bwo kwitegura ukurikije umwanya uhari. Urupfu Kuri "Ihererekanyabubasha" Muri iyi si itwarwa nubushake, "ihererekanyabubasha" ry'umutungo gakondo wahindutse ikindi gisigisigi cyahise. Ntabwo twongeye kunyuza dosiye ya Photoshop ihagaze kurukuta rwa digitale kandi twizeye ibyiza. Ahubwo, dukora muri sisitemu yo gushushanya. Ibikoresho bigezweho byemerera abashushanya kwerekana imyitwarire, ntabwo ari imyanya gusa. Iyo umushushanya asobanura ibice, ntabwo bashushanya agasanduku gusa; barimo gusobanura imbogamizi zayo, umunzani wamazi, nubusabane bwibirimo. Nkabateza imbere, akazi kacu nugushira mubikorwa iyo logique. Ikiganiro cyavuye kuri "Kuki iyi pigiseli eshatu yazimye?" kuri “Iki gice gikwiye kwitwara gute mugihe kontineri igabanutse?” na “Bigenda bite ku nzego iyo inyandiko ihinduwe mu rurimi rurerure?” Ururimi rwiza, ibisubizo byiza Tuvuze ibiganiro, iyo tugamije "pigiseli itunganijwe", twishyiriyeho guterana amagambo. Amakipe akuze yimutse kera iyi mitekerereze ya "guhuza-cyangwa-gutsindwa" yerekeza kumagambo asobanura neza agaragaza akazi kacu. Mugusimbuza "pigiseli itunganye" hamwe namagambo asobanutse neza, dushiraho ibyateganijwe kandi dukuraho impaka zidafite ishingiro. Dore interuro nke zankoreye neza kubiganiro bitanga umusaruro kubijyanye nintego no gutembera:
"Biboneka neza na sisitemu yo gushushanya." Aho guhuza mockup runaka, turemeza ko ishyirwa mubikorwa rikurikiza amategeko yashyizweho ya sisitemu. "Guhuza intera nubuyobozi." Twibanze ku mibanire nigitekerezo hagati yibintu aho guhuza byimazeyo. "Irinda ibipimo no guhuza ibitekerezo." Turemeza ko intego yimiterere ikomeza kuba ntamakemwa, nubwo ariumunzani no guhinduranya. "Impinduka zemewe kurubuga rwa interineti." Turemera ko urubuga ruzaba rutandukanye, muburyo bwasobanuwe kandi bwumvikanyweho muburyo butandukanye, kandi nibyiza mugihe uburambe bukomeje kuba bwiza.
Ururimi rutanga ukuri. Imvugo isobanutse ntabwo itezimbere kode gusa, ahubwo isano iri hagati yabashushanya nabateza imbere. Iradusunikira kugana nyirubwite ibicuruzwa byanyuma, bizima. Iyo tuvuga ururimi rumwe, "gutungana" bireka kuba icyifuzo hanyuma tugatangira kuba ibyagezweho mubufatanye. Icyitonderwa Kuri Igishushanyo Cyanjye Iyo utanze igishushanyo, ntuduhe ubugari buhamye, ahubwo ni amategeko. Tubwire ibigomba kuramburwa, ibigomba kuguma bihamye, nibigomba kubaho mugihe byanze bikunze ibirimo byuzuye. "Gutungana" kwawe biri muri logique usobanura, ntabwo pigiseli ushushanya.
Ibipimo bishya by'indashyikirwa Urubuga ntirwigeze rugenewe kuba ububiko bwa static ya pigiseli yahagaritswe. Yavutse kuba akajagari, amazi, kandi bihebuje uburyo butateganijwe. Iyo twiziritse kuri moderi ishaje ya "pigiseli itunganijwe", tuba tugerageza gushira akajagari kuri serwakira. Ntibisanzwe mumiterere yimbere yimbere. Muri 2026, dufite ibikoresho byo kubaka intera itekereza, ihuza, kandi ihumeka. Dufite AI ishobora kubyara imiterere mumasegonda hamwe nintera yimiterere irwanya igitekerezo cya "ecran". Muri iyi si, gutungana ntabwo ari umuhuzabikorwa uhamye ahubwo ni amasezerano; ni isezerano ko uko umuntu yaba areba, cyangwa icyo bareba, roho yubushakashatsi ikomeza kuba ntamakemwa. Noneho, reka duhambe ijambo rimwe na rimwe. Reka dusige santimetero kububatsi na spacer INGABIRE mungoro ndangamurage. Niba ushaka ikintu gisa neza mumyaka ijana iri imbere, kibaze mumabuye cyangwa ucyandike kumakarita meza. Ariko niba ushaka kubaka kurubuga, emera akajagari. Hagarika kubara pigiseli. Tangira kubaka intego.
