Модуль 1 Новый подход к дизайну пользовательского интерфейса

Модуль 1: Новый подход к дизайну пользовательского интерфейса Windows

Как устроен новый дизайн Windows • • • 2 New Windows UI (Новый дизайн пользовательского интерфейса Windows) – это название языка дизайна корпорации Microsoft. Новый дизайн для Windows основан на современном Швейцарском дизайне, ведущем свою историю с 1950 -х годов и обращающем особое внимание на: минимализм, аккуратность, читабельность текста, простые и красивые элементы.

3

Что еще повлияло на новый дизайн для Windows В интернациональном типографическом стиле сделан акцент на чистоту, читабельность и объективность. Отличительными признаками этого стиля являются применение сетки, шрифты без засечек, выравнивание по левому краю. Этот стиль также предпочитает использование фотографий вместо 4 иллюстраций или рисунков.

Дизайн, основанный на идее дорожных указателей 5

Текст и иллюстративный материал чётко структурированы 6

Компоненты приложений для Windows 8 • Рабочая поверхность (полотно, холст) • Чудо-кнопки: Поиск, Общий доступ, Параметры, Устройства • Управление жестами при взаимодействии с приложением • Панель приложения, содержащая команды для управления приложением 7

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

Чудо-кнопки включают: • • Общий доступ (Share) • Устройства (Devices) • 9 Поиск (Search) Параметры (Setting)

Чудо-кнопки позволяют дизайнерам убрать лишние элементы из приложений, так как являются встроенными элементами ОС. Чудо-кнопки расположены в одном месте, где пользователь может быстро менять параметры поиска и обмена данными. Дизайнерам также не стоит беспокоиться о том, чтобы внедрить эти элементы в свои приложения. 10

Распознавание прикосновений и жестов является неотъемлемой частью платформы Windows 8 и Win. RT-приложений. ОС поддерживает четкий набор жестов и прикосновений. Windows 8 полностью поддерживает работу с мышью и клавиатурой. Это взаимодействие имеет много общих черт с управлением жестами и касаниями, в то же время обеспечивая особый стиль взаимодействия, который знаком пользователям и разработчикам приложений. 11

Панель приложения: только нужные элементы управления 12

Ориентация экрана в Windows 8 Новый дизайн для Windows предусматривает использование новых ориентаций экрана, с которыми дизайнер пользовательских интерфейсов мог не встречаться ранее: • Ландшафтный режим • Режим прикрепленного приложения 13 • Портретный режим

Модуль 2: Основы дизайна с учетом опыта взаимодействия

Что такое опыт взаимодействия? Опыт взаимодействия описывает взаимодействие между • Пользователем • Продуктом • Сервисом

Metro Style Design Шаг 1: Исследования • Bold use of color • Typography • Motion • • • 16 Поиск неудобных для пользователя мест в приложениях Обсуждение приложения в сети Постановка себя на место пользователя

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

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

Создание таблицы историй • • 19 Люди — список людей, которые, возможно, будут использовать ваше приложение. Места – список мест, в которых люди, возможно, будут пользоваться вашим приложением. Деятельность – список того, что люди, возможно, будут делать, используя ваше приложение. Мотивы – почему кто-то будет использовать приложение.

Пример таблицы историй Люди Места Деятельность Мотивы Тренер На скамейке Смотрит игру Хочет всегда быть в курсе, как играют соперники Студент В классе Слушает лекцию Скучает, пытается не заснуть Продавец В зале магазина Ждет покупателей Проверяет результаты матчей, чтобы вечером об этом поговорить с друзьями Официант В ресторане Во время перерыва Следит за результатами Спортсмен (не бейсболист) Дома Пытается устроиться на работу Хочет, чтобы работодатель понял, что он интересуется разными видами спорта 20

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

Мозговой штурм: поиск сценариев Истории о том, как люди будут использовать ваше приложение, и о том, каковы их цели.

Модуль 3: Применение процесса UX к приложениям с новым пользовательским интерфейсом Windows

Выберите приложение • • • 24 Футбол (Soccer) – будет очень хорошим приложением для фанатов футбола. При наличии высокоскоростного интернет-канала они ожидают видеть больше мультимедийного контента – новостей, видеоклипов. Кроме того, фанаты ожидают от подобного приложения возможностей поиска информации об играх, возможность купить билеты через интернет и т. д. Обзор ресторанов (Restaurant Application) – Приложение, с помощью которого пользователь сможет получить информацию о каком-либо ресторане, узнать, принимают ли там кредитные карты, можно ли зарезервировать столик, определить местоположение и средний рейтинг ресторана, построенный по оценкам других пользователей. Поиск автомобилей с пробегом (Used Car Finder) – хорошее приложение для тех, кто ищет подержанный автомобиль. Приложение должно помочь пользователю найти такой автомобиль, который ему нужен – в необходимом ему состоянии, по подходящей цене. Кроме того, нужно предусмотреть поиск по регионам.

Сформулируйте высказывание “best-at” Выражение “best-at” – это не какой-то случайный абзац или набор строк, описывающий функции. Это хорошо продуманное выражение, которое: • состоит из одного предложения; • отражает специфику приложения; • является уникальным. 25

Пример приложения Food Truck • 26 Приложение Food Truck - лучшее в своем классе, позволяющее искать палатки быстрого питания с самым высоким рейтингом и сообщать мне, когда я нахожусь рядом с какой-нибудь из них; позволяет делиться с друзьями комментариями и оценками палаток.

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

Примеры сценариев • • • 28 Поиск ближайшего места, где можно было бы перекусить. Просмотр разных палаток быстрого питания. Поиск палаток, которые рекомендуют другие пользователи. Комментирование. Чат с хозяевами заведений. Просмотр состава и калорийности продуктов. Определение местоположения палаток по карте. Возможность поиска по типу пищи. Желание всегда знать, где расположены любимые палатки. Поиск и сортировка найденных палаток.

Отбросьте функции, не являющиеся частью сценариев • Сценарии – это цели, которых пользователь хочет достичь, используя приложение. • Функции – это средства достижения цели, но не сами цели. 29

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

Назначение приоритетов и объединение сценариев • • • 31 Совместите ваши сценарии с теми, в которых, скорее всего, может оказаться пользователь. Расположите сценарии в порядке важности их для пользователя. Оставшиеся сценарии и станут вашим приложением и должны быть доступны пользователю как можно скорее после запуска приложения.

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

Придумайте наглядные имена для частей приложения, помните, что их всегда можно изменить. Где мои палатки? • • Постоянно показывать на карте расположение избранных палаток. Я голоден • • Поиск ближайшего места, где можно было бы перекусить. Отличные палатки • • Поиск палаток, которые рекомендуют другие пользователи. Хочется чего-то нового • • 33 Просмотр разных палаток быстрого питания; Возможность поиска по типу пищи.

Важность центрального узла (хаба) • 34 Хаб — это начальная точка работы с приложением, при взгляде на которую пользователю сразу должно быть понятно, зачем ему это приложение. Это не просто таблица с содержимым: хаб показывает, чем ваше приложение отличается от конкурентов. Хаб должен быть построен таким образом, чтобы пользователь легко мог исследовать приложение. Насыщенное содержимое хаба представлено в горизонтальных прокручиваемых блоках, что позволяет пользователю легко понять, какого рода информация ему доступна.

Зарисовка хаба 35

Хаб (hub), разделы (Sections) и страницы детального просмотра (Details) 36 6/29/2011 MICROSOFT CONFIDENTIAL

Черновой набросок архитектуры приложения • Никогда не начинайте делать это на компьютере • Будьте готовы отказаться от неудачного варианта • Постоянно 37

Отдайте предпочтение грубым наброскам 38

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

Не нужно быть художником, чтобы расположить элементы на экране 40

Создание макетов Используйте бумагу или приложение, например, Power. Point, Sketch. Flow, Balsamiq или Visio 41

Простой бумажный макет – это очень хорошее начало 42

Макет, созданный с помощью Microsoft Sketch. Flow 43

Создание макета дизайна поможет вам лучше понять взаимодействия пользователя с приложением.

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

Документируйте каждый вариант взаимодействия 46

Модуль 4: Знакомство с принципом нового дизайна Microsoft: Делай больше с меньшими усилиями

Помним о высказывании “best-at” • 48 «Приложение Food Truck - лучшее в своем классе, позволяющее искать палатки быстрого питания с самым высоким рейтингом и сообщать мне, когда я нахожусь рядом с какой-нибудь из них; позволяет делиться с друзьями комментариями и оценками палаток. »

Помните о сценариях • • 49 Где мои палатки? Постоянно показывать на карте расположение избранных палаток. Я голоден Поиск ближайшего места, где можно было бы перекусить. Отличные палатки Поиск палаток, которые рекомендуют другие пользователи. Хочется чего-то нового Просмотр разных палаток быстрого питания; Возможность поиска по типу пищи.

Придумываем функции • • • 50 Поиск заведений Поиск еды по меню Поиск друзей Отбор по категориям пищи Отбор по местоположению Отбор по оценкам других пользователей Отбор по дате Возможность прочитать меню Возможность поставить заведению оценку Возможность оставлять комментарии • • Возможность читать комментарии • Карта с маркерами • Навигация Возможность узнать контактную информацию • заведения (электронная почта, юридический адрес) Возможность просматривать • галереи фотографий блюд • Посмотреть на карте или в виде списка ближайшие • заведения Добавить заведение в избранное Поиск ближайшего заведения Оповещать, когда я нахожусь рядом с заведением из избранного Поместить на начальный экран Добавить фото Возможность написать рецензию Определить моё местоположение на карте

Каждая функция дополняет и улучшает сценарий Каждая функция будет использоваться практически всеми пользователями приложения Функции должны отражать специфику приложения

Модуль 5: Организация соответствия функций сценарию

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

Пример Food Truck: Найти ближайшее заведение 54

Команды: Глобальные против контекстных • Правая сторона панели приложения обычно резервируется для глобальных (общих) команд. • Вы можете сгруппировать вместе команды выбора, такие, как Обрезать / Удалить /Прикрепить фото с командами Выбрать все / Очистить выбор. • Если слева уже есть команды, тогда следует добавить другие команды, отделив их разделителем. 55

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

Команды на полотне 57

Пример раздела Где мои палатки? 58

Группировка похожих команд в одно меню • Если вы не можете свести все команды в панели приложения в виде отдельных кнопок, сгруппируйте их и поместите в меню, которые открываются кнопками на панели. 59

Модуль 6: Знакомство с принципом нового дизайна Microsoft: Мастерством стоит гордиться

Роль типографики в новом дизайне для Windows • • 61 Сейчас существует огромное количество шрифтов, с одной стороны это может быть хорошо, но с другой, если вы не опытный дизайнер, плохо. Различные характеристики типов шрифтов включают в себя высоту символов, элементы, выходящие за базовую линию сверху и снизу. Все эти детали очень важны при проектировании интерфейсов современных приложений.

Рекомендованное использование шрифтов: • • • 62 Segoe UI – для элементов пользовательского интерфейса, например, кнопок. Calibri – текст, который пользователь читает и пишет. Cambria – большие блоки текста, например, статьи. Segoe UI (42 pt) Calibri (42 pt) Cambria (42 pt)

Постоянство использования шрифтов является ключевым элементом дизайна Необходимо использовать постоянный набор шрифтов. Win. RT-приложения работают с экранами различными по размерам и разрешениям. Стандартная раскладка по сетке лучше всего сочетается со следующими комбинациями типа шрифта, его размера и жирности. Все они основаны на Segoe UI. Подобные комбинации называются наборами параметров шрифтов (type ramp). 63

Обозначение значимости содержимого с помощью размера текста • • • 64 Значение текста в Moden UI возрастает, так как мы убираем ненужные элементы интерфейса. С помощью всего лишь четырех размеров вы можете обозначить значимость текста. Например, когда каждый последующий шрифт меньше предыдущего в 2 раза, вы с легкостью определите разницу.

Обозначение значимости содержимого с помощью размера текста 65

Сетка в новом дизайне Microsoft состоит из частей и подчастей 66

Дизайн по сетке с использованием пропорций 67

Основы расположения групп объектов При разделении большой группы данных на секции нужно разделять секции пустым пространством в 10 пикселей. В любом случае необходимо разделять объекты количеством пикселей, которое кратно 5. 68

Разделители шириной в 5 пикселей 69

Узнаваемый стиль Windows 70

Стиль Windows очень удобен в использовании. Например, когда пользователь в первый раз устанавливает приложение, ему не нужно учиться, как по нему перемещаться, поскольку этот процесс одинаков во всех Win. RT-приложениях. Стиль Windows легко узнаваем даже в совершенно разных приложениях. Единообразные параметры для верхней, левой и нижней границы формируют «С» -образный профиль, визуально выделяемый в Win. RTприложениях. 71

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

Сетка позволяет вам проявить креативность 73

Сетка позволяет вам проявить креативность 74

Модуль 7: Стать быстрым, подвижным и подлинно цифровым

Язык создания Win. RT-приложений включает анимации • Все анимации имеют некоторую индивидуальность; возможно, они медлительны, непредсказуемы или двусмысленны. Библиотека Windows содержит множество ясных и осмысленных анимаций, они помогают достичь цели. • Анимации Windows созданы для привлечения только необходимого внимания. По сути, если пользователь подсознательно заметил анимацию, то она сделала свое дело: помогла ему в понимании чего-либо. 76

Рекомендации для встраивания анимации • Анимации явно показывают на чем сфокусироваться (в контенте). • Анимации целенаправленны, а не просто отвлекают • Анимации придают уверенность в понимании того что произошло или произойдет • 77 Анимации делают акцент на том, как работает система

Анимации, встроенные в Windows 8 Навигация в приложении Выделение Переход страницы (Enter Page / Exit Page) Анимация курсора Анимация содержимого Выбор и отмена прокруткой (Swipe Select / Swipe Переход содержимого (Enter Content / Exit Content) Развернуть/Свернуть (Expand / Collapse) Deselect) Подсказка прокрутки (Swipe Reveal) Изменение позиции (Reposition) Показать или скрыть вспомогательный интерфейс Плавный переход (Crossfade) Показать / скрыть элементы пользовательского Появление / Исчезновение (Fade In / Fade Out) Считывание (Peek) Обновление индикатора события (Update Badge) Показать / Скрыть (Reveal / Hide) 78 интерфейса по краям (Show Edge UI / Hide Edge UI) Показать панели / Скрыть панели (Show Panel / Hide Panel) Показать всплывающее окно / Скрыть всплывающее окно (Show Pop Up / Hide Pop Up)

Разработка для сенсорного экрана Устройства с сенсорным экраном на Windows 8 имеют базовый набор жестов, с которыми вам необходимо ознакомиться Нажатие с удержанием для вывода информации 79 Касание для основного действия Сжатие и растяжение для изменения масштаба Скольжение для сдвига Скольжение от края устройства Скольжение для выбора Поворот для вращения

Рекомендации для размеров элемента касания Ширина от 5 до 9 мм является 7 мм = 40 пикселов 2 мм отступ (10 пикселов) между целями минимальной для целевого элемента касания. Размер в 7 мм равен 40 пикселям. При использовании двух элементов рядом необходимо оставить 10 пикселов между ними, чтобы исключить случайное касание. 80

Эргономика В отличие от настольного компьютера, сенсорные устройства мобильны и часто используются в различных положениях. 81

Загораживание Возникает, когда руки или пальцы пользователя закрывают важные области экрана 82

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

Все сценарии охватить не удастся Оцените степень использования вашего приложения в предполагаемом основном сценарии. Скорее всего, полностью избавиться от загораживания не удастся, но можно постараться минимизировать эффект. 84

Всплывающие подсказки – простой и эффективный метод исключения загораживания Кроме оптимизации расположения элементов, всплывающие контекстные подсказки при нажатии и удержании объекта – простое решение проблемы загораживания 85

Пользователь вызывает семантическое масштабирование жестом сжатия 86

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

Что означает быть подлинно цифровым vs. 88

Модуль 8: Использование чудо -кнопок и контрактов

Как работает чудо-кнопка Поиск Когда пользователь нажимает на значок поиска, открывается панель поиска, в которой расположена строка ввода запроса. 90

Улучшаем опыт взаимодействия с приложением, используя чудо-кнопку Поиск Когда пользователь нажимает значок Поиск и вводит в строку ввода запрос, появляются варианты автозаполнения запроса. Эта возможность поддерживается основным приложением в том случае, если оно реализует контракт Поиск (Search). Выступая в качестве дизайнера, вы можете взаимодействовать с разработчиком для реализации подобных возможностей поиска. Помните, что приложение может предоставить два типа автозаполнения поискового 91 запроса.

Использование чудо-кнопки Общий доступ Ваше приложение может стать источником или приемником данных. Работая с ним в качестве источника данных, пользователь может выбрать контент этого приложения для передачи, после чего – взаимодействовать уже с приложениемприемником, например, с программой Почта (Mail). Кроме того, ваше приложение может выступать в роли приемника данных – приложением, в которое пользователь может отправлять данные из других приложений. 92

Модуль 9: Живые плитки и уведомления

Живые плитки и уведомления — уникальный способ привлечения внимания пользователя к приложению 94

Многоцелевой шаблон – только текст 95

Многоцелевой шаблон – сочетание текста и картинки 96

Многоцелевой шаблон – с квадратным фото 97

Эффект погружения – все фотографии для приложений, работающих с фото 98

Основы работы плитки • Плитки являются изображением ваших приложений на начальном экране. • Плитка считается «закрепленной» , если размещена на начальном экране. Кликнув по соответствующей плитке или прикоснувшись к экрану сенсорного устройства, можно запустить приложение. Содержание плиток может постоянно обновляться и/или показывать информацию в режиме реального времени для пользователя. 99

Плитки обладают свойствами циклического обновления и быстрого просмотра Цикл обеспечивает показ до пяти разных по содержанию слайдов. 100

Плитки обладают свойствами циклического обновления и быстрого просмотра Функция «быстрый просмотр» позволяет делить содержание плитки на несколько частей. 101

Индикаторы событий плиток Индикатор отображается в нижнем правом углу иконки и показывает обновленный статус, например, количество полученных сообщений на электронную почту. В изображенном примере число « 12» означает количество сообщений. 102

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

Что не следует делать с плитками? • Избегайте избыточности информации. • Нежелательны плитки, подталкивающие пользователя к действиям. • Не используйте плитки в качестве рекламы. • Не злоупотребляйте использованием функции быстрого просмотра и анимацией. 104

Основные принципы брендинга Так как плитка – это «парадный подъезд» вашего приложения, вам следует использовать изображение, выводимое по умолчанию на плитке, чтобы отразить бренд вашего приложения, обычно – как фон для логотипа приложения. Разработайте квадратный и прямоугольный варианты плитки. 105

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

Модуль 10: Проектирование для экранов, различных по размеру и разрешению

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

Разработка макетов для экранов с различными размерами 109

Адаптивный макет применяет медиа-запросы для использования стилей, соответствующих возможностям экрана 110

Адаптивный макет заставляет вас думать о пропорциях С точки зрения разработки, хорошей новостью является то, что технические детали для настраиваемого макета приложения для Магазина Windows, в основном, не требуют серьезного вмешательства, функционируя по умолчанию. Однако, существует несколько основных положений, которые необходимо учитывать: • Минимальное разрешение в Win. RT-приложении — 1024 х 768. • Рекомендуемый размер для начала разработки — 1366 х 768 111

112

113

114

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

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

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

118

Принципы для прикрепленного режима просмотра • Приспособьте ваш макет для прикрепленного режима (один столбец, шириной 320 пикселей) • Сохраните контекст и состояние приложения • Стремитесь к сохранению функциональности приложения • Позвольте пользователю контролировать ситуацию 119

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

Модуль 11: Отправка приложения в Windows Store

Сервис Windows Store (Магазин Windows) предоставляет возможность покупки и установки приложений в Windows 8. • Простота, безопасность и последовательность покупки приложений • Чтобы ваше приложение появилось в этом сервисе, необходимо выполнить следующие шаги… 122

Ваше приложение в Windows Store • Зарегистрируйтесь в качестве разработчика в Магазине Windows https: //appdev. microsoft. com/Store. Portals/ 123

Ваше приложение в Windows Store • Зарегистрируйтесь в качестве разработчика в Магазине Windows • Создайте значки и снимки экрана для вашего приложения • Скриншоты должны отображать функциональность вашего приложения 124

Ваше приложение в Windows Store • Зарегистрируйтесь в качестве разработчика в Магазине Windows • Создайте значки и скриншоты для приложения • Скриншоты должны отображать функциональность приложения • Logo 150 x 150 Wide Logo 310 x 150 Необходимо создать несколько иконок Small Logo 30 x 30 125

Ваше приложение в Windows Store • Зарегистрируйтесь в качестве разработчика в Магазине Windows • Создайте значки и скриншоты Promotional Images • • Необходимо создать несколько значков • 126 Скриншоты должны отображать функциональность приложения Также необходимо создать несколько рекламных баннеров приложения 414 x 480 846 x 468 558 x 756 414 x 468

Ваше приложение в Windows Store • Зарегистрируйтесь в качестве разработчика в Магазине Windows • Создайте значки и скриншоты • Необходимо сертифицировать приложение • Сертификация гарантирует соответствие каждого приложения официальным требованиям сертификации 127

Монетизация Существует несколько способов заработка на приложениях. • Платные приложения • Пользователь должен заплатить за использование приложения после того, как скачал установочный дистрибутив. Цену нужно указывать при отправке приложения в Магазин Windows. • Продажи внутри приложения • • 128 Пользователь должен платить за доступ к определенным функциям приложения. Размещение рекламы в приложении • Пользователь просматривает рекламу в приложении, за счет этого вы получаете доход за тысячу рекламных просмотров (e. PCM, цена за тысячу просмотров).

Бесплатные демо-версии Многие пользователи предпочитают приложения с демо-версией ( «сначала попробуй, потом купи» ). Магазин Windows предлагает бесплатные демоверсии, в которых доступны следующие возможности ограничений: • бесплатные Демо-версии с ограничением по времени • бесплатные Демо-версии с ограничением функций* • бесплатные Демо-версии с включенными функциями* 129