Константин Кичинский: Дизайн приложений в стиле Metro

Запись доклада с конференции Windows 8 Camp с обзором ключевых принципов и концепций дизайна приложений в стиле Metro.

Для приложений очень важен дизайн в широком смысле. Основная системная задача здесь - схожесть дизайна между концепциями различных продуктов одной компании: концепции дизайнеов Windows Phone, Xbox, OS Windows 8 должны быть знакомы пользователю. Для Metro-приложений есть свой собственный язык, который так и называется Metro.

В чем же заключается главная особенность Metro-приложений? Я открываю Metro-приложение на десктоп-устройстве, на компьютере, на планшете - оно занимает полностью все пространства. Там нет окошек, нет кнопок закрытия, нет таких вещей. И на первое место выдвинут именно контент, который пользователь получает. У такого приложения нет никаких кнопочек, типа “открыть” и “закрыть” - есть лишь контент, на котором пользователь может сконцентрироваться. Здесь, действительно, очень важно, чтобы все лишнее и ненужное – все раздражители визуальные, чтобы их максимально убрать и позволить пользователю погрузиться в то, что ему, действительно, нравится.

С точки зрения компоновки приложений – ни в одном из них нет такой вещи, когда все активное пространство чем-то “увешано”. Там очень много свободного пространства, и, на первый взгляд, это может показаться нерациональным. Тем не менее, это важно, потому что, как только вы убираете хром оболочку, если вы используете какую-то привычную схему, есть вероятность, что оно наростится. И здесь очень важно, что за счет свободного пространства выкроить вот эту структуру.

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

Обратите внимание на размер шрифтов, которые вы будете использовать. Представьте себе маркерный список. Если у вас просто список, и вы уберете маркеры и сдвинете все в одну точку, то у вас получится просто каша. Почему? Потому что заголовок не отличим от того, что ниже. Можно делать разную структуру, иерархии просто за счет размера и какие отступы между ними стоят. Мы рекомендуем использовать наборы шрифтов, которые хорошо размещаются по сетке. Важный момент, чтобы в любом случае, когда вы делаете приложение, вы строго себе сказали: «Я использую вот эти 4 (наверное, не больше) размеры шрифтов для таких задач». Потому что обычно, когда начинают что-то делать, что-то подгонять получается так: «Ой, у меня заголовок не влез! Дай-ка я сделаю поменьше, чтобы уместиться в это пространство». И вот вы тут сделали поменьше и тут, и какая-то там плашка стала, например, пятым шрифтом, а потом еще внутри текст вылез. Старайтесь делать так, чтобы количество, используемых шрифтов внутри приложения было постоянным. Ссылочный контент можно выделить именно цветом. Какие-то другие вещи можно насыщенностью шрифта сделать жирным или какими-то другими вещами.

О чем важно помнить? Если вы выставляете шрифты, очень важно, чтобы вы отдавали себе отчет, например, в каких единицах вы будете выставлять. Вы может быть, для себя спроектируете на вот таком небольшом устройстве, и у вас получится, что шрифт, который вы используете для вас нормальный, а завтра у вас приложение из Store скачает приложение ваше и будет смотреть его на большом экране 27 дюймовом. И окажется, что ваши шрифты, если вы их не зафиксировали в пикселях, они будут очень мелкими на нем. Там, конечно, есть какая-то адаптация системы в зависимости от разрешения, которое выставлено. Нужно внимательно смотреть, как будет выглядеть ваше приложение, в том числе кегли шрифтов на различных экранах.

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

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

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

Есть панели, которые выступают сверху и снизу – это панельные приложения, соответственно, верхние и нижние. Почему важно это понимать и использовать? Потому что как только это становится понятным способом решения тех или иных задач между всеми приложениями, пользователь быстро учится. Как только он понимает, для того чтобы сделать настройки приложения, ему достаточно выбрать панель справа или нажать кнопку [settings], в следующем приложении, которое он установит, первое, что он будет делать, он откроет панель и будет искать настройки и если он их там не увидит, то он очень расстроится.

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

Еще один важный момент, о котором стоит помнить. Бывает иногда ситуации, когда вам нужно какое-то частое действие. Некоторые действия имеют более расширенный контекст или наоборот более частый. Если действие, которое вам нужно делать оно очень частое и оно вам часто нужно, то нужно вопрос задать: «А нужно ли его пихать в панель приложения, если его можно было разместить непосредственно на самом приложении?» Как правило, если это одиночное действие, то кнопку можно разместить в само приложение. Почему? Потому что это убирает лишние действия. Вот если таких кнопок пять, то лучше это разместить в панель приложения, чтобы не загромождать экран. Если одна, может быть, две кнопки, можно всегда подумать, где найти правильный баланс. То же самое касается других вещей, контекста. Важно, чтобы пользователь не терял контекст. И в этом смысле есть такая вещь, как всплывающее меню.

Говоря о навигации, важно отметить, что большинство сценариев работы в Metro-приложении ориентировано на то, чтобы сделать приложение для потребления информации. И, как правило, эта информация имеет некоторую структуру. Соответственно, в этом смысле есть некая модель, она имеет ограниченное применение, но каждый раз важно понимать насколько большая ваша иерархия вашего контента. Смысл в чем? Есть главная страница, на которой собраны точки выхода на другие направления. В основе приложения есть блок про политику, блок про спорт, блок про экономику, науку и так далее. Когда все формируется на уровне блоков, то вы смело говорите пользователю, что у нас есть для вас вот это. Дальше он может нажать на политику и попадет в политические новости, дальше он может нажать на конкретную новость и попасть в новости. Существует три уровня иерархии. Соответственно, многие приложения созданы по этой модели, во всяком случае, те, которые предоставляют этот контент. Это не означает, что вы должны делать именно так. Но это хорошая рекомендация для того, чтобы начать, потому что многие пользователи будут ожидать примерно такую модель, если вы выставляете контент. Для вас очень важно, когда вы проектируете приложение четко представлять, какая архитектура уровней требуется при работе с этими приложениями.

Что такое semantic zoom? Есть некоторая иерархия контента. Есть некоторая задача, которая состоит в том, что некоторый контент представляет собой очень много, но это линейная, плоская структура, в которой есть категории. Например, стартовая страница, у меня есть различные блоки плиток – блок с новостями, со значками офисных продуктов, разработки… Все это разная информация, но, тем не менее, я, как пользователь могу ее структурировать. Semantic zoom – это некий метод сжать это представление, отодвинуться далеко и увидеть всю картинку. С точки зрения, если бы я это делал пальцами, я бы просто свел пальцами, и я бы видел всю картинку, все категории, если бы я работал с клавиатурой, я бы мог нажать CTRL+ или CTRL- и увидеть всю мою картинку вот таким вот образом и на удаленном вот этом отодвинутом масштабе я могу над отдельными элементами сделать отдельные операции. Например, кнопу клика я могу назвать каким-нибудь именем. По умолчанию одну плитку перетаскивать было бы неудобно, но вот такую операцию было бы делать удобно.

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

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

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

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

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

О чем важно помнить в приложениях, которые вы разрабатываете? Оно имеет фиксированный минимальный размер 1024х768 пикселей – это минимум, в котором приложение должно работать. Второй момент. Если вы хотите посмотреть, как работает боковая панель, вам нужен экран с размером 1366х768. Третий важный момент – это режим для приложений, который попадает в Маркет, Windows store является обязательным. То есть, ваше приложение должно поддерживать такой режим. Вам нужно целенаправленно проектировать для такого приложения. Третий режим – на ваше усмотрение. Устройство может отслеживать работает оно в портретном или штатном режиме.

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

Про контракты. Как сказал глава нашего отдела: «Windows 8 – это история про веб-приложения». И соответственно, в этом смысле контракты, которые позволяют взаимодействовать приложениям между собой – это очень важный сценарий. И очень важно, чтобы вы подумали для себя, для вашего приложения, какие контракты вам нужны, с какими контрактами, какую информацию вы готовы принимать и с какой информацией готовы делиться. Важный момент – есть некоторый список контрактов, у вас не должно быть цели использовать их всех, чтобы не захламлять список пользователей. С другой стороны, если вы можете добавить дополнительный сервис для пользователей, для всей системы приложения – это очень здорово. Если вы предоставляете какой-нибудь сервис для хранения фотографий, обработки фотографий, и вы можете взять любую фотографию пользователя и пропустить ее через сервис и отдать ему новую фотографию – это прекрасный сервис, и вы можете говорить, что вы являетесь источником изображений, и вы готовы делиться этими изображениями. Пользователи и другие приложения могут это использовать. И, например, когда я хочу отправить какую-то фотографию я могу использовать, как локальное хранилище пользовательских данных, так и приложений, которые предоставляют графику, например, камеры… И это, действительно, очень здорово, потому что вся эта система расширяется.

Есть контракт, который называется поиском, он срабатывает, когда вы начинаете что-то искать. И, соответственно, ваши приложения тоже могут сказать, что внутри них можно искать. В контексте есть две важные вещи, которые желательно, чтобы вы выделяли для себя. Я когда в первый раз увидел формулировку find или search, то меня это тоже несколько смутило. Трудно сказать, в чем разница между find и search. В принципе похожие вещи. Как для себя это нужно разделять? Есть контракт с тем, чтобы искать информацию. Контракт нужно использовать в таком случае, в вашем приложении есть контент, который нужно найти. Есть дополнительная вещь, когда вам нужен поиск. Например, поиск контента внутри приложения, который уже открыт. Например, поиск страницы в документе. Это информация, которая уже у вас на странице, которую пользователь просто не может сориентироваться и найти. В таком случае, когда это контекстный поиск, лучше не использовать search контракт, а использовать кнопку поиска внутри приложения, например, в панели приложения. Контракт лучше использовать целенаправленно.

Про настройки то же самое есть возможность у всех приложений. Например, игрушка. Она была написана на Java сервисе. Одна из вещей, которую они сделали – они интегрировались немного в систему. Если я открою настройки, то я здесь увижу настройки для этого приложения. И что вы можете сделать? Вы можете сказать, какие команды нужно выставить вот в ту панель, которая выезжает, когда нажимаете настройки и дальше нажать на каждую из команд и указать настройки. Но как всегда, чем больше настроек, чем больше их в приложений, тем лучше для пользователя.

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

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

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

Про синхронизацию. Я просто скажу, как это работает. У меня есть планшет и ноутбук. Я поставил на ноутбук систему, настройки, приложения, у меня здесь есть internet explorer – все замечательно. Дальше я понимаю, что мне нужно второе устройство, с которым я буду время от времени работать, которое я буду носить вместо другого устройства. В чем суть? Когда у меня в ноутбуке стоял экран планшета, он в нем обновился: настройки internet explorer, история – она вся здесь синхронизируется. И вы можете сделать, чтобы в ваших приложениях тоже происходила какая-то синхронизация. И это, действительно, очень здорово для пользователя.

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

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

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

В заключение порекомендую вам сайт design.windows.com. Там собраны дизайны, шаблоны фотошопа, чтобы проектировать.