Mae'n 2026. Rydym yn gweithredu mewn cyfnod o naid dechnolegol anhygoel, lle mae offer uwch a llifoedd gwaith wedi'u gwella gan AI wedi trawsnewid yn sylfaenol sut rydym yn dylunio, adeiladu, ac yn pontio'r bwlch rhwng y ddau. Mae'r we yn symud yn gyflymach nag erioed, gyda nodweddion a safonau arloesol yn dod i'r amlwg bron bob dydd. Ac eto, yng nghanol yr esblygiad cyflym hwn, mae un peth rydyn ni wedi bod yn ei gario gyda ni ers dyddiau cynnar print, ymadrodd sy'n teimlo'n fwyfwy anghymesur â'n realiti modern: "Pixel Perfect."
Byddaf yn onest, nid wyf yn gefnogwr. A dweud y gwir, rwy'n credu bod y syniad y gallwn ni gael perffeithrwydd picsel yn ein dyluniadau wedi dod yn gamarweiniol, yn amwys, ac yn y pen draw yn wrthgynhyrchiol i'r ffordd rydyn ni'n adeiladu ar gyfer y we fodern. Fel cymuned o ddatblygwyr a dylunwyr, mae’n bryd inni edrych yn galed ar y cysyniad etifeddiaeth hwn, deall pam ei fod yn ein methu, ac ailddiffinio sut olwg sydd ar “berffeithrwydd” mewn byd aml-ddyfais, hylifol. Hanes Byr O Feddylfryd Anhyblyg Er mwyn deall pam mae llawer ohonom yn dal i anelu at berffeithrwydd picsel heddiw, mae'n rhaid inni edrych yn ôl ar ble y dechreuodd y cyfan. Ni ddechreuodd ar y we, ond fel ffordd i ffwrdd o'r cyfnod pan oedd meddalwedd gosodiad yn caniatáu i ni ddylunio i'w hargraffu ar gyfrifiadur personol am y tro cyntaf, a dylunio GUI o ddiwedd yr 1980au a'r 90au. Yn y diwydiant argraffu, roedd perffeithrwydd yn absoliwt. Unwaith yr anfonwyd dyluniad i'r wasg, roedd gan bob dot o inc safle sefydlog, digyfnewid ar dudalen ffisegol. Pan drawsnewidiodd dylunwyr i'r we gynnar, daethant â'r meddylfryd “tudalen argraffedig” hon gyda nhw. Roedd y nod yn syml: Rhaid i'r wefan fod yn atgynhyrchiad picsel-am-picsel union o'r ffug statig a grëwyd mewn cymwysiadau dylunio fel Photoshop a QuarkXPress.
Rwy’n ddigon hen i gofio gweithio gyda dylunwyr dawnus a oedd wedi treulio eu holl yrfaoedd yn y byd print. Byddent yn trosglwyddo dyluniadau gwe a, gyda didwylledd llwyr, yn mynnu trafod y gosodiad mewn centimetrau a modfeddi. Iddyn nhw, dim ond darn arall o bapur oedd y sgrin, er yn un oedd yn disgleirio. Yn y dyddiau hynny, fe wnaethon ni “ddofi” ar y we i gyflawni hyn. Fe wnaethon ni ddefnyddio cynlluniau bwrdd, nythu tair lefel o ddyfnder, ac ymestyn “spacer GIFs” 1 × 1 picsel i greu bylchau manwl gywir. Fe wnaethon ni ddylunio ar gyfer un datrysiad “safonol” (800 × 600 fel arfer) oherwydd, bryd hynny, gallem gymryd arnom ein bod yn gwybod yn union beth roedd y defnyddiwr yn ei weld.
|
|
Craciau Yn Y Sylfaen Daeth yr her fawr gyntaf i’r meddylfryd bwrdd sefydlog mor gynnar â 2000. Yn ei erthygl arloesol, “A Dao of Web Design”, dadleuodd John Allsopp, wrth geisio gorfodi’r we i gyfyngiadau argraffu, ein bod yn colli pwynt y cyfrwng yn gyfan gwbl. Galwodd yr ymchwil am berffeithrwydd picsel yn “ddefod” a oedd yn anwybyddu hylifedd cynhenid y we. Pan fydd cyfrwng newydd yn benthyca o un sy’n bodoli eisoes, mae peth o’r hyn y mae’n ei fenthyg yn gwneud synnwyr, ond mae llawer o’r benthyca yn ddifeddwl, yn “ddefodol,” ac yn aml yn cyfyngu ar y cyfrwng newydd. Dros amser, mae'r cyfrwng newydd yn datblygu ei gonfensiynau ei hun, gan ddileu confensiynau presennol nad ydynt yn gwneud synnwyr.
Serch hynny, gwrthododd y “perffeithrwydd picsel” farw. Er bod ei ystyr wedi newid a newid dros y degawdau, anaml y mae wedi'i ddiffinio'n dda. Mae llawer wedi ceisio, megis yn 2010 pan ryddhaodd yr asiantaeth ddylunio y llawlyfr Pixel Perfect Precision (PPP) (PDF). Ond yr un flwyddyn, enillodd Dylunio Gwe Ymatebol fomentwm enfawr hefyd, gan ladd y syniad y gallai gwefan edrych yn union yr un fath ar bob sgrin i bob pwrpas. Ac eto, dyma ni, yn dal i ddefnyddio term sy'n deillio o gyfyngiadau monitorau dyddiedig i'r 90au i ddisgrifio rhyngwynebau cymhleth 2026.
Nodyn: Cyn i ni barhau, mae'n bwysig cydnabod yr eithriadau. Mae yna, wrth gwrs, senarios lle na ellir trafod cywirdeb picsel. Mae gridiau eicon, dalennau corlun, rendrad cynfas, peiriannau gêm, neu allforion didfap yn aml yn gofyn am reolaeth union ar lefel picsel i weithio'n gywir. Mae'r rhain, fodd bynnag, yn ofynion technegol arbenigol, nid yn rheol gyffredinol ar gyferdatblygiad UI modern.
Pam Mae “Pixel Perfect” yn Methu'r We Fodern Yn ein tirwedd bresennol, nid yw glynu wrth y syniad o “berffeithrwydd picsel” yn anacronistig yn unig, mae'n niweidiol i'r cynhyrchion rydyn ni'n eu hadeiladu. Dyma pam. Mae'n Sylfaenol Amwys Gadewch i ni ddechrau gyda chwestiwn syml: Pan fydd dylunydd yn gofyn am weithrediad “perffaith-picsel”, beth maen nhw'n gofyn amdano mewn gwirionedd? Ai'r lliwiau, y bylchau, y teipograffeg, y ffiniau, yr aliniad, y cysgodion, y rhyngweithiadau? Cymerwch eiliad i feddwl amdano. Os mai “popeth” yw eich ateb, yna rydych chi newydd nodi'r mater craidd. Mae'r term “pixel-perffaith” mor hollgynhwysol fel nad oes ganddo unrhyw benodolrwydd technegol gwirioneddol. Mae'n ddatganiad cyffredinol sy'n cuddio diffyg gofynion clir. Pan rydyn ni'n dweud “gwnewch ef yn bicsel yn berffaith,” nid ydym yn rhoi cyfarwyddeb; rydym yn mynegi teimlad. Y Gwirionedd Aml-Arwyneb Mae'r cysyniad o “faint sgrin safonol” bellach yn grair o'r gorffennol. Rydym yn adeiladu ar gyfer amrywiaeth bron yn ddiddiwedd o olygfeydd, penderfyniadau, a chymarebau agwedd, ac nid yw'r realiti hwn yn debygol o newid unrhyw bryd yn fuan. Hefyd, nid yw'r we bellach wedi'i chyfyngu i ddarn o wydr gwastad, hirsgwar; gall fod ar ffôn plygadwy sy'n newid cymarebau agwedd yng nghanol y sesiwn, neu ar ryngwyneb gofodol wedi'i daflunio i ystafell. Mae gan bob dyfais sy'n gysylltiedig â'r Rhyngrwyd ei dwysedd picsel ei hun, ei ffactorau graddio, a'i quirks rendro. Mae dyluniad sy'n “berffaith” ar un set o bicseli, yn ôl diffiniad, yn amherffaith ar set arall. Mae ymdrechu i gael un “perffeithrwydd” statig yn anwybyddu natur hylifol, ymaddasol y we fodern. Pan fydd y cynfas yn newid yn gyson, mae'r union syniad o weithredu picsel sefydlog yn dod yn amhosibl technegol.
Natur Ddeinamig y Cynnwys Mae ffug statig yn giplun o gyflwr sengl gyda set benodol o ddata. Ond anaml y mae cynnwys yn sefydlog fel hyn yn y byd go iawn. Mae lleoleiddio yn enghraifft wych: gallai label sy'n ffitio'n berffaith y tu mewn i gydran botwm yn Saesneg orlifo'r cynhwysydd yn Almaeneg neu fod angen ffont gwahanol yn gyfan gwbl ar gyfer ieithoedd CJK. Y tu hwnt i hyd testun, mae lleoleiddio yn golygu newidiadau gyda symbolau arian cyfred, fformatio dyddiad, a systemau rhifol. Gall unrhyw un o'r newidynnau hyn effeithio'n sylweddol ar gynllun tudalen. Os yw dyluniad wedi'i adeiladu i fod yn “berffaith-picsel” yn seiliedig ar linyn penodol o destun, mae'n ei hanfod yn fregus. Mae cynllun picsel-perffaith yn dymchwel yn llwyr yr eiliad y mae cynnwys yn newid.
Hygyrchedd Yw'r Gwir Berffeithrwydd Mae gwir berffeithrwydd yn golygu gwefan sy'n gweithio i bawb. Os yw cynllun mor anhyblyg nes ei fod yn torri pan fydd defnyddiwr yn cynyddu maint ei ffont neu'n gorfodi modd cyferbyniad uchel, nid yw'n berffaith - mae wedi torri. Mae “Pixel perfect” yn aml yn blaenoriaethu estheteg weledol dros hygyrchedd swyddogaethol, gan greu rhwystrau i ddefnyddwyr nad ydyn nhw'n ffitio'r proffil “safonol”. Meddwl Systemau, Nid Tudalennau Nid ydym yn adeiladu tudalennau mwyach; rydym yn adeiladu systemau dylunio. Rydym yn creu cydrannau y mae'n rhaid iddynt weithio ar wahân ac amrywiaeth o gyd-destunau, boed mewn penawdau, mewn bariau ochr, neu mewn gridiau deinamig. Mae ceisio paru cydran â chyfesuryn picsel penodol mewn ffug statig yn neges ffôl. Mae dull “perffaith-picsel” pur yn trin pob achos fel pluen eira unigryw, sef gwrththesis pensaernïaeth raddadwy sy'n seiliedig ar gydrannau. Mae'n gorfodi datblygwyr i ddewis rhwng dilyn delwedd statig a chynnal cyfanrwydd y system. Mae Perffeithrwydd yn Ddyled Dechnegol Pan fyddwn yn blaenoriaethu cyfatebiad gweledol union dros beirianneg sain, nid ydym yn gwneud dewis dylunio yn unig; rydym yn mynd i ddyled dechnegol. Mae mynd ar ôl y picsel olaf hwnnw yn aml yn gorfodi datblygwyr i osgoi injan cynllun naturiol y porwr. Mae gweithio mewn unedau union yn arwain at “rifau hud”, y rhai mympwyol ymyl-brig: 3px neu chwith: -1px haciau, ysgeintio drwy gydol y codebase i orfodi elfen i mewn i safle penodol ar sgrin benodol. Mae hyn yn creu pensaernïaeth fregus, brau, gan arwain at gylch di-ddiwedd o docynnau “byg gweledol”. /* Yr Hac "Pixel Perfect" */ .teitl cerdyn { ymyl-brig: 13px; /* Yn cyfateb yn union i'r ffug ar 1440px */ ymyl-chwith: -2px; /* Addasiad optegol ar gyfer ffont penodol */ } /* Yr Ateb "Bwriad Dylunio" */ .teitl cerdyn { ymyl-brig: var(--space-m); /* Rhan o raddfa gyson */ alinio-hunan: cychwyn; /* Aliniad rhesymegol */ }
Trwy fynnu perffeithrwydd picsel, rydym yn adeiladu sylfaen sy'n anodd ei awtomeiddio, yn anodd ei ail-ffactorio, ac yn y pen draw, yn ddrytach i'w gynnal. Rydym nibod â ffyrdd llawer mwy hyblyg o gyfrifo maint yn CSS, diolch i unedau cymharol. Symud O Bicseli I Fwriad Hyd yn hyn, rwyf wedi treulio llawer o amser yn siarad am yr hyn na ddylem ei wneud. Ond gadewch i ni fod yn glir: nid yw symud i ffwrdd o “berffeithrwydd picsel” yn esgus dros weithredu blêr nac yn agwedd “ddigon agos”. Mae angen cysondeb arnom o hyd, rydym yn dal i fod eisiau i'n cynnyrch edrych a theimlo o ansawdd uchel, ac mae angen methodoleg gyffredin arnom o hyd ar gyfer cyflawni hynny. Felly, os nad yw “perffeithrwydd picsel” bellach yn nod hyfyw, beth ddylem ni fod yn ymdrechu amdano? Yr ateb, rwy'n credu, yw symud ein ffocws o bicseli unigol i fwriad dylunio. Mewn byd hylifol, nid paru delwedd statig yw perffeithrwydd, ond sicrhau bod rhesymeg graidd a chywirdeb gweledol y dyluniad yn cael eu cadw ar draws pob cyd-destun posibl. Bwriad Dylunio Dros Werthoedd Statig Yn hytrach na gofyn am ymyl: 24px mewn dyluniad, dylem fod yn gofyn: Pam fod yr ymyl hon yma? Ai creu gwahaniad gweledol rhwng adrannau? A yw'n rhan o raddfa bylchau cyson? Pan fyddwn yn deall y bwriad, gallwn ei weithredu gan ddefnyddio unedau hylif a swyddogaethau (fel rem a clamp (), yn y drefn honno) a defnyddio offer uwch, fel Ymholiadau Cynhwysydd CSS, sy'n caniatáu i'r dyluniad anadlu ac addasu tra'n dal i deimlo'n “iawn”.
/* Bwriad: Pennawd sy'n graddio'n llyfn gyda'r porth gwylio */ h1 { maint y ffont: clamp (2rem, 5vw + 1rem, 4rem); } /* Bwriad: Newid cynllun yn seiliedig ar led y gydran ei hun, nid y sgrin */ .card-cynhwysydd { cynhwysydd-math: inline-size; } @cynhwysydd (min-lled: 400px) { .card { arddangos: grid; grid-templed-colofnau: 1fr 2fr; } }
Siarad Mewn Tocynnau Tocynnau dylunio yw'r bont rhwng dyluniad a chod. Pan fydd dylunydd a datblygwr yn cytuno ar docyn fel --spaceing-large yn lle 32px, nid gwerthoedd cysoni yn unig maen nhw, ond yn hytrach yn cysoni rhesymeg. Mae hyn yn sicrhau, hyd yn oed os yw'r gwerth sylfaenol yn newid i ddarparu ar gyfer cyflwr penodol, bod y berthynas rhwng elfennau yn parhau'n berffaith. : gwraidd { /* Diffinnir y rhesymeg unwaith */ --lliw-cynradd: #007bff; --spacing-uned: 8px; --spacing-large: calc(var(--space-unit) * 4); }
/* Ac yn cael ei ailddefnyddio ym mhobman */ .botwm { lliw cefndir: var (--lliw-cynradd); padin: var(--spacing-large); }
Hylifedd Fel Nodwedd, Nid Byg Mae angen i ni roi’r gorau i edrych ar hyblygrwydd y we fel rhywbeth i’w ddofi a dechrau gweld yr hyblygrwydd hwnnw fel ei gryfder mwyaf. Mae gweithrediad “perffaith” yn un sy'n edrych yn fwriadol ar 320px, 1280px, a hyd yn oed mewn amgylchedd gofodol 3D. Mae hyn yn golygu cofleidio dyluniad gwe cynhenid yn seiliedig ar faint naturiol elfen mewn unrhyw gyd-destun - a defnyddio offer CSS modern i greu cynlluniau sy'n “gwybod” sut i drefnu eu hunain yn seiliedig ar y gofod sydd ar gael. Marwolaeth i'r “Trosglwyddo” Yn y byd hwn sy'n cael ei yrru gan fwriad, mae “trosglwyddo” asedau dylunio traddodiadol wedi dod yn grair arall o'r gorffennol. Nid ydym bellach yn pasio ffeiliau Photoshop statig ar draws wal ddigidol ac yn gobeithio am y gorau. Yn lle hynny, rydym yn gweithio o fewn systemau dylunio byw. Mae offer modern yn caniatáu i ddylunwyr nodi ymddygiadau, nid safleoedd yn unig. Pan fydd dylunydd yn diffinio cydran, nid tynnu blwch yn unig y maent; maen nhw'n diffinio ei gyfyngiadau, ei raddfeydd hylif, a'i berthynas â'r cynnwys. Fel datblygwyr, ein gwaith ni yw gweithredu'r rhesymeg honno. Mae'r sgwrs wedi symud o "Pam mae'r tri phicsel hwn i ffwrdd?" i “Sut ddylai'r gydran hon ymddwyn pan fydd y cynhwysydd yn crebachu?” a “Beth sy’n digwydd i’r hierarchaeth pan gaiff y testun ei gyfieithu i iaith hirach?” Gwell Iaith, Gwell Canlyniadau Wrth siarad am sgyrsiau, pan rydyn ni'n anelu at “berffeithrwydd picsel”, rydyn ni'n gosod ein hunain ar gyfer ffrithiant. Mae timau aeddfed wedi hen symud heibio’r meddylfryd “cyfateb-neu-methu” deuaidd hwn tuag at eirfa fwy disgrifiadol sy’n adlewyrchu cymhlethdod ein gwaith. Trwy roi termau mwy manwl gywir yn lle “pixel perfect”, rydym yn creu disgwyliadau a rennir ac yn dileu dadleuon dibwrpas. Dyma ychydig o ymadroddion sydd wedi bod o gymorth da i mi ar gyfer trafodaethau cynhyrchiol ynghylch bwriad a hylifedd:
“Yn weledol gyson â'r system ddylunio.” Yn hytrach na chyfateb ffuglen benodol, rydym yn sicrhau bod y gweithrediad yn dilyn rheolau sefydledig ein system. “Yn cyfateb i fylchau a hierarchaeth.” Rydym yn canolbwyntio ar y perthnasoedd a'r rhythm rhwng elfennau yn hytrach na'u cyfesurynnau absoliwt. “Yn cadw cymesuredd a rhesymeg aliniad.” Rydym yn sicrhau bod bwriad y cynllun yn parhau'n gyfan, hyd yn oed fel y mae.graddfeydd a shifftiau. “Amrywiant derbyniol ar draws platfformau.” Rydym yn cydnabod y bydd gwefan yn edrych yn wahanol, o fewn ystod o amrywiadau diffiniedig y cytunwyd arnynt, ac mae hynny'n iawn cyhyd â bod y profiad yn parhau i fod o ansawdd uchel.
Mae iaith yn creu realiti. Nid yn unig y mae iaith glir yn gwella'r cod, ond hefyd y berthynas rhwng dylunwyr a datblygwyr. Mae'n ein symud tuag at berchnogaeth ar y cyd o'r cynnyrch terfynol, byw. Pan fyddwn yn siarad yr un iaith, mae “perffeithrwydd” yn peidio â bod yn alw ac yn dechrau bod yn gyflawniad cydweithredol. Nodyn i'm Cydweithwyr Dylunio Pan fyddwch chi'n trosglwyddo dyluniad, peidiwch â rhoi lled sefydlog i ni, ond set o reolau. Dywedwch wrthym beth ddylai ymestyn, beth ddylai aros yn sefydlog, a beth ddylai ddigwydd pan fydd y cynnwys yn anochel yn gorlifo. Mae eich “perffeithrwydd” yn gorwedd yn y rhesymeg rydych chi'n ei diffinio, nid y picseli rydych chi'n eu tynnu.
Y Safon Newydd o Ragoriaeth Nid oedd y we erioed i fod yn oriel sefydlog o bicseli wedi'u rhewi. Fe'i ganwyd i fod yn gyfrwng anniben, hylifol, a gogoneddus anrhagweladwy. Pan fyddwn yn glynu at fodel hen ffasiwn o “berffeithrwydd picsel”, rydym i bob pwrpas yn ceisio rhoi dennyn ar gorwynt. Mae’n annaturiol yn nhirwedd pen blaen heddiw. Yn 2026, mae gennym yr offer i adeiladu rhyngwynebau sy'n meddwl, addasu ac anadlu. Mae gennym AI sy'n gallu cynhyrchu cynlluniau mewn eiliadau a rhyngwynebau gofodol sy'n herio'r union gysyniad o “sgrin”. Yn y byd hwn, nid cyfesuryn sefydlog yw perffeithrwydd ond addewid; mae'n addewid, ni waeth pwy sy'n edrych, neu beth maen nhw'n edrych drwyddo, mae enaid y dyluniad yn parhau'n gyfan. Felly, gadewch i ni gladdu'r term unwaith ac am byth. Gadewch i ni adael y centimetrau i'r penseiri a'r GIFs spacer i'r amgueddfeydd digidol. Os ydych chi eisiau i rywbeth edrych yn union yr un fath am y can mlynedd nesaf, cerfiwch ef mewn carreg neu argraffwch ef ar stoc carden o ansawdd uchel. Ond os ydych chi am adeiladu ar gyfer y we, cofleidiwch yr anhrefn. Rhoi'r gorau i gyfrif picsel. Dechrau adeiladu bwriad.
