UI-kitindən dizayn sisteminə qədər

Ivy onlayn kino təcrübəsi

2017-ci ilin əvvəlində biz öz dizayn-koda çatdırılma sistemimizi yaratmağı düşünəndə çoxları artıq bu barədə danışırdı, bəziləri isə hətta bunu edirdi. Bununla belə, bu günə qədər çarpaz platformalı dizayn sistemlərinin qurulması təcrübəsi haqqında çox az şey məlumdur və dizaynın həyata keçirilməsi prosesinin artıq işləyən məhsula çevrilməsi üçün texnologiya və üsulları təsvir edən aydın və sübut edilmiş reseptlər mövcud deyildir. Və "koddakı komponentlər" dedikdə, çox vaxt çox fərqli şeyləri nəzərdə tuturlar.

Eyni zamanda, şirkət işçilərini ildən-ilə iki dəfə artırdı - dizayn departamentini genişləndirmək və planların yaradılması və inkişafı üçün ötürülməsi proseslərini optimallaşdırmaq lazım idi. Biz bütün bunları dəstəklənməyə ehtiyacı olan platformaların “zooparkı” ilə çoxaldırıq və sadəcə olaraq “normal şəkildə” edə bilməyən və gəlir gətirə bilməyən Babil pandemoniyasına bənzəyirik. Platformaların inkişafı çox vaxt paralel olaraq gedirdi və eyni funksionallıq bir neçə ay gecikmə ilə müxtəlif platformalarda buraxıla bilərdi.


Hər platforma üçün ayrıca layout dəstləri

Ənənəvi olaraq, dizayn sisteminin həllinə kömək edəcək problemlərlə başladıq və onun dizaynı üçün tələbləri formalaşdırdıq. Vahid vizual dil yaratmaq, tərtibat və inkişaf sürətini artırmaq və ümumilikdə məhsulun keyfiyyətini artırmaqla yanaşı, dizaynı mümkün qədər unifikasiya etmək həyati əhəmiyyət kəsb edirdi. Bu, funksionallığın inkişafının eyni vaxtda bütün platformalarımızda mümkün olması üçün lazımdır: Veb, iOS, Android, Smart TV, tvOS, Android TV, Windows 10, xBox One, PS4, Roku - hər biri üzərində ayrıca işləmədən . Və biz bunu etdik!

Dizayn → məlumat

Məhsul və inkişaf departamentləri arasında fundamental razılaşmalar əldə edildikdə, biz bir texnologiya yığını seçmək və bütün prosesin təfərrüatlarını - tərtibatdan tutmuş buraxılışa qədər işləmək üçün oturduq. Dizaynın inkişafa ötürülməsi prosesini tam avtomatlaşdırmaq üçün biz komponent parametrlərini birbaşa tərtibatlı Sketch fayllarından təhlil etmək variantını araşdırdıq. Məlum oldu ki, bizə lazım olan kod parçalarını tapmaq və lazım olan parametrləri çıxarmaq mürəkkəb və təhlükəli bir işdir. Birincisi, dizaynerlər mənbə kodunun bütün təbəqələrinin adlandırılmasında son dərəcə diqqətli olmalı olacaqlar, ikincisi, bu, yalnız ən sadə komponentlər üçün işləyir və üçüncüsü, başqasının texnologiyasından və orijinal Sketch layoutunun kod strukturundan asılılıq bütün mətnin gələcəyini təhlükə altına qoyur. layihə. Bu sahədə avtomatlaşdırmadan imtina etmək qərarına gəldik. Beləliklə, dizayn sistemi komandasında ilk şəxs meydana çıxdı, onun girişi dizayn sxemləri, çıxışı isə komponentlərin bütün parametrlərini təsvir edən və atom dizaynı metodologiyasına uyğun olaraq iyerarxik şəkildə sıralanan məlumatlardır.

Ediləcək yeganə şey məlumatların harada və necə saxlanması, inkişafa necə ötürülməsi və dəstəklədiyimiz bütün platformalarda inkişafda necə şərh edilməsi idi. Axşam sakitləşməkdən əl çəkdi... Dizaynerlərdən və hər bir platformanın komanda rəhbərlərindən ibarət işçi qrupunun müntəzəm görüşlərinin nəticəsi aşağıdakılar üzrə razılaşma oldu.

Vizanı atom elementlərinə əl ilə təhlil edirik: şriftlər, rənglər, şəffaflıq, girintilər, yuvarlaqlaşdırmalar, ikonlar, şəkillər və animasiya müddətləri. Və biz buradan düymələr, daxiletmələr, onay qutuları, bank kartı vidcetləri və s. toplayırıq. İstənilən səviyyənin üslublarına qeyri-semantik adlar təyin edirik, ikonalar istisna olmaqla, məsələn, şəhərlərin adları, nimflərin adları, Pokemon, avtomobil. brendlər... Yalnız bir şərt var - əvvəl siyahı tükənməməli, üslublar necə bitməlidir - şou getməlidir! Məsələn, "kiçik" və "orta" arasında orta düyməni əlavə etməmək üçün semantika ilə məşğul olmamalısınız.

Vizual dil

Tərtibatçılar məlumatları bütün platformalara uyğun şəkildə necə saxlamaq və ötürmək barədə düşünmək məcburiyyətində qaldılar və dizayn yaxşı görünə bilən və dəstəklənən cihazların bütün parkında effektiv işləyə bilən interfeys elementlərini tərtib etməli idi.

Əvvəllər biz o zaman bizim üçün yeni platforma olan, yəni “sıfırdan” render və inkişaf tələb edən Windows 10 üçün tətbiqdə dizayn elementlərinin əksəriyyətini “sınamağa” nail olmuşuq. Onu çəkməklə biz əksər komponentləri hazırlaya və sınaqdan keçirə bildik və onlardan hansının gələcək Eevee dizayn sisteminə daxil edilməli olduğunu başa düşə bildik. Belə bir qum qutusu olmadan belə təcrübə yalnız artıq işləyən platformalarda çoxlu təkrarlamalar vasitəsilə əldə edilə bilərdi və bu, bir ildən çox vaxt aparacaq.

Eyni komponentlərin müxtəlif platformalarda təkrar istifadəsi dizayn sisteminin planlarının sayını və məlumat massivini əhəmiyyətli dərəcədə azaldır, buna görə də dizayn əvvəllər məhsulun dizaynı və inkişafı təcrübələrində təsvir olunmayan daha bir problemi həll etməli idi - məsələn, necə telefonlar və planşetlər üçün düymə televizorlarda təkrar istifadə edilə bilərmi? Və belə müxtəlif platformalarda şriftlərin və elementlərin ölçüləri ilə nə etməliyik?

Aydındır ki, hər bir xüsusi platforma üçün bizə lazım olan mətn və element ölçülərini təyin edən çarpaz platforma modul şəbəkəsi dizayn etmək lazım idi. Şəbəkə üçün başlanğıc nöqtəsi olaraq, müəyyən bir ekranda görmək istədiyimiz film afişalarının ölçüsünü və sayını seçdik və buna əsaslanaraq, bir sütunun eninin bərabər olması şərti ilə şəbəkə sütunlarının qurulması qaydasını tərtib etdik. posterin eninə qədər.

İndi bütün böyük ekranları eyni layout ölçüsünə gətirməliyik və onları ümumi bir şəbəkəyə uyğunlaşdırmalıyıq. Apple TV və Roku 1920x1080, Android TV - 960x540, Smart TV-lər satıcıdan asılı olaraq eyni, lakin bəzən 1280x720 ölçüdə dizayn edilib. Tətbiq Full HD ekranlarında göstərildikdə və göstərildikdə, 960 2-ə vurulur, 1280 1,33-ə vurulur və 1920 olduğu kimi çıxarılır.

Darıxdırıcı təfərrüatları atlayaraq belə bir nəticəyə gəldik ki, ümumiyyətlə bütün ekranlar, o cümlədən televiziya ekranları elementləri və ölçüləri baxımından bir dizayn sxemi ilə əhatə olunur və bütün televiziya ekranları ümumi çarpaz platforma şəbəkəsinin xüsusi halıdır, və orta planşet və ya iş masası kimi beş və ya altı sütundan ibarətdir. Təfərrüatlar kimləri maraqlandırır, şərhlərdə yazın.

Bütün platformalar üçün vahid UI

İndi yeni bir xüsusiyyət çəkmək üçün hər platforma üçün planlar, üstəlik onların hər biri üçün uyğunlaşma variantları çəkməyimiz lazım deyil. İstənilən genişlikdəki bütün platformalar və cihazlar üçün bir layout və onun uyğunlaşma qabiliyyətini göstərmək kifayətdir: telefonlar - 320-599, qalan hər şey - 600-1280.

Məlumat → inkişaf

Əlbəttə ki, biz tamamilə vahid dizayna nail olmaq istəsək də, hər platformanın özünəməxsus xüsusiyyətləri var. Həm internet, həm də Smart TV ReactJS + TypeScript yığınından istifadə etsə də, Smart TV proqramı köhnə WebKit və Presto müştəriləri üzərində işləyir və buna görə də üslubları internetlə paylaşa bilmir. Və e-poçt bülletenləri tamamilə cədvəl tərtibatı ilə işləmək məcburiyyətindədir. Eyni zamanda, qeyri-html platformalarından heç biri performansın pisləşməsindən qorxaraq React Native və ya onun hər hansı analoqundan istifadə etmir və ya istifadə etməyi planlaşdırmır, çünki bizdə həddən artıq çoxlu fərdi tərtibatlar, mürəkkəb yeniləmə məntiqinə malik kolleksiyalar, şəkillər və videolar var. Buna görə də, hazır CSS üslublarını və ya React komponentlərini çatdırmağın ümumi sxemi bizim üçün uyğun deyil. Buna görə də, dəyərləri mücərrəd deklarativ formada təsvir edərək məlumatları JSON formatında ötürmək qərarına gəldik.

Beləliklə, əmlak rounding: 8 Windows 10 proqramına çevrilir CornerRadius="8", web - border-radius: 8px, Android - android:radius="8dp", iOS - self.layer.cornerRadius = 8.0.
Əmlak offsetTop: 12 Eyni web müştəri fərqli hallarda fərqli olaraq şərh edə bilər top, margin-top, padding-top və ya transform

Təsvirin deklarativliyi həmçinin o deməkdir ki, əgər platforma texniki olaraq əmlakdan və ya onun dəyərindən istifadə edə bilmirsə, ona məhəl qoymur. Terminologiya baxımından bir növ esperanto dili yaratdıq: bəziləri Android-dən, bəziləri SVG-dən, bəziləri CSS-dən götürülüb.

Müəyyən bir platformada elementləri fərqli şəkildə göstərmək lazımdırsa, biz müvafiq məlumat generasiyasını ayrıca JSON faylı şəklində ötürmək imkanını həyata keçirmişik. Məsələn, Smart TV üçün "fokusda" vəziyyəti posterin altındakı mətnin mövqeyinin dəyişməsini diktə edir, yəni bu platforma üçün "indent" xüsusiyyətinin dəyərindəki bu komponent ona lazım olan 8 girinti nöqtəsini ehtiva edəcəkdir. Bu, dizayn sisteminin infrastrukturunu çətinləşdirsə də, bizə əlavə sərbəstlik dərəcəsi verir və bizə platformaların vizual “bənzərsizliyini” özümüz idarə etmək və yaratdığımız arxitekturanın girovu olmamaq imkanı verir.

Piktoqramlar

Rəqəmsal məhsulda ikonoqrafiya həmişə həcmli və ən sadə alt layihə deyil, çox vaxt ayrıca dizayner tələb edir. Həmişə çoxlu qliflər var, onların hər birinin bir neçə ölçüsü və rəngi var və platformalar adətən onlara müxtəlif formatlarda ehtiyac duyurlar. Ümumiyyətlə, bütün bunları dizayn sisteminə salmamaq üçün heç bir səbəb yox idi.

Qliflər SVG vektor formatında yüklənir və rəng dəyərləri avtomatik olaraq dəyişənlərlə əvəz olunur. Müştəri proqramları onları istifadəyə hazır şəkildə qəbul edə bilər - istənilən formatda və rəngdə.

Önizləmə

JSON məlumatlarına əlavə olaraq, komponentləri əvvəlcədən nəzərdən keçirmək üçün bir alət yazdıq - JSON məlumatlarını işarələmə və üslub generatorları vasitəsilə tez ötürən və brauzerdə hər bir komponentin müxtəlif variasiyalarını göstərən JS tətbiqi. Əslində, önizləmə platforma tətbiqləri ilə eyni müştəridir və eyni məlumatlarla işləyir.

Müəyyən bir komponentin necə işlədiyini başa düşməyin ən asan yolu onunla qarşılıqlı əlaqə yaratmaqdır. Buna görə də, biz Hekayə kitabı kimi alətlərdən istifadə etmədik, lakin interaktiv önizləmə etdik - toxuna, göstərə, klikləyə bilərsiniz... Dizayn sisteminə yeni komponent əlavə edərkən, o, ilkin baxışda görünür ki, platformaların nə zaman diqqət yetirməli olduğu bir şey olsun. həyata keçirmək.

Documentation

JSON formasında platformalara verilən məlumatlara əsasən, komponentlər üçün sənədlər avtomatik olaraq yaradılır. Xüsusiyyətlərin siyahısı və onların hər birində mümkün dəyər növləri təsvir edilmişdir. Avtomatik yaradıldıqdan sonra məlumat əl ilə dəqiqləşdirilə və mətn təsviri əlavə edilə bilər. Ön baxış və sənədlər hər bir komponent səviyyəsində bir-birinə çarpaz istinad edilir və sənədlərə daxil olan bütün məlumatlar əlavə JSON faylları şəklində tərtibatçılar üçün əlçatandır.

Tənqidçi

Başqa bir zərurət, zamanla mövcud komponentləri dəyişdirmək və yeniləmək bacarığı idi. Dizayn sistemi tərtibatçılara hansı xüsusiyyətlərin və ya hətta bütün komponentlərin istifadə edilə bilməyəcəyini söyləməyi və artıq bütün platformalarda istifadə olunmayan kimi onları silməyi öyrəndi. Bu prosesdə hələ də çoxlu “əl” əməyi var, amma biz bir yerdə dayanmırıq.

Müştəri inkişafı

Şübhəsiz ki, ən mürəkkəb mərhələ dəstək verdiyimiz bütün platformaların kodunda dizayn sistemi məlumatlarının şərhi idi. Məsələn, İnternetdəki modul şəbəkələr yeni bir şey deyilsə, iOS və Android üçün yerli mobil tətbiqetmələrin tərtibatçıları onunla necə yaşayacağını anlamazdan əvvəl çox çalışdılar.

İOS tətbiqi ekranlarını tərtib etmək üçün biz iviUIKit tərəfindən təmin edilən iki əsas mexanizmdən istifadə edirik: elementlərin pulsuz tərtibatı və elementlərin kolleksiyalarının tərtibatı. Biz VIPER-dən istifadə edirik və iviUIKit ilə bütün qarşılıqlı əlaqə View-də cəmlənir və Apple UIKit ilə qarşılıqlı əlaqənin əksəriyyəti iviUIKit-də cəmlənir. Elementlərin ölçüləri və yerləşdirilməsi yerli iOS SDK məhdudiyyətləri üzərində işləyən sütunlar və sintaktik strukturlar baxımından müəyyən edilir və onları daha praktik edir. Bu, xüsusilə UICollectionView ilə işləyərkən həyatımızı sadələşdirdi. Biz kifayət qədər mürəkkəb olanlar da daxil olmaqla, planlar üçün bir neçə xüsusi sarğı yazmışıq. Minimum müştəri kodu var idi və deklarativ oldu.

Android layihəsində üslub yaratmaq üçün dizayn sistemi məlumatlarını XML formatında üslublara çevirərək Gradle-dan istifadə edirik. Eyni zamanda, müxtəlif səviyyələrdə bir neçə generatorumuz var:

• Əsas. Daha yüksək səviyyəli generatorlar üçün primitivlərin məlumatları təhlil edilir.
• Resurs. Şəkillər, nişanlar və digər qrafikləri yükləyin.
• Komponent. Onlar hər bir komponent üçün yazılır, hansı xassələri və onları üslublara necə çevirməyi təsvir edir.

Tətbiq buraxılışları

Dizaynerlər yeni komponent çəkdikdən və ya mövcud olanı yenidən dizayn etdikdən sonra bu dəyişikliklər dizayn sisteminə daxil edilir. Hər bir platformanın tərtibatçıları dəyişiklikləri dəstəkləmək üçün kod nəsillərini dəqiqləşdirirlər. Bundan sonra, bu komponentə ehtiyac duyulan yeni funksiyaların həyata keçirilməsində istifadə edilə bilər. Beləliklə, dizayn sistemi ilə qarşılıqlı əlaqə real vaxtda deyil, yalnız yeni buraxılışların yığılması zamanı baş verir. Bu yanaşma həmçinin məlumatların ötürülməsi prosesinə daha yaxşı nəzarət etməyə imkan verir və müştəri inkişaf layihələrində kod funksionallığını təmin edir.

Nəticələri

Dizayn sisteminin Ivy onlayn kinoteatrının inkişafını dəstəkləyən infrastrukturun bir hissəsi olmasından bir il keçdi və biz artıq bəzi nəticələr çıxara bilərik:

• Bu, daimi xüsusi resurslar tələb edən böyük və mürəkkəb layihədir.
• Bu, bizə onlayn video xidmətinin məqsədlərinə cavab verən unikal çarpaz platforma vizual dilimizi yaratmağa imkan verdi.
• Artıq vizual və funksional cəhətdən geridə qalan platformalarımız yoxdur.

Ivy dizayn sistemi komponentlərinə baxış - design.ivi.ru

Mənbə: www.habr.com