Из арт-директора веб-студии в команду разработки продукта на платформе 1С

Публикация № 1533351 13.10.21

Инструментарий разработчика - Работа с интерфейсом

В мире 1С по сравнению с веб-разработкой незаслуженно мало внимания уделяется поведению и внешнему виду интерфейсов. На митапе «Интерфейс в 1С» руководитель группы разработки компании АРБИС Анна Гнатюк рассказала, что она привнесла из большого мира дизайна в разработку на 1С.

В ходе доклада я хочу:

  • поделиться с вами своей историей – как я пришла в 1С,

  • сравнить две индустрии (веб и 1С), какой подход к интерфейсам и к разработке там и там;

  • в процессе поделиться какими-то открытиями, которые получились по ходу выстраивания процессов;

  • возможно, вы увидите какие-то грабли – посмотрите, что на них уже можно не наступать, увидите какие-то идеи, которые можно внедрить к вам в команду.

 

Кратко озвучу, чем занималась.

  • Все началось со студенческой практики в компании АРБИС, где я проходила практику на 1С-разработчика. Здесь поработала совсем немного, и, сверкая пятками, убежала в местную веб-студию, потому что в 1С оказалось очень мало простора для творчества – на тот момент язык 1С мне показался очень топорным по сравнению с тем же самым вебом, питоном и прочими альтернативами.

  • После этого в местной веб-студии с удовольствием работала дизайнером, верстальщиком и постепенно доросла до арт-директора. У студии появились проекты, связанные с 1С – это лендинги, это сайты, которые рекламируют продукты на 1С, это сервисы, у которых на бэкенде был 1С. Таким образом, я обратно вернулась в эту сферу.

  • И три года назад я перешла уже полностью в команду разработки 1С – сейчас занимаюсь проектированием интерфейсов 1С, руководством команды разработки и интеграциями 1С, веба, мобильных приложений.

 

Впечатления от платформы 1С после веба

 

 

Какое же было первое впечатление от платформы, когда я вернулась обратно в 1С-среду.

  • Очень много предубеждений со стороны других разработчиков, что 1С-программист – это не программист, что в целом кодить на 1С не приветствуется, что разработка на русском языке не может быть серьезной и т.д.

  • В отличие от веба, в 1С более локальное коммьюнити. Если ты в вебе или в мобильной разработке, ты можешь посмотреть примеры европейских или американских коллег, даже китайский рынок, который достаточно закрытый, который генерирует свои традиции, свои культуры, свои школы – веб-дизайна, интерфейсов и т.д.

  • В 1С я столкнулась с тем, что очень много информации нужно было просто выискивать, вытаскивать, смотреть на примерах. По интерфейсам практически никаких материалов не было для изучения. На тот момент 1С:ИТС тоже очень мало рассказывал об интерфейсах (в последние годы эта тенденция, к счастью, поменялась).

Еще один случай, который тоже сформировал мое отношение к интерфейсам в 1С – это то, как коллеги радостно говорили мне, как дизайнеру: «Посмотри, какие у нас классные кнопки, они теперь выглядят здорово и современно». В 2016 году на Зазеркалье вышла статья, где говорится, что кнопки стали более выпуклыми, у них появилась тень – под этим подразумевалось, что интерфейс 1С улучшается.

Мне это особенно запомнилось из-за того, что начиная с 2010 по конец 2015 буквально вся мировая индустрия приложений к этому моменту перешла на плоский дизайн. Это отразилось на интерфейсах и Windows, и iOS 7 от Apple. Даже такой гигант, как Google, который 10 раз протестирует, и только потом примет какое-то решение – тоже отказался от всех теней, от всех выпуклостей в пользу плоских кнопок и плоских интерфейсов.

 

Что же получилось? Весь мир к 2015 году стал плоским в интерфейсах – никто уже не пытался имитировать настоящие кнопки, настоящие элементы из реальности, а 1С к 2016-тому сделала кнопки еще выпуклее.

Это совсем маленький момент, но, когда ты в вебе постоянно вращаешься в трендах, это очень сильно бросается в глаза.

Могу сказать, что с платформы 8.3.15 стало все намного лучше. Сейчас 1С тоже плоский, главное, чтобы все мировые тренды не вернулись обратно к выпуклым интерфейсам, что потихоньку происходит. Будем смотреть за развитием интерфейсов дальше.

 

Отличия подходов к разработке интерфейса

 

Какие еще более глобальные отличия подходов к разработке интерфейса я увидела в 1С?

  • На мой очень субъективный взгляд в 1С сейчас отсутствует культура проектирования, культура выделения этого отдельного этапа, отдельных специалистов, отсутствуют инструменты проектирования интерфейсов. Это только мое мнение, может быть, оно очень локальное.

  • Второй момент – это, конечно, ограничение выразительных средств графического интерфейса. 1С в этом плане больше похож на конструктор – он весь про функциональность, про учет, про большие данные, про бизнес-задачи. Такой суровый Enterprise. Но все больше и больше пользователей привыкают к хорошим, простым и легким интерфейсам. Задачи все растут и от интерфейсов требуется все больше плотности информации, все больше визуальной иерархии, что очень сложно достичь порой в интерфейсе 1С.

  • От версии к версии в платформе складывалась своя культура интерфейсов, свои традиции. Таким образом, решения, которые складывались в мировых трендах (в мобильной и в веб-разработке), в 1С остались прежними.

Например, немного о проектировании интерфейсов в 1С – обычная форма выглядит вот так.

И на каждой форме пользователя сопровождает шесть меню. Да, их количество можно уменьшить. Я знаю, что далеко не все пользователи знают, как это сделать – далеко не все разработчики пользуются этим, пытаются минимизировать количество этих меню.

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

В частности, для наших решений иногда приходится добавлять еще внутреннее меню – одно, а то и два. Представляете, какой в результате получается бургер из всех элементов интерфейса?

 

Но есть и один гигантский плюс, которым я просто наслаждаюсь в 1С, которого в ближайшее время, я думаю, не будет ни в вебе, ни в мобильном – это гибкость пользовательских настроек. В вебе вы никогда не сможете настолько просто и легко преобразить свою форму, список – подсветить те данные, которые вам нужны, скрыть те данные, которые вам не нужны.

Сама с удовольствием пользуюсь. Перелопачиваю под себя все типовые формы интерфейсов. Это очень классно.

В то же время эта гибкость усложняет разработку интерфейсов, потому что нужно продумывать интерфейс так, чтобы он адекватно отреагировал на его изменение пользователем – чтобы верстка формы не поехала.

И здесь уже появляется выбор – либо вы изначально рисуете такой интерфейс, который считаете наиболее подходящим для пользователя и не даете ему права его изменять. Либо вы рисуете интерфейс достаточно универсальным и рассчитываете на то, что пользователи сами его докрутят до того состояния, в котором им будет удобно пользоваться.

Конечно, сейчас второй вариант становится менее предпочтительным, потому что многие люди не готовы тратить время на то, чтобы подстроить интерфейс под себя – им нужно быстро и просто решать свои задачи.

Еще одно отличие – это зависимость интерфейса от модели данных. В вебе и в мобильной разработке у вас есть отдельно шаблон – то, как будет выглядеть форма на сервисе. Отдельно модель данных и отдельно – сами данные.

В 1С все достаточно жестко привязано друг к другу. В этом есть плюс и минус. Но у нас мы столкнулись с тем, что при включении в команду новых проектировщиков самый, наверное, частый вопрос возникает – почему в эту панель навигации мы не можем добавить те ссылки, которые нам нужны? Как мы можем понять, что сюда можно добавить, а что нельзя?

Для человека без опыта разработки 1С это очень сложнообъяснимо. Если честно, я сама до сих пор без конфигуратора не могу предугадать, что здесь можно отобразить, а что – нет. Здесь часто точно также влияет вид и остальных полей – это еще одно ограничение, которое нужно держать в голове при разработке интерфейса и которое в том числе ограничивает и те решения, которые вы можете создать в итоге.

 

Есть ли схожесть в интерфейсах?

 

Да, определенная схожесть есть. И теми, и другими интерфейсами пользуются люди. Соответственно, все знания и принципы юзабилити будут работать.

 

Для 1С будут работать все книги, научные статьи и аналитика по поводу того, как работает мозг человека, как он воспринимает интерфейсы, как вообще создавать дизайн продукта – в том числе, использовать подход дизайн-мышления для создания любого предмета, любого интерфейса, любой формы. Поэтому информации – море. Все, что осталось сделать – ее адаптировать под задачи 1С.

 

Какие приемы работы и технологии удалось перенести

 

Какие приемы и технологии мне удалось перенести полностью из своего опыта в вебе в команду разработки 1С?

 

Первым делом, мы разделили этапы работы над проектом. Это критически важно. Вовлечение заказчика на раннем этапе позволяет очень сильно повысить предсказуемость результата.

Единственная сложность, с которой мы поначалу столкнулись – это заказчик привык видеть уже готовый результат и поначалу ему нужно каждый раз напоминать, что это только картинка, давайте с вами обсудим, что вы хотите увидеть по итогу, сейчас спланируем и только потом это уйдет в разработку.

Но заказчик, действительно, в это с удовольствием включился, с удовольствием смотрел интерфейсы, предлагал что-то изменить. Ему очень понравилось то, насколько легко это можно сделать – буквально тут же онлайн, на созвоне в скайпе, можно перетащить куда-нибудь кнопочку, можно попробовать пару вариантов, их сравнить и все это, не тратя время разработчика.

 

Разделили роли в команде. Поначалу в нашей команде была я, как менеджер и проектировщик, и разработчик 1С.

Постепенно наша команда все росла и росла. Сейчас уже сложно выделить отдельных специалистов – скорее, это роли, которые участвуют в разработке проекта. Из ролей – это менеджер, бизнес-аналитик, UIX-проектировщик, дизайнер, фронтенд-разработчик, 1С-разработчик, веб-разработчик. Не на всех проектах участвуют все эти роли разом, где-то люди совмещают их. Но, как видите, количество задач очень сильно возросло.

Было ли удобно коммуницировать маленькой команде – безусловно. Все решения принимались очень быстро, согласовывались очень быстро, все понимали свои зоны ответственности.

Смогли бы мы делать тот объем работы и задачи того уровня, которые у нас есть сейчас с двумя людьми? Нет. Поэтому разделение ролей в команде пошло нам на пользу.

 

Также с приходом этапа проектирования мы начали аргументировать наши решения между собой и с заказчиком уже пользовательскими сценариями, а не требованиями к функционалу. Если возникала задача, что куда-нибудь нужно добавить кнопку, первый вопрос, который возникал – это не где она должна располагаться, а точно ли нам нужна эта кнопка и зачем она, для чего она пользователю. И какой сценарий важнее – может быть, стоит пожертвовать какой-то другой кнопкой, но разместить эту, а другую скрыть куда-нибудь в подменю?

Либо, может быть, наоборот, окажется, что здесь и не кнопка нужна, а какая-нибудь таблица. А может быть, вообще нужно отправить в этот момент сообщение в мессенджер? То есть диалог и дискуссия именно на уровне абстракций и пользовательских сценариев позволяет вам не отклониться от цели и не забыть, что же нужно пользователю по итогу.

 

И то, что легко удалось перенести – практически сразу это сделали – это отрисовка интерфейсов и создание своего небольшого UI-kit. Сейчас он до сих пор в стадии разработки – какие-то элементы используются часто, они более-менее готовы, какие-то элементы используются редко – они в форме скетчей еще. Но, тем не менее, UI-kit потихоньку собирается, становится проще и быстрее проектировать 1С-интерфейсы.

 

Что нового пришлось придумать

 

Что нового пришлось нам придумать для того, чтобы подстроить проектирование под интерфейсы 1С?

Первым делом пришлось найти инструмент прототипирования – об этом чуть позже.

Вторым делом, постепенно с приходом в команду мы начали внедрять очень активно веб-технологии в интерфейсы 1С.

 

Сформировались и лучшие практики проектирования для 1С. Опять же, все своим опытом – никакой литературы, никаких статей особо на эту тему к тому моменту еще не было. Сейчас понемногу уже начали появляться отдельные статьи, посвященные лучшим практикам проектирования, но хотелось бы, чтобы их дальше становилось еще больше.

Например, есть такой пример формы – казалось бы, все хорошо, можно ей пользоваться. Но что, если добавить еще немного удобства?

Например, вывести статусы сразу в группировки, чтобы, не заходя внутрь увидеть, что же там внутри происходит – есть ошибка или там все хорошо.

Отказаться от лишнего визуального шума – всевозможных рамочек, полосочек – чтобы облегчить интерфейс. Спрятать что-то во всплывающие формы.

Скомпоновать единую панель, чтобы не выводить кнопки в две строки – за счет того, что некоторые кнопки появляются и исчезают в зависимости от того, какие статусы файлов мы видим на экране.

 

 

И каждый раз теперь остался выбор – мы используем традиционные для 1С решения или смотрим современные аналоги и используем их. Это относится к части того, делаем мы решение на стандартном интерфейсе форм 1С, или используем веб-технологии, в какой мере мы это делаем, и насколько мы придерживаемся каких-то устоявшихся практик по размещению элементов, по их визуальному виду и т.д.

 

Поиск средств проектирования

 

Как у нас проходил поиск средств проектирования?

 

Первая мысль, конечно же, была, что если в конфигураторе 1С такой прекрасный конструктор форм, ты сразу же поймешь, как это выглядит, даже не закладывая какую-то логику внутрь – давайте пользоваться им. Очень быстро от этого решения отказались, потому что когда ты проектируешь интерфейс прямо в конфигураторе, тебе нужно решать одновременно две задачи – собственно, проектировать интерфейс и угадывать, какие конкретно свойства поставить у того или иного элемента, чтобы он разместился там, где тебе нужно.

В вебе тоже поначалу сразу же верстали сайты и только потом пришли к разделению на первоначальную отрисовку дизайна макета и последующую верстку. Таким же образом мы очень быстро перешли на такой же подход в 1С – не нужно сразу верстать форму, нужно сначала отрисовать ее и сосредоточиться именно на поведении и на пользовательских сценариях.

 

Поэтому конфигуратор нам не подошел.

Следующим инструментом стал Adobe Illustrator как графический векторный редактор, который на тот момент был очень популярен для создания интерфейсов в том числе. Плюс invisionapp, которым дальше эти макеты оживлялись. То есть в иллюстраторе точно так же создали UI-kit (набор элементов) и уже как картинку, собирали интерфейс.

Дальше – закидывали все это в invisionapp.

Здесь у нас хранились отдельные картинки. Отдельные картинки с какими-то всплывающими элементами в том числе.

 

 

И в invisionapp дальше накидывали ссылки – что произойдет при каком-то определенном ховере, что произойдет, если мы переключим вкладку, и этот макет мы уже расшаривали заказчику и обсуждали с ним детали. Заказчик мог оставить здесь комментарии, мы с ним обсуждали.

 

Но у этого подхода тоже были свои минусы – то, что два приложения это все-таки не одно. И если тебе нужно внести какую-нибудь правку, тебе ее всегда нужно сначала внести в твоей картинке в макете. И затем точно так же обновить в invisionapp, точно так же перенастроить все ссылки – достаточно много времени на то, чтобы получить качественный результат.

 

 

И когда несколько лет назад у нас появилась Figma – мы с удовольствием на нее переключились. Сейчас это для нас идеальный инструмент для проектирования интерфейсов.

Figma – это современный редактор графически заточенный именно под проектирование интерфейсов, под дизайн интерфейсов и под их прототипирование. В ней удобно расположились все наши проекты.

На гифке показано, как происходит работа.

У нас есть макет, мы сразу же вносим в нем правки – у нас есть небольшой UI-kit, откуда мы можем добавить кнопки. Здесь же мы можем поменять их текст, поменять расположение местами. Да, это тоже требует навыков работы с графическими редакторами, но гораздо меньших, чем навыков работы с тем же самым Adobe Illustrator.

Чем еще хороша Figma – вы можете в ней работать совместно. Примерно точно так же, как с гуглдоками. У нас достаточно большая команда, и над одним проектом могут одновременно работать несколько дизайнеров, несколько менеджеров тут же смотреть этот проект, несколько разработчиков – оставлять свои комментарии, проводить внутренние демонстрации – точно так же скидывать этот файл заказчику, который буквально онлайн может смотреть за тем, как идет работа. У нас достаточно лояльный заказчик, поэтому мы можем себе такое позволить, иначе так делать, наверное, не стоит – некоторые заказчики начинают очень сильно контролировать, если предоставить им такой шанс посмотреть за дизайнером.

И еще одна очень классная возможность, что, отрисовав дизайн, вы тут же можете настроить связки между экранами и сделать тут же интерактивный прототип – практически собрать приложение, которое будет выглядеть и вести себя так, как будет выглядеть и вести себя ваш конечный продукт.

 

 

Хотелось бы пару слов сказать об 1С Maker. Отличная инициатива, на мой взгляд. Я была просто безумно рада, когда такое решение появилось. С удовольствием зашла, посмотрела, увидела, что пока что очень мало функций, поэтому буду дальше следить за развитием. Уже увидела, что строчки таблиц появились – первая мысль мелькнула, что нам этого очень не хватает, потому что таблицы как раз не очень удобно делать в Figma. И еще один плюс 1C Maker – это то, что там можно переключаться между страницами. В остальном он пока что очень сильно уступает количеству возможностей в той же Figma. И боюсь, что во многих проектах мы не сможем его использовать как раз за счет интеграции с вебом, потому что мы одновременно и дизайн рисуем, и проектируем 1С-ную часть. Но буду с удовольствием советовать коллегам, смотреть дальше за развитием. Будет круто, если в какой-то момент для каких-то форм мы сможем использовать 1C Maker. Пока что не можем, потому что пока что его возможности достаточно ограничены. Но очень круто, что этот сервис появился.

 

UX-дизайнер: что за зверь и зачем нужен

 

И немного хотела поговорить о роли UX-дизайнера в команде. Поговорили о том, с помощью каких инструментов как раз можно делать свои прототипы. Зачем же вам может пригодиться UX-дизайнер, в том числе, наверное, здесь прозвучит пара аргументов для того, чтобы ответить на вопрос – как можно обосновать его ставку.

 

Под UX-дизайнером я здесь буду понимать специалиста, который отвечает за:

  • пользовательские сценарии;

  • поведение интерфейса;

  • внешний вид интерфейса.

У этих профессий достаточно много смежных названий – UX-проектировщик, UI-дизайнер, просто дизайнер, аналитика тоже иногда сюда относят. Это может быть действительно частью функций консультанта на проекте.

 

В первую очередь это человек, который будет переводить с бизнес-языка на язык требований. Отлично, если на проекте есть консультант или внедренец. Но насколько я знаю, есть примеры, когда таких людей на проекте нет, либо они не отвечают за функциональность и за перевод с бизнес-языка на язык требований и этим приходится заниматься разработчику. В случае, если вы выделяете отдельного UX-дизайнера, вы получаете человека, который сосредоточен именно на пользовательских сценариях, сосредоточен на том, чтобы предоставить тот продукт, который нужен заказчику, чтобы он работал и выглядел так, как хочет заказчик. И тем самым, не теряете эту задачу. Иногда в процессе разработки при добавлении функций может появиться какой-то «Франкенштейн», где уже потерялись исходные функции. Как раз UX-дизайнер – если это его цель, отвечать за пользовательские сценарии, будет их держать, будет сопровождать проект. И избавит разработчика и, отчасти, консультанта от обсуждения каких-то мелких деталей по поводу интерфейсов. Точно так же снимет эту боль и с заказчика. Например, заказчики часто предоставляют – если не на их стороне делается прототип, они накидывают самые важные для них функции, не учитывая очень много пограничных сценариев. И эти пограничные сценарии – классно, если учтет консультант, но я подозреваю, что тоже не во всех случаях он сможет это сделать, он все-таки на более высоком уровне абстракции находится к разработке. И все эти пограничные сценарии лягут на разработчика, отчего дальше у нас обратно пойдут изменения в интерфейсе. Отчего обратно пойдут задачи на разработчика, согласование с заказчиком и т.д. – бесконечный круг.

Если у нас есть UX-дизайнер, он уже вначале может сосредоточиться на пользовательских сценариях и продумать эти самые перекрестные сценарии – согласовать их с заказчиком заранее. Сказать ему, что отлично – у нас есть вот эта функция, но что мы будем делать, если пользователь поступит следующим образом?

 

Очень большой плюс наличия UX-дизайнера в команде – это снятие с разработчика необходимости придумывать решения с нуля. Да, это может быть готовое ТЗ, это может быть какой-то набросок интерфейса от руки, тем не менее, разработчик берется за проект, смотрит на то, что ему предоставили, и либо хаотично начинает накидывать все на формы – это относительно интерфейсов (мы сейчас не говорим про работу с данными). Либо просто сидит перед пустой формой и думает, с чего бы начать. Когда в команде есть UX-дизайнер, он выполняет этот этап сам, и уже есть какой-то результат, который можно обсудить с разработчиком. Принести разработчику 1С картинку и сказать: «Заказчик хочет вот так – это вообще реализуемо?» Разработчик 1С скажет: «Вот это – да, а вот это – нет, но можно сделать вот так» и дальше занимается своими основными задачами. UX-проектировщик ушел проектировать и обсуждать дальше с заказчиком.

Таким образом мы очень сильно экономим ценный ресурс разработчика 1С.

 

Ну и UX-дизайнер позволит сохранить легкость использования программы при добавлении функциональности, потому что с первыми версиями, наверное, меньше всего проблем – они, как правило, простые, содержат мало функций, отлично симпатично выглядят, но как только появляются правки и требования добавить еще, еще и еще – может получиться монстр – если у вас в команде нет человека, который будет отвечать за то, чтобы интерфейс остался простым и удобным для использования.

 

 

На слайде приведен комментарий к презентации приложения Яндекс.Go, в которое переросло приложение Яндекс.Такси. Он иллюстрирует то, что получается, когда в одно приложение бездумно добавляется все больше и больше функций. Не говорю, что у Яндекса это было как-то бездумно, но этой фразой точно можно описать, что получается из-за отсутствия проектирования интерфейса.

 

Выводы

 

Что поменялось в итоге:

  • Какое сейчас у меня отношение к 1С? Честно, свои предубеждения по поводу использования платформы мне удалось преодолеть далеко не сразу. Могу сказать, что полностью у меня это получилось сделать только в этом году, поэтому этот доклад это для меня в том числе переходная точка. Если до этого я говорила, что я занимаюсь проектированием интерфейсов и скромно добавляла «в 1С-приложениях», то теперь могу об этом говорит уверенно.

  • Сейчас я вижу гигантский простор для работы – очень круто найти в современном мире отрасль, где еще есть, что сделать. Где есть, куда расти, интересно работать с ограничениями 1С-ных интерфейсов, интересно искать свои решения, свои варианты, внедрять и пробовать что-то новое.

Кратко – что мы сделали в нашей команде:

  • Разделили этапы.

  • Выделили отдельно роль проектировщика.

  • Сняли с разработчика неразработческие задачи – разработчик больше сосредоточился на коде.

  • Внедрили инструменты прототипирования.

  • И внедрили веб-технологии.

 

Вопросы

 

Каким инструментом формируется прототип формы, как согласуется с клиентом и передается разработчику?

В качестве инструмента мы используем Figma. Там же по необходимости создается прототип. Хотя в целях экономии времени мы очень часто просто накидываем рядом несколько состояний одной и той же формы. Этого, как правило, достаточно для согласования заказчиком. Дальше – в Figma есть кнопка расшарить, вы генерируете ссылку, отправляете заказчику, от заходит, может посмотреть все макеты, может оставить комментарии. Мы созваниваемся на скайпе, показываем макеты. Если есть интерактивный прототип – показываем его. Иногда используем интерактивный прототип внутри, чтобы проверить какие-то пользовательские сценарии – удобно ли будет действительно пользоваться той или иной функцией.

Вы показывали 1С-формы, нарисованные в Figma – это готовый набор компонентов форм 1С?

Этот набор компонентов был получен элементарным способом – берется 1С и полностью перерисовывается его элемент. Пока что этот UI-kit еще находится в промежуточной стадии развития – он еще не готов для того, чтобы с кем-то им делиться – он используется в целях разработки внутри. Но мы продолжим над ним работу и постараемся сделать его таким, чтобы выложить и распространить для сообщества.

Вы показывали UI-kit для 1С, им можно пользоваться только в Figma, только на бумаге? Программист его может как-то использовать, например, чтобы с его помощью в конфигураторе набрасывать готовые элементы? Или это просто рекомендация к дизайну?

Это просто рекомендация к дизайну. По внедрению в 1С мы в эту сторону даже и не думали.

Т.е. у вас в UI-kit просто набор стандартных элементов, которые можно использовать?

Да, это то же самое, как конструктор формы внутри конфигуратора – точно так же у нас свой конструктор элементов, из которых можно собрать правдоподобный интерфейс.

Я знаю, что из Figma по API можно получать набор используемых компонентов – например, в веб-разработке Figma связывают с компонентами React, чтобы программно на основе макета создавались элементы в веб-приложении. Можно ли эти возможности как-то адаптировать для разработки в 1С?

В Figma вообще достаточно много плагинов. Я знаю, что там есть выгрузки в сторонние приложения, которые уже больше заточены под верстку. Такие функции точно есть в Sketch (приложении под MacOS, аналоге Figma). Возможно, такие плагины можно адаптировать под работу с 1С.

Когда в компании возникает переломный момент, что ей уже в штате нужен UX-дизайнер?

Во-первых, когда это продукт от среднего до крупного и далее. Во-вторых, когда у вас ограниченный ресурс 1С-разработчиков и большой пул задач, которые необходимо выполнить. И когда заказчик, в принципе, готов платить за хороший и удобный интерфейс. Либо вы смогли это ему качественно обосновать.

 

*************

Данная статья написана по итогам доклада (видео), прочитанного на онлайн-митапе "Интерфейс в 1С". Больше статей можно прочитать здесь.

Приглашаем всех 11-12 ноября принять участие в INFOSTART EVENT 2021 в Москве: event.infostart.ru/2021_msk/

Специальные предложения

Комментарии
В избранное Подписаться на ответы Сортировка: Древо развёрнутое
Свернуть все
1. Tahallus 430 14.10.21 11:54 Сейчас в теме
UI-kit уже выпустили для сообщества ?
artbear; RayCon; +2 Ответить
2. RayCon 787 17.10.21 16:34 Сейчас в теме
К сожалению, не встретил в тексте слов "существенные реквизиты". А ведь при проектировании бизнес-логики это тот "водораздел", который часто является критерием вывода или, наоборот, невывода реквизитов на форму. Например, фирма 1С в своих типовых решениях часто выводит на форму по умолчанию несущественные реквизиты, и не выводит существенные. Такими формами, например, являются формы в кассовых документах в БП, формы элемента справочника "Договоры" в УХ, обмен ЭДО. Список, к сожалению, можно продолжать долго... Когда пользователь с этим сталкивается, он сначала недоумевает: "Почему так?", а потом, если он рукастый-головастый, начинает судорожно перестраивать неудобные формы либо, если некогда заниматься настройкой, перманентно матерится при каждом новом сеансе работы с этой формой. В общем, я это к тому, что мало быть UX/UI-дизайнером - надо ещё понимать бизнес-логику, чтобы UX/UI-дизайн был на высоте. И этот тезис выводит командную работу на новый уровень. Кстати, командная работа в статье отражена грамотно - респект!
Оставьте свое сообщение

См. также

Подмена заголовка 1С Промо

Универсальные функции Работа с интерфейсом Россия Бесплатно (free)

Подстановка имени базы данных в начало заголовка окон с программой 1С (конфигуратор и предприятие). Удобно при одновременной работе с большим количеством баз данных. Скрипт интересен будет как для программистов, так и для администраторов баз данных. Заголовок можно менять для любой программы, не только для 1С, для этого требуется немного исправить скрипт. Программисту 1С не составит труда переделать скрипт.

08.12.2018    11665    moolex    26    

Программный интерфейс для доработки форм

Практика программирования Работа с интерфейсом Универсальные функции v8 1cv8.cf Бесплатно (free)

Реализовал простой способ программного создания новых элементов, команд и реквизитов на форме.

25.11.2021    2965    AtamanovYS    19    

Реактивный интерфейс для 1С:Предприятия

Работа с интерфейсом Бесплатно (free)

Интеграция 1С:Предприятие с веб-приложениями требует нестандартных решений. О том, как построить веб-интерфейс для 1С на HTTP-сервисах, и какие технологии при этом можно использовать, на митапе «Интерфейс в 1С» рассказал автор профессиональных курсов по JavaScript в HTML Academy Игорь Антонов.

27.10.2021    2911    antonov_i    16    

Уникальный дизайн в 1С на примере разработки реального продукта

Работа с интерфейсом Бесплатно (free)

Изменить стандартный дизайн интерфейса в 1С можно не только с помощью классических веб-технологий. О том, как для этой цели использовать SVG-картинки, и какие особенности есть у такого подхода, рассказал разработчик 1С в компании «Ангелы ИТ» Сергей Харламов.

18.10.2021    6533    zatoichi    37    

Подбор в управляемой форме - что может быть проще? Промо

Работа с интерфейсом v8::УФ 1cv8.cf Бесплатно (free)

Технологии модальности сейчас меняются на технологии асинхронности, многопоточности и прочие дивные вещи, что, в свою очередь, заставляет людей еще чаще спрашивать о том, что да как в этой новой нелегкой жизни. Разбираемся!

19.09.2017    56026    starik-2005    71    

[ПОТРАЧЕНО] Динамическая таблица формы

Работа с интерфейсом v8 1cv8.cf Бесплатно (free)

История одной разработки в далеком 2020 году.

15.10.2021    3477    rpgshnik    47    

Когда интерфейсам 1С нужны веб-технологии

WEB Работа с интерфейсом Бесплатно (free)

Есть несколько способов сделать интерфейс в 1С богаче и оптимальнее с помощью веб-технологий. О том, какие практические приемы помогут в этой задаче, на митапе «Интерфейс в 1С» рассказали руководители разработки в компании «Арбис» Матвей Серегин и Анна Гнатюк.

15.10.2021    2710    Akcium    10    

Программно свернуть/развернуть узел динамического списка (с основной таблицей). Жирная точка над всеми "i".

Работа с интерфейсом Универсальные функции v8 Бесплатно (free)

Какой пользователь не мечтал поменьше тыркать кнопкой? Особенно в малюсенькие +/- в "древесных" динамических списках. Если вас тоже озадачили, чтобы, при выборе узла дерева сами развернулись все его вложенные элементы , а при выборе другого узла - так же автоматом свернулась ранее развернутая ветка (причем эти узлы могут находится в разных "отношениях" друг с другом)... То вам - сюда.

08.10.2021    1522    e-9    13    

Поздравляем всех одинэсников с 23 февраля! Промо

Поздравления Бесплатно (free)

Дорогие одинэсники, с Днем Защитника вас! Помните, что защищать нужно не только Родину, но и прекрасную половину человечества! Особенно ту, которая говорит с вами на одном языке, как в нашем видео-сюрпризе ;)

20.02.2014    27924    support    140    

Прогресс-бар в поле динамического списка

Работа с интерфейсом Практика программирования v8 Бесплатно (free)

Изображаем прогресс-бары в колонке динамического списка

23.08.2021    2796    Yashazz    12    

Предотвращение многократного вызова "ПриПолученииДанных" во время поиска в табличном поле в обычных формах

Работа с интерфейсом Практика программирования v8 Бесплатно (free)

Долго искал решение: как при выводе строк заполнить значениями колонки, которые созданы программно, чтобы, не было тормозов при стандартном поиске. И с минимальными изменениями (легко контролируемыми, при обновлении).

07.04.2021    2093    Vlad_CK    9    

Графит. Правщик 1С морд от kuzkov.info. 8. Видимые свойства отображалок

Работа с интерфейсом Бесплатно (free)

Восьмая часть очерков о разработке программы Графит, векторного правщика 1С морд от kuzkov.info. Проброс типовых свойств в шаблонщик и список элементов схемы на вкладке "Состав". Проброс типовых свойств в отображалку. Самодельные управляторы отображалок и сглаживание текста.

31.03.2021    547    Steelvan    0    

Полезности применения СКД Промо

Работа с интерфейсом Практика программирования v8::УФ v8::СКД УТ10 Россия Бесплатно (free)

Нюансы при работе из СКД на программном уровне.

11.04.2012    52852    logarifm    42    

Динамический список и поиск... неприятностей

Работа с интерфейсом v8 Бесплатно (free)

Страх и ненависть в поиске по динамическому списку, или "Кое-что о неоптимальном отборе".

17.03.2021    4678    Yashazz    37    

Графит. Правщик 1С морд от kuzkov.info. 6. Сохраняем и правим SVG формат

Работа с интерфейсом Бесплатно (free)

Шестая часть хронологии разработки программы Графит, векторного правщика 1С морд от kuzkov.info. Добавлен функционал сохранения схемы в svg с возможностью повторной правки сохраненного svg файла. Практический пример приложения svg картинок к задаче в задачнице Мантис. Тяни-бросай svg на поле рисования из виндового проводника и пример гиперссылок между svg в обозревателе.

25.02.2021    558    Steelvan    0    

Графит. Правщик 1С морд от kuzkov.info.5. Панель свойств

Работа с интерфейсом Бесплатно (free)

Пятая часть хронологии разработки программы Графит, векторного правщика 1С морд от kuzkov.info. Пока мы решили отойти от разработки шаблонов 1С элементов и сосредоточиться на функционале. Добавлена правая панель с вкладкой "ТиповыеСвойства" для элементов "Прямоугольник", "Многоугольник", "Овал", "Соединитель". Создан функционал для работы с цветами через буфер обмена. Будет несколько гифок для зрительной иллюстрации написанного.

09.02.2021    966    Steelvan    3    

Идея или как сохранить ЦВЕТ, ШРИФТ, ОФОРМЛЕНИЕ пользователя Промо

Работа с интерфейсом v8 1cv8.cf Бесплатно (free)

Простой и оригинальный способ сохранять ЦВЕТОВУЮ СХЕМУ и ОФОРМЛЕНИЕ пользователей. Как сохранить ЦВЕТ

22.06.2015    24948    Tatitutu    12    

Мобильный HTML-интерфейс, взгляд изнутри

Работа с интерфейсом Мобильная разработка v8::Mobile Бесплатно (free)

Для реализации красивого интерфейса в мобильном приложении 1С удобно использовать возможности стека HTML / CSS / JavaScript. О том, как построить отзывчивый HTML-интерфейс с перехватом событий и выполнением JavaScript-кода в поле HTML-документа на форме 1С, рассказал сотрудник отдела мобильной разработки в компании «1С-Рарус» Роман Сухоруков.

28.12.2020    4161    ingeneerz@gmail.com    11    

СКД: Использование макетов для вывода "сложных" группировок, ресурсов и итогов.

Работа с интерфейсом 1cv8.cf Бесплатно (free)

В данной статье я на простом примере покажу как можно использовать макеты СКД для вывода различных нестандартных вариантов группировок, ресурсов и итогов.

04.12.2020    6249    user1502278    15    

Программное условное оформление динамического списка, раскраска строк списка по цветам справочника или любым другим условиям (условное оформление)

Универсальные функции Работа с интерфейсом Практика программирования v8 v8::УФ 1cv8.cf Бесплатно (free)

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

30.11.2020    6534    SizovE    4    

Хранение и редактирование дополнительных параметров в регламентированном отчете. Для начинающих. Промо

Работа с интерфейсом v8 БП2.0 УПП1 БУ Бесплатно (free)

Для начинающих. Как редактировать дополнительные параметры регламентированного отчета, изменив только модуль формы и модуль объекта. Как сохранить дополнительные параметры в данных отчета.

22.01.2014    21074    KapasMordorov    4    

[mobile] Переносим HTML интерфейс на 1С

Работа с интерфейсом Мобильная разработка v8 v8::Mobile 1cv8.cf Бесплатно (free)

Разберем методы переноса HTML интерфейса на 1С на примере реализации нижнего меню для мобильного приложения. Сравним методы между собой. Данные методы можно применять не только для мобильной разработки, но и для веб-клиента и т.д

02.11.2020    8914    leobrn    79    

Рендеринг элементов управляемого интерфейса

Работа с интерфейсом v8 v8::УФ Россия Бесплатно (free)

Реализация отображения всего состояния формы проще, чем работа по изменениям. Однако использование идеи разделения алгоритмов на программные слои MVC и построения реактивных систем позволяет получить не только простые и масштабируемые решения, но и производительные интерфейсы. Рассмотрим примеры таких реализаций на основе использования фреймворка «Управление состоянием»: Информационная надпись, Заголовок формы, Свертываемая группа, Отключаемые панели.

22.09.2020    3928    kalyaka    5    

Переопределение представления ссылочного значения

Работа с интерфейсом Практика программирования v8 Бесплатно (free)

Переопределение представления ссылочного значения

17.09.2020    5053    sam441    15    

Из архивов Web-проектов: Основы теории цвета Промо

Работа с интерфейсом Бесплатно (free)

Казалось бы, все сделано по уму: и ТЗ адекватное, и программа написана в соответствии. А глаз не радует... Для тех кому знакома ситуация, кому важна гармония во всем, посвящается:

17.09.2013    24944    Evgen.Ponomarenko    13    

Использование флажков в динамических списках

Работа с интерфейсом Практика программирования v8::УФ Бесплатно (free)

В статье расскажу как в динамических списках можно использовать поле флажка для отметки строк. Используемый прием можно использовать не только для галочек, но и для любого поля ввода. Несмотря на то, что редактирование динамических списков напрямую невозможно, есть способ обойти платформу. Подробности в публикации.

04.08.2020    12049    nekit_rdx    34    

Английский интерфейс для 1С: Управление торговлей. Перенос перевода из 1С: ERP

Работа с интерфейсом v8::ОУ УТ11 Россия УУ Бесплатно (free)

Полноценный англоязычный интерфейс для 1С: Управление торговлей. Я передаю идею, а пользоваться или нет, решайте сами. Надеюсь, эта статья ускорит появление продукта 1C:Trade Management 11.

05.05.2020    3312    _Ramzes    7    

Программное генерирование кнопочек для удобного управления уровнями группировки в отчетах (версия 2a). Промо

Работа с интерфейсом v8 1cv8.cf Россия Бесплатно (free)

В табличных документах 1С 8 имеется отличная возможность использования группировок, но управление уровнями группировок через контекстное меню не очень удобное. В своих отчетах для управления уровнями группировок я использую маленькие кнопочки на поле табличного документа - это намного удобнее и быстрее, чем через контекстное меню.

09.04.2011    47359    mtv:)    75    

Перенос инструкций из word во встроенную справку 1С с сохранением картинок и форматирования

Работа с интерфейсом Практика программирования v8 Бесплатно (free)

Делюсь простым и удобным способом переноса справки/инструкций из ворда (и не только) во встроенную справку 1С с сохранением картинок и форматирования.

22.04.2020    5605    77dream77    21    

Пользовательский javascript для комментариев на Infostart.ru

Работа с интерфейсом Бесплатно (free)

Когда публикация обсуждаема, и мы переходим на новую страницу комментариев, - вся страница обновляется. Приходится опять искать эту «середину» между описанием публикации, которое у обсуждаемых публикаций приличное, и бесконечным разделом «смотрите также». Переходим на следующую страницу, снова долго позиционируемся, и т. д.

21.02.2020    1943    aet    4    

Treemapping — способ визуализации данных древовидной структуры. Карта-схема дерева

Математика и алгоритмы Работа с интерфейсом v8 1cv8.cf Бесплатно (free)

Предлагается ознакомиться с редким способом графического представления иерархических данных. Приводится алгоритм формирования и пример реализации.

18.02.2020    6561    randomus    20    

Хитрости компоновки данных: программное формирование заголовков отчета и колонок без использования макетов. Промо

Работа с интерфейсом v8 1cv8.cf Россия Бесплатно (free)

Хитрости компоновки данных: программное формирование заголовков отчета и колонок без использования макетов. Очень часто необходимо программно сформировать заголовок отчета, например добавить туда наименование валюты, в которой формируется отчет. Можно использовать макеты, но во многих случаях это не оправданно.

27.07.2012    32887    milkers    10    

[Шпаргалка] Предустановка типа для составного реквизита

Работа с интерфейсом v8 1cv8.cf Бесплатно (free)

Для реквизита составного типа необходимо ограничить список выбора типов.

18.02.2020    5564    rpgshnik    6    

Простой и красивый интерфейс

Работа с интерфейсом Мобильная разработка v8::Mobile Бесплатно (free)

Разработчики мобильных приложений на платформе 1С сталкиваются с проблемой адаптации сгенерированного платформой интерфейса под удобство использования. О том, какие приемы помогут сделать интерфейс красивым и удобным, на конференции Infostart Event 2019 Inception рассказал руководитель отдела мобильной разработки компании «1С-Рарус» Никита Бакшеев.

30.01.2020    16845    Baksheev-Nikita    34    

СКД. Шаг 3. Используем макеты для оформления отчета

Работа с интерфейсом v8 v8::СКД 1cv8.cf Бесплатно (free)

В данной публикации рассмотрим базовый подход к использованию собственных макетов в СКД на примере формирования небольшого отчета.

13.01.2020    39022    aximo    19    

Рабочее место кассира для touch-screen и программируемой клавиатуры продавца в «1С: Розница» Промо

Работа с интерфейсом v8 Розница Бесплатно (free)

Вашему вниманию предлагается текст одного из технических проектов «1С: Розница 8», он описывает процесс разработки интерфейса РМК, с которым, нынче, работают кассиры очень многих магазинов.

29.11.2012    48366    aavolkoff    50    

Добавление собственного поля и состояния в настройки доступности по состоянию в 1С:Документооборот

Работа с интерфейсом v8 ДО Бесплатно (free)

В данной публикации я хочу описать процесс добавления собственного поля и состояния в функционал настройки доступности по состоянию в 1С:Документооборот.

30.12.2019    6851    pavelpribytkin96    2    

[СКД] Вывод картинки в результат любого отчета на СКД

Работа с интерфейсом v8 v8::СКД 1cv8.cf Бесплатно (free)

Если у вас в справочнике Номенклатура (или другом справочнике) заполнена картинка, то ее можно легко вывести для наглядности отчета.

09.12.2019    12554    John_d    16    

Лайфхаки 1С. Настройка списков (Часть 3)

Работа с интерфейсом v8 Бесплатно (free)

Новая порция лайфхаков по работе с интерфейсом 1С. На этот раз разбираем работу со списками - учимся их упорядочивать, сортировать, создавать новые и перемещать старые. Это очень полезное дополнение к уже имеющимся знаниям по интерфейсу 1С.

03.12.2019    22865    VachKirp    14    

Бухгалтерия предприятия 3.0 интерфейс, аналогичный 1С:Бухгалтерии 7.7; Промо

Работа с интерфейсом v8 БП2.0 Россия Бесплатно (free)

Бухгалтерия предприятия, редакция 3.0, версия 3.0.14. Добавлена возможность использовать интерфейс, аналогичный 1С:Бухгалтерии 7.7;

20.09.2012    37979    dour-dead    18    

В новой платформе пропала кнопка "Печать". Имитируем БСП

Работа с интерфейсом v8 Россия Бесплатно (free)

"Приятным" сюрпризом для многих пользователей 1С стало то, что при обновлении платформы (начиная с 8.3.15) полностью поменялся интерфейс. Можно долго спорить о целесообразности этого новшества, но самым главным минусом стало то, что пропали стандартные кнопки на панели инструментов. Разработчики предполагают повсеместное использование БСП, но что делать тем, кто давно и успешно использует самописные конфигурации, в которых формирование печатной формы происходит по ТабДок.Показать(), и не желает их "утяжелять"? Добавим общую форму с нужными нам кнопками.

03.12.2019    10476    Vlan    44    

Управляемые формы. Изменение формы списка или формы объекта без внесения изменений в типовые формы (без использования расширений)

Работа с интерфейсом v8 1cv8.cf Бесплатно (free)

Вносим изменения в типовые формы объектов (документы, справочники, журналы, обработки, общие формы). Не снимая с поддержки эти формы. Создаем программно элементы из общего модуля. Для примера рассмотрю добавление колонки "Скрепка" в форму списка документа. Если к документу привязан файл, то в списке в новой колонке должна отображаться "скрепка".

12.11.2019    16010    John_d    25    

ELK. Время изумительных историй!

Журнал регистрации Работа с интерфейсом v8 1cv8.cf Бесплатно (free)

Всем привет! Сегодня хочу рассказать вам несколько полезных историй про то как нам помог Elastic search в связке с Kibana. Про сам Elastic рассказывать не буду, уже все давным давно описали и до меня. Все обычно говорят что это полезно, это классно. В то же время, очень мало кто рассказывает про практические ситуации: когда и как помог Elastic. Итак, начнем.

31.10.2019    9948    slozhenikin_com    28    

С днем программиста (Россия) Промо

Поздравления 1cv8.cf Россия Бесплатно (free)

11 сентября 2009 года президент России Дмитрий Медведев подписал Указ № 1034, подготовленный Министерством связи и массовых коммуникаций Российской Федерации, который устанавливает в России новый официальный профессиональный праздник — День программиста.

13.09.2011    16939    AnryMc    2    

Создание асинхронных виджетов

Работа с интерфейсом v8 1cv8.cf Бесплатно (free)

Описание нескольких способов создания асинхронных виджетов для 1С:Предприятия. Рассматриваются способы с использованием HTTP-сервисов и фоновых заданий.

16.10.2019    14633    YPermitin    19    

Формы. Трудности программной работы

Работа с интерфейсом v8 v8::УФ 1cv8.cf Бесплатно (free)

Рассматриваем основные подводные камни, с которыми приходится сталкиваться при программной работе с формами, а также способы обхода самых частых проблем.

06.10.2019    13244    YPermitin    31    

Лайфхаки 1С (часть 1). Настройки отчетов и печатных форм 1С

Работа с интерфейсом v8 1cv8.cf Россия Бесплатно (free)

Статья рассчитана на пользователей или программистов, которые только начинают работать с 1С, для максимально быстрого ознакомления с интерфейсом программы. В статье приведены лайфхаки, которые позволят вам быстро и эффективно научиться настраивать отчёты и печатные в среде программных продуктов 1С. Полученные знания значительно упростят взаимодействие с интерфейсом 1С и повысят продуктивность работы оператора.

02.10.2019    16759    VachKirp    10    

Выбор вариантов отчета в "Управление торговлей" ред. 11 Промо

Работа с интерфейсом Учет ТМЦ Учет ТМЦ v8 УТ10 Россия БУ Бесплатно (free)

В УТ 11 в свойствах конфигурации задано хранилище вариантов отчетов. Исходя из этого, все отчеты будут использовать для своих вариантов именно это хранилище (если, конечно, в свойствах самого отчета не задано другое хранилище). По сути, все варианты для отчетов находятся в справочнике "Варианты отчетов", который заполняется при первом запуске системы. Вполне очевидно, что если Вы создаете свой отчет (внешний или внутренний) с несколькими вариантами, у Вас не будет возможности выбирать нужный вариант (переключаться между вариантами), т.к. в выше указанном справочнике нет никакой информации о вариантах созданного Вами отчета. В этой небольшой статье я покажу один из способов решения данной проблемы.

27.05.2012    48749    1cUserAndrew    25    

СКД. Отчеты с картинками

Работа с интерфейсом Практика программирования v8::СКД 1cv8.cf Бесплатно (free)

Решение популярных кейсов с картинками в отчетах на СКД.

25.09.2019    33515    YPermitin    58    

Добавляем виджет "Задачи от меня" в Документооборот 2.1

Работа с интерфейсом Практика программирования v8 v8::Бизнес-процессы ДО Россия Бесплатно (free)

Небольшая доработка Документооборота 2.1 для возможности добавления виджета "Задачи от меня" в обработку Текущие дела.

25.09.2019    9833    Sergey_Borisovi4    3    

[Шпаргалка] Программное создание элементов формы

Работа с интерфейсом Практика программирования v8 1cv8.cf Бесплатно (free)

Программное создание практически всех популярных элементов формы.

06.09.2019    104898    rpgshnik    77    

[Механизм интерфейса] Часы

Работа с интерфейсом Практика программирования v8 1cv8.cf Бесплатно (free)

Добавляем цифровые часы на форму, как бонус рассмотрим вариант и с аналоговыми.

26.08.2019    11184    rpgshnik    36