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

30.01.20

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

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

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

Мы разрабатываем программы, чтобы решить какую-то боль пользователя, принести какую-то ценность, помочь пользователям. Для себя мы, конечно же, хотим, чтобы наши программы были популярны, и, в конечном итоге, хотим заработать денег. 

Но мало кто знает, что 96% вновь выпущенных программ не используются совсем. Мы провели наше собственное исследование, и узнали, что в 2018 году у наших конкурентов было выпущено сотни программ, 96% из которых совсем не устанавливали. То есть, разработчики потратили свое время впустую.

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

 

О развитии мобильной разработки в компании «1С-Рарус»

 

 

И, прежде чем начать, немного о нас и о нашем опыте. 

  • Мы занимаемся только тиражной разработкой, только для массового рынка. 

  • На сегодняшний день наши приложения скачало уже более 2,5 миллионов человек во всем мире. 

  • 25 тысяч из них нам поставили оценку и написали отзыв. 

  • Средняя оценка у нас 4,5 балла. Это – очень хороший показатель для мобильного мира. 

  • Также больше 5000 человек ежемесячно оплачивает нам подписку.

  • Мы попадали в Топ-10 по категориям в 88 странах. Это – и развитые, и развивающиеся страны, такие, как Америка, Великобритания, Германия, Россия, Китай, Япония, Бразилия и т.д

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

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

 

Проблема интерфейса при разработке на платформе 1С

 

 

Расскажу про проблематику в целом. 

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

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

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

 

Уровни проработки интерфейсов

 

 

Мы делим проработку интерфейсов на 4 уровня:

  • первый уровень «Интерфейс платформы»;

  • далее идет «Адаптация экранов»;

  • потом – «Удобство использования»;

  • и последний, верхний уровень – «Идеальный интерфейс». 

Давайте теперь я про каждый из них более подробно расскажу.

 

Этап 1: Интерфейс платформы

 

 

Первый этап – это интерфейс самой платформы. Когда мы никак не дорабатываем интерфейс, платформа нам сама его сгенерировала. 

  • Посмотрите на первый экран. Мы увидим там так называемое «гамбургер-меню». Это меню морально устарело 7 лет назад. 

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

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

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

 

Этап 2: Адаптация экранов

 

 

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

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

 

 

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

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

 

 

Третье – заголовки над или внутри поля. Тоже простой прием. По умолчанию у нас заголовок слева, а поле справа. В итоге на смартфоне не видно ни того, ни другого. 

Поэтому располагайте заголовок сверху, чтобы было видно и заголовок, и поле. Либо внутри. Но если мы располагаем внутри, то, когда мы выберем какой-то элемент, заголовок исчезнет. Поэтому выбирайте для разных случаев либо первый, либо второй вариант.

 

 

Четвертый прием – команды-иконки. Если мы будем так же, как и в настольной 1С, подписывать команды текстом, они у нас займут весь экран, поэтому – меняйте все на иконки. 

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

 

 

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

Например, на экране слева нам и так понятно, где дата, где сумма. Зачем нам это дублировать? У нас маленький экран. 

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

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

 

 

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

Вот – хорошие примеры, где мы меняем прозрачность, размерность. Эти формы гораздо легче читать.

 

 

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

 

 

Восьмой прием – табличный документ на весь экран. 

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

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

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

 

Этап 3: Удобство использования

 

 

А следующий этап – удобство использования. Его, к сожалению, не делает почти никто. Либо делают частично и очень слабо.

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

Давайте я вам покажу, какие есть приемы повышения удобства использования.

 

 

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

 

 

Далее, есть прием «провести пользователя за руку» – когда мы его проводим по каким-то рельсам, не даем ему свернуть ни вправо, ни влево.

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

 

 

Третий прием – минимизируйте количество действий пользователя в приложении. 

Здесь представлено приложение для учета личных финансов «Бюджет». 

Внесение пользователем своего ежедневного расхода – самая частая операция в этом приложении. Человек пришел в магазин, купил молока – ему нужно занести этот расход. 

Что он делает? Он открывает приложение, нажимает на «Расход». По классике бы открылся документ, где куча реквизитов, которые нужно заполнить, кликнуть на реквизит, затем выбрать, затем нажать «ОК», чтобы реквизит заполнился. 

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

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

 

 

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

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

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

В наших решениях в таких случаях мы сразу же предлагаем оприходовать или купить товар. На экране справа – это решение проблемы до ее возникновения. Пользователь еще ни одного документа не вводил – он только заходит, и мы ему сразу говорим: «Этот документ вводится вот здесь». Чтобы пользователь не начинал напрягаться, исследуя приложение.

 

 

Пятый прием – сортируйте и группируйте команды. 

Как правило, у нас команд очень много. Есть правило Парето, когда 20% команд используются в 80% случаях. Поэтому – выделяйте на основном экране наиболее используемые команды (как на экране слева), а менее часто используемые команды сворачивайте в подменю, там можно иерархию организовать и т.д.

 

 

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

Например, на первом экране у нас документ «Бюджет». 

Эта плашка наверху – это не команды, это реквизиты, и они уже предзаполнены. Плашка внизу, где «Дата», «По всем кошелькам» – это тоже реквизиты. У нас здесь получается, что мы предзаполнили 70% документа сразу. 

Как предзаполнять? Есть разные приемы. Мы предзаполняем реквизиты либо на основе поведения самого пользователя, либо на основе поведения вообще всех пользователей, либо на основе каких-то данных в приложении. Например:

  • валюта «рубль» на плашке сверху заполнилась, потому что выбран русский язык;

  • поле «Месяц» заполнилось на основе популярности всех данных пользователей;

  • и поле «Расход» тоже на основе всех данных пользователей;

  • реквизиты «По всем кошелькам» и «Для группы расходов» заполнились на основании поведения конкретного пользователя.

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

Второй пример – на основании этого же самого бюджета мы создаем расход. Мы на втором экране кликаем по бюджету и у нас открывается документ «Расход», экран №3. У нас там уже все заполнено, нам нужно ввести только сумму. Это удобно.

 

 

Седьмой прием основан на классической 1С-ной ошибке – заменяйте все сложные термины на простой понятный язык.

У нас пользователи в основном вообще не знают 1С, и мы некоторые 1С-ные термины заменили сразу. Например:

  • «Провести». Человек, который не знает 1С, никогда не поймет, что означает слово «Провести».

  • «Документ». Еще много лет назад, когда в 1С использовался этот термин, нас спрашивали: «Зачем тут вводить паспортные данные?» Все думали, что «Ввести документ» – это надо ввести данные паспорта. Поэтому замените «Документ» на «Операция».

  • «Записать». По сути, этот термин 1С означает «Сохранить в черновик». Поэтому лучше называть все своими именами.

  • «Пометить на удаление». Мне вообще не совсем понятно, зачем это может понадобиться в мобильном приложении. Удаляйте документы сразу же. Если мне кто-то скажет, что там есть проблема битых ссылок, то этот вопрос очень легко и красиво решается. Поэтому лучше удаляйте, не заставляйте пользователя удалять объекты через механизм пометки на удаление.

  • «Контрагент». Это тоже непонятное людям слово. Замените его на «Клиент» или «Поставщик» или другое слово, в соответствии с ролью. 

Это, конечно же, далеко не все термины.

 

 

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

Потому что если есть какая-то функциональность, которая не используется, она будет усложнять использование приложения, потому что людям все время приходится с этим сталкиваться, а это уже дискомфорт для пользователя. 

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

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

 

Этап 4: Идеальный интерфейс

 

 

А далее – идеальный интерфейс. Давайте еще раз посмотрим на интерфейсы, которые были на третьем уровне.

Как они выглядят.

 

 

А теперь давайте посмотрим, как эти же самые интерфейсы выглядят на уровне «Идеальный интерфейс», после того, как мы их перерисовали. 

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

Давайте посмотрим конкретно, как изменилась каждая из форм.

 

 

Это – форма упражнений.

 

 

Далее – форма приложения о питании.

 

 

Это форма первоначального опросника в приложении о питании.

 

 

Это – форма выполнения упражнения. 

Когда у нас был интерфейс слева, нам часто писали: «Вы там что, на Windows 95 разрабатываете?» А кто-то писал, что у нас дизайнер за хлеб работает :)

 

 

Так у нас изменился календарь.

 

Как сделать идеальный интерфейс

 

 

Но как мы это сделали?

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

 

Шаг №1. Разработка дизайн-проекта

 

 

По технологии. 

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

Причем, дизайнера нужно брать, который не знает, что такое 1С. 

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

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

 

Шаг №2. Рисование интерфейса по дизайн-проекту в HTML

 

 

Далее, когда у нас уже есть дизайн-проект, мы передаем его программисту, но не простому программисту, а который знает и 1С, и HTML.

Он берет этот дизайн, рисует в HTML. И потом этот HTML он внедряет в платформу 1С. 

 

Примеры построения интерфейса на HTML в мобильных приложениях 1С

 

Давайте посмотрим на конкретном примере, как мы внедрили это в платформу 1С.

 

 

Здесь у нас форма упражнений. И, чтобы эту форму создать, нужно сделать HTML-документ, поместить его на форму и в событии «ПриСозданииНаСервере» эту форму описать. Вот так выглядит описание этой формы.

  • Первое – это URL-ссылка, которая вернется при нажатии на ту или иную кнопку.

  • Второе – это описание текста. Вот эти «Грудь, спина, плечи». 

  • И третье – это картинки справа. Вот так они присваиваются в HTML-документе.

 

 

Далее – мы оформляем эти плашечки-кнопки. Вот так выглядит оформление. Здесь мы присваиваем шрифты. Здесь мы говорим форме, как надо растягивать, какая там прозрачность, какой фон должен быть. Все это вот таким кодом описывается в событии «ПриСозданииНаСервере».

 

 

И нам остается только сделать обработку клика. Когда мы кликаем, срабатывает событие «ПриНажатии» в 1С. И в этом событии нам возвращается та самая URL-ссылка, которую мы вначале присвоили в событии «ПриСозданииНаСервере». И все, мы можем уже эту URL-ссылку обрабатывать, как хотим. Можем открыть другую форму, можем какое-то действие сделать. Все, что угодно мы можем сделать.

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

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

 

Вопросы:

 

  • Вы держите своего дизайнера или нанимаете каждый раз разного?

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

  • Как вы боретесь со скоростью запуска приложений на 1С?

  • Есть разные технологии. У нас в разных проектах по-разному. Что-то подгружается после установки, в фоновом режиме. Это зависит от конкретной проблемы. Но всегда можно оптимизировать. Либо мы сами данные оптимизируем, либо мы код рефакторим, либо просто подгружаем или обрабатываем что-то потом, уже во время запуска. Это все довольно стандартные приемы.

  • Где вы храните сами шаблоны (HTML, CSS) при проектировании формы? Потому что так получилось, что у мобильной платформы нет макета вида «Текстовый документ» или какого-то другого объекта, удобного для хранения текстов. Как вы из этого выкручиваетесь? Вы в коде забиваете текстовые шаблоны?

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

 

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

Данная статья написана по итогам доклада (видео), прочитанного на конференции INFOSTART EVENT 2019.

 

30 мая - 1 июня 2024 года состоится конференция Анализ & Управление в ИТ-проектах, на которой прозвучит 130+ докладов.

Темы конференции:

  • Программная инженерия.
  • Инструментарий аналитика.
  • Решения 1С: архитектура, учет и кейсы автоматизации на 1С.
  • Управление проектом.
  • Управление продуктом.
  • Soft skills, управление командой проекта.

Конференция для аналитиков и руководителей проектов, а также других специалистов из мира 1С, которые занимаются системным и бизнес-анализом, работают с требованиями, управляют проектами и продуктами!

Подробнее о конференции.

 


См. также

"Штрихкод-информер" - мобильный ТСД и прайс-чекер в смартфоне

Мобильная разработка Сканер штрих-кода Терминал сбора данных Управляемые формы Мобильная платформа 1С:Розница 2 1С:Управление нашей фирмой 1.6 1С:ERP Управление предприятием 2 1С:Управление торговлей 11 1С:Комплексная автоматизация 2.х Управленческий учет Платные (руб)

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

2880 руб.

03.12.2018    54432    135    102    

160

SALE! 25%

Что нам стоит бота построить? Нарисуем - будет жить! Графический конструктор телеграм-ботов/Telegram

Мобильная разработка Мессенджеры и боты Платформа 1С v8.3 Платные (руб)

Теперь создать telegram-бота - элементарно. Достаточно просто нарисовать блок-схему телеграм-бота, и он сразу заработает. Это возможно при использовании Графического конструктора телеграм-ботов. Это единственный конструктор ботов для telegram, чье качество и функционал подтверждены фирмой 1С, есть сертификат 1С:Совместимо. Расширение в интерактивном режиме, с помощью блок-схем, позволяет с минимальными трудозатратами создать телеграм-ботов в любой конфигурации, работающей на платформе «1С:Предприятие 8.3».

13200 9900 руб.

27.12.2021    33025    80    157    

173

"Мобильный ТСД" - инвентаризация и сбор штрихкодов для iOS и Android

Сканер штрих-кода Терминал сбора данных Мобильная разработка Монитор заказов Оптовая торговля Розничная торговля Ценообразование, анализ цен Платформа 1С v8.3 Мобильная платформа 1С:Розница 2 1С:Управление нашей фирмой 1.6 1С:ERP Управление предприятием 2 1С:Управление торговлей 11 1С:Комплексная автоматизация 2.х Розничная и сетевая торговля (FMCG) Оптовая торговля, дистрибуция, логистика Управленческий учет Платные (руб)

Простой мобильный терминал сбора данных для смартфонов на iOS и Android, не требующий сложных настроек и установки дополнительных программ. Обмен между Вашей 1С и мобильным приложением осуществляется через облачный сервис и расширение конфигурации. Работает с конфигурациями УТ 11, ERP, КА2, Розница 2, Розница 3, УНФ 1.6, УНФ 3.0. Полнофункциональный демо-доступ для своей конфигурации можно запросить в настройках мобильного приложения - все необходимое придет на почту автоматически.

2000 руб.

22.04.2019    91749    507    186    

293

Богатый редактор картинок, хранимых в базе, с возможностью РИСОВАНИЯ. Редактор внешних файлов картинок. Объект, расширяющий возможности работы с картинками из встроенного языка (Три в одном) + Обработка «Стандартизация картинок»

Работа с интерфейсом Рабочее место Платформа 1С v8.3 Управляемые формы Конфигурации 1cv8 Платные (руб)

Обработка предназначена для редактирования картинок в режиме «Предприятие», с возможностью РИСОВАТЬ на них. Поддерживается работа как в обычных формах (толстый клиент) так и на управляемых формах (тонкий клиент). Обработка позволяет редактировать как картинки, хранимые в базе, так и графические файлы с диска на файловой системе. Помимо базовых функций (изменение размеров, преобразование формата, обрезание картинки, повороты и т.п.) – редактор имеет богатый набор инструментов для рисования. Доступна функция вставки изображения из буфера обмена. Также обработка может быть использована из встроенного языка как объект для редактирования картинок. Объект может быть использован: на стороне клиента, на стороне сервера, из внешнего соединения. Данная обработка будет особенно полезна тем, кто вносит картинки в базу (изображения номенклатуры, фотографии физических лиц и т.п.). Функционал реализуется с использованием JavaScript и бесплатного ПО ImageMagick (без использования внешних компонент).

6000 руб.

16.01.2015    61706    43    59    

80

[Расширения] Динамическое управление видимостью и доступностью элементов форм (УФ) (8.3.6+)

Работа с интерфейсом Платформа 1С v8.3 Управляемые формы Конфигурации 1cv8 Платные (руб)

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

5000 руб.

14.01.2016    54320    16    21    

42

Управление дашбордами

Работа с интерфейсом Платформа 1С v8.3 Конфигурации 1cv8 Платные (руб)

Обработка предназначена для создания и управления дашбордами.

2400 руб.

29.06.2020    16625    21    4    

35
Комментарии
В избранное Подписаться на ответы Сортировка: Древо развёрнутое
Свернуть все
1. lishniy 132 30.01.20 17:28 Сейчас в теме

Не знаю как остальным, но мне больше нравится то что слева. Безвкусица какая-то.
Хотя остальные вроде норм.
Totoro; smit1c; nikolav; kuptsov_andrey_k; starik-2005; herfis; 7OH; Award; SirStefan; sdwggg; nekit_rdx; Flok; Трактор; DrAku1a; _alex1974; BARBAROSSA88; Sashares; TipsyKID; Interrupted; BigB; Идальго; logarifm; Artem-B; rpgshnik; dunpil; mirco; Somebody1; SinglCOOLer; +28 Ответить
6. rpgshnik 3625 31.01.20 09:56 Сейчас в теме
Публикация содержит хорошие рекомендации, хотя видео смотрел, но уже забыл :)
Но сам дизайн как заметили в (1) требует внимания :)
9. Baksheev-Nikita 584 31.01.20 11:50 Сейчас в теме
(1) Спасибо большое за мнение. Здесь соль не в том, кому что больше нравится, а в том что у вас есть возможность сделать ваш идеальный интерфейс, каким бы вы его не придумали, без каких-либо ограничений.

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

Кстати, регулярно мое мнение о прекрасном расходится с мнением пользователей, к моему сожалению. Конечно, внедряем то что понравилось пользователям в итоге.
9-pm; nekit_rdx; Дмитрий74Чел; user1311038; +4 Ответить
29. _alex1974 06.02.20 11:38 Сейчас в теме
(1) фотографии негров, склеенные по вертикали - так себе, честно говоря
2. acanta 30.01.20 17:37 Сейчас в теме
Странно, почему в обычном интерфейсе так не делают, с наименованием внутри поля и дизайном.
3. Xershi 1473 30.01.20 17:43 Сейчас в теме
Взял на заметку. Иногда бывают проекты по мобильной разработке, будет от куда почерпнуть идеи!
11. Baksheev-Nikita 584 31.01.20 12:00 Сейчас в теме
(3)(4)(5)(6) Спасибо большое, очень приятно, что доклад оказался полезным)
4. Torin 735 30.01.20 19:41 Сейчас в теме
Отличная публикация!!! Супер! Взял на заметку
5. LimarenkoA 31.01.20 08:47 Сейчас в теме
Очень хорошо всё написано, ни разу ещё не приходилось разрабатывать под мобилки, но тема крайне интересная и развитие в этом направлении имеет место быть.
7. Sergey_1c 54 31.01.20 10:12 Сейчас в теме
А как со скоростью работы? Раньше, помню, были очень большие проблемы с отзывчивостью интерфейса, открытие приложения - долго, смена экранов - с задержкой, скроллинг списков - просто ужас.
10. Baksheev-Nikita 584 31.01.20 11:56 Сейчас в теме
(7) Мое мнение, что на 1С интерфейсах в целом ситуация улучшается, коллеги из 1С работают над этим. Раньше точно было хуже. Но проблем, к сожалению, еще хватает. Хотелось бы чтобы их все исправили. А на HTML интерфейсах лагов нет вообще.
8. DarkAn 1078 31.01.20 10:33 Сейчас в теме
Доклад хороший, но вот видео в разрешением 360 максимум - чет не очень :)
13. Baksheev-Nikita 584 31.01.20 12:03 Сейчас в теме
(8) Да, видео мне самому не нравится, я пытался повлиять на это, но это было не в моих силах. Какая-то техническая сложность(((
Спасибо вам за оценку доклада)
12. qwed557 30 31.01.20 12:01 Сейчас в теме
Кто придумал такой шрифт, мой мозг упорно пытался это прочитать на английском
Прикрепленные файлы:
TerveRus; DrAku1a; DWZ2; IllayDevel; BigB; +5 Ответить
27. Baksheev-Nikita 584 05.02.20 16:43 Сейчас в теме
(12) Шрифт выбрал дизайнер. ИМХО Красивый шрифт)
33. TerveRus 17.06.20 14:50 Сейчас в теме
14. gudun_ku 62 31.01.20 13:05 Сейчас в теме
Исходя из шага 4, стоило сразу применять React Native или сейчас уже можно Flutter, и для таких приложений как подсчет калорий забыть про 1С, потому что зачем? Имхо мобильное приложение на 1с нужно тогда и только тогда когда нужна тесная интеграция с КИС на 1С, ну или логика работы "как в 1С".
acvatoris; dreamadv; +2 Ответить
15. Baksheev-Nikita 584 31.01.20 14:16 Сейчас в теме
(14) По поводу React Native и Flutter, может быть и лучше, но у нас просто нет в команде таких разработчиков, а HTML знаком многим и работает кроссплатформенно как и платформа 1С и интегрируется хорошо.

А по поводу забыть про 1С для приложения подсчет калорий не соглашусь. Звучит как стереотип. 1С платформа - это инструмент, если я могу быстрее и дешевле сделать на 1С платформе чем нативно, при этом с высоким качеством, то не вижу причин не делать. Это вопрос эффективности, хоть игры делайте на платформе, если есть возможность ее эффективно использовать для этого.
Plotks2017; +1 Ответить
16. gudun_ku 62 31.01.20 16:38 Сейчас в теме
(15) Может быть и стереотип, да только ведь 1С насколько я понимаю, платная, в отличие от Android Studio, Flutter SDK и React ... А потом еще надо роялти платить...
dreamadv; +1 Ответить
32. Shotnik 03.06.20 14:26 Сейчас в теме
(14)
(14) Согласен насчет React Native и Flutter. Оба кроссплатформенных решения зарекомендовали себя отлично. Плюс всегда можно сравнить производительность, компоненты, время разработки и выбрать какой то один вариант. Я вот, прочитав сравнения, решил, что буду брать для проектов React Native )) кому интересно, то инфы полно, вот, например как тут
acvatoris; dreamadv; +2 Ответить
17. FesenkoA 57 31.01.20 16:42 Сейчас в теме
Вопрос: сколько этот интерфейс создавался от "стандартная форма списка" до того что сейчас, и какой размер команды? Примерно, хочу оценить свои силы на создание чего то приближенного) Спасибо.
21. Baksheev-Nikita 584 03.02.20 16:25 Сейчас в теме
(17) У меня на этот счет есть целый доклад "Как сделать успешное моб приложение", вопрос цены и сроков там раскрыт, вот ссылка https://infostart.ru/public/1105397/
18. CheBurator 3119 01.02.20 00:34 Сейчас в теме
"Если мне кто-то скажет, что там есть проблема битых ссылок, то этот вопрос очень легко и красиво решается. " - как?
7OH; bulpi; СергейК; +3 Ответить
20. Baksheev-Nikita 584 03.02.20 16:21 Сейчас в теме
(18)
Предположим мы удаляем объект и на него есть ссылки в других местах программы. Там где мы можем просто очистить ссылки и при этом смысл другого объекта не утратится или строки регистра или строки таб части, то просто очищаем ссылки на удаляемый объект, там где очищение ссылки на удаляемый объект делает текущий объект/строку/запись уже бессмысленным, тогда и его сразу же удаляем вместе с удаляемым объектом, здесь можно уведомить пользователя, что будут удалены еще и вот эти сущности в программе.
28. CheBurator 3119 05.02.20 22:48 Сейчас в теме
(20)
Там где мы можем просто очистить ссылки и при этом смысл другого объекта не утратится или строки регистра или строки таб части, то просто очищаем ссылки на удаляемый объект, там где очищение ссылки на удаляемый объект делает текущий объект/строку/запись уже бессмысленным,

- как вот это процитированное определяется?
19. bulpi 215 01.02.20 16:21 Сейчас в теме
Вопросы новичка в разработке мобильных приложений :
1)"можно сделать иконку, и под ней мелкий текст (как на экране слева)"

Как ?

2)" это стандартные команды, которыми никто не пользуется. Можно их смело удалять"

Как ? Я их не делал, они сами появились. И как их удалить?

3)"Поэтому просто растягивайте табличный документ на весь экран. Это – простая операция"

Да ну! И как же это сделать?

4)"Если мне кто-то скажет, что там есть проблема битых ссылок, то этот вопрос очень легко и красиво решается. "

Это вообще классика. Я изобрел вечный двигатель и машину времени, легкота, а вы, лохи, все это время фигней страдали.
nekit_rdx; salexdv; DWZ2; +3 Ответить
22. Baksheev-Nikita 584 05.02.20 11:09 Сейчас в теме
(19) Отвечаю в том же порядке:
1) Вот здесь вы сможете скачать этот пример реализации: https://infostart.ru/public/923136/
2) Просто нужно убрать автозаполнение командной панели.
3) Нужно в макете нажать правой кнопкой на заголовок колонки и поставить флаг "Растягивать по горизонтали". В этом случае колонка будет пытаться занять все свободное пространство. Если у нескольких колонок активировать этот флаг, то растяжение будет зависеть от значения Весового коэффициента.
4) Ну я там ничего не изобретал, конечно и такой смысл не вкладывал. В общем в 20-м комментарии уже ответил на этот вопрос
nekit_rdx; chirinna; +2 Ответить
23. bulpi 215 05.02.20 14:24 Сейчас в теме
(19)

4)Так это почти аналог "удаления помеченных объектов" с поиском ссылок по всей базе. При нормальном размере базы может занять серьезное время.
26. Baksheev-Nikita 584 05.02.20 16:32 Сейчас в теме
(23) По удобству для пользователя это совсем не аналог. В классике пользователь вынужден мучится ручным обходом по всем докам, очень часто он даже не может сходу очистить доки от ссылок из-за особенностей учета. С точки зрения дизайна системы - это в прямом смысле издевательство над пользователями. В нашем случае пользователь нажимает удалить, дальнейшее очищение системы происходит автоматически.

По поводу серьезного времени - мы с таким пока не сталкивались. Возможно наши решения не очень сложные, чтобы воспроизвести проблему долгого удаления. Но если бы столкнулись, уверен есть способы оптимизации.
30. ejikbeznojek 16.03.20 13:29 Сейчас в теме
(23) Стоит избегать "нормальных" с точки зрения стационарных ПК размеров базы.
Я вот например в приложении для сканирования заказов гружу названия позиций которые нужно собрать, но номенклатуру при этом не создаю.
У меня при первом запуске создаётся пул элементов с галкой неиспользовать. А при каждой загрузке из этого пула берутся элементы, переименовываются и галки снимаются.
Получается что справочник номенклатуры у меня не пухнет и удалять объекты не нужно.
24. pun4er 05.02.20 14:52 Сейчас в теме
Статья хорошая, спасибо, плюсанул.
Подскажите, с помощью чего делаете прототип интерфейса?
25. Baksheev-Nikita 584 05.02.20 16:19 Сейчас в теме
(24) Спасибо за оценку доклада)
Illustrator + Figma + Photoshop
31. CyclesOfID 117 18.04.20 22:38 Сейчас в теме
День добрый, Никита!
Крутой доклад и пример, буду использовать в практике!

А подскажите, каким образом удалось поменять основные цвета самой шапки мобильного приложения и стандартные кнопки (три полоски в шапке, например)
34. starik-2005 3031 27.10.21 17:40 Сейчас в теме
Сдается мне, что для того, чтобы нагородить на 1С все это хозяйство, времени надо больше, чем если делать это в андройд-студии...
dreamadv; +1 Ответить
35. alex_mk 12.03.22 19:49 Сейчас в теме
Правильно ли я понял, что "индикатор" изображенный на слайде №2 реализован стандартными средствами Платформы?
Если да, то очень прошу подсказать, как добиться того, чтобы цвет индикатора был отличен от цвета заголовка окна мобильного приложения? В десктопной версии берутся разные стили для полоски индикатора и заголовка окна, а в мобильной, по какой то причине, один и тот же.
В идеале конечно, чтобы цвет индикатора мог задаваться....
Прикрепленные файлы:
36. user1146461 14.04.23 11:12 Сейчас в теме
Все никак не могу добиться, чтобы строка переносилась в полях ввода, люди добрые подскажите пожалуйста
Оставьте свое сообщение