Dizayn vositalari ishlamayapti. Mana ularni qanday tuzatishimiz mumkin.

Kamdan-kam kun, men hech bo'lmaganda vaqtni dizayn vositalari haqida o'ylamayman. Bir necha yil oldin men Marvel tomonidan sotib olingan dizayn vositasini yaratdim. Bu ikki yildan ko'proq vaqt oldin edi, lekin shundan beri manzara deyarli o'zgarmadi va uni yaxshilashga ishtiyoqim yo'q.

Yaqinda men dizayn vositalari haqida yozdim - vaqti-vaqti bilan ma'lum bo'lgan narsa.

O'sha kuni men faqat o'zimning gaplarimni aytmadim, boshqalar ham yoqimtoy edilar.

2017 yil 28-iyul dizayn vositalari uchun yaxshi kun emas edi.

Ushbu Twitter-da juda ko'p ajoyib ma'lumotlar to'plangan, ammo uzoq vaqt davomida men hozirgi dizayn vositalarining modeli bilan tubdan buzilgan deb o'ylaydigan narsaga chuqurroq kirishga vaqt ajratishni xohlaganman. biz yo'naltiradigan yo'nalishda ishora sifatida.

Biz hammamiz rasm chizamiz. Bu aqldan ozgan.

Deyarli barcha mashhur dizayn vositalari rasmlarga eksport qiladi. Bu bir necha sabablarga ko'ra muammoli.

  1. Rasm bilan aloqa qila olmaysiz. Prototiplash vositalari bizga ekranga o'tish va tasvirlarga oddiy shovqinlarni qo'shish imkoniyatini beradi. Biroq, mahsulotlarimiz yanada rivojlangan ekranli translyatsiyalar va mikro-o'zaro ta'sirlarni talab qilishni davom etar ekan, tasvirlar shunchaki turolmaydi.
  2. Rasmlar suyuq emas. Tasvirlar orqali sezgir dizayn qarorlarini aloqa qilish odatda qiyin vazifa.
  3. Rasmlar davlatga tegishli emas. UI uchun turli davlatlar bilan samarali aloqa o'rnatish uchun ko'pincha ko'pgina rasmlar kerak bo'ladi.
  4. Bitmap rasmlari piksellar soniga bog'liq. Ko'zni to'r pardasi paydo bo'lishi bilan, ba'zida tasvirlar yomon ko'rinishi mumkin.
  5. Rasmlar fayllari og'ir bo'lib, ularni saqlash, boshqarish yoki ulashish qiyin bo'ladi.

Dizayn vositalari tasvirlarni eksport qilishni davom ettirar ekan, ular hech qachon bizning mahsulotlarimizning aniq tasvirlarini ishlab chiqara olmaydilar. Ushbu aniqlikning etishmasligi dizaynerlar va ishlab chiquvchilar o'rtasidagi aloqaga to'sqinlik qiladi. Dizaynerlar o'zlarining ishini etkazish uchun noqulay muhitdan foydalanishda davom etar ekan, bu ish har doim noto'g'ri talqin qilish uchun ochiq bo'ladi.

Bu juda muhim nuqta, chunki deyarli barcha dizayn vositalari vektor shakllarini tasvirlarga o'zgartiradi. Photoshop, Illustrator, Marvel, Adobe XD, Sketch va Figma bu borada bir xil. Shunga qaramay, tasvirlar qisman dizayn maqsadi bilan aloqa qilishi mumkin. Mahsulotlarimiz murakkab shovqinlarni, ovozli kiritish, video kirish, kengaytirilgan haqiqat, virtual haqiqat, harorat sezgirligi va boshqalarni qabul qilish va qo'llab-quvvatlashda davom etar ekan, ushbu vositalarning qiymati tezda pasayadi. Rasmga asoslangan dizayn - bu oxiri yo'q.

Bizning dizayn vositalarimiz rasmni emas, balki haqiqiy mahsulotni boshqarishi kerak.

Mahsulotlarimiz interaktivdir. Bizning vositalarimiz statikdir.

Men bu haqda avvalgi fikrlarimda aytib o'tdim, lekin bu juda muhim, shuning uchun biroz ishlab chiqishga qaror qildim.

Deyarli barcha mahsulotlarimizda odatiy bo'lgan, ammo bizning dizayn vositalarimiz bilan bog'lanib bo'lmaydigan oddiy shovqinlarning miqdorini o'ylab ko'ring. Mana mening boshimning tepasidagi qisqacha ro'yxat:

  • Tugmani aylantirish
  • Kiritishga e'tibor qaratish
  • Belgilash katakchasini belgilash
  • Jadvalning tarkibi
  • Maydonlarni aylantiring
  • Fokuslangan holatlar uchun tab indeksi
  • Klaviatura yorliqlari

Bu xususiyatlarning ba'zilari notekis muhandislik bilan taqqoslanishi mumkin, ammo bitta savol tug'ilishi kerak - Yerda nima bor? Nega dizaynerlar shunchaki haqiqiy mahsulotni ishlab chiqara olmaydi ?! Oxir oqibat, barcha masxarabozlar bir martalik foydalanishadi, ammo dizaynerlar ularni takomillashtirish uchun bir necha oy sarflashadi. O'sha vaqt haqiqiy mahsulotni ishlab chiqarishga sarflangan bo'lsa yaxshi bo'lar edi.

Men "dizaynerlar kodi" quyon teshigidan juda pastga tushmayman, lekin barchamizga kod yozishni maslahat bermayman. Men shunchaki aytmoqchimanki, bizning dizayn vositalarimiz jonli mahsulotlarimizning to'g'ridan-to'g'ri manipulyatsiyasini qo'llab-quvvatlay olmaydi.

Framer ushbu bo'limning ko'pchiligiga qaraganda yaxshiroq ishlaydi, ilg'or va batafsil o'zaro aloqalarni qo'llab-quvvatlaydi. Paketning qolgan qismi juda orqada.

Bizning vositalarimiz veb-sayt paradigmasini qo'llab-quvvatlashi kerak

Taxminan bir yil oldin, Internetda sxemalarni yaratishning yagona usuli displeydan foydalanish edi: jadval va vertikal-tekislash CSS xususiyatlari. Endi bizda Flexbox bor va tez orada bizda CSS-panjara bo'ladi. Ushbu uchta sxemali dvigatellar bir xil darajada ishlaydi va DOM oqimidan foydalanadi. Deyarli barcha veb-saytlar ushbu uchta tartib tizimidan birini ishlatib qurilgan.

Shunday qilib, bizning dizayn vositalarimiz bir xil maket modelini qo'llab-quvvatlashi mantiqiy. To'g'ri?

Xo'sh, deyarli barcha dizayn vositalari ushbu tartib tizimlarini e'tiborsiz qoldiradi, buning o'rniga har bir qavatni mutlaqo o'zining artboardiga joylashtiradi. Bu veb-vazifalarning qanday ishlashi va bizning dizayn vositalarimiz qanday ishlashi o'rtasidagi farqni ochib beradi, ko'plab muammolarni keltirib chiqaradi:

  • Javob berish dizayni juda qiyinlashadi, chunki har bir tanaffus uchun har bir qatlam qo'lda qayta tartibga solinishi kerak. Shu bilan bir qatorda, cheklovlarga asoslangan tartib tizimini joriy etish mumkin, ammo bu murakkablikni oshiradi, o'rganishni kuchaytiradi va natijada ishlab chiquvchilarni to'g'ridan-to'g'ri veb-saytga o'tkazishni oldini oladi.
  • Har bir qatlam hujjat oqimidan tashqarida bo'lganligi sababli, tarkibni boshqarish murakkab bo'ladi. Masalan, agar siz biror narsani ro'yxatga qo'shmoqchi bo'lsangiz, ushbu ro'yxatdagi boshqa elementlarni qo'lda joylashtirishingiz kerak. Albatta, og'riqni engillashtirish uchun takroriy funktsiyalarni va boshqa xayoliy xususiyatlarni kiritish mumkin, ammo yana bu qo'shimcha murakkablikni keltirib chiqaradi va DOM bizga bepul beradigan narsani murakkablashtiradi.
  • Mutlaq joylashishni aniqlash tabiiy ravishda pikselning koordinatalari va o'lchamlariga olib keladi. Bu moslashuvchanlikni keltirib chiqaradi va yana veb ishlashidan juda katta ajralib chiqadi. Internet em, rem, vh, vw va% kabi suyuqlik birliklariga qurilgan. Bizning vositalar sukut bo'yicha ushbu birliklarni qo'llab-quvvatlashlari kerak.

Dizayn vositalari Internetga va uning nuanslariga o'xshamasligi yoki aks ettirmasligi kerak - ular shunchaki Internet bo'lishi kerak.

Monolit vosita bu yo'l emas

Yaxshi dizayn bosqichma-bosqich amalga oshiriladi. Yaxshi tuzilgan dizayn tizimi bir nechta aniq qatlamlarga ega:

  1. Uslublar palitrasi Brendingizning o'ziga xosligini shakllantiradigan ranglar, soyalar, intervallar, chegaralar radiusi, shrift o'lchamlari, animatsiyalar va boshqa uslublar to'plami. Hozirgi vaqtda aksariyat dizayn vositalari faqat rang palitralarini qo'llab-quvvatlaydi. Ular boshqa uslub xususiyatlarini qo'llab-quvvatlamaguncha, ularni muntazam ravishda loyihalashtirish juda qiyin bo'ladi.
  2. Aktivlar Bunga piktogramma, rasmlar va rasmlar kabi elementlar kiradi. U erda bir nechta fenomenal tasvir muharrirlari bor va Figma-ning vektor vositasi juda zo'r, ammo SVG-ni qo'llab-quvvatlash haqida gap ketganda, bizning dizayn vositalarimiz juda ko'p narsani xohlaydi.
  3. Komponentlar kutubxonasi Komponent bu turli xil o'zgarishlarda bitta elementga ma'lumotlarni etkazib beradigan jihozlar va aktivlar to'plami. Bunga misollar: tugmalar, kirishlar, rozetkalar va boshqalar. Aytganimdek, Figma va Sketch yaqinda ushbu jarayonni asosiy chizma oqimidan uzoqlashtirdilar - achinarli narsa, ular shunchaki tarkibiy qismlar emas, balki rasmlardir.
  4. Modullar Modul / kompozitsiya - bu turli xil holatlarda UI-ning kapsullangan qismiga ma'lumotlarni etkazib beradigan komponentlar to'plamidir. Bunga misollar sarlavha panellari, tablar menyusi, kirish shakllari, jadvallar va hokazolarni o'z ichiga olishi mumkin. Modullar shunchaki murakkab tarkibiy qismlar bo'lganligi sababli, menimcha, Figma va Sketch bularni ham bajara oladi. Garchi ikkalasini ajratish uchun biron bir yaxshilik bo'lsa ham.
  5. Ekranlar Ekran bu foydalanuvchi bilan o'zaro ishlashi mumkin bo'lgan to'liq foydalanuvchi interfeysini yaratish uchun modullar, tarkibiy qismlar va ma'lumotlar to'plamidir.

Dizayn vositalarining aksariyati ushbu dizayn bosqichlarining har birini biron bir darajada qo'llab-quvvatlaydigan xususiyatlarni taqdim etadi. Muammo shundaki, barcha bosqichlar o'zaro bog'liq. Deyarli barcha dizayn vositalari faqat bitta usulni - chizish rejimini taklif qiladi. Siz artbordlar to'plamini yaratasiz va shunchaki rasm chizishni boshlaysiz. Yaqinda Sketch va Figma kabi abstraktsiyalangan komponentlar / belgilar kabi vositalar asosiy rasm chizish rejimidan uzoqda edi - bu g'alati, chunki old qismni ishlab chiqishda komponentlar ko'p yillar davomida mavhum bo'lib kelgan.

Uslublar palitrasini yaratishda men artbordlar yoki vektor vositalarini ko'rishga hojat yo'q. Uyg'un ranglarni tanlash uchun vositalarni ko'rishni xohlayman. Men 8dp oraliq o'lchovi yoki turdagi o'lchovlarni tanlash kabi narsalarni oldindan belgilashni xohlayman.

Belgini loyihalashtirish foydalanuvchi oqimini loyihalash uchun mutlaqo boshqacha fikrlash tarzini talab qiladi. Menga SVG to'rtburchaklar, doiralar, chiziqlar va yo'llarni chizish uchun ruxsat bergan oddiy SVG tahrirlovchisim ideal bo'lar edi.

Komponentni loyihalashda men endi shaxsiy uslublar haqida o'ylamasligim kerak - men shunchaki oldindan belgilangan uslublar palitrasidan uslublarni tanlashim kerak. Men shunchaki bitta komponent uchun uslublarni tiklay olmayman, chunki bu mening dizayn tizimimning samarasini pasaytirib, nomuvofiqlikni keltirib chiqarishi mumkin. Uslub palitrasi mavjud bo'lganda, uni faqat manbada tahrirlash kerak.

Shunga o'xshab, modul tuzishda men faqat oldindan belgilangan komponentlar kutubxonasiga kirishim kerak. Yon panelda uslublar xususiyatlari bo'lmasligi kerak. Vektorli vositalar yo'q. Qayta foydalanish mumkin bo'lgan tarkibiy qismlarning kutubxonasi, men ularni modullarni tuzish uchun sudrab olib tashlashim mumkin.

Xuddi shu narsa kompozitsion ekranlar uchun ham amal qiladi. Ayni paytda biz interfeys interfeysi yaratish uchun faqat tarkibiy qismlar va modullardan foydalanmoqdamiz. Biz uslublar yoki shakllar yoki boshqa ijodiy harakatlar haqida o'ylamaymiz. Biz asosan tarkibni va foydalanuvchi oqimlarini loyihalashga qaratilganmiz.

Ushbu dizayn bosqichlarining har biri alohida asboblarda yoki bitta asbob ichida turli xil rejimlarda amalga oshirilishi mumkin. Menimcha bu juda muhim emas. Bir narsa, amin bo'lish kerak, ammo zamonaviy dizayn vositalarining aksariyati hatto jarayonni tan olmaydilar.

Bizning vositalar yaxshi dizaynni rag'batlantirishi kerak

Dizaynerlar noyob hashamatga ega bo'lib, ular cheksiz ko'p sonli noyob uslublarni loyihaga hech qanday sezilarli ta'sir ko'rsatmasdan kiritishlari mumkin. Shriftning kattaroq kattaligi kerakmi? Uni shunchaki siqib qo'ying. Biggie yo‘q. Bir oz yorqinroq rang kerakmi? Buni shunchaki chayqab qo'ying. Zo'r. Siz hatto bitta loyihada bir nechta artbordlarni yaratishingiz mumkin, ularning har biri o'xshash uslublar uchun bir oz farq qiladigan qiymatlardan foydalanadi va ehtimol bu beparvo bo'ladi.

Sizning dizayn vositangiz hech qachon biron bir narsani qilolmaysiz deb aytmaydi. Brenddan tashqari rangni ishlatganingiz uchun sizni hech qachon jalb qilmaydi. Bo'sh joy qiymatiga ega bo'lishingiz sizga hech qachon to'sqinlik qilmaydi. Hech qachon aholining 20 foizi siz o'zingiz o'ylab topgan och kulrang matnni ko'ra olmaydi, deb sizni ogohlantirmaydi.

Va nega…? Dizayn vositalari bunga ahamiyat bermaydi.

Dizayn vositalari cheksiz ijodkorlik haqidagi tasavvurga shunchalik ilhomlantirganki, ular oqilona dizayni, har tomonlama loyihalashni, tizimli ravishda loyihalashni anglatishini unutib qo'ydilar.

Oddiy qilib aytganda, dizayn vositalari biz xohlagan do'zaxni bajarishga imkon beradi. Bir darajaga qadar, bu cheksiz ijodkorlik darajasi, ayniqsa fikrlash bosqichlarida foydalidir. UI dizaynerlari kabi, bizning ish oqimimizning aksariyati ko'p ijodkorlikni talab qilmaydi. Aksincha, bizning ish oqimimiz qayta foydalanish, takrorlash, tanishish va standartlashtirishni talab qiladi; bizning vositalarimiz unchalik talab etmaydigan ehtiyojlar.

Ushbu cheksiz erkinlik veb-ishlab chiqish haqiqatiga ziddir. Ishlab chiquvchilar haqiqiy mahsulot bilan ishlayotganligi sababli, ularning barchasi bir xil kod bilan ishlashlari kerak. Ishlab chiquvchilar shunchaki ajratilgan shrift o'lchamlarini yoki tasodifiy rang qiymatlarini kod bazasiga qo'sha olmaydi. Birinchidan, liner (noto'g'ri yozilgan kod haqida ogohlantiruvchi xabar) darhol qichqirishni boshlaydi. Agar yo'q bo'lsa, unda ularning mahoratli mahoratlari, ehtimol kodni ko'rib chiqish paytida qo'lga olinishi mumkin edi. Agar qandaydir yo'l bilan yoriqlar orasidan o'tib ketsa, natijada sezilarli ish vaqti signalni chiqaradi.

Mahsulot jamoalarida ko'radigan eng katta muammolardan biri bu dizayn va ishlab chiqish guruhlari o'rtasidagi uzilish. Ishlab chiquvchilar yillar davomida qat'iy ko'rsatmalar va cheklovlar bilan ishlamoqda. Agar bizning dizayn vositalarimiz ushbu cheklovlarni qabul qilmasa, bo'shliq hech qachon toraymaydi.

Biz jonli ma'lumotlar bilan loyihalashtirishimiz kerak

Jonli ma'lumotlar ma'lum darajada ko'p vositalar tomonidan kiritilgan, bu juda yaxshi. Adobe XD oddiy jonli ma'lumotlarga o'xshash soxta ma'lumotlarni yaratish uchun juda aniq xususiyatlarga ega. Invision Craft shuningdek, Sketch uchun jonli ma'lumotlarning ba'zi ajoyib xususiyatlarini taqdim etadi.

Jonli ma'lumotlar matn bilan to'xtamasligi kerak. Rasmlar va video kabi boshqa elementlar yuk vaqtini sezilarli darajada oshirish orqali foydalanuvchi tajribasiga katta ta'sir ko'rsatishi mumkin. Agar siz Internetda ishlayotgan bo'lsangiz, brauzer dasturiy vositasi turli xil Internet tezligiga o'xshab ulanishni buzishga imkon beradi. Keyin, yangi tarkibning foydalanuvchi tajribasiga qanday ta'sir qilishi mumkinligini o'zingiz ko'rishingiz mumkin.

Bizning dizayn vositalarimiz bu hashamatni taqdim etadimi?

Bir so'z bilan: yo'q.

Haqiqiy mahsulotni loyihalashtirishga qanchalik yaqinlashsak, dizayn ishimiz shunchalik foydali va ta'sirchan bo'lishi mumkin.

Internet ochiq. Bizning vositalarimiz ham bo'lishi kerak.

Internetdagi haqiqatan ham go'zal narsalardan biri bu ochiq kirishdir. Veb-saytni istalgan qurilmada istalgan veb-brauzerda ko'rish mumkin.

Bu dizayn vositalari bilan qanday taqqoslanadi? Bir necha kun oldin, akam Dovud mendan o'zi qurayotgan ilovani loyihalashtirishni so'rab murojaat qildi. U menga eskiz faylini yubordi. Uni ochganimda, bu sodir bo'ldi ...

Dizayn vositalarining aksariyati devorli bog'lardir. Agar bitta hamkasbingiz Photoshop-da ishlayotgan bo'lsa, boshqa hamkasb ushbu loyihani Sketch-da ocholmaydi. Butun jamoangizni bir xil vositadan foydalanishingizning o'zi etarli emas - ular shuningdek ushbu vositaning bir xil versiyasidan foydalanishlari kerak.

Marvel va Figma bu erda juda yaxshi ish qilishadi, bepul rejalar va hamkorlikning yangi xususiyatlarini taklif qilishadi.

Xo'sh, dizayn vositalarining kelajagi qanday?

Dizayn vositalarini yaratishda innovatsiya juda qimmatlidir va yaqinda bu juda ko'p edi. Airbnb dizayn vositalarida Jon Gold va Benjamin Uilkins React-Sketchapp ustida ishlaydilar, ular React tarkibiy qismlarini oladi va ularni Sketch ichiga joylashtiradi. Jon va Ben shuningdek, salfetkalarning eskizlarini oladigan va ularni qandaydir tarzda reaktsiyaning tarkibiy qismlariga aylantiradigan aqlga zid yangi vosita ustida ishlamoqda.

Adam Morse, Brent Jekson va Jon Otander Compositor-da ushbu maqoladagi va balki dunyodagi barcha muammolarni hal qiladigan vositalar to'plami ustida ishlamoqdalar.

Men Modulz - yangi dizayn vositasi va ochiq manbali dizayn tizimi ustida ishlamoqdaman, u ham ushbu maqolada aytib o'tgan muammolarimni hal qilishga qaratilgan. Agar qiziqsangiz, yangilanishlarni Twitter-da kuzatib boring.

Asbobsozlik sohasidagi innovatsiyalar muhim bo'lsa-da, eng muhim muammo bu ta'lim. Dizayn hamjamiyati tizimli dizayn vositasiga tayyor emas. Ko'pgina dizaynerlar qurilish tizimlariga qiziqish bildirishmaydi. Ba'zilar uchun JPG so'nggi maqsad - Dribbllni yaxshi ko'radi.

Biz qandaydir tarzda hisob berish madaniyatini ilhomlantirishimiz kerak. Ishlab chiquvchilar yillar davomida hisob berish madaniyati bilan ajralib turishdi. Ularda kodni tekshirish uchun vositalar mavjud. Agar ishlab chiquvchi qayta-qayta ularning qat'iy kodi ko'rsatmalaridan voz kechsa, muammoning hal qilinishiga amin bo'lishingiz mumkin.

Shu bilan birga, dizaynerlar tez-tez qatlamlarning tog'larini yig'ib olishadi, ular qatlam nomlanishi, guruhlanishi va tartibiga kam ahamiyat berishadi. Bu har birining o'ziga xosligi. Chiqish (rastrli rasm) kirish (vektor qatlamlari) tomonidan ta'sirlanmaganligi sababli, tashkil etilishi kerak bo'lgan dizaynerlarga hech qanday aniq yuk bo'lmaydi. Dizaynerlar bunday tashkil etishmasligini ko'pincha dizaynerlik san'atini romantizatsiya qilish orqali oqlaydilar, o'zlarini ijro etish uchun o'z qurilmalarida qoldirishlari kerak bo'lgan sehrgarlardek bo'yashadi.

Shuningdek, biz inklyuziya madaniyatini ilhomlantirishimiz kerak. Ko'p odamlar uchun matnni o'qishni qiyinlashtiradigan ultra yengil matn ranglari yoki veb-sahifalarni yuklab olishni sekinlashtiradigan juda yuqori sifatli yozuvlar yoki rang-barang odamlar uchun tushunishni qiyinlashtiradigan naqshsiz UI elementlari kabi xatolarni faol ravishda to'xtatishimiz kerak. Hozirgi vaqtda ushbu turdagi buzilishlar dizayn jamoatchiligi tomonidan olqishlanmoqda. Agar biz aqlli dizayn vositasini kutib olsak, ushbu madaniyatni inkor etishimiz kerak.

Agar tizimli dizayn vositasi qalbimizni zabt etishni xohlasa, avvalo uni tarbiyalashi kerak.