Главное Свежее Вакансии Образование
Выбор редакции:
6 753 22 В избр. Сохранено
Авторизуйтесь
Вход с паролем

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

Дизайн является одним из наиболее важных факторов привлечения пользователей. А предпочтения пользователей сходятся в одном, наиболее простой интерфейс - ключ к успеху. Минимализм - это идеальное сочетание форм и функций.

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

Если вы хоть немного интересуетесь графическим дизайном, то не могли не слышать про термин «плоский дизайн». Это направление вначале появилось в Вебе несколько лет назад, а в последнее время плоский дизайн "выстрелил" и стал сверх популярным благодаря крупным компаниям, которые стали активно использовать плоский дизайн.

Минималистичный дизайн должен быть лаконичным, ясным и последовательным, дабы внести больше пользы. Взаимодействие системы должно быть полностью направлено на решение проблемы пользователя. Именно поэтому приложения, сочетающие в себе дизайн в стиле "минимализм" и великолепное юзабилити настолько внушительны: простое приложение может стать очень мощным инструментом коммуникации. Для достижения этой цели нужно соблюдать некоторые правила, о которых я Вам расскажу ниже.

Простые цветовые схемы

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

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

b_57965adbc741d.jpg

b_57965adc15ad8.jpg

Последовательная цветовая гамма. Последовательная схема создается с использованием трех цветов, которые находятся рядом друг с другом на цветовом круге. Эта цветовая гамма располагается последовательно (самые верхние элементы будут подчеркнуты самыми смелыми, яркими цветами, а ниже по списку цвет будет меняться на более легкий и нежный).Задача последовательной схемы ориентирована на выделение наиболее важных элементов дизайна.

b_57965adc65ae1.jpg

b_57965adca77ba.jpg

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

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

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

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

b_57965adcf1295.jpg

Центр внимания

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

b_57965add28d41.jpg

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

b_57965addb1b7a.jpg

Деление на элементы и интервалы, а не на линии

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

b_57965ade0b949.jpg

Обводка и заливка иконок

Иконография - это визуальный язык, используемый для представления функционала или контента. Иконки должны быть простые, чтобы пользователь взглянув один раз на иконку сразу все понял. Начиная с iOS 7 дизайн стал максимально минималистичным. Изначально иконки были с тонкими линиями (line style), в дальнейшем значки стали с заливкой фона. Здесь мы не будем критиковать саму концепцию, вместо этого я сосредоточу внимание на практическом аспекте.b_57965ade3c738.jpg

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

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

Оригинал: Nick Babich

Источник: Hurumbra

+3
В избр. Сохранено
Авторизуйтесь
Вход с паролем
Комментарии
Екатерина К
>>>А предпочтения пользователей сходятся в одном,
Правда, что ли?

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

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

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

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

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

А вообще, простой - не означает убогий. Все эти новомодние "минималисткие" иконки и стили в подавляющем большинстве случаев просто убожество, на которое тошно смотреть (взять хотя бы стиль "метро" от MS).

Соглашусь только в одном пункте - насчет шрифта, но эта тема настолько стара и очевидна, что не требует даже упоминания.

Опять же, данная статья - это взгляд на интерфейс со стороны создателей интерфейса. Было бы интереснее услышать пользователей, что они на самом деле думают.
Ответить
Хурумбра
Коллективный блог, сервис для коллективного создания контента.
Сорокин Сергей
>>>А предпочтения пользователей сходятся в одном,
Правда, что ли?

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

А вот и тень)
Ответить
Екатерина К
Поняла насчет запятой. Да, действительно, смысл другой. Но опять же, я как пользователь вам скажу, главное - не простота, а удобство. Вещи эти, конечно, взаимосвязанные, но не равнозначные.

Тень тоже вижу :) А теперь вопрос - в чем приемущество использования тени? Этот ведь тот же самый скевоморфизм, а вовсе не минимализм.
Ответить
Хурумбра
Коллективный блог, сервис для коллективного создания контента.
Сорокин Сергей
Ну а как же насчет того, что во Flat уже тень начали использовать ? Мне кажется все это как эволюция логотипа Windows, с чего начали - к тому и пришли
Ответить
GML
Сервис организации ваших интернет линков
GM2mars 10790
Тень во flat пришла от материал дизайна, чтоб показать физическое свойство как глубина, которая в свою очередь помогает расставлять акцент и приоритеты.
Ответить
Екатерина К
Раз мы используем термин "глубина", этот стиль уже по определению нельзя назвать плоским.
Ответить
GML
Сервис организации ваших интернет линков
GM2mars 10790
Тогда давайте будем называть это слоями, вас устраивает? Слои могут быть плоскими? Слои могу быть наложены друг на друга?
Ответить
Екатерина К
Слои - безусловно, могут быть плоскими. А вот дизайн, который состоит из слоев, причем явно между ними пространство и есть объем (иначе откуда тень?) - нет!
Ответить
GML
Сервис организации ваших интернет линков
GM2mars 10790
Не понял, не может быть дизайна состоящего из слоев?
Ответить
Екатерина К
Ну тут мы с вами запутались в терминологии. Давайте уточним сначала, что есть что.

Дизайн интерфейса (а его реализация - например, фреймворк), или концепция - некий набор правил оформления интерфейса.

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

Плоский дизайн - когда перекрытие элементов, лежащих в разных слоях, не обозначается ничем, кроме пересечением границ элементов. Также для плоского дизайна характерное полное отсутствие неких признаков объема (тени, выделение уголками, подсветкой и так далее).

Материал дизайн - когда самим элементам придается объем в размере 1 пикселя, и перекрытие элементов, лежащих в разных слоях, обозначается тенью. (Там есть и другие правила, но мы с вами сейчас только про объем говорим).
Ответить
GML
Сервис организации ваших интернет линков
GM2mars 10790
Хорошо, не буду спорить, вам виднее
Ответить
Екатерина К
:)
Не то чтобы виднее, просто надо же когда-то разложить тему по полочкам! Мы еще к ней вернемся, вот увидите :)
Ответить
GML
Сервис организации ваших интернет линков
GM2mars 10790
Надеюсь к этому времени я уже умру от старости
Ответить
Екатерина К
Нет, это случится значительно раньше. Готовьтесь!
А почему "надеетесь"? Вам страшно?
Ответить
GML
Сервис организации ваших интернет линков
GM2mars 10790
Есть хорошая поговорка:
Если хочешь выиграть женщину в споре - притворись мертвым.
Ответить
Екатерина К
Uh-oh!
Нет, не надо в спорах здесь притворяться мертвым. Лучше выскажите свое мнение, аргументируйте его как следует, и, обещаю вам, если там будет смысл и соль, я соглашусь!
Ответить
Алексей Алексеев
Все правильно, плоский недо-дизайн вызывает только тошноту. Отсутствие градиентов и вообще всего что развито в подсознании человека за миллионы лет эволюции - это типичное издевательство.
Ответить
appvelox
Веб-разработка, мобильные приложения Android и iOS
Князев Юрий
Я очень люблю флэт дизайн!) сейчас как раз он актуален, но не каждому подойдёт такое) а так простенько всё описали. На мой взгляд всё хорошо. Примеров бы больше показали было бы ещё лучше! А так легко и понятно)
Ответить
Lockstep Marketing
Агентство Интернет-маркетинга
Глеб Владимирович Горохов
Искусство минимализма в приложениях: используйте официальные гайдлайны.
Ответить
Viktor Noskov
Спасибо автору за статью! Да вещи может быть и очевидные упоминаться, но полезно все разложить по полочкам еще раз и применить практике.
Ответить
hfrtvnii 42003
не, у нас надо чтобы все было бежевое и коричневое
Ответить
Алексей Алексеев
какашечный стиль дизайна в моде у быдло-дизайнеров.
Особенно позабавило "упрощенная цветовая гамма выглядит более привлекательнее". В каком веке это выглядит? Вроде бы Малевич со своим дебильным квадратом издох давным давно.
Ответить
Выбрать файл
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать

Spark использует cookie-файлы. С их помощью мы улучшаем работу нашего сайта и ваше взаимодействие с ним.