Адаптация адмін-экрана з адзінаго дизайна для многа экранаў: эфектывае выкананне задач з адмін-экранамі

Экран павер-апа — адно з найменшых элементаў мобільнага дапытку, пры тым яго наявнасць часта спрычыняе затрымкі у выпуску, якія значна большыя, чым можа падсказваць яго размах. Логаік выконаны, палітра кольцаў брэнда выбрана, але ўсё раванавет каму-небудзь трэба стварыць матэрыялы для запуску, прыстосаваныя да розных размераў, прыстроёў і платформ. Нічага з гэтага няўажольна, але гэта трудоемка, лёгка паспяць у дробных деталях, і гэта стоіць кожнага разу праз новы проект. У гэтым нарадчыку рассказваецца, куда на самай працоўкі ідуць рэсурсы, як стварыць экран павер-апа, які будзе добра выглядаць на любым экране, і што маленькій, сфармаваны інструмент-генератор павінен (і чаго не павінен) робіць для вас.

Дизайн — гэта швыра; экспорт — гэта клопат.

Большасць экранаў павер-апа ўмысна простыя. Зазвычай там ёсць однородны або плавна пераходзячы кольорам фон, логаік або знак дапытку, і можа ўжо адна вторарная візуальная элемент. Выбор такой композыцыі можа зайняць калькі хвілін.

Прыгучыя вартасці стаюць зрозумелымі пазней, калі адна-едзина композіцыя павінна працаваць у всіх месацях. Тыповыя проблемы включаюць:

• макет, які выглядае сбалансаваным на аднам тэлефоне, але ўздрэчаным чы или незвычайна порожнім на іншам
• лога, які раптам становіцца занадта вялікім на меньшам чы шырэйшам экране
• відстані межаў, якія перестаюць быць намеранымі, калі зменяецца спавнасць
• ключовыя часткі фонавага зображэння, якія вырываюцца

Якщо ваша команда адрабатвае калькі дапрыемасцев, тыя ж запытанні павінны быць адпаведзены зноў для кожнага з іх. Це повтаральная работа, а не творчая, таму яна ўзгодна для автаматызаціі.

Чаму сплаш-экраны ўскладненявыя, чым іконкі дапрыемасцев

Стварэнне іконак дапрыемасцев — гэта пераважна задача змены размеру: адны квадратны ісходнік ператвараецца ў набор квадратных выходных элементаў з вядомымі размерамі. Сплаш-экраны — гэта іншы тип задачы, таму што сама плошчадка зменяе свой формат.

Тэлефоны сильна разніцацяць за формамі. Якія-то з іх высокія і вузкія, а іншыя — столькі ж шырокія. У баго з іх є накладкі, «дынамічны остров», зоны для жестаў або навігацыі, а таксама іншы элементы интерфейсу, якія перакрываюць краі экрана. Прабава заполніць усе гэтыя формы аднам бітмапам практычна завжды спрычыняе його спякшэнне або вырыванне чаго-небудзь важлівага.

Экран запуску, які можа адпрацаваць з такой разнаўтносцю, зазвычай павінен адпавядаць калькам правіл:

• адны, чысты акцэнт, зазвычай центрыраваны логаў
• достатнёйшы празоры прастор абоўсюды там, дзе трэба, каб все засталося відразумелым
• перадбачальны фон, напрыклад однаковы колер, які можа прастягватыцца ў будзь-якім направленні без некоректнага выгляду
• жадных важлівых деталяў поблізу краёў, адтуды ж спачатку вырываюцца элементы інтерфейсу

Стандарты платформ спрыяюць таму ж. Наветмінныя версіі Android ствараюць экран запуску з айканта на фонавым калеры, а экраны запуску iOS задаюцца як макет, а не як адна фіксаваная картынка, таму композіцыя, якая вже складаецца з „знака на простым фоне“, чыста падходзіць для обох. Пераканайцеся ў актуальной даследовачкі платформы ўсупершце па тыповым трэбаванням, адколі яны зменяюцца межы выданнямі ОС.

Гэта таксама прычына, чаму важлівы крок прадзіркавання. Перакладзенне композіцыі на калькі репрэзентатывных форм экранаў пры выеxпорце дапамагае з’явіцца прыкметным логу чыраўзаным краям, калі яшчэ лёгка ўсё паспрацаваць. Інструменты должны займіцца механічным зменшэнням размера; рашэнні па дизайне застаецца за разработчыкам.

Процес работы, якога варта прагнуць

У спрощаным варыянце ідеальны процес складаецца з пяці крокаў:

1. Падайце вачорнік або рэсурсы для стварання бренду.
2. Настроюйце спосаб іх размешчэння: фон, размер лога, адступы.
3. Пагляньце на рэзультат на разных форматах экранаў.
4. Створыце неабходныя рэсурсы для запуску.
5. Верніцеся да стварання прыкладнення.

Полныя пакеты дизайну, такія як Figma або Photoshop, без сумнева можуць выконваць усё гэта, і яны застаюцца правым месцам для стварання дизайну з самага пачатку. Але ачынэнне ціх моцных програм толькі для экспорту калькі рэсурсаў – гэта занадто. Чым можна заполніць гэты прыем, такім є спецыяльны інструмент, які караце толькі тыя павтаральныя задачы, якія выступаюць пасля прынятых рашэнняў па дизайне: вы прывозіце візуальны матэрыял, а ён ператварае яго на рэсурсы, якія можна адразу вставіць у проект.

Інструменты, якія не заважаюць

Корыстная асэнція такога прыемніка — гэта тое, што ён практычна нічога не запрашоўвае з самага пачатку. Няма жаднай разумной прычыны, чаму задача, якая трэба адрабатваць разова, мусі выклікваць у вас неабходнасць:

• зарэўнавацца на аднойчынны акаунт
• паўерыняць адресу электронной пошты
• ствараваць рабочую прастору
• дадаць назву проекту
• выбраць план абонамента
• праходзіць па колькага крокаў процесе адкалічэння

Для такой катагорыі задач найбольш падходзіць класычны модэль веб-прыемніка: ачыніце сторанку, адрабатайце задачу, закрыйце вікно і верніцеся, калі знову будзе трэба. Пры ацэнкі такіх інструментоў труднасці перад першым экспортам являюцца разумным показнікам таго, сколькі часу інструмент насправды заўсёды.

Чаму обробка ў браузеры — гэта правільны стандарт

Маніпуляцыя зображэнням такога масштабу не трэбуе сервера. Сучасныя браузеры можаць декодаваць зображэння, апісваць іх на паверку будзь-якага размэра і кодаваць рэзультаты локальна, таму няма значных прычын каляць вучорашні файл куды-небудзь.

Выкананне работ на стороне кліента дае практычныя перавагі:

• гэта быстрей, адколі няма неабходнасці у заваносе чы рэцэпцыі дадзеных
• трэба менш інфраструктуры, якую можна стварыць, запускаць і за яку платыць
• орыгінальныя мастацкія працы ніколі не трэба хаваць на сервере іншай адзелі, толькі каб стварыць копію іншага размэра

Гэты апошні пункт мае больш значэння, чым можа здавацца на першы погляд. Неапублікованыя брэндавы элементы часта ўтрымліваюць конфідэнцыйную інформацыю, а інструмент, який ніколі яе не перадае, усуняе пытанні, на якія інакша давялася бы ваша команда. Для інструментаў для разработчыкаў, якія трансфармаваюць файлы, локальная обработка є разумным стандартам, а не спосабом оптымацыі.

Нават маленькія проблемы застойць гарныя інструменты

Ніхто не называў стварэнне экрана запуску значным нерашаным інжынерным вызамом, і самэ гэта робіць яго падатлым для автоматызацыі. Паглядзіце на задачы, якія трэба выкарыстоўваць пад час выпуску адной мобільнай прыкладнення: можа, дзесятак хвілін на падготовку матэрыялаў для запуску, ўсё тыя ж дзесятак хвілін на іконкі, а ўсё рэшта — на скріншоты для магазінаў. Ні адна з гэтых задач сама па сабе не є настолькі складной, каб вярнуцься да дзейнаўскага процесу, але яны павтараюцца ў кожнай прыкладненні та практычна ў кожны раз, калі яе перерабляюць.

Кожны раз, калі вы адмаўляеце які-небудзь павтараючыся крок, цэлы цикл разработкі стае чырвошчым. Прыродным напрамкам для такіх інструментаў є набор спецыялізаваных утиліт, створаных навакол процесу обробкі мобільных матэрыялаў, напрыклад:

• генератор іконак прыкладнення
• генератор экрана запуску
• генератор скріншотаў для App Store і Google Play

Здаровы спосаб развіць такую колекцыю — гэта дадаванне інструментаў у адпаведнасці да рэальных прыгонаў, якія выступаюць пад час адправкі продуктав, а не расшырэнне спіса функцый. Якщо ваша команда ў кожны проект продовжвае ручна ствараць той самы файл активу чы адстройкі, гэта ўжо хорашы сигнал таго, што такая задача заслуговае на свой інструмент, які можна выкарыстоўваць проста адзінам клацаннем.

Ключовыя выводы

• Вельмі часоў займае на экранах запуску прыстосаванняе аднаго дизайна да разных форм экранаў, а не сам дизайн.
• Ствараюце дзіянне навакол центрыраванага акцэнту, фону, які можа свабодна расширвацца, і без чаго-небудзь важлівага поблізу краяў.
• Перад экспортам пераглядзіце матэрыялы па розных співвядзеленнях сторон; самэ там стаюць видныя проблемы з карцаваннем і масштабаваннем.
• Для разовых задач з активамі лепш выкарыстоўваць лёгкія інструменты без падпісвання, а для справжней роботы з дизайном — полныя інструменты дизайна.

Обробка зображэнняў у браузеры ведаецца быстрей, коштуе менш, і не выклікае размешчання нераспространяваных брэндавых элементаў на серверах трохіх сторон.

Спаднёючыя статты

• Планаванне апгрэйда Expo SDK 58: iOS 27, React Native 0.88 і новыя інструменты — практычны апіс экспансійнай версіі Expo SDK 58: якія змены для iOS 27 і React Native 0.88, якія функцыі ў прымэтнай версіі, і як безпечна перацягнуць апгрэйд.
• Выбір мовы па форме задачы: урокі з перакладу TypeScript на Go — што можна дазнаться пра падбір інструментоў да конкрэтных задач, прыорітэты швальнасці інструментаў і пошаговы пераклад вялікіх кодавых базаў, выкарыстоўваючы мову Go для компілятора TypeScript.