x
Советы Подборки

Советы Константина Мозгового


ПН

Артём Горбунов
Дизайн продуктов и услуг


ВТ

Илья Бирман и Константин Мозговой
Интерфейс и навигация


СР

Михаил Нозик
Вёрстка и типографика в вебе


ЧТ

Василий Половнёв и Игорь Петров
Веб-разработка


ПТ

Николай Товеровский
Управление проектами, людьми и собой


СБ

Владимир Колпаков и Сергей Чикин
Фотосъёмка и иконки


ВС

Максим Ильяхов
Текст, редактура и информационный стиль

Константин Мозговой
15 июня 2021

Плагины для Фигмы. Часть 3

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

Открыты 5 апреля 2007 года.

Советы почтой каждую неделю
Пожалуйста, получите наше письмо, чтобы подтвердить свой адрес:
Вы подписаны на «Советы за неделю»:

В архиве

Константин Мозговой
1 июня 2021

Как работать в Фигме быстрее. Часть 4

Дима Шишкин
4 мая 2021

Как вам вёрстка таблицы с результатом шахматного турнира? Пример использования

Константин Мозговой
20 апреля 2021

Как анимировать в Фигме?

Данила Вишневский
6 апреля 2021

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

Мария Барабаш
23 марта 2021

Привет, бюро! Помогите решить проблему.

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

Картинки грузит преподаватель, когда создаёт тест. Те, что у него есть.

Отвечая на вопрос, студент: может выбрать один или несколько вариантов ответа; может увеличить изображение, чтобы рассмотреть детали, но при этом должен видеть вопрос. Как в случае со схемами: вопрос может содержать список пунктов, по которым схемы нужно сравнивать.

В приложении картинки свёрнуты, чтобы показать возможные варианты того, что будут грузить. При нажатии на изображение оно увеличивается. Выбрать вариант ответа можно ниже. Под картинками есть список: «Первая, вторая, третья, четвёртая».

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

Илья Балашов
9 марта 2021

Подскажите, пожалуйста, как можно улучшить интерфейс покупки билета.
Тарифы можно комбинировать: «Аквапарк», «Аквапарк и термы», «Аквапарк, термы и спа». От корзины как в интернет-магазинах отказались, так как большинство посетителей выбирают какой-то один тип тарифа на семью или группу.

Илья Банюк
23 февраля 2021

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

Анастасия Карапетян
9 февраля 2021

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

Александр Бочек
26 января 2021

Как правильно показать, что картинка кликабельна? Заказчик хочет встроить в электронное письмо подпись с кликабельной картинкой-объявлением. Как показать именно кликабельность этой картинки?

Артём Субботин
12 января 2021

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

Антон Малышев
29 декабря 2020

Как можно улучшить вид этой таблицы? Она показывает, кто из игроков футбольного клуба «Челси» играл в последних 38 матчах.

Александр К
15 декабря 2020

Коллеги, приветствую!

Вводные: приложение для отелей, которое будет продаваться в разные отели. У товаров и услуг отелей часто нет фото (на старте или вообще не будет).

Вопрос: как лучше решить проблему отображения таких товаров в корзине (именно в корзине, не в каталоге)? Чтобы учесть и бескартиночные товары и картиночные не обидеть? Условно говоря, в корзине будет в большинстве случаев от одного до пяти товаров. У них может вообще не быть фото, могут быть у всех фото (у хороших отелей) или вперемешку.

Как думаете, какой вариант будет более правильным? Возможно, есть еще какой-то «лучший» вариант?

1 вариант: всем товарам отключаем фото для единообразия. Даже если есть красивые фото, они в корзине не выводятся.

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

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

Николай Зубарев
1 декабря 2020

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

Михаил Сидаченко
17 ноября 2020

Добрый день. Недавно узнал, что ведётся разработка дизайн-системы для государственных сайтов.

Просматривал компоненты. Заметил, что ошибки, которые совершил пользователь при заполнении формы, будут указываться не рядом с полем, которое было неправильно заполнено, а в специальном, отдельном компоненте Errors summary.

Так как у компонента Text Field не предусмотрено «ошибочного» состояния, узнать, что было написано в форме неправильно, можно будет только после заполнения.

Имеет ли место такой подход?

Даниил Постнов
3 ноября 2020

Илья, Константин, добрый день! Делаю редизайн блока со списком заказов пользователя. Прошу вас оценить предыдущий и новый вариант дизайна и помочь с улучшением.

Что не устраивает в оригинале:
1. Между вкладками много пространства. Выглядит как забор с выбитыми досками.
2. Количество товаров слишком далеко от их названия и больше приближены к типу доставки.
3. Из-за горизонтального выравнивания стоимость воспринимается как стоимость доставки.
4. Непонятная группировка: номер заказа с датой, статус с составом заказа.

Я решил сделать этот интерфейс удобней для восприятия:
1. Вкладки приблизил друг к другу.
2. Сделал вкладку «выпирающей», чтобы она создавала эффект слияния с контентом. Остальные вкладки отделил обводкой.
3. Обозначил все данные в таблицу. Мне кажется так список заказов выглядит собраннее.

Справедливы ли мои замечания к оригиналу? Что я сделал неправильно в своём варианте? Что можно сделать лучше?

Спасибо!

Ира Штогрин
20 октября 2020

Привет! Посоветуйте, где хранить скриншоты удачных интерфейсных решений? С возможностью сортировки, чтобы было удобно искать нужный референс.

Alexander Gretschann
6 октября 2020

Каким должно быть ресторанное меню на сайте? Часто встречается ПДФ-документ, который ресторану сделал дизайнер для печати. Смотреть этот файл с мобильного телефона в 2001 году было ок, но как показать меню в 2020?

Константин Мозговой
22 сентября 2020

Как облегчить поиск нужного документа в Фигме?

Александр Куйбышев
8 сентября 2020

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

Есть ощущение, что можно сделать лучше. Особенно в части загрузки фото (сканов) документов. Хочется чуть больше выделить этот блок, но при этом не утяжелять форму в целом, так как загружать необходимо будет несколько документов в нескольких секциях (на скрине это паспорт и виза).

Андрей Цыплухин
25 августа 2020

Привет, бюро! Занимаюсь разработкой простых мобильных игр в свободное от основной работы время. Не могу разобраться, что лучше показывать во время загрузки игры и уровня. Крутящийся спинер или полосу загрузки с процентами? В разных играх, приложениях, на сайтах встречаю и то и то, но не могу выявить для себя никакой закономерности. Расскажите, что лучше использовать?

Юрий
11 августа 2020

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

Артур Объяртель
28 июля 2020

Ай-ОС 14: виджеты вылезают за колонки, на которых стоят приложения

Роман
14 июля 2020

А как хранить удачные сочетания цветов, оттенки и палитры? Всю жизнь сохранял в Экселе. А как лучше? Как удобнее?

Тимур Еримбетов
30 июня 2020

Чем заменить «Подробнее» в описании продуктов?
Увидел в запрещённых словах на вашем сайте и призадумался.

Дмитрий Калашников
16 июня 2020

Добрый день! Мы в компании второй день спорим, должны ли радиобатоны (radio buttons) в интерфейсе оформляться так же, как и маркированные списки (по Мильчину надо ставить точку с запятой в конце каждого пункта, и точку в конце последнего) или же, как теперь уже принято, вообще без знаков в конце. Подскажите, насколько тут типографические правила решают. Спасибо.

Константин Мозговой
2 июня 2020

Функция Auto Layout в Фигме — как делать резиновые кнопки

Михаил Шамин
19 мая 2020

Как описывать поведение и состояние компонентов? Переходы между страницами, состояния страниц? Как это делать компактно и понятно?

Константин Мозговой
5 мая 2020

Как работать в Фигме быстрее. Часть 3

Константин Мозговой
21 апреля 2020

Как работать в Фигме быстрее. Часть 2

Константин Мозговой
7 апреля 2020

Как работать в Фигме быстрее

Константин Мозговой
24 марта 2020

Плагины для Фигмы. Часть 2

Константин Мозговой
10 марта 2020

Плагины для Фигмы

Борис Женихов
25 февраля 2020

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

Борис Женихов
11 февраля 2020

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

Константин Мозговой
28 января 2020

Советы о дизайне интерфейсов