Comments 23
Тоже учусь на UX/UI и согласен с вами на 1000%! Кто вообще эти правила придумал??? Мне тоже дали задание сделать интерфейс приложения, я начинаю потихоньку, потом добавляю граф элементы, потом анимацию, чтобы клиент понял, как будет действовать приложение, и в итоге оно уже готовое почти, а не макет. Но мне приятно, и я же от лица клиента думаю - он же посмотрит и подумает: "ооо, красиво как, анимированно, понятно, понятно что криво, это макет, будет доработанно, тааак, этот вариант мне взять или ещё по другому как то?".
А нам предлагается клиентам несколько шаблонов-обрубков подавать, как он вообще что то понять сможет? Да там будет видно расположение элементов интерфейса и пару картинок для красоты, но это же все равно не то...
Отозвалось каждое слово в течение всего пути 😭 стартап это боль
В приложении будут 📊графики
Вот это та часть работы, за которую разработчики, вероятно, захотят вас убить. Как правило, дизайнер просто рисует, чтобы было красиво и наглядно. Потом разработчик смотрит и думает, какую же библиотеку для графиков выбрать, чтобы было похоже на дизайн. Вся боль в том, что какую библиотеку ты не выберешь, ты потратишь 1-2 часа на вывод данных, а потом ещё несколько дней на то, чтобы на графике передвинуть подписи значений в нужное место, кастомизировать тултипы, переопределить интерактивное поведение и т.д.
Чтобы этого не случилось, оптимально, чтобы дизайнер сам посмотрел разные библиотеки для графиков и выбрал какую-то одну, которая ему больше всего нравится, а потом просто дефолтный вид графика перенёс в свой макет. Но увы, почему-то так никто не делает.
Примерно так и было, за основу были взяты графики из grafana.
А что мешает доработать графики? В смысле их визуал.
Это вроде не рокет саенс
Во-первых, надо очень досконально изучать всю документацию по библиотеке. Во-вторых, многие такие вещи часто делаются только при помощи дополнительных плагинов. В-третьих, это может и не рокет-саенс, но как минимум тригонометрию может понадобиться вспомнить. У меня был случай, клиент попросил, чтобы в круговых диаграммах (pie-chart) на мобиле всегда отображались все даталэйблы. Поведение по умолчанию было, что если сектор маленький, то лэйбл всплывал при касании, но клиента это не устраивало. В чём загвоздка? Справа и слева от диаграммы очень мало места, поэтому лэйблы от секторов, близких к горизонтали, надо сдвигать вверх и вниз. Лэйблы от секторов, которые ближе к вертикали, не должны пересекаться с другими, поэтому их нужно тоже сдвигать, но уже с учётом имеющихся в этой координатной четверти лэйблов. И ещё обвешать это слушателями событий, чтобы, к примеру при повороте экрана всё разместилось по новой. Задача абсолютно решаемая, тут согласен. Но на неё ушло 2 или 3 дня. При том что это чистой воды украшательство, от которого можно было бы отказаться.
Товарищи, сделайте кто-нибудь нормальное приложение для sensor.community с графиками..! Я не понимаю, почему его не существует?
У вас огромное сообщество, думаю должен кто-то реализовать.
Возможно потому что это стоит довольно дорого. Вот например нормальная bi с графиками это tableau, с нормальными шрифтами и шаблонами из коробки. Ну и стоимость у нее ого-го. Даже если взять ее клон, который китайцы скопировали - fine bi. Тоже ценник мама не горюй. Вот и приходится всякие grafana,metabase и superset использовать.
Странно все это читать в 2025 году. Есть тьма доступной инфы по ux/ui-дизайну и подходам к разработке. UX-дизайн в целом отличается от графического тем, что в первую очередь создается под удобство пользователя, а не красоту: юзер флоу -> вайрфрейм (визуальное представление архитектуры и утверждение) -> цветовая схема и ui-kit (сборка паттеров) -> мудборд -> отрисовка элементов.
Без прототипов можно намудрить настолько, что весь дизайн придётся выкинуть в мусорку. Он может не соответствовать возможностям разработки либо путать юзеров. Прототипы помогают понять логику функционала: как отрабатывает, что избыточно, где сократить путь, чего не хватает.
Но больше я не понимаю, зачем конкретно эта статья есть на Хабре.
Я вас поддержу в непонимании зачем это рассказывать. И не поняла корреляции названия и текста.. Кажется можно было так же открыть Фотошоп, Иллюстратор, коробку цветных карандашей и смотреть в сторону окна.
Зачем сразу с флоу прыгать в создание компонентов и переменных? Сделать несколько черновых макетов если хочется скипнуть вайфркймы, посмотреть как смотрится и тыкается на телефоне, прикинуть визуал для корнер кейсов и потом уже браться за библиотеку
Понимаю вас, правда. Для тех, кто давно в профессии, всё это выглядит очевидным и, наверное, даже странно читать в 2025 году 🙂
Но эта статья — не учебник и не методичка. Это скорее личный дневник: я документирую, как шаг за шагом делаю свой первый продукт и пытаюсь не бросить его на полпути.
Да, с точки зрения UX-практики тут, возможно, ничего нового. Но, может быть, кто-то, прочитав, просто вдохновится — открыть впервые Figma, начать свой стартап, или просто перестать бояться делать неидеально. Даже если путь получится кривым — это всё равно путь.
Кликбейтное название статьи
Все главные кнопки нужно вниз.
Я открыл Figma и понял, что хочу выйти в окно. Возможно это провал