Ман зиёда аз ду даҳсоларо дар тарроҳии таҷрибаи корбар сарф кардам. Ман гузаришро аз тарҳҳои ба ҷадвал асосёфта ба CSS, гардиш ба тарроҳии ҷавобгӯ ҳангоми ба кор андохтани iPhone ва болоравии "иқтисоди таваҷҷӯҳ" дар ёд дорам. Аммо вақте ки мо соли 2026-ро паймоиш мекунем, саноат то ҳол бо тағироти назарраси худ рӯ ба рӯ мешавад. Мо аз давраи “дизайн ба ҳар арзиш” гузашта, ба даврони UX устувор мегузарем. Ин чизе нест, ки аксари тарроҳон дар бораи он фикр мекунанд, аз ҷумла худам, то он даме, ки ман инро ҳамчун консепсия шунидам. Солҳост, ки мо ба интернет ҳамчун абри эфирӣ ва бевазн муносибат мекардем. Мо тахмин кардем, ки маҳсулоти рақамӣ танҳо аз сабаби он ки онҳо дар коғаз чоп нашудаанд, "сабз" буданд. Ман ҳам чунин фикр мекардам ва пеш аз пайдо шудани мафҳуми тағирёбии иқлим бештар дар бораи наҷот додани дарахтон буд. Мо хато кардем. Абр инфрасохтори ҷисмонӣ, шабакаи васеъи марказҳои додаҳо, кабелҳои зери баҳр ва системаҳои хунуккунӣ мебошад, ки 24/7 садо медиҳанд. Ҳангоме ки марказҳои иттилоотӣ, ки ба AI нигаронида шудаанд, ба истеъмоли нерӯи корхонаҳои азими алюминий мувофиқат мекунанд, зичии баланди ҷуғрофии онҳо шиддати боз ҳам шадидтар ва маҳаллии муҳити зистро ба вуҷуд меорад. Ҳамчун тарроҳони UX, мо меъморони ин истеъмоли энергия ҳастем. Ҳар як тасвири қаҳрамони баландсифат, ҳар як видеои пасзаминаи худкор навозишшаванда ва ҳар як аниматсияи мураккаби JavaScript, ки мо онро тасдиқ мекунем, дастури мустақим ба протсессор барои истеъмоли нерӯ аст. Агар мо хоҳем, ки ояндаи давомдорро бунёд кунем, мо бояд тарҳрезиро барои "вой" қатъ кунем ва ба тарҳрезии самаранокӣ шурӯъ кунем. Ҳолати торик Дар аввали солҳои 2000-ум, заминаҳои сафед стандартӣ буданд, зеро онҳо ба шиносоии коғаз тақлид мекарданд. Аммо, сахтафзор таҳаввул ёфт ва фалсафаи тарроҳии мо бояд пайравӣ кунад. Гузариш аз LCD ба технологияи OLED (Organic Light Emitting Diode) ба куллӣ тағир дод, ки ранг ба энергия таъсир мерасонад.
Мантиқ Баръакси экранҳои анъанавии LCD, ки чароғи пуштиро талаб мекунад, ки ҳамеша фурӯзон аст (ҳатто ҳангоми намоиши сиёҳ), экранҳои OLED ҳар як пикселро алоҳида равшан мекунанд. Вақте ки пиксел ба сиёҳи ҳақиқӣ таъин карда мешавад (#000000), он диоди мушаххас комилан хомӯш мешавад. Он қувваи сифрро ҷалб мекунад. Бо тарҳрезии интерфейсҳое, ки палитраҳои ториктарро дӯст медоранд, мо на танҳо як тамоюлро пайгирӣ мекунем; мо талаботи энергетикии дастгоҳи корбарро аз ҷиҳати ҷисмонӣ кам мекунем. Маълумот Сарфаи энергия аз ҳад зиёд нест. Тадқиқоти муҳими Донишгоҳи Пурдю дар соли 2021, ки стандарти тиллоии ин баҳс шудааст, нишон дод, ки ҳангоми равшании 100% гузаштан аз ҳолати рӯшноӣ ба ҳолати торик метавонад ба ҳисоби миёна аз 39% то 47% қувваи батареяро сарфа кунад. Дар миқёси ҷаҳонӣ, агар ҳар як барномаи асосӣ ба ҳолати торикӣ пешфарз шавад, коҳиши талабот ба шабака астрономӣ хоҳад буд. Ҳадафи тарроҳӣ Дар соли 2026, Ҳолати торик дигар набояд "мавзӯъ"-и дуюмдараҷа бошад, ки дар менюи танзимот ҷойгир карда шудааст. Мо бояд бо тафаккури "торикӣ-аввал" тарроҳӣ кунем. Ин маънои онро надорад, ки ҳар як сайт бояд ба матритса монанд бошад, аммо ин маънои афзалият додан ба мавзӯъҳои торикии контрасти баландро ҳамчун ҳолати пешфарзии системаро дорад. Ин мӯҳлати хизмати сахтафзори дастгоҳро дароз мекунад ва изофаи карбонро дар ҳар як мутақобила коҳиш медиҳад. Ман шахсан барои хондан режими Light-Modeро афзалтар медонам, аз ин рӯ мавҷуд будани имконоти ҳам равшанӣ ва ҳам торикӣ маъно дорад. Ҳангоми пешниҳоди ҳарду интихоб низ масъалаҳои дастрасӣ вуҷуд доранд. Оптимизатсияи тасвир ва видео Мо конструкторони танбал шудаем. Бо суръати баландсуръати 5G ва нахи оптикӣ, мо ташвиш дар бораи андозаи файлро бас кардем. Вазни миёнаи саҳифаи мобилӣ дар даҳсолаи охир бештар аз 500% афзоиш ёфтааст, асосан аз ҳисоби дороиҳои визуалӣ оптимизатсияшуда. Мантиқ "Фатҳои рақамӣ" -и вебсайт (он аксҳои 4МБ Unsplash ва видеоҳои пасзаминаи 15МБ) ягона бузургтарин саҳмгузор дар энергияи саҳифа мебошад. Ҳар як мегабайте, ки аз сервер ба муштарӣ интиқол дода мешавад, қувваи барқро барои интиқол, коркарди сервер ва муҳаррики коркарди корбар талаб мекунад. Вақте ки мо файлҳои азимро истифода мебарем, мо аслан энергияро "сӯзонем" то тасвиреро нишон диҳем, ки метавонист дар як қисми андоза самаранок бошад. Ногуфта намонад, ки шумо инчунин таҷрибаи беҳтари корбарро бо саҳифае, ки тезтар бор мекунад, пешкаш мекунед.
Маълумот Тибқи Archive HTTP, тасвирҳо ва видео пайваста ҳиссаи шерро дар вазни умумии саҳифа ташкил медиҳанд. Бо вуҷуди ин, гузариш ба форматҳои муосир ба монанди AVIF ва WebP метавонад вазни тасвирро дар муқоиса бо JPEG то 50% кам кунад, бе талафи сифат. Гарчанде ки ин форматҳо ба ман мисли JPG ва PNG шинос нестанд, ман бешубҳа бесаброна интизори истифодаи онҳо барои кам кардани андозаи саҳифа ҳастам. ДарҲадафи тарроҳӣ Ман ба наздикӣ ба тарҳрезии платформаи киберамният роҳбарӣ кардам. Бо гузаронидани аудити "Пеш ва баъд" мо фаҳмидем, ки саҳифаи аслии онҳо 5,5 МБ маълумотро бор мекунад. Бо иваз кардани аксбардории баландсифат бо санъати SVG (Scalable Vector Graphics) ва истифодаи градиентҳои оқилонаи CSS ба ҷои дороиҳои тасвир, мо сарбориро то 1,2 МБ кам кардем. Ин 78% кам кардани сарбории энергия аст! Ҳамчун дизайнер, саволи аввалини шумо ҳамеша бояд чунин бошад: "Оё барои ин ба ман акс лозим аст ё ман метавонам бо код ҳамон як резонанси эмотсионалӣ ба даст орам?"
Ҳаракати қасдан: Буридани аниматсияҳои "баланд" Мо дар даврони "ҳаракат кардан" ва эффектҳои мураккаби 3D Parallax зиндагӣ мекунем. Гарчанде ки онҳо метавонанд дар Awwwards.com ҷоиза гиранд, онҳо аксар вақт офатҳои экологӣ мебошанд. Мантиқ Аниматсия ройгон нест. Барои намоиш додани аниматсияи мураккаб, GPU (Воҳиди коркарди графикӣ)-и дастгоҳ бояд бо иқтидори баланд кор кунад. Ин ҳарорати CPU-ро зиёд мекунад, мухлисони хунуккуниро (дар ноутбукҳо) ба кор медарорад ва батареяро зуд холӣ мекунад. Аниматсияҳои "баланд", ки пайваста дар замина кор мекунанд ё рангҳои азими браузерро ба вуҷуд меоранд, баробари энергияи бекор мондани мошини шумо дар роҳи мошингард мебошанд.
Маълумот Дастурҳои тарроҳии моддии Google ба "Ҳаракати пурмаъно" таъкид мекунанд. Онҳо мегӯянд, ки аниматсия бояд танҳо барои ориентацияи корбар ё пешниҳоди фикру мулоҳиза истифода шавад. Ва истифодаи WebP ба ҷои JPEG метавонад 25-50% маълумотро дар саҳифа захира кунад. Ҳадафи тарроҳӣ Мо бояд Ҳаракати Маъноиро қабул кунем. Агар аниматсия ба корбар дар иҷрои вазифа ё дарк кардани иерархия кӯмак накунад, ин беҳуда аст. Мо бояд гузариши CSS-ро аз китобхонаҳои вазнини JavaScript, ба монанди GSAP ё Lottie, ба қадри имкон бартарӣ диҳем, зеро CSS аз сахтафзор суръат мегирад ва барои ҳисоб кардани браузер хеле самараноктар аст. Ҳамчун тарроҳи UX, ман ин равишро баҳс карда наметавонам. Ин на танҳо ба кам кардани партови маълумот кӯмак мекунад, балки инчунин UX-ро барои корбарони мо беҳтар мекунад. Муқаррар кардани "Буҷети маълумот" барои ҳар як лоиҳа Дар тӯли 20+ соли ман UX, муваффақтарин лоиҳаҳо умуман лоиҳаҳои дорои маҳдудиятҳои сахттарин буданд. Тавре ки лоиҳа буҷаи молиявӣ дорад, он бояд буҷаи карбон ва маълумот дошта бошад. Мантиқ Буҷети маълумот ҳадди ақалл дар ҳаҷми умумии саҳифа аст (масалан, "Ин саҳифаи кушодашавӣ наметавонад аз 1МБ зиёд бошад"). Ин дастаи тарроҳиро маҷбур мекунад, ки интихоби душвор ва қасдан интихоб кунад. Агар шумо хоҳед, ки скрипти нави пайгирӣ ё вазни шрифти зебо илова кунед, шумо бояд барои он тавассути оптимизатсия ё нест кардани чизи дигар "пардохт кунед". Ин имкон намедиҳад, ки "хезиши хосият" ба "хезиши карбон" табдил ёбад. Маълумот Модели тарроҳии устувори веб, ки аз ҷониби пешравон ба монанди Wholegrain Digital таҳия шудааст, формулаи ҳисоб кардани CO2 дар як саҳифаро пешниҳод мекунад. Ба ҳисоби миёна дар як вебсайт тақрибан 0,5 грамм CO2 истеҳсол мешавад. Барои сайте, ки моҳона 1 миллион тамошо мекунад, ин 6 тонна CO2 дар як сол аст, ки ба рондани мошин 15 000 мил баробар аст. Ҳадафи тарроҳӣ Рӯйхати санҷиши устувори UX
Коҳиш додани тасвирҳо дар бораи зарурати ҳар як визуалӣ пурсед ва барои кам кардани интиқоли додаҳо, ҳалли хурдтарин ва форматҳои муассири файлро (ба монанди AVIF) истифода баред. Видеоро оптимизатсия кунед. Васоити худкори навозишро нест кунед ва ба ҳалқаҳои хеле фишурдашуда ва кӯтоҳ афзалият диҳед, то боварӣ ҳосил кунед, ки энергия танҳо барои мундариҷае, ки корбар дидан мехоҳад, сарф шавад. Шрифҳоро маҳдуд кунед, ҳадди аксар ду вазнҳои шрифти вебро истифода баред ё ба шрифтҳои системаи классикӣ пайваст шавед, то дархостҳои нолозими серверро хориҷ кунед ва варамро бардоред. Бо истифода аз филтрҳо ва қабатҳои CSS як тасвир ё видеоро чанд маротиба дубора истифода баред, то гуногунии визуалӣ бидуни зиёд кардани вазни умумии саҳифа эҷод кунед. Маҳсулоти рақамии худро дар серверҳое, ки аз ҷониби Фонди Веби Грин тасдиқ шудааст, Green HostingHost-ро интихоб кунед, то боварӣ ҳосил кунед, ки онҳо аз манбаъҳои барқароршавандаи энергия таъмин карда мешаванд. Масофаи маълумотро кам кунед, ки мавқеъҳои серверро аз ҷиҳати ҷуғрофӣ ба аудиторияи ибтидоии худ наздиктар кунед, то энергияро барои интиқоли маълумот тавассути инфрасохтори ҷисмонӣ кам кунед.
Парвандаи тиҷоратӣ барои тарҳрезии экологӣ Баъзеҳо метавонанд баҳс кунанд, ки "Green UX" ба як созиш дар сифат садо медиҳад. Баръакс, ин бартарии рақобат аст. Тарҳрезии устувор ин тарҳи иҷроиш аст. Вақте ки шумо вазни саҳифаро кам мекунед, сайти шумо тезтар бор мешавад. Вақте ки сайти шумо тезтар бор мекунад, Core Web Vitals беҳтар мешавад. Вақте ки Core Web Vitals беҳтар мешавад, рейтинги SEO-и шумо боло меравад. Ғайр аз он, корбарон дар дастгоҳҳои кӯҳна ё нақшаҳои сусттари маълумот (хусусан дар бозорҳои рушдёбанда) метавонанд воқеан ба маҳсулоти шумо дастрасӣ пайдо кунанд. Ин таърифи "Тарроҳии фарогир" аст. Бо буридани "фарбеҳи рақамӣ" мо веби лоғартар, тезтар ва дастрастар эҷод мекунем. Мо аз “тарҳи якдафъаина”-и солҳои 2010-ум ба сӯи адоимӣ бештар, меъмории рақамӣ эҳтиром. Хулоса: Ояндаи тарҳи "тоза" Дар ду даҳсолаи тарроҳии худ ман дидам, ки тамоюлҳои зиёде меоянд ва мераванд. Скеуоморфизм, Тарҳрезии ҳамвор, Нейморфизм - ҳамаи онҳо интихоби эстетикӣ буданд. Аммо UX устувор тамоюл нест; ин ҳоло як зарурат аст. Мо насли аввалини тарроҳон ҳастем, ки бояд бо оқибатҳои ҷисмонии кори рақамии мо ҳисоб кунанд. UX устувор як "бурд-бурд" аст. Ин барои сайёра беҳтар аст, зеро он истеъмоли энергияро коҳиш медиҳад. Ин барои корбар беҳтар аст, зеро он ба интерфейсҳои тезтар ва ҷавобгӯтар оварда мерасонад. Ва ин барои тиҷорат беҳтар аст, зеро он хароҷоти хостингро коҳиш медиҳад ва суръати табдилро беҳтар мекунад. Давраи "пикселҳои номаҳдуд" ба охир расид. Дар соли 2026, тарҳи мураккабтарин тарҳест, ки хурдтарин изи худро мегузорад. Мо дигар танҳо тарроҳон нестем; мо муҳофизони батареяи корбар, нақшаи маълумоти онҳо ва дар ниҳоят, муҳити зист ҳастем. Даъват ба амал Ман шуморо даъват мекунам, ки имрӯз танҳо як саҳифаи лоиҳаи ҷории худро тафтиш кунед. Барои дидани таъсири он, асбоберо ба монанди ҳисобкунаки карбон дар вебсайт истифода баред. Сипас, "партовҳои ноаён" -ро ҷустуҷӯ кунед. Оё ин тасвир метавонад SVG бошад? Оё он видео қаҳрамони статикӣ буда метавонад? Оё ин аниматсияи "баланд"-ро хомӯш кардан мумкин аст? Аз хурд оғоз кунед. Шевотарин ҳалли аксар вақт онест, ки камтар байт дорад.
