Суть стиля Metro — чтобы ежу было понятно. Если менее метафорично, то пользователь должен получить нужную ему информацию не отвлекаясь от своих мыслей.
Откуда идея
Представьте, что вы находитесь в аэропорту (в метро, на вокзале) незнакомого города и времени на поиски цели совсем мало. В этой ситуации всё, что вам нужно от информационной системы этого места — это максимально быстро, очень понятно и однозначно получить нужную информацию, чтобы найти дорогу к цели. И в данном случае вам будут совершенно безразличны дизайнерские изыски, а дополнительная информация будет только мешать, потому что она способная отвлечь на себя внимание. Все должно быть 100% ясно с первого взгляда.
В общем, как всегда, не нужно придумывать ничего нового, и взять успешную, проверенную временем идею языка транспортных систем. За довольно долгое время существования он стал достаточно совершенным (наверно, если бы двигатели внутреннего сгорания были бы так совершенны, то мы бы давно могли проезжать 100 км на 100 мл топлива): в нем отброшено все лишнее, элементы сделаны настолько понятными, насколько это вообще возможно, цветовые схемы направлены на выделение только нужных элементов, а шрифты читаются очень просто.
Это и стало идеей для Metro.
Курс стиля Metro
Теперь выделим 3 ориентира, на которые направлен стиль Metro:
- ориентир на четкий и чистый внешний вид без украшений и ненужных элементов;
- ориентир на прямолинейное движение. Меньше статики, больше динамики, предлагая пользователю новую информацию и новые возможности. Важным критерием при этом является плавность и легкость перемещения. Задержки недопустимы. В общем: slide, turnstile (переворот), continuum (элемент по которому кликнули остается на экране) рулят, fade нет;
- ориентир на контент и максимальную воспринимаемость текстовой информации.
Характеристики стиля Metro
Чтобы некий интерфейс можно было бы назвать соответствующим стилю Metro, этот интерфейс должен отвечать следующим характеристикам:
- Отсутствие ненужных элементов и сосредоточение внимания на главных. Отмечу, что вторичные элементы не исключаются, но они не должны отвлекать пользователя от от главных элементов, стало быть их местоне в центре интерфейса;
- Легкость интерфейса на вид и восприятие;
- Высокая скорость работы как интерфейса в целом, так и динамики отдельных элементов;
- Все главные элементы должны бать открытыми: должны быть на виду и доступными сразу;
- Особое внимание шрифтам: стиль, читаемость, размер должны быть направлены не в сторону красоты, а в сторону аккуратности и отличной читаемости;
- Элементы меню должны быть связаны между собой таким образом, чтобы процесс навигации был максимально прогнозируемым;
- Концентрация исключительно на нужной информации. Долой все украшательства и дополнительные элементы. Все должно быть четко, как циферблат классических наручных часов.
- Отсутствие элементов из реальной жизни в интерфейсе. Ярлычки реалистичными изображениями окружающего нас мира и тени — это не Metro.
Анимация в Metro
Анимация имеет важное значение в стиле Metro. Она должна быть уместной и вызывать только приятные эмоции. Ее цель — помочь пользователю дойти до нужной ему информации, не став при этом главнее самой информации. Часто анимация помогает скоротать время ожидания не привлекая внимания к самому процессу ожидания. Анимация может прикрывать процесс прелоадинга за маской ненавязчивого перехода от одной части интерфейса к другой. Таким образом, уместная анимация способна повлиять на субъективное восприятие ожидания и избавить пользователя от неприятного впечатления.
Максимальным значением, при котором пользователь воспринимает анимацию как мгновенную, является 0,5 секунды.
Плитки, как элемент дизайна
Прямоугольник — краеугольный камень в интерфейсах стиля Metro. В свою очередь расположение элементов дизайна должны строиться в соответствии с сеткой. Следующие изображения проще понять без дополнительных комментариев.
Этот способ организации элементов и пространства является очень эффективным для структурирования и восприятия информации.
Вот как-то так.