Горячее
Лучшее
Свежее
Подписки
Сообщества
Блоги
Эксперты
Войти
Забыли пароль?
или продолжите с
Создать аккаунт
Я хочу получать рассылки с лучшими постами за неделю
или
Восстановление пароля
Восстановление пароля
Получить код в Telegram
Войти с Яндекс ID Войти через VK ID
Создавая аккаунт, я соглашаюсь с правилами Пикабу и даю согласие на обработку персональных данных.
ПромокодыРаботаКурсыРекламаИгрыПополнение Steam
Пикабу Игры +1000 бесплатных онлайн игр
Герои Войны - микс стратегии и РПГ. Собери лучшую армию и победи всех врагов. В игре 7 различных режимов - как для любителей PvE, так и PvP.

Герои Войны

Стратегии, Мидкорные, Экшены

Играть

Топ прошлой недели

  • AlexKud AlexKud 38 постов
  • SergeyKorsun SergeyKorsun 12 постов
  • SupportHuaport SupportHuaport 5 постов
Посмотреть весь топ

Лучшие посты недели

Рассылка Пикабу: отправляем самые рейтинговые материалы за 7 дней 🔥

Нажимая кнопку «Подписаться на рассылку», я соглашаюсь с Правилами Пикабу и даю согласие на обработку персональных данных.

Спасибо, что подписались!
Пожалуйста, проверьте почту 😊

Помощь Кодекс Пикабу Команда Пикабу Моб. приложение
Правила соцсети О рекомендациях О компании
Промокоды Биг Гик Промокоды Lamoda Промокоды МВидео Промокоды Яндекс Директ Промокоды Отелло Промокоды Aroma Butik Промокоды Яндекс Путешествия Постила Футбол сегодня

Ux + Программирование

С этим тегом используют

Ui Дизайн Интерфейс IT Ux-дизайн Веб-дизайн Сайт Программист IT юмор Разработка Python Картинка с текстом Юмор Все
20 постов сначала свежее
7
DaTstudio
DaTstudio
7 дней назад

UX и UI — в чём разница и зачем это знать тем, кто работает с цифровыми продуктами⁠⁠

UX и UI — в чём разница и зачем это знать тем, кто работает с цифровыми продуктами Программирование, IT, Ui, Ux, Дизайн, Telegram (ссылка), Длиннопост

Сегодня, когда почти всё — от заказов еды до банковских операций — происходит через сайты и мобильные приложения, особенно важно понимать, что делает цифровой продукт удобным и приятным в использовании. Именно здесь вступают в игру два термина: UX и UI. Их часто упоминают вместе, путают между собой или вообще не отличают. А зря.

UX и UI — это не одно и то же. Это разные роли, задачи и этапы в процессе создания продукта. Знание различий между ними поможет не только дизайнерам, но и предпринимателям, разработчикам, продакт-менеджерам и всем, кто вовлечён в разработку IT-продуктов.

Что такое UX — пользовательский опыт

UX (от англ. User Experience) переводится как пользовательский опыт. Это всё, что человек ощущает и переживает при взаимодействии с цифровым продуктом: как он заходит на сайт, как ищет нужную информацию, насколько просто сделать заказ, зарегистрироваться или отменить подписку.

Цель UX-дизайна — сделать так, чтобы продукт был понятным, логичным и удобным, а сам процесс использования вызывал положительные эмоции. UX — это не только про «как выглядит», а про как работает. Здесь важно предусмотреть поведение пользователя: что он захочет сделать дальше, как быстро он достигнет своей цели и насколько легко он сможет это повторить.

Например, если вы запутались на странице оформления заказа и ушли с сайта — это провал UX. Но если вы оформили покупку за минуту и не пришлось ни о чём догадываться — значит, всё с UX хорошо.

Что такое UI — пользовательский интерфейс

UI (User Interface) — это всё, что видит пользователь на экране. Шрифты, кнопки, поля, цвета, иконки, отступы, анимации и даже звуки — всё это элементы пользовательского интерфейса. UI-дизайнер отвечает за то, чтобы интерфейс выглядел красиво, современно и визуально помогал ориентироваться.

Главная задача UI — не просто сделать «красиво». Интерфейс должен быть визуально понятным. Хорошо подобранный UI делает использование продукта интуитивным: пользователь «видит», куда нажать, не задумываясь. Например, кнопка «Оформить заказ» должна быть заметной и находиться в ожидаемом месте.

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

Простое сравнение UX и UI

Один из лучших способов объяснить разницу — это аналогия с автомобилем:

  • UX — это механика машины: как плавно она едет, легко ли поворачивает руль, удобно ли переключать передачи.

  • UI — это внешний и внутренний вид: приборная панель, форма руля, подсветка, материалы сидений.

Другой пример — ресторан:

  • UX — это логика работы: как быстро вас обслуживают, как просто сделать заказ, где стоят столы.

  • UI — это оформление: посуда, скатерти, цвета стен, музыка и подача блюд.

Хороший продукт невозможно создать только за счёт одного компонента. UX без UI может быть удобным, но отталкивающим. UI без UX — красивым, но непонятным и раздражающим. Только когда оба элемента работают вместе, пользователь получает цельный, положительный опыт.

Почему важно понимать разницу

Многие считают UX и UI чем-то одним — особенно те, кто не связан напрямую с дизайном. Это может привести к ошибкам: например, вы нанимаете одного дизайнера и ждёте от него и удобства, и красоты, не разделяя задач. Или, наоборот, оцениваете продукт только по внешнему виду, забывая, насколько он удобен.

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

Зная различия, вы сможете управлять ожиданиями и называть вещи своими именами: не требовать от UI-дизайнера глубокого анализа поведения пользователей, и не просить UX-дизайнера сделать дизайн "поприкольнее".

Как UX и UI работают вместе

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

В небольших проектах или стартапах один человек может совмещать обе роли, но даже в этом случае важно чётко разделять мышление UX и UI. UX требует анализа, логики и эмпатии к пользователю. UI — эстетики, вкуса и чувства визуального ритма.

Хороший продукт — это когда UX и UI не конкурируют, а дополняют друг друга.

UX и UI важны не только для дизайнеров

Если вы разработчик, предприниматель, продакт или даже маркетолог — понимание UX и UI поможет вам делать свою работу лучше. Вы научитесь видеть интерфейс глазами пользователя, понимать его трудности и принимать более взвешенные решения.

Например, продакт сможет правильно формулировать гипотезы: "Пользователи теряются на экране регистрации" — это вопрос UX. "Кнопка незаметная" — это уже UI. Разработчик, в свою очередь, сможет предложить технически удобные решения без ухудшения пользовательского опыта.

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

Заключение

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

Если вы работаете над созданием сайта, приложения или цифрового сервиса — начните с этих основ. Понимание различий между UX и UI поможет вам избежать критичных ошибок и сделать продукт, который действительно работает на пользователя.

Больше простых и полезных разборов по дизайну, разработке и цифровым решениям мы публикуем в нашем телеграм-канале DaT Studio. Подписывайтесь, чтобы быть в курсе и развиваться вместе с нами!

Показать полностью 1
Программирование IT Ui Ux Дизайн Telegram (ссылка) Длиннопост
0
3
user10424664
user10424664
15 дней назад

Как переносить «висячие» слова на новую строку с помощью JavaScript⁠⁠

Как переносить «висячие» слова на новую строку с помощью JavaScript Разработка, Программирование, Javascript, Типографика, Uxui, Ui, Ux, Frontend, Верстка, IT, Программист, Telegram (ссылка), Длиннопост

изображение сгенерировано в ChatGPT

В типографике существует понятие “висячих слов” — это короткие слова (предлоги, союзы, местоимения), которые остаются в конце строки при переносе текста. Такие переносы нарушают удобочитаемость и эстетику текста. В русской типографике принято избегать переносов после коротких слов длиной 1-2 символа.

Решение проблемы с помощью JavaScript

Для автоматического предотвращения переносов после коротких слов можно использовать JavaScript, который заменяет обычные пробелы на неразрывные пробелы ( ) после определённых слов.

// Перенос висячих слов

document.addEventListener('DOMContentLoaded', function () {

// 1. Находим все текстовые элементы, которые нужно обработать

const textElements = document.querySelectorAll('p, span, h1, h2, h3, h4, h5, h6, li, dt, dd');

// 2. Список предлогов и союзов, которые нельзя переносить

const prepositions = ['в', 'без', 'до', 'из', 'к', 'на', 'по', 'о', 'от', 'перед', 'при', 'через', 'для', 'с', 'у', 'и', 'а', 'но', 'да', 'или', 'либо', 'что', 'чтобы', 'как', 'когда', 'если', 'вы'];

// 3. Функция для обработки каждого элемента

textElements.forEach(element => {

// Получаем все текстовые узлы внутри элемента

const walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT);

const textNodes = [];

while (walker.nextNode()) {

textNodes.push(walker.currentNode);

}

// Обрабатываем каждый текстовый узел

textNodes.forEach(textNode => {

let text = textNode.nodeValue;

// Заменяем пробелы после коротких слов на неразрывные пробелы

text = text.replace(/(^|\s)([а-яё]{1,2})\s/gi, (match, prefix, word) => {

// Проверяем, есть ли слово в списке предлогов

if (prepositions.includes(word.toLowerCase())) {

return prefix + word + '\u00A0'; // \u00A0 - это неразрывный пробел

}

return match;

});

// Обновляем содержимое текстового узла

textNode.nodeValue = text;

});

});

});


Разбор кода по частям


1. Инициализация скрипта

document.addEventListener('DOMContentLoaded', function () {

Код выполняется после полной загрузки DOM-дерева страницы. Это гарантирует, что все элементы будут доступны для обработки.


2. Поиск текстовых элементов

const textElements = document.querySelectorAll('p, span, h1, h2, h3, h4, h5, h6, li, dt, dd');

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


3. Список коротких слов

const prepositions = ['в', 'без', 'до', 'из', 'к', 'на', 'по', 'о', 'от', 'перед', 'при', 'через', 'для', 'с', 'у', 'и', 'а', 'но', 'да', 'или', 'либо', 'что', 'чтобы', 'как', 'когда', 'если', 'вы'];

Массив содержит наиболее распространённые предлоги, союзы и другие служебные слова русского языка, после которых нежелательны переносы.


4. Обход текстовых узлов

const walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT);

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


5. Регулярное выражение для замены

text = text.replace(/(^|\s)([а-яё]{1,2})\s/gi, (match, prefix, word) => {

Регулярное выражение ищет:
· (^|\s) — начало строки или пробел (группа 1);
· ([а-яё]{1,2}) — слово из 1-2 русских букв (группа 2);
· \s — пробел после слова;
· Флаги gi означают глобальный поиск без учёта регистра.


6. Условная замена

if (prepositions.includes(word.toLowerCase())) {

return prefix + word + '\u00A0'; // \u00A0 - это неразрывный пробел

}

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


Результат работы

После выполнения скрипта текст “Я иду в магазин” не будет разорван на строки как “Я иду в” и “магазин”. Предлог “в” всегда останется на одной строке со следующим словом благодаря неразрывному пробелу.

Настройка скрипта

Вы можете легко адаптировать скрипт под свои нужды:
· Добавить новые селекторы в querySelectorAll() для обработки других элементов;
· Расширить список слов в массиве prepositions;
· Изменить длину слов в регулярном выражении с {1,2} на другое значение;
· Добавить обработку других языков, изменив диапазон символов в регулярном выражении.

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

P.S.: это JS решение иногда не во всех случаях срабатывает + бывают сложности с адаптивностью: на смартфонах может переносить совсем не так, как хотелось бы, текст может «уехать» за пределы контейнера, нужно будет «фиксить» эти моменты в CSS.


Разработчики, а как вы решаете вопрос переноса «висячих» слов?

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

Показать полностью 1
Разработка Программирование Javascript Типографика Uxui Ui Ux Frontend Верстка IT Программист Telegram (ссылка) Длиннопост
13
QuadratusAI
QuadratusAI
1 месяц назад

Как мы запустили голосовой стартап без команды мечты и миллионов⁠⁠

🔸 О чём будет эта статья:

Это история о запуске голосового продукта без инвестиций, без команды на 10 человек и без мак ноутбуков. Только идея, немного Python, желание автоматизировать то, что кажется очевидным, и Telegram-бот, который родился из расчетного долгого времени разработки.

Мы расскажем:

  • Как всё началось с простой мысли: «А что, если голос можно превратить в текст для быстрой записи?»
    Когда я понял, что традиционные методы записи не так эффективны, пришла идея использовать голос для быстрого и структурированного фиксирования мыслей.

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

  • С какими трудностями столкнулся
    Трудности с реализацией и организацией были, но они только ускорили процесс поиска решений.

  • Как писал MVP на коленке
    Сделать быстро и с минимальными затратами — так появился первый прототип.

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

  • Почему Telegram оказался идеальной точкой входа
    Телеграм был простым и удобным инструментом для быстрого запуска проекта.


💡 Зачем это читать:

Если ты когда-то хотел запустить свой продукт, но откладывал из-за «недостатка ресурсов» — это история для тебя.

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

Если ты хочешь понять, как мыслит команда, которая делает сервис для реальных людей, а не питчей — ты на месте.


🛠️ О чём конкретно будем рассказывать:

  1. Зачем вообще всё это понадобилось
    – как идея родилась из личной рутины
    – голосовые, заметки, неуспевание фиксировать мысли
    – «хочу просто сказать и получить нормальный текст»

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

  3. Почему Telegram и MVP за пару дней
    – запуск без фронта и лишней сложности
    – простой бот, отправляешь голос — получаешь текст
    – реакция друзей: «Эммм… Это ты сделал?»
    – как фиксили баги в реальном времени

  4. Работа с текстом: сделать не просто транскрипт, а читаемый текст
    – как начали «чистить» речь
    – от удаления "э-э", "ну", до перестроения структуры.
    – И создания правильного форматирования с разбиением на абзацы

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

  6. Что было самым сложным
    – не техническая часть
    – не бот
    – а сделать так, чтобы продукт был «невидимым», простым и реально полезным

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


  1. Как пришла мысль разработки продукта?

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

Чтение началось бодро: статьи, материалы, заметки. Но через какое-то время заметил, что информации становится слишком много. Прочитал абзац — вроде понятно. Перешёл к следующему — и тут понял, что не могу вспомнить, что было в предыдущем. Всё смешивается. Начал ловить себя на том, что читаю одно и то же несколько раз, потому что просто не удерживается в голове.

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

Во-первых, я начал писать от руки — и быстро столкнулся с тем, что потом с трудом разбираю свой почерк. Иногда вообще не могу понять, что хотел сказать. Во-вторых, редактировать такие записи практически невозможно. Ошибся — надо зачеркивать. Хочешь вставить мысль — уже негде. Всё выглядит одинаково важным, найти нужное потом тяжело.

Я решил поискать, как люди в целом ведут конспекты, чтобы делать это эффективнее. Обратился к ChatGPT — он выдал список из семи основных техник:

7 популярных методов конспектирования:

  1. Метод Корнелла
    Разделение страницы на три части: ключевые слова, основные записи и краткое резюме. Это помогает структурировать информацию и облегчить повторение.

  2. Метод обрисовки (Outline)
    Классическая иерархия: заголовки и подпункты, удобен для логической структуры.

  3. Картирование (Mind Map)
    Основная тема в центре, от неё расходятся подтемы, помогает визуализировать связи.

  4. Метод боксов (Boxing Method)
    Информация делится на блоки, каждый с одной темой, что ускоряет поиск.

  5. Метод предложений (Sentence Method)
    Короткие предложения без структуры, удобно для быстрого фиксирования информации.

  6. Метод таблиц
    Информация в виде таблицы с терминами, определениями, примерами и комментариями, удобно для сравнений.

  7. Цифровой метод (Zettelkasten)
    Каждая мысль — отдельная карточка, между ними устанавливаются связи, идеален для долгосрочной базы знаний.

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

Я понял, что в моём ритме это не работает. Нужно было что-то быстрее и проще — тогда я начал экспериментировать.

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

Я стал читать абзац, а затем кратко пересказывать его на своём языке — без заучивания, просто чтобы проверить, понял ли я суть. В этот момент включал запись на телефоне. Получались короткие голосовые заметки по 20–30 секунд.

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

Так я пришёл к формату, который действительно сработал: понятный пересказ — в аудио. Без лишней структуры и ручной писанины. А при необходимости — всё можно превратить в текст, структурировать, сохранить или передать системе, которая поможет с анализом.

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

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

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

2. С чего было начало технической части

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

Затем я начал изучать основные фреймворки для работы с распознаванием речи. В первую очередь обратил внимание на Python и библиотеки для распознавания голоса, такие как Vosk и Whisper, а также на коммерческие решения от крупных компаний, таких как Яндекс. Это дало мне представление о том, что доступно в плане технологий.

Мой первоначальный план был прост: я хотел превратить голос в текст, затем обработать текст с помощью алгоритмов для выделения ключевых слов и идей, а затем передать это пользователю через веб-интерфейс. Я выбрал Django для бекенда, так как он казался идеальным выбором для быстрого старта.

Приблизительный макет проекта Визуал

Как мы запустили голосовой стартап без команды мечты и миллионов Опрос, Python, IT, Чат-бот, Программирование, Стартап, Распознавание, Telegram, Mvp, Ux, Обратная связь, Продукты, Прототип, Автоматизация, Длиннопост

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

Вариант тестов английской модели (легкие быстрые модели для экспериментов)

Как мы запустили голосовой стартап без команды мечты и миллионов Опрос, Python, IT, Чат-бот, Программирование, Стартап, Распознавание, Telegram, Mvp, Ux, Обратная связь, Продукты, Прототип, Автоматизация, Длиннопост
Как мы запустили голосовой стартап без команды мечты и миллионов Опрос, Python, IT, Чат-бот, Программирование, Стартап, Распознавание, Telegram, Mvp, Ux, Обратная связь, Продукты, Прототип, Автоматизация, Длиннопост

Далее я провел оценку времени, которое займет реализация всего проекта: от разработки фронтенда и бекенда до интеграции голосового распознавания и создания пользовательского интерфейса. Примерные расчёты показали, что на весь процесс может уйти от 3 до 6 месяцев.

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

3. Почему Telegram и MVP за пару дней QuadratusAI

После серии тестов с распознаванием речи на базе Vosk и Whisper, а также после анализа конкурентов, стало ясно: времени на полноценную реализацию проекта — с фронтендом, бэкендом, пользовательским интерфейсом и всей обвязкой — нет. Разработка сайта с названием QuadratusAI, его подключение к распознаванию и создание визуального интерфейса могла бы занять месяцы. Это был бы хороший следующий шаг после получения обратной связи, но не первоочередной.

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

Я сел в выходные и полностью сосредоточился на создании минимального жизнеспособного продукта (MVP). На тот момент у меня не было опыта написания ботов для Telegram, и весь код оказался в одном файле — громоздком и запутанном. Я не до конца понимал, как правильно организовать взаимодействие с Telegram API, как обрабатывать разные события и команды. Несмотря на это, базовая логика работала: ты отправляешь голосовое сообщение — получаешь текст в ответ.

Первые пользователи, в основном друзья, были удивлены:
«Эммм… Это ты сделал?» — такой была типичная реакция.
Параллельно с этим шла "боевой режим" — баги и ошибки устранялись прямо во время использования. Например, где-то не обрабатывались ошибки при скачивании файла, где-то Telegram возвращал неожиданный формат. Всё это приходилось чинить на лету.

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

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

Как мы запустили голосовой стартап без команды мечты и миллионов Опрос, Python, IT, Чат-бот, Программирование, Стартап, Распознавание, Telegram, Mvp, Ux, Обратная связь, Продукты, Прототип, Автоматизация, Длиннопост

QuadratusAI Bot

4. Работа с текстом: сделать не просто транскрипт, а читаемый текст

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

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

Все эти задачи решались через разные промты и тесты — постоянно пробовались новые интерпретации, варианты запросов к языковой модели. Цель была одна: оставить суть, вычистив шум. И шёл поиск оптимального баланса: чтобы и смысл сохранялся, и текст становился ближе к «человеческому» письму — со склонениями, правильным порядком слов и логикой изложения.

5. Сайт, демка, первые фидбеки

После создания рабочего Telegram-бота появилась идея подготовить демонстрационный сайт QuadratusAI.

Цель — презентовать проект, собрать первые отзывы и протестировать реакцию аудитории. Также это был шаг в сторону будущего полноценного веб-интерфейса.

Как мы запустили голосовой стартап без команды мечты и миллионов Опрос, Python, IT, Чат-бот, Программирование, Стартап, Распознавание, Telegram, Mvp, Ux, Обратная связь, Продукты, Прототип, Автоматизация, Длиннопост

Пример с использованием DeepSeek

Как мы запустили голосовой стартап без команды мечты и миллионов Опрос, Python, IT, Чат-бот, Программирование, Стартап, Распознавание, Telegram, Mvp, Ux, Обратная связь, Продукты, Прототип, Автоматизация, Длиннопост

Генерация сайта с помощью нейросетей

Для ускорения процесса разработки было решено использовать нейросети и ChatGPT.
План состоял в следующем: описать идею, получить сгенерированный HTML/CSS/JS-код и как можно быстрее развернуть результат.

Однако на практике генерация сайта оказалась далекой от идеала. В ответах модели были ошибки, неполные блоки, либо слишком сложная структура.
Была предпринята попытка использовать полный стек генерации, включая React + TypeScript, но пришлось дорабатывать код вручную, местами редактируя результат через Cursor (IDE), а местами просто «допиливая» вручную по частям.

Как мы запустили голосовой стартап без команды мечты и миллионов Опрос, Python, IT, Чат-бот, Программирование, Стартап, Распознавание, Telegram, Mvp, Ux, Обратная связь, Продукты, Прототип, Автоматизация, Длиннопост

Вместо задуманного чистого HTML + CSS + JS получилось решение на React + TypeScript + CSS, так как только в такой связке нейросеть выдавала более-менее стабильный результат.

Наполнение и оформление

После исправления основных багов началась работа по наполнению:

  • Вставка и оформление скриншотов демо-бота.

  • Подготовка визуальных блоков с описанием возможностей.

  • Перевод описания на английский язык для международной аудитории.

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

6. Что было самым сложным

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

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

Архитектура была разделена на два компонента:

Первый — Telegram-бот. Он лёгкий и минималистичный, принимает голосовые сообщения и отправляет обратно текст. Обработка голоса не происходит на этом сервере, что делает его быстрым и простым.

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

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

Результат — простота использования: отправил голосовое сообщение — получил готовый текст. Без загрузок и прогресс-баров. Вся сложная логика скрыта, что делает продукт «невидимым» для пользователя.

7. Что будет дальше

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

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

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

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

Как вы чаще всего фиксируете свои идеи или заметки?
Всего голосов:

Сам бот: https://t.me/AudioFastAi_bot

Страница с проектом: https://quadratus-ai.netlify.app

Телеграмм канал: https://t.me/QuadratusAI

Показать полностью 7 1
[моё] Опрос Python IT Чат-бот Программирование Стартап Распознавание Telegram Mvp Ux Обратная связь Продукты Прототип Автоматизация Длиннопост
4
1090
8088
8088
3 месяца назад
Программисты шутят

Пользовательский интерфейс vs Опыт пользователя⁠⁠

Пользовательский интерфейс vs Опыт пользователя IT, Программирование, Telegram (ссылка), Ui, Программист, Пользователи, Юмор, IT юмор, Ux, Повтор, Комиксы

UI vs UX

Пользовательский интерфейс и Опыт пользователя - это не одно и тоже )))

Меньше юмор, но больше смысла в Python Комьюнити.

Показать полностью 1
IT Программирование Telegram (ссылка) Ui Программист Пользователи Юмор IT юмор Ux Повтор Комиксы
42
7
8088
8088
5 месяцев назад

Лучший вариант выбора даты )⁠⁠

Лучший вариант выбора даты ) IT, Программирование, Удаленная работа, Telegram (ссылка), Ui, Ux, Программа, Тестирование, IT юмор, Гифка

Выбор даты

Или когда вы очень "любите" своих пользователей )))

IT Программирование Удаленная работа Telegram (ссылка) Ui Ux Программа Тестирование IT юмор Гифка
0
2
vika4it
vika4it
7 месяцев назад

Мероприятия в сфере ИТ в Санкт-Петербурге с 6 по 12 декабря 2024 года⁠⁠

Короткий дайджест ивентов, митапов и встреч в Санкт-Петербурге. Если удобно читать в Телеграме, то вот ссылки:
Оффлайновые ИТ-ивенты в Питере: https://t.me/itvspb
Оффлайновые ИТ-ивенты в Москве: https://t.me/itvmsk

🔵 ПТ 6 декабря — с 13:00; offline
День российского профессионального симулятора БПЛА "Квадросим"

🔵 ПТ 6 декабря — с 18:30; offline
AI-driver & RecSys Meetup — от Сбера
Обсудим предиктивную аналитику, ML и генеративный AI; обменяемся опытом эволюции больших языковых моделей в составе RecSys

🔵 ПТ 6 декабря — с 09:00; offline + online
Питерский промпт
Конференция про нейросети для тех, кто в них понимает. И для тех, кто только планирует разобраться

🔵 ПТ 6 декабря — с 10:00; offline
Будущее инвестиций – тренды, стратегии и технологии в 2025 году

🔵 ПТ 6 декабря — с 10:00; offline
Вместе 24
Совместная работа команды + автоматизация процессов

🔵 СБ 7 декабря — с 18:30; offline + online
VK Fresh Code 2024
Пятая ежегодная грантовая программа платформы VK Mini Apps

🔵 ВС 8 декабря — с 19:00; offline
ProIT Speed Dating девушки до 32

🔵 ВТ 10 декабря — с 18:30; offline
Современный ИИ глазами новичков и профессионалов

🔵 СР 11 декабря — с 10:00; offline
Альфа Конфа 2024
Яркое событие для предпринимателей: выступление топ‑спикеров, яркое световое шоу, острые дискуссии, нетворкинг и новые идеи для вашего бизнеса

Питер: https://t.me/itvspb
Москва: https://t.me/itvmsk

Показать полностью
[моё] Санкт-Петербург IT Telegram Конференция Информационная безопасность Программирование Маркетинг Ux Текст
0
8
Driglu4it
Driglu4it
7 месяцев назад
Типичный программист

Ответ на пост «Интерфейс для набора номер, чтобы юзеры жизнь мёдом не казалась»⁠⁠1

Я думал, что хуже такого: https://userinyerface.com/ ничего не может быть, но, снимаю шляпу, приятное дополнение )

Ui Ux Программирование IT юмор IT Ответ на пост Текст
4
1775
tproger.official
tproger.official
7 месяцев назад
Типичный программист

Интерфейс для набора номер, чтобы юзеры жизнь мёдом не казалась⁠⁠1

Ui Ux Программирование IT юмор IT Видео Интерфейс
72
Посты не найдены
О нас
О Пикабу Контакты Реклама Сообщить об ошибке Сообщить о нарушении законодательства Отзывы и предложения Новости Пикабу Мобильное приложение RSS
Информация
Помощь Кодекс Пикабу Команда Пикабу Конфиденциальность Правила соцсети О рекомендациях О компании
Наши проекты
Блоги Работа Промокоды Игры Курсы
Партнёры
Промокоды Биг Гик Промокоды Lamoda Промокоды Мвидео Промокоды Яндекс Директ Промокоды Отелло Промокоды Aroma Butik Промокоды Яндекс Путешествия Постила Футбол сегодня
На информационном ресурсе Pikabu.ru применяются рекомендательные технологии