Сетка в дизайне интерфейсов для Windows Phone: строгий учитель или добрый помощник? (Часть 1)

Продолжаем публиковать статьи по следам Design Camp. Сегодня у нас на очереди доклад Егора Гилева (yegorg), который на момент кампа работал в компании Парксис, но в феврале 2013 г. ушел в свободное плавание и теперь вместе с ещё одним сооснователем студии Турбомилк Денисом Кортуновым работает над собственными проектами. Статья приведена как есть и отображает авторскую точку зрения на дизайн приложений под Windows Phone.

Я работаю дизайнером User Experience в компании Parcsis. В том виде, в каком она существует сегодня, она образовалась в результате слияния двух компаний: Parcsis и Турбомилк. Parcsis — это в некотором роде инкубатор, запускающий собственные интернет-проекты. Турбомилк — всемирно известная в узких кругах студия дизайна интерфейсов. Я являюсь сооснователем Турбомилка. Около полутора лет назад мы объединились, и команда дизайнеров Турбомилка стала отделом UX-дизайна объединённой компании.

В компании я слыву чудаком. Считается, что дизайнер должен работать на большом алюминевом маке и владеть айфоном, желательно последнего поколения. Я работаю на ноутбуке-трансформере с Windows 8, который купил в первый же день продаж Windows 8 в России. Телефоном у меня служит белая Lumia 720 — пока еще на Windows Phone 7.5. Вы не ошибётесь, если предположите, что я люблю Windows. Особенно новый интерфейс Windows, который раньше назывался Метро. Я его нежно люблю и как пользователь, и как дизайнер интерфейсов.

Возвращаясь к нашей компании. Один из основных проектов Парксиса называется «Право.ru». Этот проект в себя включает много всего интересного, но для сегодняшнего нашего разговора нам важна только одна его часть — та, которая является справочно-правовой системой, доступной как в вебе, так и на мобильных устройствах. Теперь и на Windows Phone:

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

Какая сетка?

«Рисуйте по сетке!» — велит нам руководство по дизайну интерфейсов от Microsoft. И с этим невозможно спорить. В мире Windows Phone сетка — основа всего, и всему голова, без неё всё развалится и потеряет смысл. Установив это, перейдем к вопросу: а какая она должна быть?

В официальном руководстве мы можем найти только вот такую иллюстрацию:

Собственно, она даже не является частью руководства, а просто иллюстрирует один из принципов дизайна для Windows Phone на сайте Windows Phone Dev Center. Поскольку здесь нет никаких цифр, и нет непосредственного указания, что именно такую сетку нужно использовать, мы не можем принимать это как руководство к действию. Может это просто так картинка на тему сеток?

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

Вот, например, картинка с сайта Майка Гуса — одного из создателей уникального визуального языка Windows Phone 7:

Здесь мы видим сетку из 6 колонок, а не из 12, как на предыдущей картинке. Но, как вы понимаете, из 6 легко сделать 12 — и наоборот. Так что едва ли мы сильно ошибёмся, если предположим, что здесь изображена точно та же самая сетка, только с пропущенными канавками.

Отдав должное Майку Гусу, перейдем в блог другого инсайдера — Артуро Толедо. Как я понимаю, Артуро работал на Майкрософт в качестве дизайнера-евангелиста. Его сайт – просто кладезь полезной информации для дизайнера интерфейсов для Windows Phone. В первую очередь хочу обратить ваше внимание на цикл статей 24 Weeks of Windows Phone Metro Design. Одинадцатая статья этого цикла посвящена как раз интересующей нас теме, то есть сетке в дизайне для Windows Phone.

Наконец-то тут мы видим все числовые параметры, и даже можем скачать эту сетку в файлах разных форматов:

Если положить рядом картинки с сайта Гуса и из блога Толедо, нетрудно убедиться, что по сути это одна и та же сетка. Если мы проложим через большие квадратики в сетке Гуса дополнительные канавки шириной 12 пикселей, образуются как раз квадратики размером 25×25 пикселей, как в сетке Толедо. Таким образом, мы можем быть на сто процентов уверены, что мы нашли описание той самой сетки, которую следует использовать для дизайна интерфейсов Windows Phone, хотя её почему-то нет в официальных руководствах.

Почему такая сетка?

Итак, квадратные модули размером 25×25 пикселей, и промежутки между ними по 12 пикселей. Скажите, что общего можно найти у этих двух чисел: 25 и 12? Правильный ответ: ничего. Отсутствие у этих чисел общего знаменателя на самом деле обещает нам проблемы, о которых я расскажу чуть попозже. А сейчас давайте попробуем разобраться, откуда взялись такие цифры, потому что выглядят они действительно странно.

Могу предположить, что всё началось с того, что Майк Гус, или кто-то из его коллег, решил положить в основу сетки привычный 12-колонник, проверенный десятилетиями. Как известно, 12 колонок — это самое удобное число колонок, на которое можно что-нибудь разделить. Потому что 12, в свою очередь, делится на 6, на 3, на 4, и на 2. Если предположить, что отступ от краев должен быть в 2 раза больше, чем промежуток между колонками, числовые параметры этой сетки можно описать вот такой формулой:

Где w — ширина экрана, x — ширина колонки, а y — ширина промежутка между колонками.

Может быть, сперва Майк хотел задать отступам размер в 10 пикселей. Лично я начал бы с цифры 10. Но тогда получилась бы дробная ширина колонки — 27 с половиной пикселя. Это, конечно же, недопустимо. Как бы ни малы были бы пиксели на нынешних устройствах, я считаю, нужно относиться к ним с должным уважением. Размеры всех элементов в пикселях должны быть целочисленными. Поэтому следующим шагом мы попробуем сделать промежуток между колонками шириной 12 пикселей, и магическим образом эта формула нам выдает ширину колонки 25. Бинго! Число хотя странное и непонятное по соседству с 12, но хотя бы целое.

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

Вот как эта сетка работает на примере главных экранов Windows Phone 7 и 8:

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

Попытка применить на практике

Вдохновлённый примером работы авторов стиля Метро, я попробовал применить эту магию в дизайне приложения Право.ru для Windows Phone. Главный экран сразу получился очень красивый:

Не могу сказать, что это было сложно, поскольку он практически полностью повторяет главный экран системы Windows Phone 7. Неудивительно, что все элементы удачно легли по сетке.

А вот с экраном ленты новостей возникли сложности:

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

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

Что мы видим? Отдельные шаблоны нарисованы по сетке:

Другие полностью игнорируют сетку:

Прочие следуют сетке лишь частично:

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

Артуро нам поможет

В поисках помощи попробуем опять обратиться к помощи нашего друга Артура Толедо. Там есть три видеоролика, посвященных расположению элементов на экране:

• Part I
• Part II
• Part III

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

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

Видите, что получается у Артуро? Все элементы лежат по сетке, расстояния между блоками увеличены, но теперь они разные! Потому что некоторые блоки прилипли к верхним границам квадратиков сетки, а другие к нижним. Это, конечно же, безобразие. Поэтому следующим шагом Артуро вовсе выключает сетку и делает все вертикальные интервалы между элементами кратными 12 пикселям, то есть 12 и 24 пикселя:

Теперь всё красиво, но сетка к этой красоте уже не имеет прямого отношения.

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

Продолжение следует...

Автор: kichik

Источник