Техники мобильного дизайна

от Ника Бабича

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

Эффективная типографика

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

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

На заметку: Чтобы обеспечить читаемость в мобильных устройствах, стремитесь к 30–40 символам в каждой строке. Это консервативная оценка — половина от рекомендованных 60–75 символов для десктопа.

Простая цветовая схема

Цвет — самая сложная область визуального дизайна. Упрощение цветовой схемы повышает пользовательский опыт, в то время как имеющие слишком много цветов могут негативно влиять на него. Скажите «Нет» для сложных цветовых смешений. Изменяя насыщенность и яркость простого цветового тона, вы можете сгенерировать несколько цветов, и цветовой схему, что не режет глаз.

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

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

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

Навигация контента с помощью карточек

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

Этот тип навигации работает особенно хорошо вместе с карточками, потому что карточки отличный путь к организации и распространению огромного количества контента, который легко усваивается:

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

На заметку: Сохраняй UI невидимым как можешь — фокусируйся на контенте.

Слои и глубина

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

Слоистые интерфейсы работают в рамках принципов Google Material Design, который имитирует, как люди взаимодействуют с объектами в реальном мире.

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

Некоторые распространенные применения многоуровневого интерфейса включают в себя:

• Плавающая кнопка действия. Эти типы кнопок используется для призыва к действию. Они отличаются значком в виде круга с плавающей над UI.

• Приближение. Частный пример слоистости и когда люди выбирают элементы списка чтобы увеличить до детального вида (который перекрывает список) и есть возможность вернуться назад к полному списку.

Фиксированная навигация. Меню только предметами первой необходимости, которые остаются на экране в любое время, когда пользователь взаимодействует с .

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

На заметку: Упрощаьб пути пользователя, значит дизайнить каждый экран только для одной вещи.

Похожие жесты

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

Чем больше приложение полагается на жест управления, тем меньше кнопок на экране, таким образом, больше места для ценного контента. Это делает приложение более контент-ориентированным.

На заметку: Все, что сказано выше, относится к стандартным ( «интуитивными») жестам. Будьте осторожны, если хотите использовать креативные жесты. Главное знать о жестах (стандартных или креативных) то, что они всегда скрыты.

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

Функциональная анимация

Функциональная анимация это тонкая анимация, которую мы используем в дизайне пользовательского интерфейса как часть нашего процесса. Она выступает в качестве «посредника взаимодействия» как:

• Обеспечении визуальной обратной связи:

• Сглаживании перехода состояния и обращение внимания на изменения:

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

В заключении

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

Спасибо!

Об авторе

Автор: Nick Babich — разработчик приложений из Санкт-Петербурга, технический энтузиаст и любитель UI/UX.

Оригинал: Medium