Сравнение по месяцам
Интересный пример сложной таблицы, предназначенной для сравнения одних и тех же сводных данных в разные месяцы.
Интересный пример сложной таблицы, предназначенной для сравнения одних и тех же сводных данных в разные месяцы.
December 28, 2022
Редактирование JSONа
Интересный пример визуального редактирования кода. На графе визуализируются объекты в JSONе и их связи друг с другом. В боковой панели можно добавлять объекты блоками или прямо кусками кода, и если поразглядывать скрины, наглядно видно, как одно превращается в другое и как неплохо уживаются разные варианты отображения одинаковых сущностей.
Интересный пример визуального редактирования кода. На графе визуализируются объекты в JSONе и их связи друг с другом. В боковой панели можно добавлять объекты блоками или прямо кусками кода, и если поразглядывать скрины, наглядно видно, как одно превращается в другое и как неплохо уживаются разные варианты отображения одинаковых сущностей.
January 10, 2023
Снова сравнение
Ещё один пример сравнительной таблицы тарифов на сайте Мейлчимпа. Здесь — с кнопками покупки и плашкой «Рекомендуем» у стандартного тарифа. Описание той или иной функции упрятано под ховер.
Ещё один пример сравнительной таблицы тарифов на сайте Мейлчимпа. Здесь — с кнопками покупки и плашкой «Рекомендуем» у стандартного тарифа. Описание той или иной функции упрятано под ховер.
February 8, 2023
Клавиша
Понравилось, как в интерфейсе колор-пикера рядом с полями для ввода аккуратно встроены клавиши (по нажатию на O — фокус в первое поле, по нажатию на R — во второе). Неплохой способ подсвечивать горячие главиши в интерфейсе.
Понравилось, как в интерфейсе колор-пикера рядом с полями для ввода аккуратно встроены клавиши (по нажатию на O — фокус в первое поле, по нажатию на R — во второе). Неплохой способ подсвечивать горячие главиши в интерфейсе.
February 14, 2023
Вкладки в поле
Необычно, но цепляюще: вкладки то ли внутри блочка, то ли внутри поля на лендинге платёжного продукта. За счёт палитры и вёрстки здорово играют — возможно, этот приём мог бы пригодится при сегментации каких-то данных.
Необычно, но цепляюще: вкладки то ли внутри блочка, то ли внутри поля на лендинге платёжного продукта. За счёт палитры и вёрстки здорово играют — возможно, этот приём мог бы пригодится при сегментации каких-то данных.
February 16, 2023
Подсказка по ховеру в селекте
Любопытный способ визуализировать какую-то сущность в селекте. Может быть полезно, когда сущность сложна для понимания и нужна наглядность, чем пункты отличаются друг от друга. Правда, на постоянной основе в часто использующихся селектах эта штука может бесить.
Любопытный способ визуализировать какую-то сущность в селекте. Может быть полезно, когда сущность сложна для понимания и нужна наглядность, чем пункты отличаются друг от друга. Правда, на постоянной основе в часто использующихся селектах эта штука может бесить.
March 7, 2023
Аккуратные карточки
Много воздуха в интерфейсных карточках — редкий приём в подобных интерфейсах. Понравилось, как сгруппированы пункты + очень удачные интерфейсные иконки, деликатные и аккуратные.
Много воздуха в интерфейсных карточках — редкий приём в подобных интерфейсах. Понравилось, как сгруппированы пункты + очень удачные интерфейсные иконки, деликатные и аккуратные.
April 25, 2023
This media is not supported in your browser
VIEW IN TELEGRAM
Разбивка по месяцам
Классный калькулятор рассрочки в Яндекс-Маркете (подсмотрела на Арене).
Что классного: много информации упаковано очень компактно, и график платежей превращён в таймлайн. При переключении срока, когда текст перестаёт влезать в укорачивающиеся ячейки, он превращается в единую подпись «далее 5 платежей ежемесячно по столько-то рублей».
То есть, как только текст перестаёт влезать, он не просто обрезается под троеточием, а принципиально меняет вёрстку. Классное решение, когда контент это позволяет.
Классный калькулятор рассрочки в Яндекс-Маркете (подсмотрела на Арене).
Что классного: много информации упаковано очень компактно, и график платежей превращён в таймлайн. При переключении срока, когда текст перестаёт влезать в укорачивающиеся ячейки, он превращается в единую подпись «далее 5 платежей ежемесячно по столько-то рублей».
То есть, как только текст перестаёт влезать, он не просто обрезается под троеточием, а принципиально меняет вёрстку. Классное решение, когда контент это позволяет.
April 26, 2023
Схема в центре внимания
Занимательный интерфейс логистической системы с картой, панелями управления, ховерами, статусами. Понравилось, как аккуратно упаковано много техничной информации — без понимания контекста, конечно, разобраться сложно, но, по крайней мере, всё разложено по полочкам.
Занимательный интерфейс логистической системы с картой, панелями управления, ховерами, статусами. Понравилось, как аккуратно упаковано много техничной информации — без понимания контекста, конечно, разобраться сложно, но, по крайней мере, всё разложено по полочкам.
May 2, 2023
Группировка на графе
Интересный и редкий пример интерфейса, где не только представлены ноды на графе, но и группы нодов. Любопытно, что эта группировка отражается не только на схеме, но и в боковых панелях, где какие-то строки могут быть подсвечены соответствующим градиентом.
Вообще в последнее время смотрю очень много разных схем и нодов, потому что сама занимаюсь подобным. Так что скоро астрологи объявят неделю графов — покажу интересные решения, которые встречаю при визуализации шагов на схемах.
Интересный и редкий пример интерфейса, где не только представлены ноды на графе, но и группы нодов. Любопытно, что эта группировка отражается не только на схеме, но и в боковых панелях, где какие-то строки могут быть подсвечены соответствующим градиентом.
Вообще в последнее время смотрю очень много разных схем и нодов, потому что сама занимаюсь подобным. Так что скоро астрологи объявят неделю графов — покажу интересные решения, которые встречаю при визуализации шагов на схемах.
May 25, 2023
Тоггл для редактирования и просмотра
«Скоро астрологи объявят неделю графов» — сказала она и исчезла на три месяца, чтобы вернуться безо всяких графов. Простите, ребята, зашилась с делами и исчезла с радаров.
Потихоньку возвращаюсь в строй. Сегодня привлекла внимание небольшая форма (увы, есть только скрин). С виду ничего особенного, но в правом верхнем углу — интересная переключалка-тоггл между режимом редактирования и просмотра. Изящное и редкое решение, подходящее не всегда и не для всего, но в этом кейсе выглядит уместно.
«Скоро астрологи объявят неделю графов» — сказала она и исчезла на три месяца, чтобы вернуться безо всяких графов. Простите, ребята, зашилась с делами и исчезла с радаров.
Потихоньку возвращаюсь в строй. Сегодня привлекла внимание небольшая форма (увы, есть только скрин). С виду ничего особенного, но в правом верхнем углу — интересная переключалка-тоггл между режимом редактирования и просмотра. Изящное и редкое решение, подходящее не всегда и не для всего, но в этом кейсе выглядит уместно.
August 31, 2023
Мониторинг столов в ресторане
Приятный интерфейс для управления столами в ресторане. Понравилась вариативность форм, аккуратно свёрстанный чек и время. Несколько смущают кнопки в селектах — кажется, они маловаты для тач-интерфейса, но кто знает.
Приятный интерфейс для управления столами в ресторане. Понравилась вариативность форм, аккуратно свёрстанный чек и время. Несколько смущают кнопки в селектах — кажется, они маловаты для тач-интерфейса, но кто знает.
September 1, 2023
Управление столами в ресторане
Вдогонку к пятничному посту ещё один экран того же интерфейса — форма для создания пространств в ресторане, расстановки столов и создания мест. Понравилась чистота и интуитивность — опции понятны и наглядны без пояснений.
Вдогонку к пятничному посту ещё один экран того же интерфейса — форма для создания пространств в ресторане, расстановки столов и создания мест. Понравилась чистота и интуитивность — опции понятны и наглядны без пояснений.
September 4, 2023
Drag-кнопки
Неожиданное применение иконки drag — кнопки-фильтры в примере наверху дашборда можно таскать, они работают как переключалки содержимого страницы, и, видимо, в этом кейсе важен их порядок. Не всё понимаю в этом интерфейсе, а оригинал пока не нашла, но выглядит интересно.
Неожиданное применение иконки drag — кнопки-фильтры в примере наверху дашборда можно таскать, они работают как переключалки содержимого страницы, и, видимо, в этом кейсе важен их порядок. Не всё понимаю в этом интерфейсе, а оригинал пока не нашла, но выглядит интересно.
September 12, 2023
Простой флоу
Интересный около-нодовый интерфейс для выстраивания автоматизированного процесса ответа клиентам.
Понравилась предельная простота и изящество: очень мало функций, они совершенно понятны, у них удачное представление, удачные иконки, интерфейсные тексты и ясное поведение — перетащи, сохрани, и всё заработает. Не знаю, работает ли интерфейс в реальности так же, как показано в кейсе, но выглядит просто образцом чистоты и простоты.
Интересный около-нодовый интерфейс для выстраивания автоматизированного процесса ответа клиентам.
Понравилась предельная простота и изящество: очень мало функций, они совершенно понятны, у них удачное представление, удачные иконки, интерфейсные тексты и ясное поведение — перетащи, сохрани, и всё заработает. Не знаю, работает ли интерфейс в реальности так же, как показано в кейсе, но выглядит просто образцом чистоты и простоты.
September 19, 2023
Иконки в шапке таблицы
Подсмотрела в nicelydone простой приём с иконками в шапке таблицы. Похожая история есть и у Интеркома, как в этом примере, и в Ноушене, и в других конструкторах. Иконка может как маркировать тип данных, так и просто облагораживать таблицу.
Здесь, конечно, велик риск развести зоопарк символов и привлечь внимание к маловажной вещи, но в конкретно этих примерах сделано классно — достаточно сервисно, чтобы не приманивало лишнее внимание, аккуратно и чисто.
Подсмотрела в nicelydone простой приём с иконками в шапке таблицы. Похожая история есть и у Интеркома, как в этом примере, и в Ноушене, и в других конструкторах. Иконка может как маркировать тип данных, так и просто облагораживать таблицу.
Здесь, конечно, велик риск развести зоопарк символов и привлечь внимание к маловажной вещи, но в конкретно этих примерах сделано классно — достаточно сервисно, чтобы не приманивало лишнее внимание, аккуратно и чисто.
October 31, 2023
Кнопка слева
Возвращаемся с новыми силами после праздников. Обычно в таблицах действие прячется справа в конце строки, и это становится проблемой, когда таблица разрастается — либо надо упаковывать всё в «...», либо фиксировать столбцы, а всё остальное упаковывать в горизонтальный скролл, либо переносить кнопку влево, но так не всегда получается, потому что частенько ломает мозг.
В кейсе с выдачей заказов Яндекс-Маркета ребята как раз перенесли кнопку влево — вышло необычно, но нормально. Жаль, что на остальных страницах этот паттерн не повторяется.
Возвращаемся с новыми силами после праздников. Обычно в таблицах действие прячется справа в конце строки, и это становится проблемой, когда таблица разрастается — либо надо упаковывать всё в «...», либо фиксировать столбцы, а всё остальное упаковывать в горизонтальный скролл, либо переносить кнопку влево, но так не всегда получается, потому что частенько ломает мозг.
В кейсе с выдачей заказов Яндекс-Маркета ребята как раз перенесли кнопку влево — вышло необычно, но нормально. Жаль, что на остальных страницах этот паттерн не повторяется.
January 9, 2024