Плоский дизайн – как сделать удобные интерфейсы

Рисунок 2. Дизайн значков браузера Safari

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

1. Отказ от использования градиентов, теней и текстур;

2. Использование простых фигур, контрастных цветов и строгое начертание.

 

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

В качестве причины зарождения плоского дизайна можно вспомнить фразу классика Антуана де Сент-Экзюпери:  «Художник знает, что достиг совершенства не тогда, когда уже нечего добавить, а тогда, когда больше нечего отнять».

С начала 1980х годов в разработке интерфейсов приложений любили использовать так называемый скеоморфный дизайн (от слова skeuomorphism (скеоморфизм) - имитация другого объекта путем копирования своего материала, формы и функциональности). Не трудно догадаться, что интерфейсы в скеоморфном дизайне повторяли объекты из реальной жизни. Скеоморфные интерфейсы часто встречаются в программах по работе со звуком – миксерах, звуковых процессорах и т.п.

 

Рисунок 1. Интерфейс программного миксера

Рисунок 1. Интерфейс программного миксера

Скеоморфный дизайн до недавнего времени очень был любим компанией Apple.

Рисунок 2. Дизайн значков браузера Safari

Рисунок 2. Дизайн значков браузера Safari

 

Так, в значке старых версий браузера Safari легко было увидеть компас  - у него был металлический корпус, от него падали тени, фон компаса выполнен в стиле морской карты. Глядя на такой компас получаешь эстетическое удовольствие от качества картинки. В новой версии значка (справа на Рис.2) компас уже не так очевиден, его можно принять за часы.

 

Цель плоского дизайна

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

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

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

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

 

Плюсы и минусы плоского дизайна

Есть много примеров хорошей реализации плоского дизайна, но столько же и неудачных решений. Если не уходить от темы Apple (ну если фирма не дает покоя миллионам жителей, то почему обратное должно быть? :)) и сравнить интерфейс iOS6 и iOS7, то можно найти много плохих решений в стиле плоского дизайна в iOS7.

Рисунок 3. Сравнение дизайна iOS6 и iOS7

Рисунок 3. Сравнение дизайна iOS6 и iOS7

 

В 7й версии iOS исчезли скеоморфные элементы.  Далеко не про все элементы в новом стиле можно сказать, что это обновление прошло успешно. Очень противоречивой оказалась смена стиля. Например, в значках «Почта»(Mail), «iTunes Store», «App Store» градиент по-прежнему присутствует, а в значках «Записи»(Notes), «Котировки»(Stock) градиента уже нет.

А что хотели сказать дизайнеры значком «Game Center» - вообще загадка. 4 полупрозрачных шарика разного размера. Значок «Newsstand» оказался перегружен графикой. А вот значки «Compass», «Reminders», «Notes» исполнены очень неплохо.  Но, глядя на значки, видно, что стиль сохранен не везде (напомню, что плоский дизайн подразумевает отказ от градиентов).

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

 

 

Юзабилити в слишком плоском дизайне

Как уже сказано ранее, плоский дизайн не подразумевает наличие градиентов, текстур и теней.

Любой пользовательский интерфейс в любом оформлении – будь то плоский дизайн, или какой еще - должен быть удобным для пользователя.

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

Рассмотрим дизайн Windows 8. Windows 8 – очень плоский интерфейс с яркими цветами, привлекающими внимание надписями, что должно формировать положительно мнение  о новой версии Windows. Если бы не одно но – от этого интерфейса отказалось более половины пользователей этой операционной системы.

Новый десктоп Windows 8

Рисунок 4. Новый десктоп Windows 8

Нарекания и жалобы на то, что панель Windows 8 неудобна в использовании  на обычном компьютере без тач-скрина, заставила MicroSoft пересмотреть свое решение и вернуть кнопку «Пуск». Панель кнопок в Windows 8, из которой можно выключить компьютер – это классический пример недружелюбного интерфейса (Рис.5). С одной стороны все иконки нарисованы в одном стиле и интуитивно понятны, но при наведении мышки от них нет никакой реакции – кнопки не подсвечиваются, ни утапливаются. Понимаю, что Windows 8 был ориентирован в первую очередь на планшеты, но про пользователей компьютеров забывать пока рано.

Рисунок 5. Выключение Windows 8

Рисунок 5. Выключение Windows 8

 

Получилось, что плоскость дизайна пошла в ущерб удобству использования. А это то, чего нарушать нельзя.

 

Решение – «полуплоский дизайн»

Плоский дизайн хорош всем, кроме того, что у него почти нет реакции на действия пользователя. Выход – совмещение плоского и неплоского дизайна, назовем его «полуплоским». Полуплоский дизайн основан на использовании аскетичных свойств плоского, но с добавлением в него теней и смены  начертания для выделения ответной реакции на действия пользователя.

Очень импонирует дизайн  гугловской почты Gmail (Рис.6). Интерфейс Google давно стремится к минимализму и функциональности, об удобстве использования разработчики интерфейса хорошо позаботились.

Рисунок 6. Интерфейс почты Gmail

Рисунок 6. Интерфейс почты Gmail

 

Так, непрочитанные письма выделены жирным начертанием шрифта.

При наведении курсора мыши на кнопку «Отправить» (Send) кнопка слегка меняет свой цвет на чуть более темно-синий и появляется выплывающая подсказка. У пользователя не возникает сомнений о том, какое действие произойдет после нажатия.

Подобное поведение реализовано и для других кнопок, например, кнопка присоединения файла к письму.

Рисунок 7. Новое письмо в Gmail

Рисунок 7. Новое письмо в Gmail

 

Развитие и перспективы плоского дизайна

В чистом виде плоский дизайн обречен к употреблению практически невозможен. Как видно из рассмотренных выше примеров, гармония была достигнуты при разбавлении плоского стиля. Так, и MicroSoft, и Apple прислушиваются к критическим отзывам пользователей и вносят изменения в интерфейс. Так, в выпущенном Microsoft Windows 8.1 кнопка «Пуск»  возвращена на свое привычное место.

Так и вы – даже если вы уверены, что ваш интерфейс безупречен, то попросите несколько человек воспользоваться им. Поставьте пользователю задачу, например, найти на сайте статью о программировании на C#, а потом спросите, насколько быстро он справился с задачей и какие трудности были у него при ее решении. Выслушайте пожелания и замечания, а потом доработайте интерфейс. Разумеется, критика должна быть адекватной и обоснованной, а не так – «мне все не нравится».

 


Комментариев нет »

No comments yet.

RSS feed for comments on this post. TrackBack URL

Leave a comment






MarkiMarta.ru. Записки отца-программиста" с 2009 г.
Категория информационной продукции 18+
Яндекс.Метрика