Мен жиырма жылдан астам уақытымды пайдаланушы тәжірибесін жобалау траншеяларында өткіздім. Кестеге негізделген макеттерден CSS-ке көшу, iPhone іске қосылған кезде жауап беретін дизайнға ауысу және «назар аудару экономикасының» өсуі есімде. Бірақ біз 2026 жылды шарлап келе жатқанда, сала әлі де ең маңызды өзгерісті күтіп тұр. Біз «кез келген бағамен дизайн» дәуірінен тұрақты UX дәуіріне өтіп жатырмыз. Бұл туралы концепция ретінде естігенге дейін дизайнерлердің көпшілігі, соның ішінде өзім де ойлайтын нәрсе емес. Көптеген жылдар бойы біз интернетті эфирлік, салмақсыз бұлт ретінде қарастырдық. Біз цифрлық өнімдер қағазға басып шығарылмағандықтан «жасыл» болды деп болжадық. Мен де солай ойлайтынмын және климаттың өзгеруі туралы тұжырымдама пайда болғанға дейін ағаштарды сақтау туралы көбірек болды. Біз қателестік. Бұлт - бұл физикалық инфрақұрылым, тәулік бойы жұмыс істейтін деректер орталықтарының, су астындағы кабельдердің және салқындату жүйелерінің кең таралған желісі. AI-бағытталған деректер орталықтары массивтік алюминий балқыту зауыттарының қуат тұтынуына сәйкес келсе, олардың жоғары географиялық тығыздығы одан да қарқынды және локализацияланған экологиялық штамм жасайды. UX дизайнерлері ретінде біз осы энергия тұтынудың сәулетшілеріміз. Әрбір жоғары ажыратымдылықтағы кейіпкер бейнесі, әрбір автоматты ойнатылатын фондық бейне және біз мақұлдаған әрбір күрделі JavaScript анимациясы процессорға қуатты тұтыну туралы тікелей нұсқау болып табылады. Егер біз ұзаққа созылатын болашақты құрғымыз келсе, біз «уау» үшін жобалауды тоқтатып, тиімділік үшін жобалауды бастауымыз керек. Қараңғы режим 2000 жылдардың басында ақ фон стандартты болды, өйткені олар қағаздың таныстығын имитациялады. Дегенмен, аппараттық құрал дамыды және біздің дизайн философиямыз ұстануға тиіс. СКД-дан OLED (органикалық жарық шығаратын диод) технологиясына ауысу түс энергияға қалай әсер ететінін түбегейлі өзгертті.
Логика Үнемі қосулы болатын артқы жарықты қажет ететін дәстүрлі СКД экрандарынан айырмашылығы (тіпті қара түсті көрсетсе де), OLED экрандары әрбір пикселді жеке жарықтандырады. Пиксель шынайы қараға орнатылғанда (#000000), бұл арнайы диод толығымен өшіріледі. Ол нөлдік қуат алады. Қараңғы палитраларды ұнататын интерфейстерді жобалау арқылы біз жай ғана трендті ұстанбаймыз; біз пайдаланушы құрылғысының қуат қажеттілігін физикалық түрде азайтамыз. Деректер Энергияны үнемдеу шамалы емес. 2021 жылы Пурдю университетінің осы талқылаудың алтын стандартына айналған маңызды зерттеуі 100% жарықтықта жарық режимінен қараңғы режимге ауысу батарея қуатын орташа есеппен 39%-дан 47%-ға дейін үнемдейтінін көрсетті. Жаһандық ауқымда, егер әрбір негізгі қолданба әдепкі бойынша қараңғы режимге ауысса, желіге сұраныстың төмендеуі астрономиялық болар еді. Дизайн мақсаты 2026 жылы Қараңғы режим енді параметрлер мәзірінде сақталған қосымша «тақырып» болмауы керек. Біз «қараңғы-бірінші» менталитетімен жобалауымыз керек. Бұл әрбір сайт Матрицаға ұқсауы керек дегенді білдірмейді, бірақ бұл жүйенің әдепкі күйі ретінде жоғары контрастты қараңғы тақырыптарға басымдық беруді білдіреді. Бұл құрылғының жабдықтың қызмет ету мерзімін ұзартады және әрбір өзара әрекеттесу кезіндегі көміртегі ізін азайтады. Мен оқу үшін жарық режимін ұнатамын, сондықтан ашық және қараңғы режим опцияларының қол жетімді болуы мағынасы бар. Сондай-ақ, екі опцияны қамтамасыз ету кезінде қол жетімділік мәселелері бар. Сурет пен бейнені оңтайландыру Біз жалқау дизайнерге айналдық. Жоғары жылдамдықты 5G және талшықты оптика арқылы біз файл өлшемдері туралы алаңдауды доғардық. Мобильді беттердің орташа салмағы соңғы онжылдықта негізінен оңтайландырылмаған көрнекі активтерге байланысты 500%-дан астам өсті. Логика Веб-сайттың «Цифрлық майы» (4МБ Unsplash фотосуреттері мен 15МБ фондық бейнелер) бет жүктеу энергиясына жалғыз ең үлкен үлес қосады. Серверден клиентке тасымалданатын әрбір мегабайт жіберуге, серверді өңдеуге және пайдаланушының көрсету механизміне электр қуатын қажет етеді. Біз үлкен файлдарды пайдаланған кезде, біз өлшемнің бір бөлігінде тиімді болуы мүмкін суретті көрсету үшін негізінен энергияны «жатады». Айтпақшы, сіз әлдеқайда жылдам жүктелетін бетпен жақсырақ пайдаланушы тәжірибесін қамтамасыз етесіз.
Деректер HTTP мұрағатына сәйкес кескіндер мен бейнелер беттің жалпы салмағының негізгі үлесін дәйекті түрде құрайды. Дегенмен, AVIF және WebP сияқты заманауи пішімдерге ауысу JPEG-мен салыстырғанда кескін салмағын 50%-ға дейін төмендетеді, бұл сапада байқалатын жоғалтусыз. Бұл форматтар маған JPG және PNG сияқты таныс болмаса да, мен оларды бет өлшемін азайту үшін пайдалануды асыға күтемін. TheДизайн мақсаты Мен жақында киберқауіпсіздік платформасының қайта дизайнын басқардым. «Дейін және кейін» аудитін жүзеге асыру арқылы біз олардың басты беті 5,5 МБ деректерді жүктеп жатқанын анықтадық. Жоғары ажыратымдылықтағы фотосуретті SVG (масштабталатын векторлық графика) өнерімен алмастыру және кескін активтерінің орнына ақылды CSS градиенттерін пайдалану арқылы біз жүктемені 1,2 МБ дейін төмендеттік. Бұл энергия жүктемесінің 78%-ға азаюы! Дизайнер ретінде сіздің бірінші сұрағыңыз әрқашан: «Бұл үшін маған фото керек пе, әлде кодпен бірдей эмоционалды резонансқа қол жеткізе аламын ба?»
Әдейі қозғалыс: «Дауысты» анимацияларды кесу Біз «айналдыру» және күрделі 3D Параллакс әсерлері дәуірінде өмір сүріп жатырмыз. Олар Awwwards.com сайтында марапаттарға ие болғанымен, олар көбінесе экологиялық апаттар болып табылады. Логика Анимация тегін емес. Күрделі анимацияны көрсету үшін құрылғының GPU (Графикалық өңдеу блогы) жоғары қуатта жұмыс істеуі керек. Бұл процессордың температурасын жоғарылатады, салқындату желдеткіштерін (ноутбуктерде) іске қосады және батареяны тез бітіреді. Үздіксіз фондық режимде жұмыс істейтін немесе шолғышты жаппай қайта бояуға түрткі болатын «дауысты» анимациялар - бұл көлікті кіре берісте бос тұрып қалдырудың энергия баламасы.
Деректер Google материалды дизайн бойынша нұсқаулықтары «Мағыналы қозғалысқа» баса назар аударады. Олар анимацияны қолданушыны бағдарлау немесе кері байланысты қамтамасыз ету үшін ғана пайдалану керек деп санайды. Және JPEG орнына WebP пайдалану беттегі деректердің 25-50% үнемдеуге мүмкіндік береді. Дизайн мақсаты Біз мағыналы қозғалысты қабылдауымыз керек. Егер анимация пайдаланушыға тапсырманы орындауға немесе иерархияны түсінуге көмектеспесе, бұл босқа кетеді. Мүмкіндігінше, GSAP немесе Lottie сияқты ауыр JavaScript кітапханаларына қарағанда CSS ауысуларына артықшылық беруіміз керек, өйткені CSS аппараттық жеделдетілген және браузер есептеуі үшін әлдеқайда тиімді. UX дизайнері ретінде мен бұл тәсілмен дау айта алмаймын. Бұл деректер шығынын азайтуға ғана емес, сонымен қатар пайдаланушыларымыз үшін UX деңгейін жақсартуға көмектеседі. Әрбір жоба үшін «Деректер бюджетін» орнату Менің 20+ жылдық UX-те ең сәтті жобалар әдетте ең қатаң шектеулері бар жобалар болды. Жобаның қаржылық бюджеті бар сияқты, оның көміртегі және деректер бюджеті де болуы керек. Логика Деректер бюджеті - бұл беттің жалпы өлшеміне қойылатын қатаң шектеу (мысалы, «Бұл бастапқы бет 1 МБ-тан аспауы керек»). Бұл дизайнерлік топты қиын, әдейі таңдау жасауға мәжбүр етеді. Егер сіз жаңа бақылау сценарийін немесе әдемі қаріп салмағын қосқыңыз келсе, ол үшін басқа нәрсені оңтайландыру немесе жою арқылы «төлеуіңіз» керек. Бұл «мүмкіндіктердің жылжуының» «көміртекті сусымалыға» айналуын болдырмайды. Деректер Wholegrain Digital сияқты пионерлер әзірлеген Тұрақты веб-дизайн үлгісі бір бетті қарау үшін CO2 есептеу формуласын ұсынады. Орташа веб-сайт бір қарау үшін шамамен 0,5 грамм CO2 шығарады. Ай сайынғы 1 миллион қаралымы бар сайт үшін бұл жылына 6 метрикалық тонна СО2, бұл көлікті 15 000 миль жүруге тең. Дизайн мақсаты Тұрақты UX бақылау тізімі
Суреттерді азайтыңыз Әрбір көрнекі бейненің қажеттілігін сұраңыз және деректерді беруді азайту үшін ең кіші ажыратымдылық пен ең тиімді файл пішімдерін (мысалы, AVIF) пайдаланыңыз. Бейнені оңтайландыру Автоматты түрде ойнатылатын медианы жою және энергияны тек пайдаланушы көргісі келетін мазмұнға жұмсау үшін жоғары сығылған, қысқа циклдарға басымдық беріңіз. Шектеу Қаріптер Ең көбі екі веб-қаріп салмағын пайдаланыңыз немесе қажетсіз сервер сұрауларын және кебулерді жою үшін классикалық жүйе қаріптерін ұстаныңыз. Активтерді қайта өңдеу Жалпы бет салмағын арттырмай көрнекі әртүрлілікті жасау үшін CSS сүзгілері мен қабаттасуы арқылы бір суретті немесе бейнені бірнеше рет қайта тағайындаңыз. Жаңартылатын энергия көздерімен жұмыс істейтініне көз жеткізу үшін Green Web Foundation растаған серверлердегі Green HostingHost сандық өнімдеріңізді таңдаңыз. Деректер қашықтығын азайтыңыз. Деректер физикалық инфрақұрылым арқылы жүруі үшін қажетті қуатты азайту үшін негізгі аудиторияңызға географиялық жақын сервер орындарын таңдаңыз.
Экологиялық таза дизайнға арналған іскерлік жағдай Кейбіреулер «Green UX» сапаға ымыраға ұқсайды деп дауласуы мүмкін. Керісінше, бұл бәсекелестік артықшылық. Тұрақты дизайн - өнімділік дизайны. Бет салмағын азайтқанда, сайт тезірек жүктеледі. Сайт жылдамырақ жүктелгенде, Core Web Vitals жақсарады. Core Web Vitals жақсарған кезде SEO рейтингі жоғарылайды. Сонымен қатар, ескі құрылғылардағы немесе баяу деректер жоспарындағы пайдаланушылар (әсіресе дамып келе жатқан нарықтарда) өніміңізге шынымен қол жеткізе алады. Бұл «инклюзивті дизайн» анықтамасы. «Сандық майды» қысқарту арқылы біз қарапайым, жылдамырақ және қол жетімді вебті жасаймыз. Біз 2010 жылдардағы «бір рет қолданылатын дизайннан» а-ға қарай жылжып жатырмызтұрақты, құрметті цифрлық архитектура. Қорытынды: «Таза» дизайнның болашағы Дизайндағы екі онжылдықта мен көптеген тенденциялардың пайда болғанын және кететінін көрдім. Скеуоморфизм, Тегіс дизайн, Нейморфизм — олардың барлығы эстетикалық таңдау болды. Бірақ тұрақты UX тренд емес; бұл қазір қажеттілік. Біз цифрлық жұмысымыздың физикалық салдарымен санасу керек дизайнерлердің бірінші буынымыз. Тұрақты UX – бұл «жеңіс-жеңіс». Бұл планета үшін жақсы, өйткені ол энергияны тұтынуды азайтады. Бұл пайдаланушы үшін жақсырақ, себебі ол жылдамырақ, жауап беретін интерфейстерге әкеледі. Бұл бизнес үшін жақсы, өйткені ол хостинг құнын төмендетеді және конверсия жылдамдығын жақсартады. «Шексіз пикселдер» дәуірі аяқталды. 2026 жылы ең күрделі дизайн ең аз із қалдыратын дизайн болып табылады. Біз енді жай ғана дизайнер емеспіз; біз пайдаланушының батареясының, олардың деректер жоспарының және сайып келгенде, қоршаған ортаның қамқоршысымыз. Әрекетке шақыру Мен сізді бүгінгі жобаңыздың бір бетін тексеруге шақырамын. Оның әсерін көру үшін Веб-сайт көміртегі калькуляторы сияқты құралды пайдаланыңыз. Содан кейін «көрінбейтін қалдықтарды» іздеңіз. Бұл сурет SVG болуы мүмкін бе? Бұл бейне статикалық кейіпкер бола ала ма? Бұл «дауысты» анимацияның дыбысын өшіруге бола ма? Кішкентайдан бастаңыз. Ең талғампаз шешім көбінесе ең аз байты бар шешім болып табылады.
