UI to'plamidan dizayn tizimiga

Ivy onlayn kino tajribasi

2017 yil boshida biz o'z dizaynimizni kodga yetkazib berish tizimini yaratish haqida o'ylaganimizda, ko'pchilik allaqachon bu haqda gapirgan, ba'zilari esa buni amalga oshirishgan. Biroq, bugungi kunga qadar o'zaro faoliyat platformali dizayn tizimlarini yaratish tajribasi haqida juda kam narsa ma'lum va dizaynni amalga oshirish jarayonini allaqachon ishlaydigan mahsulotga aylantirish uchun texnologiyalar va usullarni tavsiflovchi aniq va tasdiqlangan retseptlar mavjud emas. Va "koddagi komponentlar" deganda ular ko'pincha juda boshqacha narsalarni anglatadi.

Shu bilan birga, kompaniya o'z xodimlarini yildan-yilga ikki baravar ko'paytirdi - dizayn bo'limini kengaytirish va ishlab chiqish uchun maketlarni yaratish va o'tkazish jarayonlarini optimallashtirish kerak edi. Biz bularning barchasini qo'llab-quvvatlanishi kerak bo'lgan platformalarning "hayvonot bog'i" bilan ko'paytiramiz va biz oddiygina "odatda qila olmaydi" va daromad keltira olmaydigan Bobil pandemoniyasiga o'xshaymiz. Platformalarning rivojlanishi ko'pincha parallel ravishda davom etdi va bir xil funksionallik bir necha oylik kechikish bilan turli platformalarda chiqarilishi mumkin edi.


Har bir platforma uchun alohida tartib to'plamlari

Odatdagidek, biz dizayn tizimi hal qilishga yordam beradigan muammolardan boshladik va dizayn talablarini shakllantirdik. Yagona vizual tilni yaratish, maket va ishlab chiqish tezligini oshirish va mahsulotning umumiy sifatini yaxshilashdan tashqari, dizaynni iloji boricha birlashtirish juda muhim edi. Bu barcha platformalarimizda bir vaqtning o'zida funktsional ishlab chiqish mumkinligini ta'minlash uchun zarur edi: veb, iOS, Android, Smart TV, tvOS, Android TV Windows 10, Xbox One, PS4, Roku — har biri ustida alohida ishlash shart emas. Va biz buni uddaladik!

Dizayn → ma'lumotlar

Mahsulot va ishlab chiqish bo'limlari o'rtasida fundamental kelishuvlarga erishilgandan so'ng, biz texnologiya to'plamini tanlash va butun jarayonning tafsilotlarini ishlab chiqish uchun o'tirdik - dizayndan tortib to chiqarilishgacha. Dizaynni ishlab chiqishga o'tkazish jarayonini to'liq avtomatlashtirish uchun biz tarkibiy qismlar parametrlarini to'g'ridan-to'g'ri Sketch fayllaridan sxemalar bilan tahlil qilish variantini ko'rib chiqdik. Ma'lum bo'lishicha, bizga kerak bo'lgan kod qismlarini topish va kerakli parametrlarni olish murakkab va xavfli ish edi. Birinchidan, dizaynerlar manba kodining barcha qatlamlarini nomlashda juda ehtiyot bo'lishlari kerak bo'ladi, ikkinchidan, bu faqat eng oddiy komponentlar uchun ishlaydi, uchinchidan, Sketch-ning asl sxemasining boshqa birovning texnologiyasi va kod tuzilishiga bog'liqligi butun dunyoning kelajagini xavf ostiga qo'yadi. loyiha. Biz bu sohada avtomatlashtirishdan voz kechishga qaror qildik. Shunday qilib, loyihalash tizimi jamoasida birinchi shaxs paydo bo'ldi, uning kirishi dizayn sxemalari va chiqishi komponentlarning barcha parametrlarini tavsiflovchi va atomik dizayn metodologiyasiga muvofiq ierarxik tartiblangan ma'lumotlardir.

Ma'lumotlarni qayerda va qanday saqlash, uni ishlab chiqishga qanday o'tkazish va biz qo'llab-quvvatlaydigan barcha platformalarda ishlab chiqishda qanday izohlash kerak bo'lgan yagona narsa qoldi. Kechqurun tinmay o‘tdi... Dizaynerlar va har bir platformadagi guruh rahbarlaridan iborat ishchi guruhning muntazam yig‘ilishlari natijasi quyidagilar bo‘yicha kelishuvga erishildi.

Vizualni qo'lda atom elementlariga ajratamiz: shriftlar, ranglar, shaffoflik, chekinishlar, yaxlitlashlar, piktogrammalar, rasmlar va animatsiyalarning davomiyligi. Va biz bu tugmalar, kirishlar, tasdiqlash qutilari, bank kartasi vidjetlari va boshqalarni yig'amiz. Biz har qanday darajadagi uslublarga semantik bo'lmagan nomlarni beramiz, piktogrammalardan tashqari, masalan, shaharlar nomlari, nimfalar nomlari, Pokemon, avtomobil brendlar... Faqat bitta shart bor - avval ro'yxat tugamasligi kerak , uslublar qanday tugashi - ko'rsatuv borishi kerak! Masalan, "kichik" va "o'rta" o'rtasida o'rta tugmani qo'shmaslik uchun siz semantika bilan shug'ullanmasligingiz kerak.

Vizual til

Ishlab chiquvchilar barcha platformalarga mos keladigan tarzda ma'lumotlarni qanday saqlash va uzatish haqida o'ylashlari kerak edi va dizayn yaxshi ko'rinadigan va qo'llab-quvvatlanadigan qurilmalarning butun parkida samarali ishlashi mumkin bo'lgan interfeys elementlarini loyihalashtirishi kerak edi.

Biz allaqachon ilovadagi dizayn elementlarining aksariyatini quyidagi ostida sinab ko'rishga muvaffaq bo'ldik Windows 10, o'sha paytda bu biz uchun yangi platforma edi, ya'ni uni noldan chizish va ishlab chiqish kerak edi. Uni chizish orqali biz komponentlarning aksariyatini tayyorlash va sinovdan o'tkazishga muvaffaq bo'ldik hamda qaysilari kelajakdagi Evie dizayn tizimiga kiritilishini tushundik. Bunday "qum qutisi" bo'lmaganda, shunga o'xshash tajribani faqat mavjud platformalarda bir yildan ko'proq vaqt talab etiladigan ko'plab iteratsiyalar orqali olish mumkin edi.

Turli platformalarda bir xil komponentlardan qayta foydalanish dizayn tizimining sxemalari sonini va ma'lumotlar majmuasini sezilarli darajada kamaytiradi, shuning uchun dizayn ilgari mahsulotni loyihalash va ishlab chiqish amaliyotida tasvirlanmagan yana bir muammoni hal qilishi kerak edi - masalan, qanday qilib, telefonlar va planshetlar uchun tugmani televizorlarda qayta ishlatish mumkinmi? Va bunday turli platformalarda shriftlar va elementlarning o'lchamlari bilan nima qilishimiz kerak?

Shubhasiz, har bir aniq platforma uchun bizga kerak bo'lgan matn va elementlar o'lchamlarini o'rnatadigan platformalararo modulli panjarani loyihalash kerak edi. To'r uchun boshlang'ich nuqta sifatida biz ma'lum bir ekranda ko'rmoqchi bo'lgan kino afishalarining o'lchami va sonini tanladik va shunga asoslanib, bitta ustunning kengligi teng bo'lishi sharti bilan panjara ustunlarini qurish qoidasini ishlab chiqdik. afishaning kengligigacha.

Endi biz barcha katta ekranlarni bir xil o'lchamdagi tartibda joylashtirishimiz va ularni bir xil panjara ichiga joylashtirishimiz kerak. Apple TV va Roku 1920x1080 o'lchamlari uchun mo'ljallangan. Android Televizor — 960×540, Smart TV’lar, ishlab chiqaruvchiga qarab, bir xil yoki 1280×720 bo‘lishi mumkin. Ilova renderlanganda va Full HD ekranlarida namoyish etilganda, 960 2 ga, 1280 1,33 ga ko‘paytiriladi va 1920 avvalgidek ko‘rsatiladi.

Zerikarli tafsilotlarni o'tkazib yuborib, biz shunday xulosaga keldikki, umuman olganda, barcha ekranlar, shu jumladan televizor ekranlari, elementlar va ularning o'lchamlari bo'yicha, bitta dizayn sxemasi bilan qoplangan va barcha televizor ekranlari umumiy o'zaro faoliyat to'rning alohida holati, va o'rtacha planshet yoki ish stoli kabi besh yoki oltita ustundan iborat. Tafsilotlar kimni qiziqtirsa, sharhlarga o'ting.

Barcha platformalar uchun yagona UI

Endi yangi xususiyatni chizish uchun biz har bir platforma uchun maketlarni va ularning har biri uchun moslashish imkoniyatlarini chizishimiz shart emas. Har qanday kenglikdagi barcha platformalar va qurilmalar uchun bitta tartibni va uning moslashuvchanligini ko'rsatish kifoya: telefonlar - 320-599, qolganlari - 600-1280.

Ma'lumotlar → ishlab chiqish

Albatta, biz butunlay birlashtirilgan dizaynga erishishni qanchalik istasak, har bir platforma o'ziga xos xususiyatlarga ega. Internet ham, Smart TV ham ReactJS + TypeScript stekidan foydalansa ham, Smart TV ilovasi eski WebKit va Presto mijozlarida ishlaydi va shuning uchun uslublarni internet bilan baham ko‘ra olmaydi. Va elektron pochta xabarnomalari butunlay jadval tartibi bilan ishlashga majbur. Shu bilan birga, html bo'lmagan platformalarning hech biri React Native yoki uning analoglaridan foydalanmaydi yoki foydalanishni rejalashtirmaydi, chunki unumdorlikning pasayishidan qo'rqib, bizda juda ko'p shaxsiy maketlar, murakkab yangilanish mantiqiga ega to'plamlar, rasmlar va videolar mavjud. Shuning uchun tayyor CSS uslublarini yoki React komponentlarini yetkazib berishning umumiy sxemasi biz uchun mos emas. Shuning uchun biz qiymatlarni mavhum deklarativ shaklda tasvirlab, JSON formatida ma'lumotlarni uzatishga qaror qildik.

Shunday qilib, mulk rounding: 8 ariza Windows 10 aylanadi CornerRadius="8", veb- border-radius: 8px, Android - android:radius="8dp", iOS - self.layer.cornerRadius = 8.0.
Mulk offsetTop: 12 turli hollarda bir xil veb-mijoz sifatida talqin qilishi mumkin top, margin-top, padding-top yoki transform

Tavsifning deklarativ tabiati, agar platforma texnik jihatdan xususiyatdan yoki uning qiymatidan foydalana olmasa, uni e'tiborsiz qoldirishi mumkinligini ham anglatadi. Terminologiya nuqtai nazaridan, biz o'ziga xos Esperanto tilini yaratdik: biz biror narsani ... dan oldik. Android, ba'zilari SVG dan, ba'zilari CSS dan.

Agar ma'lum bir platformada siz elementlarni boshqacha ko'rsatishingiz kerak bo'lsa, biz tegishli ma'lumotlarni ishlab chiqarishni alohida JSON fayli shaklida o'tkazish imkoniyatini amalga oshirdik. Masalan, Smart TV uchun "fokusda" holati afisha ostidagi matn o'rnini o'zgartirishni talab qiladi, ya'ni ushbu platforma uchun "indent" xususiyati qiymatidagi ushbu komponent unga kerak bo'lgan 8 chekinish nuqtasini o'z ichiga oladi. Garchi bu dizayn tizimining infratuzilmasini murakkablashtirsa-da, bu bizga qo'shimcha erkinlik darajasini beradi, bu bizga platformalarning vizual "o'xshashligi" ni o'zimiz boshqarish va biz yaratgan arxitektura garovi bo'lmaslik imkoniyatini beradi.

Piktogrammalar

Raqamli mahsulotdagi ikonografiya har doim katta hajmli va eng oddiy kichik loyiha emas, ko'pincha alohida dizaynerni talab qiladi. Har doim juda ko'p gliflar mavjud, ularning har biri bir nechta o'lcham va ranglarga ega va platformalar odatda ularni turli formatlarda talab qiladi. Umuman olganda, bularning barchasini dizayn tizimiga kiritmaslik uchun hech qanday sabab yo'q edi.

Gliflar SVG vektor formatida yuklanadi va rang qiymatlari avtomatik ravishda o'zgaruvchilar bilan almashtiriladi. Mijoz ilovalari ularni ishlatishga tayyor holda – istalgan format va rangda qabul qilishi mumkin.

Oldindan ko'rish

JSON ma'lumotlariga qo'shimcha ravishda biz komponentlarni oldindan ko'rish vositasini yozdik - JSON ma'lumotlarini belgilash va uslublar generatorlari orqali tezda uzatuvchi va brauzerda har bir komponentning turli xil o'zgarishlarini ko'rsatadigan JS ilovasi. Aslida, oldindan ko'rish platforma ilovalari bilan bir xil mijozdir va bir xil ma'lumotlar bilan ishlaydi.

Muayyan komponent qanday ishlashini tushunishning eng oson yo'li u bilan o'zaro ta'sir qilishdir. Shuning uchun biz Hikoyalar kitobi kabi vositalardan foydalanmadik, lekin interaktiv oldindan ko'rishni amalga oshirdik - siz tegishingiz, ko'rsatishingiz, bosishingiz mumkin... Dizayn tizimiga yangi komponent qo'shganda, u oldindan ko'rishda paydo bo'ladi, shunda platformalar qachon e'tibor berish kerak bo'lgan narsaga ega bo'ladi. uni amalga oshirish.

Hujjatlash

JSON ko'rinishida platformalarga taqdim etilgan ma'lumotlarga asoslanib, komponentlar uchun hujjatlar avtomatik ravishda yaratiladi. Xususiyatlarning ro'yxati va ularning har birida mumkin bo'lgan qiymat turlari tasvirlangan. Avtomatik yaratishdan so'ng, ma'lumotni qo'lda aniqlashtirish va matn tavsifini qo'shish mumkin. Oldindan ko'rish va hujjatlar har bir komponent darajasida bir-biriga o'zaro bog'langan va hujjatlarga kiritilgan barcha ma'lumotlar ishlab chiquvchilar uchun qo'shimcha JSON fayllari ko'rinishida mavjud.

Deprekator

Yana bir zarurat, vaqt o'tishi bilan mavjud komponentlarni almashtirish va yangilash qobiliyati edi. Dizayn tizimi ishlab chiquvchilarga qaysi xususiyatlardan yoki hatto butun komponentlardan foydalanish mumkin emasligini aytishni va barcha platformalarda foydalanilmay qolishi bilanoq ularni olib tashlashni o'rgandi. Bu jarayonda hali ko'p "qo'l" mehnat bor, lekin biz bir joyda turmayapmiz.

Mijozlarni rivojlantirish

Shubhasiz, eng murakkab bosqich dizayn tizimi ma'lumotlarini biz qo'llab-quvvatlaydigan barcha platformalarning kodiga talqin qilish edi. Masalan, vebdagi modulli panjaralar yangilik emas, iOS va iOS uchun mahalliy mobil ilova ishlab chiquvchilari. Android Bu bilan qanday yashashni tushunishdan oldin ko'p terladik.

iOS ilovalari ekranlarini joylashtirish uchun biz iviUIKit tomonidan taqdim etilgan ikkita asosiy mexanizmdan foydalanamiz: elementlarning bepul joylashuvi va elementlar to'plamining joylashuvi. Biz VIPER-dan foydalanamiz va iviUIKit bilan barcha o'zaro aloqalar View-da, Apple UIKit bilan o'zaro ta'sirlarning aksariyati iviUIKit-da jamlangan. Elementlarning o'lchamlari va joylashuvi iOS SDK-ning mahalliy cheklovlari ustida ishlaydigan ustunlar va sintaktik tuzilmalar nuqtai nazaridan belgilanadi va bu ularni yanada amaliy qiladi. Bu, ayniqsa, UICollectionView bilan ishlashda bizning hayotimizni soddalashtirdi. Biz sxemalar uchun bir nechta maxsus o'ramlarni, shu jumladan juda murakkablarini yozdik. Minimal mijoz kodi bor edi va u deklarativ bo'ldi.

Loyihada uslublar yaratish uchun Android Biz dizayn tizimi ma'lumotlarini XML uslublar jadvallariga aylantirish uchun Gradle'dan foydalanamiz. Bizda turli darajalarda bir nechta generatorlar mavjud:

• Asosiy. Yuqori darajadagi generatorlar uchun ibtidoiy ma'lumotlar tahlil qilinadi.
• Manba. Rasmlar, piktogrammalar va boshqa grafiklarni yuklab oling.
• Komponent. Ular har bir komponent uchun yoziladi, unda qanday xususiyatlar va ularni uslublarga qanday tarjima qilish kerakligi tavsiflanadi.

Ilova nashrlari

Dizaynerlar yangi komponentni chizgandan so'ng yoki mavjudini qayta loyihalashtirgandan so'ng, bu o'zgarishlar dizayn tizimiga kiritiladi. Har bir platformani ishlab chiquvchilari o'zgarishlarni qo'llab-quvvatlash uchun o'zlarining kod ishlab chiqarishlarini yaxshi sozlaydilar. Shundan so'ng, ushbu komponent kerak bo'lganda, yangi funksiyalarni amalga oshirishda foydalanish mumkin. Shunday qilib, dizayn tizimi bilan o'zaro aloqa real vaqtda emas, balki faqat yangi nashrlarni yig'ish paytida sodir bo'ladi. Ushbu yondashuv, shuningdek, ma'lumotlarni uzatish jarayonini yaxshiroq nazorat qilish imkonini beradi va mijozni ishlab chiqish loyihalarida kod funksionalligini ta'minlaydi.

natijalar

Dizayn tizimi Ivy onlayn kinoteatrining rivojlanishini qo'llab-quvvatlovchi infratuzilmaning bir qismiga aylanganiga bir yil bo'ldi va biz allaqachon ba'zi xulosalar chiqarishimiz mumkin:

• Bu doimiy ajratilgan resurslarni talab qiladigan katta va murakkab loyiha.
• Bu bizga onlayn videoxizmatining maqsadlariga javob beradigan o'ziga xos kross-platforma vizual tilimizni yaratishga imkon berdi.
• Bizda endi vizual va funktsional jihatdan orqada qolgan platformalar yo'q.

Ivy dizayn tizimi komponentlarini oldindan ko'rish - design.ivi.ru

Manba: www.habr.com