"Hints" для создания достойного UI

Всем привет, это вторая часть из цикла “UI/UX для разработчика” (первую можно найти тут). В этой статье я предлагаю набор технологий / средств / подходов, которые в зависимости от ситуации могут быть полезны во время разработки продукта.

В большинстве случаев мы, программисты, не хотим сильно заморачиваться разработкой графического дизайна и придумывать, “как же оно должно выглядеть”. Очевидно, это не совсем наша область ответственности. Тем не менее, дизайнер на проекте бывает не всегда, а UX и частично UI ложится на плечи самого разработчика. А если дизайнер и есть, то с ним еще нужно научиться эффективно работать. С одной стороны, мы всегда можем к нему обратиться, с другой стороны - не очень эффективно дергать его на каждый “чих”.

Задача: Сделать pixel-perfect UI по макету от дизайнера.
Решение: Можно попросить дизайнера залить макет в zeplin, avocode или invision. Тогда у нас будет доступ к описанию размеров, шрифтов и цветов. Можно даже скопировать себе целый блок стилей.

Тем не менее, есть ряд подводных камней, о которых стоит помнить:

1. Следовать значениям до пикселя не стоит. Возможно, дизайнер спешил и не обращал внимание на размер шрифта каждого отдельного элемента. Как результат, вы будете встречать очень близкие значения для одинаковых по логике элементов, например, 13, 13.5, 14, 15 пикселей для заголовков. Их смело можно объединить в общее значение 14px. А лучше всего - выстроить собственную систему размеров и приводить значения к ней.
2. Цветов также может быть много. Лучше попросите дизайнера добавить туда же фиксированную палитру цветов.
3. Обращайте внимание на opacity. Иногда оно может быть действительно необходимо, но в некоторых случаях это просто быстрый способ для дизайнера сделать из черного - серый, что значит, у себя вы можете заменить это свойство на цвет.

Если макет вам дали в виде pdf или картинки, а исходников нет, то можно открыть их в браузере и, используя браузерные расширения, определить расстояния и цвета вручную. Иногда эти средства не работают локально, тогда можно загрузить их в Google Drive. Я, например, использую Tape и ColorZilla. Tape позволяет четче увидеть линию выравнивания на странице и не бегать по каждому вопросу к дизайнеру. Еще он показывает расстояния между элементами. ColorZilla помогает определить, какой цвет использован на странице, и копирует его сразу в буфер обмена, так что запоминать числа не придется.

Все эти средства лишь помогают получить доступ к тому, что уже есть. Но что, если дизайн есть, но доступа к человеку, который его делал - нет?

Задача: Нужно реализовать новый элемент UI, которого нет в существующем дизайне.
Решение: В таком случае для нас проект превращается уже в площадку для творчества. С чего начать?

1. Какие-то блоки в существующем дизайне уже будут готовы, например, кнопки или таблицы и контейнеры. Можно их переиспользовать.
2. Определить базовые цвета и следовать им, не добавляя новых.
3. Определить базовые margin / padding и применить их к существующему компоненту.

Если компонент новый и для него нет готовых блоков, а в голове нет идей, как можно сделать хороший внешний вид, - обратитесь к таким ресурсам, как dribble и behance. Чаще всего там можно будет найти хорошие примеры дизайнов. В некоторых случаях анимированные решения могут даже наглядно показать, какой может быть UX.

Допустим, мы хотим сделать список фильмов с описанием. Так и вводим в их поисковике “Films list”. Если результат не совсем подходит, можно попробовать найти там дизайн продукта похожего на то, что делаете вы. В данном случае можно было попробовать ввести Imdb, Netflix. Закругления элементов (border-radius), тени и цвета стоит подгонять под свое существующее приложение. Самое главное - перенять композицию компонентов.

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

Задача: Работать с приложением, для которого не разработан графический дизайн. (в лучшем случае есть “моки”)
Решение: Не мучайтесь и не пишите кастомных стилей, а используйте UI фреймворк. Bootstrap, MaterialUI, SemanticUI избавят вас от мук выбора расстояний и цветов, предоставят свою размерную сетку и даже респонсив для мобильного. Там уже будут готовые компоненты для модалок, карточек и таблиц. Приятным бонусом будет возможность кастомизировать шрифты, цвета и закругления кнопочек. Таким образом вы можете создать собственную тему. Вероятно, вам придется адаптировать что-либо дополнительно под себя, но 90% ваших потребностей они обеспечат.

Искать похожие продукты на dribble и behance не стоит - в данном случае решений будет так много, что захочется использовать их все одновременно. Шансы сделать красивый UI при таком подходе меньше, а времени убьете в разы больше.

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