UI жиынтығынан дизайн жүйесіне дейін

Ivy онлайн кино тәжірибесі

2017 жылдың басында біз дизайнды кодқа жеткізудің жеке жүйесін құру туралы ойлаған кезде, көпшілігі бұл туралы айтып, ал кейбіреулері мұны істеді. Дегенмен, осы күнге дейін кросс-платформалық жобалау жүйелерін құру тәжірибесі туралы аз мәлімет бар және дизайнды іске асыру процесін қазірдің өзінде жұмыс істейтін өнімге айналдырудың технологиялары мен әдістерін сипаттайтын нақты және дәлелденген рецепттер жоқ. Және «кодтағы құрамдас бөліктер» арқылы олар көбінесе әртүрлі нәрселерді білдіреді.

Сонымен қатар, компания қызметкерлерін жыл сайын екі есеге арттырды - дизайн бөлімін кеңейту және макеттерді құру және әзірлеуге беру процестерін оңтайландыру қажет болды. Біз мұның бәрін қолдауды қажет ететін платформалардың «хайуанаттар бағы» арқылы көбейтеміз және біз «қалыпты түрде жасай» және табыс әкеле алмайтын Вавилондық пандемонияға ұқсаймыз. Платформалардың дамуы жиі қатар жүрді және бірдей функционалдылық бірнеше айлық кешігумен әртүрлі платформаларда шығарылуы мүмкін.


Әрбір платформа үшін бөлек орналасу жиындары

Дәстүрлі түрде біз дизайн жүйесі шешуге көмектесетін мәселелерден бастадық және оның дизайнына қойылатын талаптарды тұжырымдадық. Біртұтас визуалды тілді құру, макет пен әзірлеу жылдамдығын арттыру және өнімнің сапасын жалпы жақсартумен қатар, дизайнды мүмкіндігінше бірегейлендіру өте маңызды болды. Бұл функционалдылықты дамыту біздің барлық платформаларымызда бір уақытта мүмкін болуы үшін қажет: Web, iOS, Android, Smart TV, tvOS, Android TV, Windows 10, xBox One, PS4, Roku - олардың әрқайсысында бөлек жұмыс істемей . Және біз мұны жасадық!

Дизайн → деректер

Өнім және әзірлеу бөлімдері арасындағы іргелі келісімдерге қол жеткізілген кезде, біз технологиялық стек таңдауға отырдық және бүкіл процестің егжей-тегжейлерін - макеттен бастап шығаруға дейін пысықтадық. Дизайнды әзірлеуге көшіру процесін толығымен автоматтандыру үшін біз макеттері бар Sketch файлдарынан тікелей компонент параметрлерін талдау опциясын зерттедік. Бізге қажетті код бөліктерін табу және қажетті параметрлерді шығару күрделі және қауіпті әрекет екені белгілі болды. Біріншіден, дизайнерлер бастапқы кодтың барлық қабаттарын атағанда өте мұқият болуы керек, екіншіден, бұл ең қарапайым компоненттер үшін ғана жұмыс істейді, үшіншіден, басқа біреудің технологиясына және бастапқы Sketch макетінің кодтық құрылымына тәуелділік бүкіл кодтың болашағына қауіп төндіреді. жоба. Біз бұл саладағы автоматтандырудан бас тартуды жөн көрдік. Дизайн жүйесінің командасында бірінші адам осылай пайда болды, оның кірісі дизайн макеттері, ал шығысы компоненттердің барлық параметрлерін сипаттайтын және атомдық жобалау әдістемесіне сәйкес иерархиялық реттелген деректер болып табылады.

Біз қолдайтын барлық платформаларда деректерді қайда және қалай сақтау керек, оны әзірлеуге қалай беру және оны әзірлеуде қалай түсіндіру керектігі ғана қалды. Кеш тоқырауды тоқтатты... Әр алаңдағы дизайнерлер мен топ жетекшілерінен құралған жұмыс тобының тұрақты кездесулерінің нәтижесі төмендегідей келісімге келді.

Біз визуалды атомдық элементтерге қолмен талдаймыз: қаріптер, түстер, мөлдірлік, шегіністер, дөңгелектеулер, белгішелер, суреттер және анимациялардың ұзақтығы. Біз осыдан түймелерді, енгізулерді, құсбелгілерді, банк картасының виджеттерін және т.б. жинаймыз. Біз белгішелерден басқа кез келген деңгейдің стильдеріне семантикалық емес атауларды тағайындаймыз, мысалы, қалалардың атаулары, нимфалардың аттары, Покемон, автомобиль брендтер... Бір ғана шарт бар - тізім бұрын таусылмауы керек, стильдер қалай аяқталады - шоу өтуі керек! Мысалы, «кіші» және «орташа» арасында ортаңғы түймені қосудың қажеті болмас үшін семантикамен айналыспау керек.

Көрнекі тіл

Әзірлеушілер деректерді барлық платформаларға сәйкес келетін етіп қалай сақтау және тасымалдау туралы ойлануға қалды, ал дизайн жақсы көрінетін және қолдау көрсетілетін құрылғылардың бүкіл паркінде тиімді жұмыс істейтін интерфейс элементтерін жасау керек болды.

Бұрын біз Windows 10 қосымшасындағы дизайн элементтерінің көпшілігін «сынап» үлгердік, ол сол кезде біз үшін жаңа платформа болды, яғни ол «нөлден» көрсетуді және әзірлеуді талап етті. Оны салу арқылы біз компоненттердің көпшілігін дайындап, сынап көрдік және олардың қайсысы болашақ Eevee дизайн жүйесіне қосылуы керек екенін түсіндік. Мұндай құмсалғышсыз мұндай тәжірибені жұмыс істеп тұрған платформалардағы көптеген итерациялар арқылы ғана алуға болады және бұл бір жылдан астам уақытты алады.

Бірдей құрамдастарды әртүрлі платформаларда қайта пайдалану макеттердің санын және дизайн жүйесінің деректерінің массивін айтарлықтай азайтады, сондықтан дизайн бұрын өнімді жобалау және әзірлеу тәжірибесінде сипатталмаған тағы бір мәселені шешуге тура келді - мысалы, қалай? телефондар мен планшеттерге арналған түймені теледидарларда қайта пайдалануға бола ма? Әртүрлі платформалардағы қаріптер мен элементтердің өлшемдерімен не істеуіміз керек?

Әлбетте, әрбір нақты платформаға қажетті мәтін мен элемент өлшемдерін орнататын кросс-платформалық модульдік торды жобалау қажет болды. Тордың бастапқы нүктесі ретінде біз белгілі бір экранда көргіміз келетін киноплакаттардың өлшемі мен санын таңдадық және осының негізінде бір бағанның ені тең болған жағдайда тор бағандарын құру ережесін тұжырымдадық. плакаттың еніне дейін.

Енді біз барлық үлкен экрандарды бірдей орналасу өлшеміне келтіріп, оларды ортақ торға орналастыруымыз керек. Apple TV және Roku 1920x1080 өлшемінде жасалған, Android TV - 960x540, Smart теледидарлар жеткізушіге байланысты бірдей, бірақ кейде 1280x720. Қолданба толық HD экрандарында көрсетіліп, көрсетілгенде 960 саны 2-ге, 1280 саны 1,33-ке көбейтіледі және 1920 сол күйінде шығарылады.

Қызық мәліметтерді өткізіп жібере отырып, біз тұтастай алғанда барлық экрандар, соның ішінде теледидар экрандары, элементтері және олардың өлшемдері бойынша бір дизайн макетімен қамтылған және барлық теледидар экрандары жалпы кросс-платформалық тордың ерекше жағдайы болып табылады деген қорытындыға келдік, және орташа планшет немесе жұмыс үстелі сияқты бес немесе алты бағаннан тұрады. Кімге егжей-тегжейлі ақпарат қызықтырады, түсініктемелерде өтіңіз.

Барлық платформалар үшін бірыңғай UI

Енді жаңа мүмкіндікті салу үшін бізге әрбір платформа үшін макеттерді, сонымен қатар олардың әрқайсысы үшін бейімделу опцияларын салудың қажеті жоқ. Бір орналасуды және оның кез келген ені бар барлық платформалар мен құрылғыларға бейімделуін көрсету жеткілікті: телефондар - 320-599, қалғаны - 600-1280.

Деректер → әзірлеу

Әрине, біз толығымен біртұтас дизайнға қол жеткізгіміз келсе, әр платформаның өзіндік ерекшеліктері бар. Веб және Smart TV екеуі де ReactJS + TypeScript стекін пайдаланса да, Smart TV қолданбасы ескі WebKit және Presto клиенттерінде жұмыс істейді, сондықтан стильдерді вебпен бөлісе алмайды. Электрондық ақпараттық бюллетеньдер толығымен кестелік орналасумен жұмыс істеуге мәжбүр. Сонымен қатар, html емес платформалардың ешқайсысы өнімділіктің төмендеуінен қорқып, React Native немесе оның кез келген аналогтарын пайдаланбайды немесе пайдалануды жоспарламайды, өйткені бізде тым көп пайдаланушы макеттері, күрделі жаңарту логикасы бар жинақтар, суреттер мен бейнелер бар. Сондықтан дайын CSS стильдерін немесе React құрамдастарын жеткізудің жалпы схемасы бізге жарамайды. Сондықтан біз мәндерді дерексіз декларативті түрде сипаттай отырып, деректерді JSON пішімінде жіберуді шештік.

Сонымен мүлік rounding: 8 Windows 10 қолданбасы келесіге түрлендіріледі CornerRadius="8", желі - border-radius: 8px, Android - android:radius="8dp", iOS - self.layer.cornerRadius = 8.0.
Меншік offsetTop: 12 бірдей веб-клиент әртүрлі жағдайларда деп түсіндіре алады top, margin-top, padding-top немесе transform

Сипаттаманың декларативтілігі сонымен қатар егер платформа сипатты немесе оның мәнін техникалық түрде пайдалана алмаса, оны елемеуі мүмкін екенін білдіреді. Терминология тұрғысынан біз эсперанто тілінің бір түрін жасадық: кейбіреулері Android, кейбіреулері SVG, кейбіреулері CSS-тен алынды.

Егер белгілі бір платформада элементтерді басқаша көрсету қажет болса, біз сәйкес деректер генерациясын бөлек JSON файлы түрінде тасымалдау мүмкіндігін енгіздік. Мысалы, Smart TV үшін «фокустағы» күйі постер астындағы мәтін орнын өзгертуді талап етеді, яғни бұл платформа үшін «шегініс» сипатының мәніндегі бұл компонент оған қажет 8 шегініс нүктесін қамтиды. Бұл дизайн жүйесінің инфрақұрылымын қиындатқанымен, ол бізге платформалардың визуалды «бір-біріне ұқсамауын» өз бетімізше басқаруға және біз жасаған архитектураның кепіліне айналуға мүмкіндік бере отырып, қосымша еркіндік береді.

Пиктограммалар

Цифрлық өнімдегі иконография әрқашан көлемді және ең қарапайым қосалқы жоба емес, көбінесе жеке дизайнерді қажет етеді. Әрқашан көптеген глифтер бар, олардың әрқайсысында бірнеше өлшемдер мен түстер бар және платформалар әдетте оларды әртүрлі форматтарда қажет етеді. Жалпы, мұның барлығын жобалау жүйесіне салмауға негіз жоқ еді.

Глифтер SVG векторлық пішімінде жүктеледі және түс мәндері автоматты түрде айнымалылармен ауыстырылады. Клиенттік қолданбалар оларды пайдалануға дайын – кез келген пішімде және түсте ала алады.

Алдын ала қарау

JSON деректерінің үстіне біз құрамдастарды алдын ала қарау құралын жаздық - JSON деректерін түзету және стиль генераторлары арқылы жылдам жіберетін және браузерде әрбір құрамдастың әртүрлі нұсқаларын көрсететін JS қолданбасы. Негізінде, алдын ала қарау платформа қолданбаларымен бірдей клиент және бірдей деректермен жұмыс істейді.

Белгілі бір компоненттің қалай жұмыс істейтінін түсінудің ең оңай жолы - онымен әрекеттесу. Сондықтан, біз Storybook сияқты құралдарды пайдаланбадық, бірақ интерактивті алдын ала қарауды жасадық - түртуге, көрсетуге, шертуге болады... Дизайн жүйесіне жаңа құрамдас қосу кезінде ол алдын ала қарауда пайда болады, осылайша платформалар қашан назар аударатын нәрсе болады. оны жүзеге асыру.

жазбалар

JSON түрінде платформаларға берілген деректер негізінде құрамдастарға арналған құжаттама автоматты түрде жасалады. Қасиеттердің тізімі және олардың әрқайсысында мүмкін болатын мән түрлері сипатталған. Автоматты түрде жасалғаннан кейін ақпаратты қолмен нақтылауға және мәтіндік сипаттаманы қосуға болады. Алдын ала қарау және құжаттама әрбір құрамдас деңгейінде бір-біріне сілтеме жасайды және құжаттамаға енгізілген барлық ақпарат қосымша JSON файлдары түрінде әзірлеушілерге қолжетімді.

Депрекатор

Тағы бір қажеттілік бар құрамдастарды уақыт өте келе ауыстыру және жаңарту мүмкіндігі болды. Дизайн жүйесі әзірлеушілерге қандай қасиеттерді немесе тіпті тұтас құрамдастарды пайдалануға болмайтынын айтуды және олар енді барлық платформаларда пайдаланылмаған кезде оларды жоюды үйренді. Бұл үдерісте әлі де «қол» еңбегі көп, бірақ біз бір орында тұрған жоқпыз.

Клиентті дамыту

Біз қолдайтын барлық платформалардың кодындағы жобалау жүйесінің деректерін түсіндіру ең күрделі кезең екені сөзсіз. Мысалы, интернеттегі модульдік торлар жаңа нәрсе болмаса, iOS және Android үшін жергілікті мобильді қосымшаларды әзірлеушілер онымен қалай өмір сүруге болатынын білмес бұрын көп жұмыс істеді.

iOS қолданбасының экрандарын орналастыру үшін біз iviUIKit ұсынған екі негізгі механизмді қолданамыз: элементтердің еркін орналасуы және элементтер топтамаларының орналасуы. Біз VIPER пайдаланамыз және iviUIKit-пен барлық өзара әрекеттесу View ішінде шоғырланған, ал Apple UIKit-пен өзара әрекеттесулердің көпшілігі iviUIKit-те шоғырланған. Элементтердің өлшемдері мен орналасуы жергілікті iOS SDK шектеулерінің үстінде жұмыс істейтін бағандар мен синтаксистік құрылымдар тұрғысынан көрсетіледі, бұл оларды практикалық етеді. Бұл әсіресе UICollectionView-мен жұмыс істегенде біздің өмірімізді жеңілдетті. Біз макеттер үшін бірнеше реттелетін орауыштарды, соның ішінде өте күрделілерін жаздык. Ең аз клиенттік код болды және ол декларативті болды.

Android жобасында стильдерді жасау үшін дизайн жүйесінің деректерін XML пішіміндегі стильдерге айналдыра отырып, Gradle пайдаланамыз. Сонымен бірге бізде әртүрлі деңгейдегі бірнеше генераторлар бар:

• Негізгі. Жоғары деңгейлі генераторларға арналған примитивтердің деректері талданады.
• Ресурс. Суреттерді, белгішелерді және басқа графикаларды жүктеп алыңыз.
• Құрамдас. Олар қандай қасиеттерді және оларды стильдерге қалай аудару керектігін сипаттайтын әрбір компонент үшін жазылған.

Қолданбаның шығарылымдары

Дизайнерлер жаңа құрамдас бөлікті сызғаннан немесе бұрыннан барын қайта құрастырғаннан кейін, бұл өзгерістер дизайн жүйесіне енгізіледі. Әрбір платформаның әзірлеушілері өзгерістерді қолдау үшін код генерациясын дәл баптайды. Осыдан кейін оны осы құрамдас қажет болған жағдайда жаңа функционалдылықты жүзеге асыруда пайдалануға болады. Осылайша, дизайн жүйесімен өзара әрекеттесу нақты уақыт режимінде емес, тек жаңа шығарылымдарды құрастыру кезінде болады. Бұл тәсіл деректерді тасымалдау процесін жақсырақ басқаруға мүмкіндік береді және клиентті әзірлеу жобаларында код функционалдығын қамтамасыз етеді.

Нәтижелері

Дизайн жүйесі Ivy онлайн-кинотеатрының дамуын қолдайтын инфрақұрылымның бөлігі болғанына бір жыл болды және біз қазірдің өзінде кейбір қорытындыларды жасай аламыз:

• Бұл тұрақты бөлінген ресурстарды қажет ететін үлкен және күрделі жоба.
• Бұл бізге онлайн бейнесервистің мақсаттарына жауап беретін бірегей кросс-платформалық визуалды тілімізді жасауға мүмкіндік берді.
• Бізде визуалды және функционалдық жағынан артта қалған платформалар енді жоқ.

Ivy дизайн жүйесінің құрамдастарын алдын ала қарау - design.ivi.ru

Ақпарат көзі: www.habr.com