Минимализм в дизайне мобильных интерфейсов

Дизайн — один из важнейших способов привлечения пользователей. Секрет успеха простых интерфейсов заключается в использовании только самых необходимых элементов. Такой подход называют минимализмом.

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

Минимализм в цвете

Простая цветовая схема оставляет приятное впечатление, в то время как большое количество цветов может быть воспринято негативно. Существует множество уже составленных палитр, которые делают создание новых цветов проще, особенно для новичков:

• • Монотонная палитра

    Монотонная цветовая палитра состоит из нескольких оттенков определенного цвета. Изменяя насыщенность и яркость одного из них, можно получить множество приятных для глаз цветов.

• Аналогичные цвета

  Аналоговая цветовая схема создается путем использования трех цветов, стоящих рядом на цветовом круге. Минималистичное приложение Clear использует анологичные цвета, чтобы визуально приоритизировать задачи и выделять наиболее важные (самые верхнии позиции будут наболее яркими, в то время как нижние позиции будут светлыми и более блеклыми.)

  

Эффект размытия (blur)

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

Приложение Yahoo! weather показывает классные фотографии погоды, а самая интересная и нужная информация становится видимой после одного нажатия. Вместо того, чтобы накрывать фото другим слоем интерфейса, приложение держит вас в контексте (keeps you in context) после нажатия: подробная информация легко появляется, а фото с погодой остается на заднем фоне. Взаимодействие с приложением настолько интуитивно, что вам не потребуется даже секунды, чтобы вернуться в предыдущее место.

Одно приложение — один шрифт

Использование нескольких видов шрифтов придаст вашему приложению разрозненный и неаккуратный вид. Уменьшение количества шрифтов на экране может раскрыть истинную силу типографии. Разрабатывая приложение, подумайте о том, как улучшить шрифт, играя с начертанием, стилем и размером, а не с различными шрифтами.

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

• Apple использует семейство шрифтов San Francisco, удобный для чтения, на всех своих платформах (шрифт San Francisco на IOS 9 называется SF-UI).
• Шрифты Roboto и Noto стандартно используются в Google Android и Chrome.

Выделение информации

Вам следует использовать большой размер шрифта и выразительный цвет, чтобы привлечь внимание к определенной информации. Используйте нейтральные цвета для основной палитры, а контрастные для призыва пользователя к действию, которое вы хотите, чтобы он совершил.

Яркий цвет, переходящий в нейтральную палитру — это один из самых простых способов создания цветовой схемы. Картинка взята с сайта Smashing Magazine

Увеличение размера шрифта и использование яркого контрастного цвета привлекает внимание пользователя к определенной части экрана без каких-либо дополнительных визуальных приемов — это упрощает процесс получения информации.

Отделяйте элементами и пробелами, а не линиями

Линии и разделители, как правило, используются для деления информации на секции или категории, но использование большого количества таких элементов приводит к захламлению интерфейса.

Отсутствие линий и разделителей сделает ваш интерфейс чище, современнее и более функциональным. Существуют другие способы разделения содержимого: блоки, пробелы и цвета. Приложение Calendar App от Google — отличный пример того, как с помощью пустого пространства и теней можно разделить содержимое на секции в ненавязчивой манере.

Иконки: Stroke and Fill

Иконки — это способ визуального общения, используемый для предоставления функциональности или контента. Иконки должны быть просты и немедленно узнаваемы. С момента выхода IOS 7 многие минималистичные интерфейсы содержат Stroke and fill иконки (иконки с заливкой по нажатию). В этой статье мы не будем критиковать саму концепцию, вместо этого обратим внимание на отдельный аспект — вид одной и той же иконки с заливкой и без:

Давайте посмотрим на иконки панели вкладок. Так как иконки на этой панели служат навигацией в другие части приложения, важно понимать, какая секция активна на данный момент путем ее выделения. Выделить иконку на общем фоне можно изменив ее вид в активном/выбранном состоянии — это делает управление панелью закладок более понятным.

Заключение

Минималистичные интерфейсы и другие техники — отличный способ сделать хороший дизайн, но это не главная цель. Главная цель в том, чтобы упростить наши интерфейсы и сделать их более функциональными и полезными. Лаконичная графика и упрощенный дизайн помогают создать безупречное взаимодействие.

Перевод статьи The Art of Minimalism in Mobile App UI Design
Автор оригинального текста: Nick Babich