Внешний вид приложения как называется

Обновлено: 07.01.2025

В первой лекции отмечалось, что приложение для магазина Windows разрабатывается на основе технического задания (пусть даже выданного самому себе), которое определяет функционал приложения, и в том числе его интерфейс . Интерфейс приложения для Windows Store состоит из нескольких частей:

плитка с уведомлениями;
экран-заставка;
первый запуск;
домашняя страница.

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

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

Экран-заставка - используется при инициализации приложения. Должен загружаться как можно быстрее и оставаться на экране только на время, необходимое для инициализации. В экране-заставке рекомендуется отражать идею приложения.

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

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

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

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

XAML (eXtensible Application Markup Language ) представляет собой декларативный язык , построенный на базе XML . Основное назначение этого языка состоит в описании интерфейса приложения. XAML .

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

Рассмотрим аналогичный код на XAML :

Систаксис языка XAML достаточно подробно рассмотрен в MSDN , а также я ряде других источников и в данном курсе не рассматривается.

Рассмотрим пример построения дизайна и структуры простейшего приложения - информационного справочника о вузе. Подробно пример рассматривается в практической части. Остановится на основных моментах.

Первоначально необходимо определить внешний вид данного приложения.

Создадим разметку и зададим управляющие действия для кнопок. Рассмотрим пример создания данного приложения на основе нескольких примеров и основных функций.

Создание границ для заголовков и меню .

Создание кнопок управления.

Создание текстовых полей для ввода / вывода информации

Создание простейшей галереи.

Теперь рассмотрим непосредственно процесс хранения и загрузки заметок. В качестве базы данных будет использоваться xml файл , доступ к которому будет осуществляться с использованием библиотеки Linq. В xml файле будет один основной элемент noties - так называемый Root элемент. Внутри него будут располагаться элементы messadges с двумя основными свойствами - name (будет отображать принадлежность к конкретной странице) и value (будет содержать в себе текст заметки).

При этом, когда пользователь нажмет на соответствующую кнопку - должна произойти загрузка содержимого заметки в текстовое поле .

Рассмотрим функцию, которая получает и записывает в текстовое поле значение заметки.

Рассмотрим данную функцию подробнее:

name_of_search - содержит в тебе ключевое слово для заметки. Т.е. передача в качестве параметра функции значения "managment.rektor" позволит загрузить содержимое заметки о ректоре ТГТУ.
ResultBox.Text = ""; - обнуление текстового поля.
ResultBox.SelectionStart = 0; - указываем первоначальное положение курсора и полос прокрутки.
string fileName = "Assets/Data.xml"; - определяем имя файла, содержащего данные.
XDocument doc = XDocument.Load(fileName); - загрузка текущего документа.
IEnumerable<XElement> content = doc.Root.Elements("messadge") .Where(t => t.Attribute("name").Value == name_of_search).ToList(); - основная строка в данном приложении. С ее использованием осуществляется поиск заметки, атрибут name которой совпадает со значением, переданным пользователем. Затем происходит формирования списка со всеми возможными результатами поиска.
foreach (XElement values in content) result += values.Attribute("value").Value.ToString(); - осуществляется проход по всем существующим (наиденным) элементам, полученным в результате поиска и получение значение заметки.
Оставшаяся часть - производит разбиение строки в соответствии с разделителями и вывод на экран.

Краткие итоги

В лекции определены особенности интерфейса приложений для Windows Store . Приведен пример построения простейшего приложения - справочника. Для его реализации используется язык XAML

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

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

150 тысяч новых приложений регистрируют в App Store и Google Play каждый месяц. Привлечь внимание пользователей и добиться коммерческого успеха помогает продуманный дизайн мобильных приложений. Так, согласно исследованию McKinsey, в компаниях с хорошим дизайном рост выручки больше на треть.

О том, какие знания и навыки нужны дизайнеру приложений, как создаётся мобильное приложение, что нужно учитывать при разработке, рассказывает Алексей Комаров, UX/UI-дизайнер в IBM и преподаватель Нетологии на курсе «Дизайнер мобильных приложений».

Алексей Комаров

UX/UI-дизайнер в IBM

светлана третяк

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

Давайте разбираться с самого начала.

Что нужно знать мобильному дизайнеру

Колористика

— искусство сочетания цветов.

Например, вместе не рекомендуется использовать зелёный и красный — насыщенные цвета, которые как бы перекрикивают друг друга. Получается вырвиглазный интерфейс, отсутствует контрастность и объекты трудно различить на экране. Для несочетаемых цветов дизайнеры даже придумали определение «зелубой» (зелёный + голубой).

Для подбора цвета часто используют специальные палитры или цветовые круги — например, Material palette, Adobe Color.

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

Сервис Coolors позволяет создавать цветовую палитру по фото

Типографика

— умение оформлять текст при помощи набора и вёрстки.

По сути дизайн — это оформление контента, 80% которого передаётся через текст. Любая информация располагается в виде иерархии — главная и второстепенная части, которые выделяются с помощью определённой стилизации текста.

Например, уровни заголовков — заголовок 1-го или 2-го уровня — различаются по размеру шрифта и служат навигацией, а также делают материал структурированным.

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

Композиция

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

Если говорить о том, как колористика, типографика и композиция влияют на поведение пользователя и эффективность интерфейса, то стоит упомянуть про четыре типа нагрузок.

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

⇒ Чем больше мозгу требуется усилий для определения объекта, тем больше мы устаём.

Визуальные нагрузки — усилия для определения объекта на экране по визуальным признакам (круг, небо, кошка) и выделения его среди других.

⇒ Чем больше объектов в интерфейсе, тем больше мы устаём.

Моторные нагрузки — возникают при физическом контакте с интерфейсом: свайп, тап и другие.

⇒ Чем больше жестов управления интерфейсом и чем они сложнее, тем больше мы устаём.

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

⇒ Чем больше отвлекающих моментов, тем больше мы пытаемся сосредоточиться и быстрее устаём.

Все типы нагрузок идут в связке, влияя друг на друга.

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

Инструменты

Из графических редакторов сейчас популярны Figma, Sketch или Adobe XD.

Figma

Кросс-платформенный онлайн-редактор, который работает на Windows, macOS, Linux. В нём можно работать всей командой, в том числе с заказчиками. Бесплатный для одного пользователя и платный для работы с командой, если нужно видеть все действия команды, а не только за последние 30 дней.

Sketch

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

Adobe XD

Приложение Adobe для проектирования интерфейсов. Плюсы и минусы аналогичны Sketch, кроме того, что в Adobe XD есть возможность создавать голосовые прототипы при помощи Amazon Alexa. XD заметно менее популярен по сравнению с Figma и Sketch.

Графические редакторы достаточно похожи, поэтому, если освоить один инструмент, то изучение другого не займёт много времени.

Из других инструментов дизайнера можно отметить:

В этом сервисе удобно делать брейнстормы, обсуждения, прорабатывать гипотезы, проектировать навигацию с помощью mindmap и создавать Customer Journey Map.

Сервисы для создания прототипов

Помимо встроенного прототипирования в Figma, Sketch или Adobe XD дополнительно используют такие решения, как InVision, Marvel, ProtoPie, Flinto, Principle for Mac.

Цели и задачи разработки

Дизайнер должен понимать, какие задачи у бизнеса и для кого предназначено приложение.

Приложение — это инструмент бизнеса со своими целями и задачами.

Для примера рассмотрим мобильное приложение банка.

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

контролировать свои расходы.

создать дистанционный канал поддержки клиентов и увеличить продажи банковских продуктов.

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

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

Бывает, что ресурсы безрезультатно тратятся не только на бесполезные фичи, но и на приложение.

К слову, если интересуетесь культурой стартапов, в целом (есть утрированные моменты) она хорошо показана в сериале «Кремниевая долина». Его рекомендует к просмотру и Билл Гейтс: «Продюсеры и сценаристы проводят много исследований перед каждым новым сезоном шоу. В прошлом году я был одним из нескольких людей, с которыми они встретились, чтобы поговорить об истории отрасли и рассказать о некоторых своих идеях для пятого сезона».

Гейтс ассоциирует себя с главным героем «Кремниевой долины» Ричардом Хендриксом и говорит, что ситуация в сфере стартапов похожа на показанную в сериале (твит 2018 года, но актуально и сегодня)

Soft skills

Коммуникационные навыки

Например, больше половины рабочего времени я общаюсь, согласовываю, обсуждаю. При этом стоит помнить, что непрерывное общение может привести к профессиональному выгоранию, поэтому периодически нужно прислушиваться к себе.

Правильная реакция на критику

Дизайнеров постоянно критикуют, и многие на это обижаются.

Если критикуют, то критикуют работу, а не дизайнера. Важно отделять и не принимать близко к сердцу.

Главное — получать конструктивную критику. Если сказали, что плохо, но не сказали почему, то это неаргументированное мнение, на которое не нужно реагировать.

Относитесь ко всему с юмором — это помогает в том числе трансформировать негатив в хорошее настроение ?

К примеру, когда я работал в крупной финансовой компании, менеджер попросила меня сделать кнопки жёлтыми (этот цвет не корпоративный). На мой вопрос, почему именно таким цветом, менеджер пояснила, что на курсах, которые она посещала, сказали, что «жёлтые кнопки привлекают внимание, поэтому, например, в IKEA выходы жёлтые». То, что в IKEA жёлтый — один из корпоративных цветов, которые логично использовали в оформлении магазина, на курсах, видимо, забыли сказать ¯\_(ツ)_/¯

Mindmap — диаграмма связей, интеллект-карта, карта мыслей или ассоциативная карта.

Это способ изображения процесса общего системного мышления с помощью схем.

Что нужно учитывать при разработке интерфейса

Взаимодействие с пользователями

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

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

Смартфоны меньше компьютеров и ноутбуков, а сеансы использования приложений короткие, но частые — всё это нужно учитывать. На экране приложения должно быть минимум информации — только полезная. Пользователь должен быстро получать доступ к контенту. Возьмём, к примеру, Яндекс.Почту. Если мы зайдём в браузерную версию с компьютера, то увидим много дополнительной информации. На телефоне видим только письма, остальное скрыто и показывается по требованию (нажатию) — удобно.

Во многом благодаря желанию быстро и удобно получать информацию и появились мобильные приложения.

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

Нюансы мобильных платформ

Особенности создания интерфейсов для приложений описаны в гайдлайнах мобильных платформ — Human Interface Guidelines для iOS (Apple) и Material Design для Android (Google).

В создании приложений на платформах Android и iOS есть различия. Например, в паттернах поведения: в iOS меню показывается целиком, а в Android «гамбургерное» меню (три полоски); в разном управлении: в Android три кнопки («назад», «домой» и «последние приложения»), в iOS только «домой».

Грань с каждым обновлением постепенно стирается, но пока ограничения существуют. К примеру, модельный ряд iOS достаточно скромен, а в Android большое количество устройств да ещё и от разных производителей. Из-за этого при разработке на Android тяжелее отлаживать интерфейс — на это уходит много времени.

В основном Android доступнее, чем iOS. И из-за дешёвых компонентов встаёт вопрос качества — на плохой матрице экрана страдает цветопередача, а с плохим сенсором тяжелее попадать на кнопки (низкая чувствительность).

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

Стоимость «экономии» оценить в вакууме сложно — зависит от компании, бизнес-модели, рынка. Немаловажно и то, что для iOS характерна одна модель поведения пользователей, для Android — другая.

Если говорить о средних значениях, то давайте прикинем. Средняя зарплата разработчика — 150 тысяч рублей. В крупной компании приложение могут делать год, но мы будем ориентироваться на агентства, которые делают приложение примерно 3 месяца. Для Android нужны 2 программиста, для iOS — 1 (разработка примерно одинаковая по трудозатратам, но больше нужно отлаживать в Android).

Если просчитались с разработкой приложения на iOS, то это 150 000 рублей х 1 разработчик х 3 месяца = 450 000 рублей, на Android — 900 000 рублей. И это только расходы на зарплатный фонд — без учёта упущенной выгоды, репутационных потерь и снижения лояльности пользователей.

Адаптация контента

Не нужно пытаться уместить контент сайта в десктопной версии на компьютере или ноутбуке в маленький экран смартфона. При адаптации интерфейса под телефон контент приоритезируют и оставляют только самое важное.

Длинные процессы

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

Профессия

Дизайнер
мобильных приложений

Узнать больше

Сможете самостоятельно разрабатывать дизайн мобильных приложений и руководить созданием интерфейсов мобильных продуктов
Работайте над своим проектом или выберите учебный
Каждый выпускник получает помощь и поддержку Центра развития карьеры Нетологии

Итак, мы разобрали базу для создания визуальной части интерфейса — дизайна. А теперь рассмотрим непосредственно процесс разработки приложений.

Этапы создания мобильного приложения

Исследование

Погружаемся в цели и задачи бизнеса.

Изучаем целевую аудиторию.

Исследования делятся на количественные и качественные.

Количественные исследования отвечают на вопросы «сколько?», «как часто?». Обычно их проводят при помощи опросов, анкетирования, телефонных интервью.

Качественные отвечают на вопросы «кто?», «почему?». Получают информацию в индивидуальных глубинных интервью, групповых дискуссиях (фокус-группах) или прибегая к экспертным оценкам.

Если приложение делается с нуля, то сначала с помощью комбинации методов проводят качественные исследования, потом количественные.

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

Дальше проводим конкурентный анализ, изучаем другие каналы коммуникации бизнеса: сайт, презентации, реклама, при наличии — офлайн-точки.

Это нужно для правильного позиционирования бизнеса в приложении. У каждого бренда или компании есть свой язык общения с клиентом. Через каналы коммуникации бренд транслирует посылы аудитории. Например, слоган Nike «Just do it» отражается в простом, спортивно-повседневном стиле, в котором оформлены магазины и сайты компании.

Аналитики предварительно пропускают через себя требования бизнеса и упаковывают это в понятные модели: mindmap, схемы бизнес-процессов, типичные пользовательские пути и другое, — создают артефакты аналитики.

На основе вышеуказанных артефактов дизайнер принимает решения.

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

Если каждую неделю приходят новые требования, то бизнес-заказчик не знает или не понимает, что на самом деле он хочет. А если нет чётких критериев приёмки, будет сложно показывать результат работы. Можно попасть в петлю непрекращающихся правок и постоянных переделок.

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

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

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

Проектирование

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

Чтобы проверить эту логику на практике, дизайнер собирает черновик приложения. Там он тестирует связку экранов, проверяет, что компоненты интерфейса расположены в правильном месте и понятно, как с ними взаимодействовать: что-то нужно нажать, потянуть, выделить или удалить.

На этом этапе важно не переходить в визуальный дизайн и не углубляться в вопросы из серии «какого цвета будет кнопка» или «какие сделать скругления у картинки».

Для проектирования чаще всего используют чёрно-белые прототипы — вайрфреймы, которые создаются в графическом редакторе.

Перед вайрфреймами некоторые создают бумажные прототипы — от руки делают эскиз будущего приложения на бумаге.

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

Бумага и карандаш — такие же инструменты дизайнера, как и графический редактор.

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

Между идеей в голове и её реализацией получается много посредников: интерфейс графического редактора, экран монитора, клавиатура, мышка. А при работе с бумагой идея быстрее становится осязаемой.

Изменить внешний вид любого приложения Андроид можно с помощью Resflux. Я думаю, нет необходимости в очередной раз расписывать достоинства операционной системы Android – они всем известны, и одним из самых значимых из них, конечно же, является возможность настройки её внешнего вида с помощью различных приложений, виджетов и тем.

Мало того – если вы всегда мечтали иметь возможность менять внешний вид любых приложений, добавив, например, в звонилку логотип своего мобильного оператора, изменить цвет цифр в часах на розовый, или - перевести любимое приложение на «падонкафский изыг», то теперь вам не нужно осваивать азы создания Android приложений: всё это вы можете сделать с помощью одного единственного модуля Xposed framework, под наименованием Resflux.

Как многие из вас уже догадались, для этого нам, прежде всего, понадобится root доступ на смартфоне или планшете, а также – предустановленный Xposed framework.

Как установить Xposed framework и его модули вы можете почитать в этом материале . После того, как фреймворк и модуль Resflux (скачать который можно или из самого Xposed или отсюда ) будут установлены, можно будет приступать к работе.

Запустив Resflux, тапните по кнопке «Laboratory», для того, чтобы создать новые темы для ваших приложений или изменить внешний вид её кнопок, надписей и других ресурсов. Кнопки Import и Export вам понадобятся позже, когда наберетесь опыта.

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

Следующий шаг займет некоторое время, которое понадобится Resflux, чтобы проанализировать ваше приложение и «разобрать» его на части. Как только анализ будет закончен, вы увидите экран подобный правому скриншоту:

Пять кнопок, расположенных сверху имеют следующее назначение (слева направо):

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

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

3. Кнопка замены цветов позволяет просматривать и менять цвет различных элементов в приложениях.

4. и 5. Кнопки для редактирования различных значений – булевых и числовых, таких как, например время различных событий и действий.

При работе с Resflux вы можете не переживать, о том, что вы что-нибудь испортите неумелыми действиями: каждый редактируемый элемент можно вернуть к первоначальному состоянию с помощью кнопки сброса («Reset»).

Вернемся к главному экрану приложения. Кнопка «Export» предназначена для экспортирования (сохранения) измененного вами приложения в виде, пригодном для использования на других устройствах, публикации для общего пользования и т.п. Соответственно, кнопка «Import» понадобится для импортирования apk файлов.

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

Список приложений в меню "Пуск"
Панель задач и диспетчер задач
Плитки приложений
Экран-заставка приложения
В Microsoft Store

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

(Эта статья посвящена значкам, которые представляют само приложение; общие рекомендации по значкам см. в статье Значки.)

Типы значков, расположения и масштабные коэффициенты

По умолчанию Visual Studio сохраняет ваши активы значков в подкаталог активов. Вот список различных типов значков с указанием, где они появляются и как называются.

Имя значка	Отображается в	Имя файла актива
Маленькая плитка	Меню "Пуск"	SmallTile.jpg
Средняя плитка	Меню "Пуск", список Microsoft Store*	Square150x150Logo.jpg
Широкая плитка	Меню "Пуск"	Wide310x150Logo.PNG
Большая плитка	Меню "Пуск", список Microsoft Store*	LargeTile.jpg
Значок приложения	Список приложений в меню "Пуск", панель задач, диспетчер задач	Square44x44Logo.jpg
Экран-заставка	Экран-заставка приложения	SplashScreen.jpg
Эмблема	Плитки приложений	BadgeLogo.jpg
Логотип упаковки / логотип Store	Установщик приложений, Центр партнеров, параметр "Сообщить о приложении" в Store, параметр "Написать отзыв" в Store	StoreLogo.jpg

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

Коэффициент масштабирования определяет размер элементов пользовательского интерфейса, таких как текст. Масштабирование факторов в диапазоне от 100 до 400 %. Большие значения создают большие элементы пользовательского интерфейса, облегчая их просмотр на экранах с высоким разрешением.

Windows автоматически задает коэффициент масштабирования для каждого дисплея на основе его показателя DPI (точек на дюйм) и расстояния от экрана устройства. (Пользователи могут переопределить значение по умолчанию, перейдя на страницу Параметры > Экран > Масштаб и разметка.)

Поскольку ресурсы значков приложений являются растровыми изображениями, а они плохо масштабируются, мы рекомендуем указывать версию каждого значка для каждого масштабного коэффициента: 100 %, 125 %, 150 %, 200 % и 400 %. Значки занимают немало места! К счастью, Visual Studio предоставляет инструмент, который позволяет легко создавать и обновлять эти значки.

Список изображений Microsoft Store

"Как я могу указать изображения для списка моих приложений в Microsoft Store?"

По умолчанию мы используем некоторые изображения из ваших пакетов в Store, как описано в таблице, которая находится в верхней части этой страницы (вместе с другими изображениями, которые вы предоставляете в процессе отправки). Тем не менее вы также можете настроить, чтобы при показе страницы приложения клиентам, использующим Windows 10 (включая Xbox), Store не мог использовать изображения логотипов из ваших пакетов приложения, а показывал только загружаемые изображения. Так вы сможете эффективнее настроить внешний вид вашего приложения в Microsoft Store. (Обратите внимание, что если ваш продукт поддерживает более ранние версии ОС, эти клиенты могут по-прежнему видеть изображения из ваших пакетов, даже если вы используете этот параметр.) Это можно сделать в разделе Логотипы Store на шаге процесса отправки Список Store.

После установки этого флажка появится новый раздел под названием Отображение изображений Store. Здесь вы можете загрузить 3 размера изображений, которые Store будет использовать вместо изображений логотипов из пакетов вашего приложения: 71 x 71, 150 x 150 и 300 x 300 пикселей. Требуется только размер 300 x 300, хотя мы рекомендуем предоставить все 3 размера.

Управление значками приложений с помощью Конструктора манифестов в Visual Studio

Visual Studio предоставляет очень полезное средство для управления значками приложений, которое называется Конструктор манифестов.

Чтобы запустить Конструктор манифестов, необходимо следующее.

В Visual Studio откройте проект универсальной платформы Windows.

В обозревателе решений дважды щелкните Package.appxmanifest.

Конструктор манифестов отображается в Visual Studio.

Щелкните вкладку Визуальные активы.

Создание всех активов одновременно

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

Все, что вам нужно сделать, — это предоставить одно изображение, и Visual Studio создаст маленькую, среднюю, большую, широкую, очень большую плитку, значок приложения, заставку и логотипы пакетов для каждого масштабного коэффициента.

Чтобы создать все ресурсы одновременно, выполните следующее.

(Дополнительно.) В разделе Параметры отображения настройте следующие параметры:

a. Короткое имя Укажите короткое имя для вашего приложения.

b. Показать имя. Укажите, хотите ли вы отображать короткое имя на средних, широких или больших плитках.

d. Фон экрана-заставки. Укажите шестнадцатеричное значение или имя цвета для фона экрана-заставки.

Щелкните Создать.

Visual Studio создает файлы изображений и добавляет их в проект. Если вы хотите изменить свои ресурсы, просто повторите процесс.

Масштабируемые ресурсы значков соответствуют следующему соглашению об именах файлов.

Имя файла-масштабирование-коэффициент масштабирования.jpg

Square150x150Logo-scale-100.jpg, Square150x150Logo-scale-200.jpg, Square150x150Logo-scale-400.jpg

Обратите внимание на то, что Visual Studio не создает логотип по умолчанию. Это потому, что ваш логотип значка уникален и он не должен соответствовать значкам других приложений. См. сведения об уведомлениях на индикаторах событий для приложений для Windows.

Подробнее о ресурсах значков приложения

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

Ресурс значка приложения отображается во многих местах: на панели задач Windows, в виде задач, ALT+TAB и в правом нижнем углу плиток в меню "Пуск". Поскольку ресурс значка приложения появляется во многих местах, у него есть некоторые дополнительные параметры определения размера и размещения, которых нет у других ресурсов: ресурсы "целевого размера" и ресурсы "без основы".

Ресурсы значков приложения целевого размера

В дополнение к стандартным размерам масштабного коэффициента ("Square44x44Logo.scale-400.jpg"), мы также рекомендуем создавать ресурсы "целевого размера". Мы называем их ресурсами целевого размера, потому что они нацелены на конкретные размеры, например 16 пикселей, а не на конкретные масштабные коэффициенты, например 400. Ресурсы целевого размера предназначены для областей, которые не используют позицию масштабирования системы:

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

Ниже приведен список ресурсов целевого размера.

Размер ресурса	Пример имени файла
16x16*	Square44x44Logo.targetsize-16.jpg
24x24*	Square44x44Logo.targetsize-24.jpg
32x32*	Square44x44Logo.targetsize-32.jpg
48x48*	Square44x44Logo.targetsize-48.jpg
256x256*	Square44x44Logo.targetsize-256.jpg
20x20	Square44x44Logo.targetsize-20.jpg
30x30	Square44x44Logo.targetsize-30.jpg
36x36	Square44x44Logo.targetsize-36.jpg
40x40	Square44x44Logo.targetsize-40.jpg
60x60	Square44x44Logo.targetsize-60.jpg
64x64	Square44x44Logo.targetsize-64.jpg
72x72	Square44x44Logo.targetsize-72.jpg
80x80	Square44x44Logo.targetsize-80.jpg
96x96	Square44x44Logo.targetsize-96.jpg

* Как минимум мы рекомендуем предоставить эти размеры.

Для таких ресурсов не нужно добавлять заполнение, так как Windows добавит его при необходимости. Для этих ресурсов предусмотрен минимальный занимаемый объем памяти (16 пикселей).

Ниже приведен пример таких ресурсов в том виде, в котором они отображаются в значках на панели задач Windows.

Ресурсы без основы

По умолчанию Windows использует целевой ресурс поверх цветной задней панели по умолчанию. Если вы хотите, вы можете предоставить целевой ресурс без основы. "Без основы" означает, что ресурс будет отображаться на прозрачном фоне. Имейте в виду, что эти ресурсы будут отображаться на различных цветах фона.

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

Панель задач и эскиз панели задач (компьютеры)
Список переходов на панели задач
Представление задач
ALT+TAB

Ресурсы без основы и тем

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

Целевой объект и изменения размера без основы

Вот рекомендации по размерам для специальных ресурсов в масштабе 100 %:

Подробнее о ресурсах экрана-заставки

Подробнее об эмблемах ресурсов

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

Настройка заполнения ресурсов

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

Оптимизация под конкретные темы, языки и другие условия

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

Читайте также: