Би хэрэглэгчийн туршлагын дизайны чиглэлээр 20 гаруй жил ажилласан. Хүснэгтэд суурилсан загвараас CSS-д шилжсэн, iPhone гарсны дараа мэдрэмжтэй дизайн руу шилжсэн, "анхаарал эдийн засаг" өссөнийг би санаж байна. Гэвч бид 2026 оныг чиглэн явж байхад салбар хамгийн чухал өөрчлөлттэй нүүр тулж байна. Бид "ямар ч үнээр хамаагүй дизайн хийх" эрин үеийг даван туулж, тогтвортой UX эрин үе рүү шилжиж байна. Энэ нь миний тухай сонсоод өдөөгдөх хүртэл ихэнх дизайнерууд, тэр дундаа миний тухай боддог зүйл биш юм. Олон жилийн турш бид интернетийг эфирийн, жингүй үүл гэж үзэж ирсэн. Дижитал бүтээгдэхүүн нь цаасан дээр хэвлэгдээгүй учраас л "ногоон" байсан гэж бид таамагласан. Би ч бас тэгж боддог байсан бөгөөд уур амьсгалын өөрчлөлтийн тухай ойлголт гарч ирэхээс өмнө модыг аврах тухай л илүүтэй байсан. Бид буруу байсан. Үүл бол физик дэд бүтэц, дата төв, далайн доорх кабель, хөргөлтийн систем бүхий өргөн сүлжээ юм. Хиймэл оюун ухаанд төвлөрсөн мэдээллийн төвүүд нь хөнгөн цагаан хайлуулах томоохон үйлдвэрүүдийн эрчим хүчний хэрэглээтэй таарч байгаа ч газарзүйн өндөр нягтрал нь хүрээлэн буй орчны илүү хүчтэй, орон нутгийн ачааллыг бий болгодог. UX дизайнеруудын хувьд бид энэхүү эрчим хүчний хэрэглээний архитекторууд юм. Өндөр нягтралтай баатрын зураг, автоматаар тоглуулж буй дэвсгэр видео, бидний зөвшөөрсөн JavaScript анимаци бүр нь процессорт эрчим хүч зарцуулах шууд заавар юм. Хэрэв бид урт удаан үргэлжлэх ирээдүйг бүтээхийг хүсч байгаа бол "хөөх" гэж дизайн хийхээ больж, үр ашигтай байхын тулд дизайн хийх ёстой. Харанхуй горим 2000-аад оны эхээр цагаан дэвсгэр нь цаасны танил байдлыг дуурайлган хийдэг стандарт байсан. Гэсэн хэдий ч техник хангамж хөгжсөн бөгөөд бидний дизайны философийг дагаж мөрдөх ёстой. LCD-ээс OLED (Органик гэрэл ялгаруулах диод) технологид шилжсэнээр өнгө нь энергийн нөлөөллийг үндсээр нь өөрчилсөн.
Логик Уламжлалт LCD дэлгэцээс ялгаатай нь арын гэрэлтүүлэг үргэлж асаалттай байх шаардлагатай (хар өнгөтэй байхад ч) OLED дэлгэц нь пиксел бүрийг тус тусад нь гэрэлтүүлдэг. Пикселийг жинхэнэ хар (#000000) болгож тохируулах үед тухайн диод бүрэн унтарна. Энэ нь тэг хүчийг татдаг. Харанхуй палитрыг илүүд үздэг интерфейсийг зохион бүтээснээр бид зөвхөн чиг хандлагыг дагаж мөрддөггүй; Бид хэрэглэгчийн төхөөрөмжийн эрчим хүчний хэрэгцээг бодитоор бууруулж байна. Өгөгдөл Эрчим хүчний хэмнэлт нь ач холбогдолгүй юм. Энэхүү хэлэлцүүлгийн алтан стандарт болсон 2021 онд Пурдюгийн их сургуулиас хийсэн онцлох судалгаагаар 100% тод байх үед гэрлийн горимоос харанхуй горимд шилжих нь батерейны цэнэгийг дунджаар 39% -иас 47% хэмнэнэ. Хэрэв дэлхийн хэмжээнд томоохон программ бүр анхдагчаар харанхуй горимд шилжсэн бол сүлжээний эрэлт буурах нь одон орны хэмжээнд хүрнэ. Дизайн зорилго 2026 онд Харанхуй горим нь тохиргооны цэсэнд хадгалагдсан хоёрдогч "сэдэв" байхаа болино. Бид “Харанхуй-Эхний” сэтгэлгээгээр загвар зохион бүтээх ёстой. Энэ нь сайт бүр The Matrix шиг харагдах ёстой гэсэн үг биш, гэхдээ энэ нь өндөр тодосгогч харанхуй сэдвүүдийг системд илүүд үздэг үндсэн төлөв болгон эрэмбэлэх гэсэн үг юм. Энэ нь төхөөрөмжийн техник хангамжийн ашиглалтын хугацааг уртасгаж, харилцан үйлчлэл бүрийн нүүрстөрөгчийн ул мөрийг бууруулдаг. Би хувьдаа уншихдаа Гэрэл горимыг илүүд үздэг тул гэрэл болон харанхуй горимын аль алиныг нь ашиглах нь зүйтэй юм. Мөн энэ хоёр сонголтыг хангахад хүртээмжтэй байдлын талаар анхаарах зүйлс бий. Зураг ба видео оновчлол Бид залхуу дизайнерууд болсон. Өндөр хурдны 5G болон шилэн кабелийн тусламжтайгаар бид файлын хэмжээний талаар санаа зовохоо больсон. Сүүлийн 10 жилд гар утасны хуудасны дундаж жин 500 гаруй хувиар өссөн нь оновчгүй харааны хөрөнгөтэй холбоотой юм. Логик Вэб сайтын "Дижитал өөх" (эдгээр 4MB Unsplash зураг болон 15МБ дэвсгэр видео) нь хуудас ачаалахад хамгийн их хувь нэмэр оруулдаг. Серверээс үйлчлүүлэгч рүү шилжүүлсэн мегабайт бүр нь дамжуулалт, серверийн боловсруулалт, хэрэглэгчийн дүрслэх хөдөлгүүрт цахилгаан эрчим хүч шаарддаг. Бид асар том файлуудыг ашиглахдаа бага хэмжээгээр үр дүнтэй зургийг харуулахын тулд үндсэндээ эрчим хүчийг "шатаах" болно. Нэмж дурдахад та илүү хурдан ачаалах хуудасны тусламжтайгаар илүү сайн хэрэглэгчийн туршлагыг өгч байна.
Өгөгдөл HTTP архивын дагуу зураг болон видео нь хуудасны нийт жингийн арслангийн хувийг байнга эзэлдэг. Гэсэн хэдий ч AVIF, WebP гэх мэт орчин үеийн формат руу шилжих нь JPEG-тэй харьцуулахад зургийн жинг 50% хүртэл бууруулж, чанарын хувьд мэдэгдэхүйц алдагдалгүй болно. Хэдийгээр эдгээр форматууд нь надад JPG болон PNG шиг танил биш ч хуудасны хэмжээг багасгахын тулд тэдгээрийг ашиглахыг тэсэн ядан хүлээж байна. TheДизайн зорилго Би саяхан кибер аюулгүй байдлын платформыг дахин төлөвлөх ажлыг удирдсан. "Өмнө ба дараа" аудитыг хэрэгжүүлснээр бид тэдний нүүр хуудас 5.5МБ дата ачаалж байгааг олж мэдсэн. Өндөр нарийвчлалтай гэрэл зургийг SVG (Scalable Vector Graphics) урлагаар сольж, зургийн хөрөнгийн оронд ухаалаг CSS градиент ашигласнаар бид ачааллыг 1.2 МБ хүртэл бууруулсан. Энэ нь эрчим хүчний ачааллыг 78% бууруулсан гэсэн үг юм! Дизайнер хүний хувьд таны эхний асуулт үргэлж байх ёстой. "Надад ийм зураг хэрэгтэй юу, эсвэл кодтой ижил сэтгэл хөдлөлийн резонансыг бий болгож чадах уу?"
Зориулалтын хөдөлгөөн: "Чанга" хөдөлгөөнт дүрсийг таслах Бид "scroll-jacking" болон нарийн төвөгтэй 3D Параллакс эффектүүдийн эрин үед амьдарч байна. Эдгээр нь Awwwards.com сайтаас шагнал хүртэж болох ч ихэнхдээ экологийн гамшиг болдог. Логик Хөдөлгөөнт дүрс нь үнэ төлбөргүй биш юм. Нарийн төвөгтэй хөдөлгөөнт дүрсийг үзүүлэхийн тулд төхөөрөмжийн GPU (График боловсруулах нэгж) өндөр хүчин чадалтай ажиллах ёстой. Энэ нь CPU-ийн температурыг нэмэгдүүлж, хөргөлтийн сэнсийг (зөөврийн компьютерт) ажиллуулж, батерейг хурдан шавхдаг. Цаана нь байнга ажилладаг эсвэл хөтчийг их хэмжээгээр дахин буддаг "чанга" хөдөлгөөнт дүрсүүд нь таны машиныг зам дээр сул зогсолтгүй орхихтой тэнцэх энерги юм.
Өгөгдөл Google-ийн материал дизайны удирдамжид "Утга учиртай хөдөлгөөн"-ийг онцолсон байдаг. Тэд хөдөлгөөнт дүрсийг зөвхөн хэрэглэгчийг чиглүүлэх эсвэл санал хүсэлт өгөхөд ашиглах ёстой гэж тэд үзэж байна. JPEG-ийн оронд WebP ашиглах нь хуудасны өгөгдлийн 25-50% хэмнэж чадна. Дизайн зорилго Бид утга учиртай хөдөлгөөнийг хэрэгжүүлэх ёстой. Хэрэв хөдөлгөөнт дүрс нь хэрэглэгчдэд даалгавар гүйцэтгэх эсвэл шатлалыг ойлгоход тус болохгүй бол энэ нь дэмий зүйл болно. CSS нь техник хангамжаар хурдасгасан бөгөөд хөтчийг тооцоолоход илүү үр дүнтэй байдаг тул бид боломжтой бол GSAP эсвэл Lottie зэрэг хүнд JavaScript сангууд дээр CSS шилжилтийг илүүд үзэх хэрэгтэй. UX дизайнерын хувьд би энэ арга барилтай маргаж чадахгүй. Энэ нь өгөгдлийн зарцуулалтыг багасгахад тусалдаг төдийгүй манай хэрэглэгчдийн UX-г сайжруулдаг. Төсөл бүрийн "өгөгдлийн төсөв"-ийг тогтоох Миний UX-ийн 20 гаруй жилийн хугацаанд хамгийн амжилттай төслүүд нь ерөнхийдөө хамгийн хатуу хязгаарлалттай төслүүд байсан. Төсөл санхүүгийн төсөвтэй байдаг шиг нүүрстөрөгчийн болон мэдээллийн төсөвтэй байх ёстой. Логик Өгөгдлийн төсөв гэдэг нь хуудасны нийт хэмжээ (жишээ нь, "Энэ хуудас 1МБ-аас хэтрэхгүй") гэсэн хатуу хязгаар юм. Энэ нь дизайны багийг хэцүү, санаатай сонголт хийхэд хүргэдэг. Хэрэв та шинэ хяналтын скрипт эсвэл гоёмсог үсгийн жин нэмэхийг хүсвэл өөр зүйлийг оновчтой болгох эсвэл хасах замаар "төлөх" хэрэгтэй. Энэ нь "нүүрстөрөгчийн мөлхөгч" болж хувирахаас сэргийлдэг. Өгөгдөл Wholegrain Digital зэрэг анхдагчдын боловсруулсан Тогтвортой вэб дизайны загвар нь нэг хуудсыг үзэх CO2-ийг тооцоолох томъёог өгдөг. Дунджаар нэг вэб сайт үзэхэд 0.5 грамм CO2 ялгаруулдаг. Сард 1 сая хүн үздэг сайтын хувьд жилд 6 тонн CO2 буюу 15,000 миль явсан машинтай тэнцэнэ. Дизайн зорилго Тогтвортой UX шалгах хуудас
Зургийн хэмжээг багасгаж, визуал болгоны хэрэгцээг асууж, өгөгдөл дамжуулахыг багасгахын тулд хамгийн бага нарийвчлалтай, хамгийн үр ашигтай файлын форматыг (AVIF гэх мэт) ашигла. Видеог оновчтой болгох Автоматаар тоглуулах медиаг устгаж, эрчим хүчийг зөвхөн хэрэглэгчийн үзэхийг зорьж буй контентод зарцуулахын тулд маш шахагдсан, богино гогцоонуудыг эрэмбэлэх. Фонтуудыг хязгаарлаарай. Хамгийн ихдээ хоёр вэб фонтын жинг ашиглана уу эсвэл системийн сонгодог фонтыг ашиглан серверийн шаардлагагүй хүсэлт, бүдгэрэлтийг арилгах боломжтой. Хөрөнгийг дахин боловсруулалт Хуудасны нийт жинг нэмэгдүүлэхгүйгээр харааны олон төрлийг бий болгохын тулд CSS шүүлтүүр болон давхаргыг ашиглан нэг зураг эсвэл видеог олон удаа дахин ашиглах. Ногоон Вэб сангаас баталгаажуулсан серверүүд дээр өөрийн дижитал бүтээгдэхүүнээ Green HostingHost-ыг сонгон, тэдгээр нь сэргээгдэх эрчим хүчний эх үүсвэрээр тэжээгддэг. Өгөгдлийн зайг багасгаж, физик дэд бүтцээр дамжуулан өгөгдөл дамжуулахад шаардагдах эрчим хүчийг багасгахын тулд үндсэн үзэгчдэдээ газарзүйн хувьд ойрхон серверийн байршлыг сонго.
Байгальд ээлтэй дизайны бизнесийн жишээ Зарим хүмүүс "Ногоон UX" нь чанарын хувьд буулт хийх мэт сонсогдож магадгүй гэж маргаж магадгүй юм. Харин ч энэ нь өрсөлдөөний давуу тал юм. Тогтвортой дизайн бол гүйцэтгэлийн дизайн юм. Хуудасны жинг багасгахад таны сайт илүү хурдан ачаалагддаг. Таны сайт илүү хурдан ачаалагдах үед таны үндсэн вэб амин дэм сайжирна. Таны Core Web Vitals сайжрахад таны SEO зэрэглэл нэмэгдэнэ. Цаашилбал, хуучин төхөөрөмж эсвэл илүү удаан дата төлөвлөгөөний хэрэглэгчид (ялангуяа хөгжиж буй зах зээлд) таны бүтээгдэхүүнд хандах боломжтой. Энэ бол "Хүртээмжтэй дизайн" гэсэн тодорхойлолт юм. "Дижитал өөх" -ийг багасгаснаар бид илүү туранхай, хурдан, илүү хүртээмжтэй вэбийг бий болгодог. Бид 2010-аад оны “нэг удаагийн загвар”-аас татгалзаж, aилүү байнгын, хүндэтгэлтэй дижитал архитектур. Дүгнэлт: "Цэвэр" дизайны ирээдүй Хорин жилийн загвар зохион бүтээхдээ би олон чиг хандлага гарч ирж байгааг харсан. Skeuomorphism, Flat Design, Neumorphism - эдгээр нь бүгд гоо зүйн сонголт байсан. Гэхдээ тогтвортой UX нь чиг хандлага биш юм; энэ нь одоо зайлшгүй шаардлагатай болсон. Бид дижитал ажлынхаа физик үр дагаврыг тооцох ёстой дизайнеруудын анхны үе юм. Тогтвортой UX бол "хож-хож" юм. Энэ нь эрчим хүчний хэрэглээг бууруулдаг учраас манай гаригийн хувьд илүү дээр юм. Энэ нь илүү хурдан, илүү мэдрэмжтэй интерфэйсүүдийг бий болгодог тул хэрэглэгчдэд илүү дээр юм. Энэ нь байршуулах зардлыг бууруулж, хөрвүүлэх ханшийг сайжруулдаг тул бизнест илүү тохиромжтой. "Хязгааргүй пикселийн" эрин үе дууслаа. 2026 онд хамгийн боловсронгуй загвар бол хамгийн бага ул мөр үлдээсэн загвар юм. Бид зүгээр л дизайнер байхаа больсон; Бид хэрэглэгчийн батарей, өгөгдлийн төлөвлөгөө, эцэст нь хүрээлэн буй орчныг хамгаалагч юм. Үйлдлийн дуудлага Өнөөдөр таны одоогийн төслийн зөвхөн нэг хуудсыг аудит хийхийг уриалж байна. Үүний үр нөлөөг харахын тулд вэбсайтын нүүрстөрөгчийн тооцоолуур гэх мэт хэрэгслийг ашиглана уу. Дараа нь "үл үзэгдэх хог хаягдлыг" хайж олоорой. Энэ зураг SVG байж болох уу? Тэр видео статик баатар байж чадах уу? Энэ "чанга" хөдөлгөөнт дүрсийг чимээгүй болгож чадах уу? Жижигээс эхэл. Хамгийн гоёмсог шийдэл нь ихэвчлэн хамгийн бага байттай шийдэл байдаг.
