Программирование для мобильных платформ. IOS

14. Не все сразу.

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

15. Подсказывай с умом.

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

16.Стартовая страница.

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

17. Текущие проблемы – главные проблемы.

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

18. Лучший дизайн – невидимый дизайн

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

19. Расширяем кругозор

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

20. Неиспользуемый интерфейс – плохой интерфейс

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

Цвет в дизайне

Цвет – это метод создания баланса элементов.

Во время продумывания сценария взаимодействия и восприятия интерфейса следует на каждом этапе помнить, что пользователь видит экран рабочими областями (Рисунок 2.1).

Рисунок 2.1. Рабочие области простого интерфейса

Характерно, что последовательность восприятия, у большинства пользователей, будет несколько отлична от нумерации рабочих областей, а именно: workspace 2 ? workspace 1 ? workspace 3, при этом workspace 2 и 3, очевидно, будут восприниматься как основная и второстепенная часть одного сценария.

Пользователь стремится игнорировать элементы, находящиеся в другой рабочей области, во время работы с текущей – подсознательно он представляет, что где-то там находится ряд функций, которые ему могут понадобится, но сознательно он их «не видит». Отсюда можно сделать вывод, что элементы внутри областей должны находиться на одном уровне интенсивности относительно других областей. Например на рисунке 2.2 очевидно, что в первом варианте сбивается изначально заданный баланс: элементы списка справа конфликтуют с горизонтальной шапкой. Во втором варианте он сохранен: внимание в первую очередь направленно на заголовок Workspace1.

Рисунок 2.2. Цветовое акцентирование на главное рабочей зоне

Следует использовать только сознательно подобранные цвета. Это основная ошибка очень большого количества дизайнеров. Часто можно видеть пример, когда дизайнер берет элемент, основываясь на абстрактных представлениях о том, что «подтвердить» должно быть зеленым, а «отменить» – красным. Помимо явной ограниченности такого подхода есть еще и проблема того, что не все понимают, что, если ты использовал определенный зеленый цвет, ты можешь к нему использовать только строго определенный красный. Случайных цветов не бывает вообще: человеческий глаз способен улавливать малейшие отличия и подсознательно всегда воспринимает цветовой диссонанс. Более того, следует помнить, что большинство современных экранов имеют весьма ограниченные цветовые пространства, и диссонансы на них представляются гораздо более грубыми, нежели, скажем, на холсте. Пара примеров подобного отношения (рисунок 2.3.):

Рисунок 2.3. Различные варианты использования цвета в одном и том же приложении.

Рисунок 2.3. Различные варианты использования цвета в одном и том же приложении.

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

Существует несколько ограничений, которые нужно всегда держать в голове:

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

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

– Не использовать правый крайний угол палитры для основных цветов.

Ниже отмечена приемлемая зона выбора четкого цвета, но не бледных оттенков (Рисунок 2.4):

Рисунок 2.4. Зона выбора оптимальных цветов для основных элементов.

Кстати, веб-цвета тоже настоятельно не рекомендуется использовать, особенно учитывая современное развитие браузеров. Веб-цвета – это всего лишь оптимизация значений, они на удивление грубы и плохо соотносятся между собой. Во время разработки палитры интерфейса стоит использовать различные генераторы палитр и цветовых схем. Например это Kuler от компании Adobe или Paletton (Рисунок 2.5.). Разумеется, все вышеперечисленное следует воспринимать с умом, а не в лоб. Для того, чтобы грамотно подобрать практически любой цвет, как правило, приходится подвигать ползунок тона, т.к. чистые относительные цвета обычно недостаточно/чрезмерно контрастны для своих задач.

Рисунок 2.5. Генератор цветовых схем.

Человеческое зрение очень хорошо умеет адаптироваться к условиям различного контраста, например, его статический контраст равен примерно 100:1, а динамический может достигать 1.000.000:1, поэтому не следует бояться его понижения внутри элементов. При этом восприятие контрастности повышается с уменьшением циклов (грубо говоря, разноцветных элементов). В отличие от реального мира, компьютерный интерфейс имеет весьма примитивную структуру контрастов, небольшое количество цветов и типов элементов. Хороший пример грамотно выстроенного контраста – текущая версия социальной сети Facebook (Рисунок 2.6.):

Рисунок 2.6. Цвет и контраст в интерфейсе Facebook.

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

Хорошим показателем того, что палитра в интерфейсе удалась, если он создает «на вкус» ощущение единого освещения. Это достигается путем использования естественных контрастов, насыщенных оттенком теней. Например, не рекомендуется использовать холодное на теплом в качестве акцента. Это противоестественно, в природе такого не бывает. Даже подобранные по цветовым отношениям синий в красном смотрится хуже, чем красный в синем (Рисунок 2.7):

Рисунок 2.7. Использование естественных контрастов

Также следует давать пользователю ясный фокус на одном первостепенном сценарии и делать остальные сценариии явно второстепенными. Отсюда следует хрестоматийное call-to-action. Однако следует понимать, что в 90% случаев call-to-action является кнопкой и предваряется какой-то информативной частью. Это означает что она должна быть легко находима, но не бросаться в глаза первой. Это достигается, например, при помощи яркого, активного цвета в элементе небольшого размера (Рисунки 2.8; 2.9; 2.10)

Рисунок 2.8.Call-to-action как часть сценария workspace 2.

Рисунок 2.9.Call-to-action как часть сценария workspace 3.

Рисунок 2.10.Call-to-action как отдельный сценарий.

3.Мобильный интерфейс для одной руки

В своей книге Designing Mobile Interfaces (2011) (http://www.amazon.com/Designing-Mobile-Interfaces-Steven-Hoober/dp/1449394639/) дизайнер Стивен Хубер ввел понятие The Thumb Zone («зона большого пальца») – область экрана, наиболее удобная при использовании телефона одной рукой. С года издания книги средний размер смартфона заметно увеличился, и «мертвая зона» – область, которую сложно достать пальцем одной руки, – также стала больше (Рисунок 3.1):

Рисунок 3.1. «Зона большого пальца» для 5—4,7-дюймового экрана.

В «мертвую зону», отмеченную красным, попадают панели инструментов приложений, которые как в Android (App Bar / Primary Toolbar), так и в iOS (Navigation Bar) находятся в верхней части экрана.

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

В эпицентре «мертвой зоны» iOS стандартно расположена кнопка Back, на телефонах Android в данную область попадает кнопка вызова бокового меню (Navigation Drawer). Однако в большинстве приложений нет необходимости к ней тянуться – достаточно сделать свайп от левого края телефона (Рисунок 3.2):

Рисунок 3.2. Боковое (главное) меню (Navigation Drawer) в Android и функция Navigare with a swipe («Навигация смахиванием») в iOS.

Но не бывает правил без исключений. С правой стороны панели инструментов могут находиться кнопки «Готово» или «Отправить», которые ведут к необратимому действию. Такое простое движение как swipe не должно приводить к выполнению необратимых действий.