Сетка В Дизайне Интерфейсов Для Windows Phone: Строгий Учитель Или Добрый Помощник? (Часть 2)

Это просто равномерная сетка горизонтальных линий, как в школьной тетради.

Вот пример экрана приложения Право.

ру, построенного на основе сетки базовых линий:



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

Это связано с тем, что размер модуля и отступы не имеют общего знаменателя.

Помните, как мы переживали по этому поводу, глядя на числа 25 и 12? И тут меня снова преследовало:



Что делать? На мой взгляд, у нас есть три варианта.

И каждое приносит свои жертвы.

Ну, понимаешь – пойдешь направо, потеряешь лошадь и так далее.

Первый способ : отказаться от квадратов.

Пусть у нас будет 12 столбцов по горизонтали и просто равномерная сетка базовых линий по вертикали:



Но, скажу сразу, отказываться от квадратов я вообще не люблю.

При таком подходе мы неизбежно получим совершенно нелепые пропорции блоков, вроде 173х168. Так что я считаю эту ветку тупиковой.

Второй способ : Уменьшите размер модуля с 25 пикселей до 24. Тогда размер модуля будет ровно в 2 раза больше отступа, что позволит использовать базовую сетку с шагом 12 или 24 пикселя.

Но зато от краев экрана добавится по 6 пикселей, поэтому смещение от края будет не 24 пикселя, а целых 30:



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

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

Мы тоже этого делать не будем.

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

Конечно, 12 очень удачно делится на 2, на 3, на 4 и на 6. Но во-первых, на практике такая гибкость редко нужна при проектировании экрана крохотного мобильного устройства.

А во-вторых, 12-колоночный блок отличается своей симметрией, а интерфейсы Windows Phone редко бывают симметричными.

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

Таким образом, нам не нужно поддерживать симметрию на уровне сетки.

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

Именно это я имел в виду, когда говорил, что экраны интерфейса Windows Phone не отличаются симметрией:



В результате получается 36 ячеек для каждого сегмента панорамы.

36 – очень счастливое число! Оно даже делится на 12, со всеми вытекающими отсюда преимуществами.

Но мы не будем делить 36 на 12, а только на 6, как это сделал Майк Гуз в своей версии сетки.

Хорошо видно, что эти блоки прилипают к крупным линиям сетки, оставляя отступ в 1 квадрат, то есть 12 пикселей:



Обратите внимание, как выстроены базовые линии в первом сегменте панорамы:



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



Третий сегмент панорамы с новостями:



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

Либо 4 ячейки, либо 6, если нужен отступ побольше.

Аналогично строится четвертый сегмент панорамы с последними публикациями блога:



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

Если у нас обычный межстрочный интервал — 2 ячейки или 24 пикселя, то в случае с большими заголовками — 3 ячейки, то есть 36 пикселей.

?Экран списка документов:



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

Экран результатов поиска:



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

Дело в том, что когда я попробовал вставить заголовок «Федеральное законодательство», сразу стало понятно, что это не получится.

Поэтому у нас вверху плитки со значками, а не названиями разделов.

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

Еще один экран с текстовым контентом — содержимое документа:



Нажмите «О программе»:



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

Это преимущество проявляется в процессе подготовки проектных спецификаций или технических заданий для программистов.

Сравните две картинки, левую и правую:



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

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

Макет дизайна с наложенной на него сеткой сам по себе является достаточно точной задачей.

В процессе тестирования польза сетки также неоценима: вы можете просто положить сетку поверх скриншота и сказать: «Ребята, вы не видите самиЭ» === Надеюсь, предложенные мной решения помогут некоторым из вас быстрее и приятнее создавать красивые приложения для Windows Phone. Не менее красиво, чем наше приложение Право.

ру.