8 (495) 215-53-16

info@notissimus.com

ул. Заозерная, 8

196084, Санкт-Петербург

09:00 - 20:00

сб.,вс. - выходные

Как мы проектировали дизайн мобильного приложения oodji для WinPhone

 Блог    

В дизайне мобильного приложения под WindowsPhone это был первый наш опыт. И поэтому прежде чем начинать проектировать дизайн интерфейса, очень важно было изучить установленные принципы, так называемые Design Guidelines. Cписок рекомендаций по проектированию есть на сайте Windows Phone Dev Center по следующей ссылке http://developer.windowsphone.com/en-US/design . Они описывают, как правильно спроектировать пользовательский интерфейс…

Стиль дизайна, в котором создаются приложения для WindowsPhone, называется Metro. Основными принципами Metro являются акцент на хорошей типографике и крупный текст, который сразу бросается в глаза. Исключается лишняя графика, и вместо этого делается акцент на фактическое содержание. Большую роль также играет анимация на основе реальных движений. На сайте Microsoft в руководстве по дизайну нам рекомендуют придерживаться сетки. Здесь возникает вопрос, где взять числа, на основе которых ее строить, на сайте Microsoft этих данных не найти, видимо потому, что жесткого стандарта использования модульной сетки нет, и вряд ли он когда-то появится. Модульная сетка – это набор направляющих в шаблоне, на которых должны располагаться элементы дизайна. Модульная сетка привносит порядок и целостность восприятия. Это шаблон, а по шаблону всегда работать быстрее и удобнее, что ведет к повышению скорости разработки дизайна мобильного приложения и его верстки. Ссылку на ресурс, откуда можно скачать шаблон сетки я нашла в одной из статей на хабре, вот он http://ux.artu.tv/?p=282 Еще до изучения рекомендаций и гайдов, мы определили содержание нашего мобильного приложения, зачем и кому оно нужно, и в рамках определения содержания была задана структура приложения. Затем был разработан прототип. Сначала это были рисунки на бумаге, которые затем перерисовывались в Photoshop. И после на прототип положен дизайн с учетом рекомендаций. App-Screen-Front-View-MockUp

]]>