5 советов по созданию для приложения современного UI

Недавно мне дали задачу «модернизировать» пользовательский интерфейс текущего приложения моей компании на Android. Термины современный, молодой, крутой и т.д. довольно расплывчаты. Что делает дизайн современным или устаревшим?

Восприятие меняется от человека к человеку. Но я не мог просто сказать это руководству и оставить задачу в покое. Поэтому я провел целый день, рассматривая различные примеры приложений, которые мы обычно воспринимаем как современные, молодые и крутые. Такие приложения, как Airbnb, Coinbase, Robinhood, Uber, Swiggy, Headspace, Cocoon, Eventbrite, Public, Wise и Google Pay. Я использовал Mobbin, чтобы оценить их дизайн.

Глядя на все эти продукты, стало очевидно, что не все использовали какой-то модный стиль дизайна, такой, например, как неоморфизм, чтобы выглядеть современно. То, что придавало им современный вид, было довольно простым. Настолько простым, что я смог выразить это в 5 коротких подсказках.

1. Пространство

Будьте щедры на интервалы. Высота строки, отступы, поля, особенно горизонтальные… Я заметил врожденный страх дизайнеров против добавления лишнего пространства. В большинстве случаев цель состоит в том, чтобы разместить как можно больше контента в области просмотра пользователя.

Более 87% населения Индии владеют устройством выше 720 пикселей.

Это означает, что есть много вертикального пространства для размещения вашего контента. Если вы считаете, что вам нужно поле в 8 пикселей, попробуйте 12 пикселей. Начните с большего и уменьшите, если вам кажется, что это слишком много.

Пространство против тесноты

2.Невидимые заголовки

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

Eventbrite: появляется заголовок с текстом Singapore на скроле. Это сообщает пользователям, на какой странице они находятся, и предоставляет легкий доступ к «изменению» локации.

3. Нарочито сглаженные

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

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

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

Call of Duty

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

Кого бы вы обняли?

Используйте изображения

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

Исследования, проведенные в 3M Corporation, пришли к выводу, что мы обрабатываем визуальные эффекты в 60 000 раз быстрее, чем текст.

Airbnb делит свои страницы фотографиями и иллюстрациями

5. Движение

Лично я все еще изучаю движение. Но разве не приятно использовать приложение, которое использует плавные перемещения?

Приложение Honk на iOS. Один из моих любимых дизайнов приложений в мире

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

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

Источник