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

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

 png;base64b2dad7d4ba3cdd37

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

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

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

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

png;base64861f79ff77da7bapng;base6410435c7562cf7a09png;base64aacee94248cd9106

 

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

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

png;base64d3e5730e2adc961a png;base649b1584aeb2f4a473

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

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

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

Иконки

www.thenounproject.com

Цвета

www.kuler.adobe.com

Паттерны

www.dinpattern.com

Шрифты

www.fontsquirrel.com

Гадлайны

www.design.windows.com

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

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

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

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

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

png;base64e26d7e6aff048064

 

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

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

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

 png;base64bfd89920e6dfeb07

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

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

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

png;base64f1e9440461d7fc82

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

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

png;base6434a34d88716b7de6

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

 png;base64a19c7091ce452d7c

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

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

 

 

 

Advertisements
Tagged with: , , , , ,
Опубликовано в Development, Windows 8

Добавить комментарий

Заполните поля или щелкните по значку, чтобы оставить свой комментарий:

Логотип WordPress.com

Для комментария используется ваша учётная запись WordPress.com. Выход / Изменить )

Фотография Twitter

Для комментария используется ваша учётная запись Twitter. Выход / Изменить )

Фотография Facebook

Для комментария используется ваша учётная запись Facebook. Выход / Изменить )

Google+ photo

Для комментария используется ваша учётная запись Google+. Выход / Изменить )

Connecting to %s

%d такие блоггеры, как: