Система строения для Windows Phone сетки

Книги и материалы

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

win_phone_1

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

win_phone_3 win_phone_2

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

Основы строения сетки

Для построения сетки возьмем за основу то, что мы уже имеем: 24рх — это выясненное нами правильное расстояние от краев экрана и плавно перейдем к модульным расстояниям, которые отвечают размеру 12рх, что же касается тайла, то его размеры 99 х 99рх. После всего мы не забываем произвести отрезку сверху 32рх, отведенных под статус бар. Результат должен быть следующим.

win_phone_4

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

win_phone_5

Скачать готовую сетку в формате PSD

Как используется сетка

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

win_phone_6

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

win_phone_7 win_phone_8

Нарушение сетки

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

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

win_phone_9 win_phone_10

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

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

win_phone_11

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

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

Оставить комментарий через:

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