Ko te tau 2026. Kei te mahi matou i roto i te waa o nga mahi hangarau whakamiharo, i reira ko nga taputapu matatau me nga rerenga mahi kua whakareihia e te AI kua whakarereke i te ahua o to maatau hoahoa, hanga, me te whakawhiti i te waahi i waenga i nga mea e rua. Kei te tere haere te paetukutuku, me nga ahuatanga hou me nga paerewa ka puta tata ia ra. Heoi, i waenganui o tenei whanaketanga tere-tere, kotahi ano te mea e mauria ana e matou mai i nga ra o mua o te tuhinga, he rerenga korero kua kore e rite ki o taatau ao hou: "Pixel Perfect."
Ka pono ahau, ehara ahau i te kaiwhaiwhai. Otirā, e whakapono ana ahau ka taea e tatou te whai pika-tino pai i roto i a tatou hoahoa kua pohehe, kua pohehe, a, i te mutunga ka kore e whai hua ki te hanga mo te paetukutuku hou. I te mea he hapori kaiwhakawhanake me nga kaihoahoa, kua tae ki te wa kia ata titiro tatou ki tenei ariā tuku iho, kia mohio he aha i kore ai tatou, me te tautuhi ano he aha te ahua o te "tino pai" i roto i te taputapu maha, te ao wai. He korero poto mo te whakaaro maataki Kia mohio ai he aha te nuinga o tatou e whai tonu ana mo te tino pika i tenei ra, me titiro whakamuri ki te waahi i timata ai. Kaore i timata i runga i te ipurangi, engari i te mea he waahi mai i te wa i tukuna tuatahi ai e te rorohiko whakatakotoranga ki te hoahoa mo te taa ki runga rorohiko whaiaro, me te hoahoa GUI mai i te mutunga o te 1980s me te '90s. I roto i te ahumahi tā, he tino tika. Kia tukuna he hoahoa ki te perehi, ka mau tonu te waahi o ia ira mangumangu, kaore e taea te huri i runga i te wharangi tinana. I te wa i whakawhiti ai nga kaihoahoa ki te paetukutuku tuatahi, i mauria mai e ratou tenei whakaaro "wharangi kua taia". He ngawari noa te whainga: Ko te paetukutuku he tauira tika, pika-mo-pixel o te tawai pateko i hangaia i roto i nga tono hoahoa penei i te Photoshop me te QuarkXPress.
Kua pakeke ahau ki te mahara ki te mahi tahi me nga kaihoahoa mohio kua whakapau katoa o raatau mahi ki te ao ta. Ka tukuna e ratou nga hoahoa paetukutuku, me te ngakau pono, ka tohe ki te matapaki mo te whakatakotoranga i roto i te henimita me te inihi. Ki a ratou, he pepa noa te mata, ahakoa he kanapa. I aua ra, i “whakararata” matou i te tukutuku kia tutuki ai tenei. I whakamahia e matou nga whakatakotoranga i runga i te tepu, e toru nga taumata hohonu, ka horahia te 1x1 pika "gif mokowhiti" ki te hanga i nga waahi tika. I hangaia e matou mo te whakataunga "paerewa" kotahi (te nuinga o te 800x600) na te mea, i tera wa, ka taea e matou te kii kei te mohio matou ki ta te kaiwhakamahi e kite ana.
|
|
Nga Kapiti I Te Turanga Ko te wero nui tuatahi ki te hinengaro tepu-pumau i tae mai i te timatanga o te tau 2000. I roto i tana tuhinga seminal, "A Dao of Web Design", i tohe a John Allsopp na te ngana ki te akiaki i te paetukutuku ki roto i nga here o te tuhinga, kua ngaro katoa te tohu o te reo. I kii ia ko te rapu mo te tino-pika he "tikanga" kaore i aro ki te rere o te paetukutuku. Ki te nama mai tetahi kaupapa hou mai i tetahi o naianei, ka whai tikanga etahi o ana nama, engari ko te nuinga o te nama he kore whakaaro, he "tikanga," he maha nga wa e raru ai te kaupapa hou. I te wa o te wa, ka hangaia e te kaupapa hou ana ake tikanga, ka maka atu i nga tikanga o mua kaore e whai tikanga.
Heoi, ko te "pixel-perfection" i pai ki te mate. Ahakoa kua huri, kua huri haere te tikanga i roto i nga tekau tau, he iti noa te whakamaramatanga. He maha nga mea kua whakamatau, penei i te tau 2010 i te wa i tukuna ai e te umanga hoahoa ustww te pukapuka arata'i Pixel Perfect Precision (PPP) (PDF). Engari i taua tau ano, i kaha te kaha o te Hoahoa Tukutuku Whakahoki, ka mate te whakaaro ka rite te ahua o te paetukutuku ki ia mata. Heoi, kei konei matou, kei te whakamahi tonu i tetahi kupu i whanau mai i nga herenga o nga kaitirotiro i tuhia ki te 90s hei whakaahua i nga hononga uaua o 2026.
Tuhipoka: I mua i te haere tonu, he mea nui ki te whakaae ki nga tuunga. He pono, he ahuatanga kaore e taea te whiriwhiringa te tika o te pika. Ko nga matiti ata, nga pepa sprite, te whakaahua canvas, nga miihini keemu, te kaweake maheremoka ranei e hiahia ana kia tika te whakahaere taumata-pika. Heoi, he whakaritenga hangarau motuhake enei, ehara i te ture whanui mowhanaketanga UI hou.
He aha te "Pixel Perfect" Kei te Rahua te Tukutuku Hou I roto i to maatau whenua o naianei, ko te piri ki te whakaaro o te "pixel perfection" ehara i te mea anachronistic anake, he tino kino ki nga hua ka hangaia e tatou. Anei te take. Ko te Tino Korekau Me timata ma te patai ngawari: Ka tono tetahi kaihoahoa mo te whakatinanatanga "pixel-perfect", he aha ta ratou e tono? Ko nga tae, ko te mokowhiti, ko te momotuhi, ko nga taitapa, ko te tirohanga, ko nga atarangi, ko nga taunekeneke? Tangohia he wa poto ki te whakaaro. Mena ko to whakautu ko "nga mea katoa", katahi ano ka tautuhia e koe te take matua. Ko te kupu "pixel-perfect" he tino kapi katoa na te mea karekau he tino hangarau. He korero paraikete e huna ana i te kore o nga whakaritenga marama. Ka kii ana matou "kia tino tika te pika," kaore matou e tuku tohutohu; e whakapuaki ana matou i te ahua. Te Tuturu Mata-maha Ko te ariā o te "rahi mata paerewa" he taonga o mua. Kei te hanga matou mo nga momo tirohanga, whakatau, me nga waahanga-a-waha, karekau pea tenei mooni e huri wawe. I tua atu, kua kore e herea te tukutuku ki te karaehe papatahi, tapawha; ka taea i runga i te waea takai e huri ana i nga ahuatanga owehenga i waenganui-waahanga, i runga ranei i te atanga mokowhiti kua tohua ki roto i tetahi ruma. Kei ia taputapu hono-Ipurangi tona ake kiato pika, tauine tauine, me nga mahi hangai. Ko te hoahoa e "tino tika" i runga i tetahi huinga pika he, ma te whakamaramatanga, kaore i tino tika ki tetahi atu. Ko te ngana ki te "tino pai" kotahi, ka warewarehia te wai, te ahua urutau o te paetukutuku hou. I te wa e huri haere tonu ana te konae, ko te tino whakaaro mo te whakatinanatanga pika ka waiho hei kore hangarau.
Te Ahua Hiriko o te Ihirangi Ko te tawai pateko he whakaahua o te ahua kotahi me te huinga raraunga motuhake. Engari he iti noa te ahua o nga ihirangi i roto i te ao tuuturu. Ko te waahitanga he tauira tino nui: ko te tapanga e uru pai ana ki roto i tetahi waahanga paatene i te reo Ingarihi ka kapi te ipu ki te reo Tiamana, ka hiahia ranei he momotuhi rereke mo nga reo CJK. I tua atu i te roa o te kupu, ko te tikanga o te rohenga ko nga huringa me nga tohu moni, whakahōputu ra, me nga punaha tau. Ko tetahi o enei taurangi ka tino pa ki te whakatakotoranga whaarangi. Mena ka hangaia he hoahoa kia "pixel-tino pai" i runga i te aho motuhake o te kuputuhi, he ngoikore noa iho. Ko te tahora pika-tino ka tiango i te wa e huri ai nga ihirangi.
Ko te Whakaaetanga Ko te Tino Tino Ko te tino tika ko te pae e mahi ana mo te katoa. Mēnā he mārō rawa te whakatakotoranga ka pakaru ina whakanuia e te kaiwhakamahi te rahi momotuhi, ka kaha ranei te aratau rereke-nui, kaore i te tino tika — kua pakaru. Ko te "Pixel tino tika" ka aro nui ki nga mahi aahua i runga i te urunga mahi, ka hanga he arai mo nga kaiwhakamahi kaore e tau ki te tohu "paerewa". Whakaarohia nga punaha, ehara i nga wharangi Kaore matou e hanga wharangi; hanga matou pūnaha hoahoa. Ka waihangahia e matou nga waahanga me mahi mokemoke me te maha o nga horopaki, ahakoa i roto i nga pane, i nga paetaha, i nga matiti hihiri ranei. Ko te ngana ki te whakataurite i tetahi waahanga ki tetahi pika pika motuhake i roto i te whakahianga pateko he mahi poauau. Ko te huarahi parakore "pixel-tino" ka whakatau i nga tauira katoa hei hiona ahurei, koinei te whakateka o te hoahoanga whakahiato, i runga i te waahanga. Ka akiakihia nga kaiwhakawhanake ki te whiriwhiri i waenga i te whai i te ahua tuuturu me te pupuri i te pono o te punaha. Ko te Tino Tika he Nama Hangarau Ka whakatauhia e maatau te whakahoatanga tirohanga tika i runga i te miihini oro, ehara i te mea ko taatau te whiriwhiri hoahoa; kei te whiwhi nama hangarau tatou. Ko te whai i tera pika whakamutunga ka kaha nga kaiwhakawhanake ki te karo i te miihini tahora taiao o te kaitirotiro. Ko te mahi i roto i nga waeine tika ka arahi ki nga "tau makutu", ko enei tawhē-runga: 3px maui ranei: -1px hacks, ka tauhiuhia puta noa i te turanga waehere hei akiaki i tetahi huānga ki tetahi waahi motuhake i runga i te mata motuhake. Na tenei ka hanga he hangahanga pakarukaru, he pakarukaru, e arai atu ana ki te huringa kore mutunga o nga tikiti "kite kite". /* Ko te "Pixel Perfect" Hack */ .kāri-taitara { tawhē-runga: 13px; /* He rite tonu ki te mockup i runga i te 1440px */ tawhē-mauī: -2px; /* Whakatikatika whatu mo te momotuhi motuhake */ } /* Ko te "Koronga Hoahoa" Rongoa */ .kāri-taitara { tawhē-runga: var(--space-m); /* He wahanga o te tauine rite */ align-self: timata; /* Tirohanga arorau */ }
Ma te tohe ki te pika-tino, kei te hanga tatou i te turanga he uaua ki te whakaaunoa, he uaua ki te whakahou, a, i te mutunga, he nui ake te utu ki te pupuri. Tatouhe maha atu nga huarahi ngawari ki te tatau i te rahinga i roto i te CSS, he mihi ki nga waeine whanaunga. Te Neke Mai i nga Pika ki te Koonga I tenei wa, kua roa ahau ki te korero mo nga mea e kore e tika kia mahia e matou. Engari kia marama: Ko te neke atu i te "pixel perfection" ehara i te mea he take mo te whakatinana pohehe, he ahua "tata" ranei. Me rite tonu, kei te pirangi tonu tatou kia titiro a tatou hua ki te kounga teitei, me te whai tikanga tiritahi mo te whakatutuki i tera. Na, ki te kore te "pixel perfection" i te whainga whai hua, me aha tatou? Ko te whakautu, e whakapono ana ahau, kei te huri i to maatau arotahi mai i nga pika takitahi ki te kaupapa hoahoa. I roto i te ao wai, ko te tino tika ehara i te mea e pa ana ki te whakaorite ki te ahua tuuturu, engari ko te whakarite kia mau tonu te arorau matua me te pono o te hoahoatanga puta noa i nga horopaki katoa. Te Koonga Hoahoa Mo Nga Uara Pateko Engari i te tono mo te taha: 24px i roto i te hoahoa, me patai tatou: He aha tenei tawhē i konei? Ko te hanga i te wehenga ataata i waenga i nga waahanga? He wahanga o te tauine mokowhiti rite tonu? Ina mohio tatou ki te koronga, ka taea e tatou te whakamahi ma te whakamahi i nga waeine wai me nga mahi (penei i te rem me te clamp(), ia mea) me te whakamahi i nga taputapu matatau, penei i nga Uiui Ipu Ipu CSS, ka taea e te hoahoa te manawa me te urutau i te wa e pai ana te "tika".
/* Ko te whakaaro: He pane e pai ana te whakatauine me te tauranga tirohanga */ h1 { momotuhi-rahi: rawhi(2rem, 5vw + 1rem, 4rem); } /* Ko te whakaaro: Hurihia te tahora i runga i te whanui o te waahanga, kaua ko te mata */ .puera-kaari { momo ipu: rahi-roto; } @ipu (min-whanui: 400px) { .card { whakaatu: mātiti; mātiti-tauira-tīwae: 1fr 2fr; } }
Korero I roto Tohu Ko nga tohu hoahoa te piriti i waenga i te hoahoa me te waehere. Ina whakaae te kaihoahoa me te kaiwhakawhanake ki te tohu penei i te --spacing-large hei utu mo te 32px, ehara i te mea ko te tukutahi uara, engari ko te tukutahi i te arorau. Ma tenei ka whakarite ahakoa ka huri te uara o raro ki te whakauru i tetahi ahuatanga motuhake, ka noho pai te hononga i waenga i nga huānga. :pakiaka { /* Kua tautuhia te arorau kotahi */ --tae-tuatahi: #007bff; --waahi-waahi: 8px; --spacing-nui: calc(var(--mokowā-wae) * 4); }
/* Ka whakamahia ano ki nga waahi katoa */ .pātene { papamuri-tae: var(--tae-tuatahi); padding: var(--mokowā-nui); }
Ko te Puawai Hei Ahuahira, Ehara i te Ngaro Me mutu te tiro i te ngawari o te paetukutuku hei mea hei whakararata me te timata ki te kite i taua ngawari ko tona kaha nui. Ko te whakatinanatanga "tino tika" ko tetahi e titiro ana ki te 320px, 1280px, tae atu ki te taiao mokowā 3D. Ko te tikanga ko te awhi i te hoahoa tukutuku tuuturu i runga i te rahi o tetahi huānga i roto i tetahi horopaki - me te whakamahi i nga taputapu CSS hou ki te hanga tahora e "mohio ana" ki te whakarite i a raatau ano i runga i te waahi e waatea ana. Ka mate ki te "Hongoi" I roto i tenei ao whai-whakaaro, ko te "tuku" o nga rawa hoahoa tuku iho kua waiho hei taonga o mua. Kua kore matou e tuku i nga konae Photoshop pateko puta noa i te pakitara matihiko me te tumanako mo te pai. Engari, ka mahi maatau i roto i nga punaha hoahoa ora. Ko nga taputapu hou ka taea e nga kaihoahoa te whakaatu i nga whanonga, kaua ko nga waahi anake. Ina tautuhia e te kaihoahoa tetahi waahanga, ehara i te mea ko te tuhi pouaka noa; kei te tautuhi ratou i ona herenga, ona pauna wai, me tona hononga ki te ihirangi. Hei kaiwhakawhanake, ko ta matou mahi he whakatinana i taua arorau. Kua huri te korero mai i te "He aha te take e toru nga pika ka mutu?" ki te "Me pehea te ahua o tenei waahanga ina whakaheke te ipu?" me te "He aha te mea ka pa ki te hierarchy ina whakamaoritia te tuhinga ki te reo roa ake?" He pai ake te reo, he pai ake nga hua Ma te korero mo nga korerorero, ka whai tatou mo te "pixel perfection", ka whakatauhia e tatou mo te waku. Kua roa nga kapa pakeke e neke atu ana i tenei whakaaro-rua "match-or-fail" ki tetahi kupu whakamaarama ake e whakaatu ana i te uaua o a maatau mahi. Ma te whakakapi i te "pixel tino tika" ki nga kupu tino tika, ka hangaia e matou nga tumanakohanga tiritahi me te whakakore i nga tautohetohe koretake. Anei etahi o nga rerenga korero i pai ki a au mo nga korerorero whai hua mo te whakaaro me te rere ke:
"He rite tonu te ahua ki te punaha hoahoa." Engari kaua e taurite ki tetahi whakahiato motuhake, ka whakarite kia whai te whakatinanatanga i nga ture kua whakaritea o ta maatau punaha. “Whakaritea te mokowā me te aroākapa.” Ka aro matou ki nga hononga me te manawataki i waenga i nga huānga, kaua ki o raatau taunga. "Ka pupuri i nga ohanga me te arorau tirohanga." Ka whakarite kia mau tonu te koronga o te tahora, ahakoa ko teraunahi me nga nekehanga. "Te rerekee e whakaaetia ana puta noa i nga papaaho." E mohio ana matou ka rereke te ahua o te waahi, i roto i te waahanga rereke kua tautuhia me te whakaae, a ka pai mena ka mau tonu te wheako ki te kounga teitei.
Ko te reo te hanga mooni. Ko te reo marama e kore e whakapai noa i te waehere, engari ko te hononga i waenga i nga kaihoahoa me nga kaihanga. Ka neke tatou ki te mana tahi o te hua whakamutunga, te hua ora. Ina korero tatou i te reo kotahi, ka mutu te "tino tika" hei tono, ka timata te mahi tahi. He Panui Ki Aku Hoa Hoahoa Ka tukuna e koe he hoahoa, kaua e homai he whanui kua whakaritea, engari he huinga ture. Korerotia mai ki a matou he aha te totoro, he aha te mea me noho tonu, me aha te mea ka puhake te ihirangi. Ko to "tino tika" kei roto i te arorau e tautuhia ana e koe, ehara i nga pika ka tuhia e koe.
Te Paerewa Hou o te Kairangi Ko te paetukutuku kaore i kiia he taiwhanga pateko o nga pika tio. I whanau mai he reo porahurahu, he wai, he tino koretake. I te wa e piri ana tatou ki tetahi tauira tawhito o te "pixel perfection", kei te kaha taatau ki te tuku here ki runga i te awhiowhio. He mea rerekee i te waahi o mua o tenei ra. I te tau 2026, kei a matou nga taputapu ki te hanga atanga whakaaro, urutau me te manawa. Kei a maatau a AI ka taea te whakaputa i nga whakatakotoranga i roto i nga hēkona me nga atanga mokowhiti e whakahē ana i te kaupapa o te "mata". I roto i teie nei ao, e ere te maitai-roa-raa i te hoê rururaa mau, e parau fafau râ; ko te oati ahakoa ko wai e titiro ana, ahakoa he aha ta ratou e titiro ana, ka mau tonu te wairua o te hoahoa. No reira, kia tanu tatou i te kupu kotahi mo te katoa. Waiho nga henimita ki nga kaitoi me nga GIF mokowhiti ki nga whare taonga matihiko. Mena kei te pirangi koe kia rite te ahua o tetahi mea mo nga rau tau e whai ake nei, whakairohia ki te kowhatu, taia ranei ki runga i te kaata kounga teitei. Engari ki te hiahia koe ki te hanga mo te paetukutuku, awhi i te hepohepo. Kati te tatau pika. Tīmatahia te hanga koronga.
