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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Спасибо!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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