Разработка дизайна для Windows 8.1 приложения

Первое, о чем мы должны подумать — схема навигации. При первом запуске Visual Studio, у вас есть несколько различных вариантов.

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

Основной философией для нас  должно оставаться следование следующему правилу — «сосредоточиться на месте, где вы находитесь, а не куда можете перейти», что означает , что мы не будем добавлять кнопки / иконки / и т.д. для переходов. Semantic zoom —  наш друг, так как пользователи могут «уменьшить» и увидеть все возможные категории.

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

Моей первоначальной мыслью было отслеживание по месяцам, с использованием развернутого просмотра, я придумал это упрощенное представление, где мы будем сортировать достижения по дате. Затем вы должны иметь возможность “кликнуть по месяцу”, чтобы просмотреть детали записи. Также у вас должна быть возможность добавлять пункт в простом редакторе.

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

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

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

Дизайн плитки, заставки, первый запуск и главная страница

В этом году, я был на внутренней презентации Microsoft под названием «Разработка дизайна для Windows 8 приложений. Создание бренда в Blend». Одна из величайших вещей, которую я получил — набор ссылок о том, как создать индивидуальный дизайн.

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

Наша задача: выбрать иконку, выбрать цветовую схему, выбрать шрифт, объединить их вместе.

Выберите иконку для ваших приложения

www.thenounproject.com является отличным местом для решения данной проблемы! Все, что вам действительно нужно, это простой значок, который сообщит пользователем о том, что делает ваше приложение. Все изображения либо бесплатны, для общественного пользования, либо действительно дешевые (например, $ 1,99), так что это великолепное место, если вы не можете самостоятельно придумать логотип.

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

Выберите цветовую схему

Самое замечательное в том, что www.kuler.adobe.com блестящий и проектно-ориентированный. Вы можете свободно использовать контент сайта  для вашего приложения. Вы можете искать по ключевому слову, популярные, по новинкам и т.д. и найти то, что вам по вкусу.

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

Выберите шрифт

Ваш первый вопрос может быть таким: разве я не должен использовать Segoe UI? Только если вы хотите быть “стандартным”, на данном сервисе есть много уникальных вариантов. Как выбрать наилучший — я не эксперт, я просто выбрал тот, который , как мне показалось, выглядел хорошо рядом с моим логотипом. Метод проб и ошибок — мой метод выбора. Не стесняйтесь комментировать, если у вас больше знаний в данном вопросе.

Вот так вот выглядит сайт. Я использовал шрифт High Tower Text.

Разработка логотипа

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

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

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

Ссылка на источник: Building a Windows 8.1 app–Step 4: UI design