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

Руководство по расположению групп объектов

В новом дизайне для Windows вы можете поместить несколько объектов на любую страницу приложения. Ниже приведены основы того, как визуально разделить 2 или более групп объектов, а также сделать разделение на подгруппы в одной группе содержимого.

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

увеличить изображение
Разделяющее пространство размером в 10 пикселей

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

Основы расположения объектов в списке

Работа со списком объектов - еще один распространенный сценарий работы в Windows-дизайне. Объект или изображение от описания необходимо отделять расстоянием в 5 пикселей. Объект от объекта необходимо отделять расстоянием в 10 пикселей. Также рекомендуется, чтобы ширина и длина объекта делились на 5 пикселей.

увеличить изображение
На изображении все соответствует рекомендациям

Стиль Windows

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

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

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

Стиль Windows легко узнаваем даже в совершенно разных приложениях. Например, ниже приведены изображения двух таких раскладок.

увеличить изображение

увеличить изображение

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

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

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

Для того, чтобы это проверить, рассмотрите примеры с раскрашенными квадратами.

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

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

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

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

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

увеличить изображение
Размер изображения помогает определить значение содержимого

Задание:

Распечатайте файл 100_pixel_grid.pdf из дополнительного материала лекции в папке Module_6_Assets. Создайте плиточный дизайн своего приложения.Помните о рекомендациях по отступам и размерам.

Итоги

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

Самостоятельная работа

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

Вопросы

1. В приложениях используются части и подчасти(измеряемые в пикселях), чтобы стандартизировать раскладку. Назовите, из скольких пикселей состоит часть и подчасть.
2. Рекомендуется придерживаться трех типов шрифтов: Segoe UI, Calibri и Cambria. Назовите сценарии, в которых вы будете их использовать.
3. Что такое наборы параметров шрифтов (typeramp) в ModernUI? Зачем они нужны?

Дополнительные материалы

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

• Создание и разбиение сетки: Дизайн от Тимоти Самара (Making and Breaking the Grid: A Graphic Design Layout Workshop by Timothy Samara)

  Этот курс описывает принципы разработки дизайна, основанного на сетке, и показывает, как их применять.Курс нацелен на дизайн печатной продукции, однако с успехом может быть применен и в дизайне приложений.
• Швейцарский дизайн: Создание и развитие интернационального стиля, 1920-1965. Ричард Холис (Swiss Graphic Design: The Origins and Growth of an International Style, 1920-1965 by Richard Hollis) Название книги говорит само за себя.
• Работа со шрифтами: Руководство для дизайнеров, писателей, редакторов и студентов. Элен Лаптон (Thinking with Type: A Critical Guide for Designers, Writers, Editors, & Students (2nd ed.) by Ellen Lupton) Эта книга довольно детально описывает основные идеи типов шрифтов, использование базовых линий и другие основы.

Ответы

1. 20*20 и 5*5 пикселей.
2. Segoe UI - для элементов пользовательского интерфейса, например, кнопок. Calibri - текст, который пользователь читает и пишет. Cambria - большие блоки текста, например, статьи.
3. Наборы параметров шрифтов (type ramp) - это параметры шрифтов, их размеров, высоты, собранные вместе в качестве единой иерархической системы.