Цель лекции: изучить Metro-дизайн, научиться создавать грамотное расположение элементов в приложении. Понять все аспекты создания интерфейса в приложениях.
Есть мнение, что пользователи не обращают внимание на мелочи интерфейса типа анимации, шрифта, удобства чтения и пр. Поэтому эти мелочи не так важны и ими можно пренебречь ради каких-то более важных задач и целей. Например, если у приложения очень интересная и нужная функциональность.
Тем не менее, опыт создания интерфейсов показывает, что все мелочи чрезвычайно важны. Так или иначе, все они влияют на то целостное впечатление, которое в результате складывается у пользователя, и которым он руководствуется в дальнейшем, принимая решение о продолжении работы именно с этим интерфейсом.
Конечно, пользователь может не отдавать себе отчета, что ему не нравится именно плохо читаемый шрифт или неудобная организация меню. Но подсознательно он обязательно отметит неудобства, и это недовольство окажет серьезное влияние на его пользовательское впечатление от интерфейса. Поэтому при разработке интерфейса надо уделять внимание всем мелочам.
Впрочем, начинать нужно не с них, а с важных вещей.
Создавая приложение для Windows Phone, работу стоит разбивать на четыре этапа. Каждый из них имеет свои задачи и средства их достижения. Итак, эти этапы:
Создать хорошее приложение можно, лишь успешно пройдя все четыре этапа.
В мире нет недостатка в абстрактных хороших идеях. Основные сложности начинаются тогда, когда вы начинаете приводить эту идею к практической реализации. Для того, чтобы сделать успешный продукт, вам сначала нужно понять, что вы строите, потом - определиться, как вы будете это строить, и лишь потом можно начинать процесс строительства.
Также важно понять, что в вашем продукте интересного и уникального, что позволит ему выделиться из толпы.
В современном мире есть два общепринятых пути к успеху. Во-первых, можно делать дешевый массовый продукт, который (если понравится пользователям), будет успешен засчет своей массовости, а массовым - за счет низкой цены.
Второй путь, намного более интересный, но требующий гораздо больше усилий: выделиться из толпы, быть уникальным, и тем привлекать внимание.
При создании интерфейса Metro и операционной системы Windows Phone разработчики решили пойти по второму пути. Так что на первом этапе разработки создателям нового стиля интерфейса Metro надо было определиться, в чем будет состоять уникальность их продукта, за счет чего он будет выделяться среди других устройств и при этом будет интересным пользователям.
(рис 10.1) Три основных приоритета интерфейса Metro
В результате было выработано три основных приоритета, которые выделяли бы интерфейс Metro и позволили бы ему стать успешным. Должен сказать, что адекватный перевод с пояснениями менее, чем на пять строчек - уже нетривиальная задача. Поэтому основной перевод сделан в том же стиле, что и оригинальные определения:
Суть этих принципов в следующем:
Подробнее о них мы поговорим ниже.
В чем суть Metro? Наверное, многие уже так или иначе читали или слышали об этом. Его суть в том, чтобы пользователь мог быстро получить то, что ему нужно, минимально отвлекаясь от своих дел и мыслей. Именно так построены информационные материалы на всех транспортных системах. Кратким, емким стилем информационных табло и вдохновлялись создатели визуального стиля Metro. Откуда, собственно, он и получил свое название.
(рис 10.2) Информационное табло
Кстати, это важнейший элемент не только интерфейса операционной системы, но и приложений.
Можно сделать обычный интернет-магазин, выложить список товаров, кнопку купить и ждать покупателей. Это традиционный и привычный путь. Теоретически, он более удобен и экономит время по сравнению с обычной поездкой в магазин. Однако в современном мире даже он уже не является оптимальным, ибо сам процесс покупок все равно остался тем же. И на него точно так же приходится тратить немало времени.
Создатели необычного магазина учли, что даже электронный шоппинг отнимает много времени. Причем он требует не только времени - он требует отвлечься от других дел. Ситуация еще больше усугубляется, если речь идет о продуктах первой необходимости, которые нам нужны постоянно. В результате очень часто покупатели отказываются от процесса покупки, чтобы выделить время под другие дела.
В результате, они сумели поймать пользователя в тот момент, когда он ждет поезда, т.е. ничем не занят и не может быть занят. Поэтому они разместили на станции Metro виртуальную витрину, покупку с которой можно совершить, сфотографировав телефоном QR-код нужного товара. Это гораздо проще и интуитивнее, чем листать страницы магазина: увидел, сфотографировал... Далее сформированный заказ автоматически отправляется в службу доставки.
(рис 10.3) Необычный магазин
Примерно те же цели стоят перед интерфейсом Metro: очень сложный комплекс программных, аппаратных и организационных решений используется для того, чтобы сделать выполнение нужной задачи или получение нужной информации настолько простым, насколько это возможно.
Для того, чтобы приложение стало успешным на рынке, нужно решить три задачи:
Во-первых, успешное приложение должно сразу привлекать к себе внимание: и функциональностью, и хорошим описанием, и красивым оформлением. Все вместе должно формировать выигрышное визуальное впечатление и привлекать внимание. Только в этом случае вы сможете привлечь к нему покупателей.
Во-вторых, он должен с первых секунд использования создавать приятные ощущения от использования. Он должен быть внятным, понятным, приятным. И сюда входит все: шрифты, цвета интерфейса, логичность меню, удобство и простота выполнения тех функций, ради которых он приобретался. Но и этого мало.
В-третьих, продукт должен быть интересен пользователю в течение длительного времени. В первую очередь, конечно, речь идет о функциональности продукта. Однако общее удобство использования играет огромную роль. Например, много где существует много приложений со схожей функциональностью, и там удобство и приятные впечатления от использования выходят на первый план.
Современная статистика использования мобильных приложений показывает, что подавляющее большинство из них скачивают, смотрят, но потом не используют. Потому что они не дают ничего такого, что позволит сохранить интерес пользователя в течение длительного времени. Лишь некоторые приложения используются долго, потому что сам контент интересует, но постепенно интерес и там усыхает.
В среднем, приложение запускается один раз. И лишь 1% приложений продолжают использоваться в долгосрочной перспективе. Можно посмотреть зависимость времени жизни приложения от его области применения:
(рис 10.4) Статистика запуска приложений
Как видите, небольшие различия есть, но в целом картина схожа.
Для того, чтобы создать успешное приложение, создатели должны ответить для себя на несколько вопросов:
При создании приложения нужно стремиться создать что-то, что решает нужную и важную задачу, и что способно быть полезным в течение длительного периода времени. На этом же кадре дан прекрасный афоризм: "Если вы можете это создать, то это еще не значит, что кто-то захочет этим пользоваться". Отличное изречение, его стоит применять не только к мобильным приложениям!
Для того, чтобы приложение стало успешным, надо изначально понять, кто ваш пользователь и что он будет делать с помощью вашего приложения. Т.е. очень важно составить портрет целевой аудитории и определить те задачи, которые будут решаться с помощью приложения.
При разработке, что операционной системы, что приложения очень важно сформировать для себя некоторые базовые принципы, которые будут лежать в основе процесса разработки. Необходимо знать и точно определить для себя, к чему вы стремитесь, что для вас главное. Эти принципы и приоритеты являются тем базовым стержнем, вокруг которого строится весь процесс создания. Кроме того, они являются тем базовым критерием, который играет существенную роль при принятии конкретных решений, касающихся разработки.
В идеале телефон должен быть:
Поговорим о Metro, который в Microsoft называют современным языком дизайна.
Для него выделено три основных принципа:
Конечно, суть дизайна Metro создавалась не с нуля. Хотя свое окончательное оформление концепция получила в Windows Phone 7 (хотя неправильно говорить "окончательное", ведь она продолжает активно развиваться). До нее такая организация интерфейса и визуальный стиль уже использовались в других продуктах и службах компании, таких как Xbox или
(рис 10.5) Xbox или Zune
А в более общей форме этот интерфейс восходит еще к Windows Media Center, там впервые появилась концепция "плиток".
(рис 10.6) Windows Media Center
Вторым направлением, откуда черпали вдохновение создатели Metro, стал универсальный, чистый, ясный язык транспортных схем.
Из транспортных систем интерфейс Metro заимствовал не только внешнее оформление, но и внутреннюю суть информационной системы.
(рис 10.7) Транспортные схемы
Как правило, если вы находитесь на транспортном узле, то ваша основная задача - это быстро найти дорогу туда к своей цели. И все, что вам нужно от информационной системы этого транспортного узла: максимально быстро, доступно и удобно показать вам дорогу к вашей цели. Вам не нужны красивые стили, дополнительная информация и т.д. Суть сообщения должна быть ясна и понятна с первого взгляда.
Язык транспортных систем долго совершенствовался. В нем отброшено все лишнее, элементы сделаны настолько ясными и понятными, насколько это возможно. Шрифты читаются с первого взгляда, цветовые решения ориентированы на то, чтобы помочь выделить нужный элемент. В целом, информация доступна и понятна всем, даже плохо знающим язык. Именно эту идеологию заимствовали для интерфейса Metro.
Суть организации интерфейса - в движении вперед.
В получении и раскрытии новой информации, доступе к нужным функциям, удобной интеграции и взаимодействии информационных потоков. У вас всегда должна быть возможность двигаться дальше, получить больше нужной вам информации.
Для языка дизайна Metro разработаны свои базовые принципы, по которым он строится.
Итак, для достижения указанных выше целей, в новом интерфейсе нужно:
Это обуславливает переход к более схематичным, но более наглядным визуальным элементам.
Дизайн и расположение элементов должны соответствовать структуре "решетки".
(рис 10.8) Структура "решетки"
Такой способ организации экранного пространства является очень эффективным с точки зрения структурирования и восприятия информации. Его часто используют в журналах и других печатных изданиях.
Экран делится на отдельные зоны. Надо внимательно рассчитывать их взаимное расположение, взаимодействие, удобство использования. Этот принцип лег в основу дизайна Windows Phone 7.
(рис 10.9) Дизайн Windows Phone 7
Важной составляющей интерфейса Metro является то, что он живой, активный, вовлекающий пользователя.
Итак, интерфейс должен быть:
И в этой связи очень большую роль играет правильная анимация интерфейса.
(рис 10.10) Анимация интерфейса Windows Phone 7
Конечно, анимация должна быть приятной и вызывать у пользователя приятные эмоции. Однако в первую очередь она должна быть уместной. Анимация должна помогать пользователю дойти до контента, но не должна быть важнее контента. Это касается и времени анимации, и промежуточных стадий, и отрисовки на экране. Должен соблюдаться баланс.
Например, для экрана блокировки движение может указывать путь к контенту (если коснуться экрана, то экран блокировки слегка подпрыгнет и вернется вниз, как упругий мячик. Намекая, что для разблокировки надо сдвинуть картинку вверх).
Главное при создании интерфейса - это помнить, что главное - это пользователь, а не интерфейс. Интерфейс должен быть простым, приятным для глаза, быстрым и, самое главное - просто быстро и удобно давать вам сделать то, что вы хотели сделать. Вы должны работать со своим контентом, а не с интерфейсом.
Правильно организованная анимация играет очень важную роль в формировании положительного впечатления у пользователя. Во-первых, она отвлекает и развлекает его. Это важно, например, при загрузке приложения, ожидании ответа и других операциях, которые требуют времени. Во-вторых, при помощи анимации можно менять восприятие пользователя: например, выделять важные переходы.
Анимация не просто помогает скрашивать ожидание - пользователь вообще может не заметить, что он чего-то ожидал. Ему будет казаться, что это просто красивая анимация перехода. Если бы ее не было, то это время субъективно воспринималось бы, как пустое ожидание, и оставляло неприятное впечатление.
Порогом считается время в 500 миллисекунд. Все, что происходит быстрее, кажется пользователю мгновенным. Поэтому если переход, загрузка элемента или другие действия требуют больше, чем этот временной промежуток, анимация, которая поможет скрасить ожидание, нужна обязательно.
В анимации можно использовать законы физики и аналоги процессов, которые будут создавать у пользователя ощущение естественности. Например, эффект переворота (это примерный аналог пролистывания страниц). Он занимает некоторое время, и пользователь вполне естественно воспримет такую анимацию в интерфейсе, не замечая, что она маскирует работу системы.
Но не надо злоупотреблять анимацией. Не надо вставлять ее в интерфейс только ради того, чтобы она там была. Анимация всегда должна выполнять какую-то задачу. Она может отвлекать и развлекать пользователя. Она может наглядно показывать пользователю, что он перешел из одного важного элемента интерфейса или программы в другой. Но не надо ради анимации затруднять реализацию функций пользователя. Так что, внедряя анимацию, всегда спрашивайте себя - а зачем вы это делаете?
Окна, прерывающие работу и выдающие дополнительные уведомления, не должны уводить пользователя от его контента, т.е. не перекрывают окно приложения.
При создании интерфейса надо помнить, что его главная задача - обеспечивать доступ к контенту пользователя и работу с ним. Интерфейс - не цель сама по себе, и многие второстепенные и декоративные элементы, которые кажутся уместными, на самом деле не несут никакой нагрузки.
Приятное впечатление от работы с приложением должно формироваться в первую очередь благодаря простому и удобному выполнению его основных функций. Информационно и визуально перегруженный интерфейс может красиво выглядеть в первые моменты, но быстро начинает раздражать при постоянной работе. Более того, перегруженный интерфейс затрудняет работу с приложением, т.к. затрудняет работу с главными функциями программы. Поэтому в стиле Metro предлагается сводить все второстепенные и декоративные объекты интерфейса к минимуму или убирать их вообще, чтобы они не мешали пользователю взаимодействовать с контентом.
При проектировании нового интерфейса в основу был положен принцип концентрации на главном: пользователю должна предлагаться только самая необходимая информация и те возможности действовать, которые ему необходимы. Меню не надо перегружать дополнительными элементами, ибо в результате пользователь не сможет использовать ни их, ни основные функции.
Приоритетом Metro является то, что в центре модели дизайна должен стоять пользователь, его потребности и интересы. А не интересы дизайнера и его возможности и желания реализовать ту или иную функциональность. Сокращение количества элементов интерфейса позволяет яснее структурировать информацию и сделать ее более доступной.
Контент должен структурироваться и группироваться так, чтобы в интерфейсе всегда можно было не только выполнить одно нужное действие, но и перемещаться между схожими группами.
(рис 10.11) Структуризация контента
Строить работу системы нужно вокруг задач пользователя и контента, который он создает. В том числе речь идет об удобной группировке контента по тому, какие задачи он должен решать. Т.е. пользователь сможет получать доступ ко всей информации одного типа из одного места благодаря удобной группировке.
В дальнейшем Microsoft планирует углублять и улучшать эту интеграцию. В том числе, сторонним разработчикам будет предоставляться больше возможностей взаимодействовать с системными компонентами и данными пользователя. Например, приложение для поиска стихов в интернете может получать информацию от музыкального хранилища о песне, для которой нужно найти стихи. Сторонние приложения могут реализовывать и много других функций.
При создании Metro дизайнеры старались уйти от аналогий а визуальных образов реального мира. Наоборот, они активно изучали фантастические произведения, смотрели фантастические фильмы чтобы понять, какие интерфейсы ожидают от современных и будущих устройств, что в них хотели бы видеть, какова должна быть их идеология.
Современные интерфейсы до сих пор основываются на иконках, которые во многом копируют либо обыгрывают реальные объекты и эффекты окружающего нас мира.
И они считаются тем интереснее, чем больше они копируют эти объекты реального мира, чем точнее и реалистичнее воспроизводятся характерные для реального мира черты: отблески, тени и пр. Это трансляция наших представлений из реального мира в виртуальный, который совершенно другой. В интерфейсе Metro создатели попытались отойти от этой традиции и в полной мере использовать те возможности, которые дает именно виртуальный интерфейс.
Суть подхода инфографики состоит в том, что в интерфейсе на первый план выходят другие приоритеты:
Т.е. для такого интерфейса важнее цифровой контент, информирование и взаимодействие с пользователем, в т.ч. предоставление ему нужной информации и прием команд. Использование объектов реального мира идет только там, где оно оправдано (например, в случае работы с фотографиями).
Говоря о взаимодействии с интерфейсом нужно учитывать и то, как телефон реагирует на воздействие пользователя. Формы и методы приема информации также играют важную роль и во многом формируют мнение пользователя о платформе, интерфейсе, приложениях и системе в целом.
В предыдущей лекции мы рассматривали важные элементы управления Panorama и Pivot теперь познакомимся с оставшимися – это
Рассмотрим элемент управления
Это небольшая полоска внизу экрана, предназначенная для осуществления действий и реализации выбора пользователя. В идеологии WP7 размещать кнопки (например, подтвердить, отказаться и т.д.) следует именно здесь, а не на самом экране приложения. Помимо кнопок, сюда может быть запрограммировано контекстное меню, которое появляется при нажатии в правом углу. О его наличии предупреждает символ в виде трех точек справа.
(рис 10.12) Application Bar
Этот элемент надо использовать только для самых важных и универсальных функций приложения. Не стоит использовать их просто для навигации, эти элементы удобнее делать внутри страницы.
Поговорим о
Это дополнительный элемент приложения. Этот элемент выносится в главное меню и выполняет несколько задач. Во-первых, это кнопка вызова приложения. Именно этот элемент в первую очередь развлекает и привлекает пользователя. Во-вторых, он несет информационную нагрузку. Чаще всего, это уведомление о новых событиях (например, количество непрочитанных писем).
Важной особенностью элемента
(рис 10.13) Live Tiles
Построение и функционирование тайлов настраивается индивидуально, что удобно и для разработчика, и для пользователя. Можно подчеркнуть, выделить нужную функциональность.
Ну и резюме: в мире много хороших идей. Однако для каждой идеи необходима еще и грамотная реализация и доведение ее до стадии рыночного продукта.
(рис 10.14) Ещё один пример интерфейса
Чтобы создать хороший интерфейс нужно не просто иметь идею. Нужно четко представлять, что ты хочешь сделать, как это делать. И довести идею до выхода конкретного приложения на рынок.
В данной лекции мы:
Разработайте своё самостоятельное приложение, с использованием всех изученных элементов управления.
Цель лекции: изучить Metro-дизайн, научиться создавать грамотное расположение элементов в приложении. Понять все аспекты создания интерфейса в приложениях.
Есть мнение, что пользователи не обращают внимание на мелочи интерфейса типа анимации, шрифта, удобства чтения и пр. Поэтому эти мелочи не так важны и ими можно пренебречь ради каких-то более важных задач и целей. Например, если у приложения очень интересная и нужная функциональность.
Тем не менее, опыт создания интерфейсов показывает, что все мелочи чрезвычайно важны. Так или иначе, все они влияют на то целостное впечатление, которое в результате складывается у пользователя, и которым он руководствуется в дальнейшем, принимая решение о продолжении работы именно с этим интерфейсом.
Конечно, пользователь может не отдавать себе отчета, что ему не нравится именно плохо читаемый шрифт или неудобная организация меню. Но подсознательно он обязательно отметит неудобства, и это недовольство окажет серьезное влияние на его пользовательское впечатление от интерфейса. Поэтому при разработке интерфейса надо уделять внимание всем мелочам.
Впрочем, начинать нужно не с них, а с важных вещей.
Создавая приложение для Windows Phone, работу стоит разбивать на четыре этапа. Каждый из них имеет свои задачи и средства их достижения. Итак, эти этапы:
Создать хорошее приложение можно, лишь успешно пройдя все четыре этапа.
В мире нет недостатка в абстрактных хороших идеях. Основные сложности начинаются тогда, когда вы начинаете приводить эту идею к практической реализации. Для того, чтобы сделать успешный продукт, вам сначала нужно понять, что вы строите, потом - определиться, как вы будете это строить, и лишь потом можно начинать процесс строительства.
Также важно понять, что в вашем продукте интересного и уникального, что позволит ему выделиться из толпы.
В современном мире есть два общепринятых пути к успеху. Во-первых, можно делать дешевый массовый продукт, который (если понравится пользователям), будет успешен засчет своей массовости, а массовым - за счет низкой цены.
Второй путь, намного более интересный, но требующий гораздо больше усилий: выделиться из толпы, быть уникальным, и тем привлекать внимание.
При создании интерфейса Metro и операционной системы Windows Phone разработчики решили пойти по второму пути. Так что на первом этапе разработки создателям нового стиля интерфейса Metro надо было определиться, в чем будет состоять уникальность их продукта, за счет чего он будет выделяться среди других устройств и при этом будет интересным пользователям.
(рис 10.1) Три основных приоритета интерфейса Metro
В результате было выработано три основных приоритета, которые выделяли бы интерфейс Metro и позволили бы ему стать успешным. Должен сказать, что адекватный перевод с пояснениями менее, чем на пять строчек - уже нетривиальная задача. Поэтому основной перевод сделан в том же стиле, что и оригинальные определения:
Суть этих принципов в следующем:
Подробнее о них мы поговорим ниже.
В чем суть Metro? Наверное, многие уже так или иначе читали или слышали об этом. Его суть в том, чтобы пользователь мог быстро получить то, что ему нужно, минимально отвлекаясь от своих дел и мыслей. Именно так построены информационные материалы на всех транспортных системах. Кратким, емким стилем информационных табло и вдохновлялись создатели визуального стиля Metro. Откуда, собственно, он и получил свое название.
(рис 10.2) Информационное табло
Кстати, это важнейший элемент не только интерфейса операционной системы, но и приложений.
Можно сделать обычный интернет-магазин, выложить список товаров, кнопку купить и ждать покупателей. Это традиционный и привычный путь. Теоретически, он более удобен и экономит время по сравнению с обычной поездкой в магазин. Однако в современном мире даже он уже не является оптимальным, ибо сам процесс покупок все равно остался тем же. И на него точно так же приходится тратить немало времени.
Создатели необычного магазина учли, что даже электронный шоппинг отнимает много времени. Причем он требует не только времени - он требует отвлечься от других дел. Ситуация еще больше усугубляется, если речь идет о продуктах первой необходимости, которые нам нужны постоянно. В результате очень часто покупатели отказываются от процесса покупки, чтобы выделить время под другие дела.
В результате, они сумели поймать пользователя в тот момент, когда он ждет поезда, т.е. ничем не занят и не может быть занят. Поэтому они разместили на станции Metro виртуальную витрину, покупку с которой можно совершить, сфотографировав телефоном QR-код нужного товара. Это гораздо проще и интуитивнее, чем листать страницы магазина: увидел, сфотографировал... Далее сформированный заказ автоматически отправляется в службу доставки.
(рис 10.3) Необычный магазин
Примерно те же цели стоят перед интерфейсом Metro: очень сложный комплекс программных, аппаратных и организационных решений используется для того, чтобы сделать выполнение нужной задачи или получение нужной информации настолько простым, насколько это возможно.
Для того, чтобы приложение стало успешным на рынке, нужно решить три задачи:
Во-первых, успешное приложение должно сразу привлекать к себе внимание: и функциональностью, и хорошим описанием, и красивым оформлением. Все вместе должно формировать выигрышное визуальное впечатление и привлекать внимание. Только в этом случае вы сможете привлечь к нему покупателей.
Во-вторых, он должен с первых секунд использования создавать приятные ощущения от использования. Он должен быть внятным, понятным, приятным. И сюда входит все: шрифты, цвета интерфейса, логичность меню, удобство и простота выполнения тех функций, ради которых он приобретался. Но и этого мало.
В-третьих, продукт должен быть интересен пользователю в течение длительного времени. В первую очередь, конечно, речь идет о функциональности продукта. Однако общее удобство использования играет огромную роль. Например, много где существует много приложений со схожей функциональностью, и там удобство и приятные впечатления от использования выходят на первый план.
Современная статистика использования мобильных приложений показывает, что подавляющее большинство из них скачивают, смотрят, но потом не используют. Потому что они не дают ничего такого, что позволит сохранить интерес пользователя в течение длительного времени. Лишь некоторые приложения используются долго, потому что сам контент интересует, но постепенно интерес и там усыхает.
В среднем, приложение запускается один раз. И лишь 1% приложений продолжают использоваться в долгосрочной перспективе. Можно посмотреть зависимость времени жизни приложения от его области применения:
(рис 10.4) Статистика запуска приложений
Как видите, небольшие различия есть, но в целом картина схожа.
Для того, чтобы создать успешное приложение, создатели должны ответить для себя на несколько вопросов:
При создании приложения нужно стремиться создать что-то, что решает нужную и важную задачу, и что способно быть полезным в течение длительного периода времени. На этом же кадре дан прекрасный афоризм: "Если вы можете это создать, то это еще не значит, что кто-то захочет этим пользоваться". Отличное изречение, его стоит применять не только к мобильным приложениям!
Для того, чтобы приложение стало успешным, надо изначально понять, кто ваш пользователь и что он будет делать с помощью вашего приложения. Т.е. очень важно составить портрет целевой аудитории и определить те задачи, которые будут решаться с помощью приложения.
При разработке, что операционной системы, что приложения очень важно сформировать для себя некоторые базовые принципы, которые будут лежать в основе процесса разработки. Необходимо знать и точно определить для себя, к чему вы стремитесь, что для вас главное. Эти принципы и приоритеты являются тем базовым стержнем, вокруг которого строится весь процесс создания. Кроме того, они являются тем базовым критерием, который играет существенную роль при принятии конкретных решений, касающихся разработки.
В идеале телефон должен быть:
Поговорим о Metro, который в Microsoft называют современным языком дизайна.
Для него выделено три основных принципа:
Конечно, суть дизайна Metro создавалась не с нуля. Хотя свое окончательное оформление концепция получила в Windows Phone 7 (хотя неправильно говорить "окончательное", ведь она продолжает активно развиваться). До нее такая организация интерфейса и визуальный стиль уже использовались в других продуктах и службах компании, таких как Xbox или
(рис 10.5) Xbox или Zune
А в более общей форме этот интерфейс восходит еще к Windows Media Center, там впервые появилась концепция "плиток".
(рис 10.6) Windows Media Center
Вторым направлением, откуда черпали вдохновение создатели Metro, стал универсальный, чистый, ясный язык транспортных схем.
Из транспортных систем интерфейс Metro заимствовал не только внешнее оформление, но и внутреннюю суть информационной системы.
(рис 10.7) Транспортные схемы
Как правило, если вы находитесь на транспортном узле, то ваша основная задача - это быстро найти дорогу туда к своей цели. И все, что вам нужно от информационной системы этого транспортного узла: максимально быстро, доступно и удобно показать вам дорогу к вашей цели. Вам не нужны красивые стили, дополнительная информация и т.д. Суть сообщения должна быть ясна и понятна с первого взгляда.
Язык транспортных систем долго совершенствовался. В нем отброшено все лишнее, элементы сделаны настолько ясными и понятными, насколько это возможно. Шрифты читаются с первого взгляда, цветовые решения ориентированы на то, чтобы помочь выделить нужный элемент. В целом, информация доступна и понятна всем, даже плохо знающим язык. Именно эту идеологию заимствовали для интерфейса Metro.
Суть организации интерфейса - в движении вперед.
В получении и раскрытии новой информации, доступе к нужным функциям, удобной интеграции и взаимодействии информационных потоков. У вас всегда должна быть возможность двигаться дальше, получить больше нужной вам информации.
Для языка дизайна Metro разработаны свои базовые принципы, по которым он строится.
Итак, для достижения указанных выше целей, в новом интерфейсе нужно:
Это обуславливает переход к более схематичным, но более наглядным визуальным элементам.
Дизайн и расположение элементов должны соответствовать структуре "решетки".
(рис 10.8) Структура "решетки"
Такой способ организации экранного пространства является очень эффективным с точки зрения структурирования и восприятия информации. Его часто используют в журналах и других печатных изданиях.
Экран делится на отдельные зоны. Надо внимательно рассчитывать их взаимное расположение, взаимодействие, удобство использования. Этот принцип лег в основу дизайна Windows Phone 7.
(рис 10.9) Дизайн Windows Phone 7
Важной составляющей интерфейса Metro является то, что он живой, активный, вовлекающий пользователя.
Итак, интерфейс должен быть:
И в этой связи очень большую роль играет правильная анимация интерфейса.
(рис 10.10) Анимация интерфейса Windows Phone 7
Конечно, анимация должна быть приятной и вызывать у пользователя приятные эмоции. Однако в первую очередь она должна быть уместной. Анимация должна помогать пользователю дойти до контента, но не должна быть важнее контента. Это касается и времени анимации, и промежуточных стадий, и отрисовки на экране. Должен соблюдаться баланс.
Например, для экрана блокировки движение может указывать путь к контенту (если коснуться экрана, то экран блокировки слегка подпрыгнет и вернется вниз, как упругий мячик. Намекая, что для разблокировки надо сдвинуть картинку вверх).
Главное при создании интерфейса - это помнить, что главное - это пользователь, а не интерфейс. Интерфейс должен быть простым, приятным для глаза, быстрым и, самое главное - просто быстро и удобно давать вам сделать то, что вы хотели сделать. Вы должны работать со своим контентом, а не с интерфейсом.
Правильно организованная анимация играет очень важную роль в формировании положительного впечатления у пользователя. Во-первых, она отвлекает и развлекает его. Это важно, например, при загрузке приложения, ожидании ответа и других операциях, которые требуют времени. Во-вторых, при помощи анимации можно менять восприятие пользователя: например, выделять важные переходы.
Анимация не просто помогает скрашивать ожидание - пользователь вообще может не заметить, что он чего-то ожидал. Ему будет казаться, что это просто красивая анимация перехода. Если бы ее не было, то это время субъективно воспринималось бы, как пустое ожидание, и оставляло неприятное впечатление.
Порогом считается время в 500 миллисекунд. Все, что происходит быстрее, кажется пользователю мгновенным. Поэтому если переход, загрузка элемента или другие действия требуют больше, чем этот временной промежуток, анимация, которая поможет скрасить ожидание, нужна обязательно.
В анимации можно использовать законы физики и аналоги процессов, которые будут создавать у пользователя ощущение естественности. Например, эффект переворота (это примерный аналог пролистывания страниц). Он занимает некоторое время, и пользователь вполне естественно воспримет такую анимацию в интерфейсе, не замечая, что она маскирует работу системы.
Но не надо злоупотреблять анимацией. Не надо вставлять ее в интерфейс только ради того, чтобы она там была. Анимация всегда должна выполнять какую-то задачу. Она может отвлекать и развлекать пользователя. Она может наглядно показывать пользователю, что он перешел из одного важного элемента интерфейса или программы в другой. Но не надо ради анимации затруднять реализацию функций пользователя. Так что, внедряя анимацию, всегда спрашивайте себя - а зачем вы это делаете?
Окна, прерывающие работу и выдающие дополнительные уведомления, не должны уводить пользователя от его контента, т.е. не перекрывают окно приложения.
При создании интерфейса надо помнить, что его главная задача - обеспечивать доступ к контенту пользователя и работу с ним. Интерфейс - не цель сама по себе, и многие второстепенные и декоративные элементы, которые кажутся уместными, на самом деле не несут никакой нагрузки.
Приятное впечатление от работы с приложением должно формироваться в первую очередь благодаря простому и удобному выполнению его основных функций. Информационно и визуально перегруженный интерфейс может красиво выглядеть в первые моменты, но быстро начинает раздражать при постоянной работе. Более того, перегруженный интерфейс затрудняет работу с приложением, т.к. затрудняет работу с главными функциями программы. Поэтому в стиле Metro предлагается сводить все второстепенные и декоративные объекты интерфейса к минимуму или убирать их вообще, чтобы они не мешали пользователю взаимодействовать с контентом.
При проектировании нового интерфейса в основу был положен принцип концентрации на главном: пользователю должна предлагаться только самая необходимая информация и те возможности действовать, которые ему необходимы. Меню не надо перегружать дополнительными элементами, ибо в результате пользователь не сможет использовать ни их, ни основные функции.
Приоритетом Metro является то, что в центре модели дизайна должен стоять пользователь, его потребности и интересы. А не интересы дизайнера и его возможности и желания реализовать ту или иную функциональность. Сокращение количества элементов интерфейса позволяет яснее структурировать информацию и сделать ее более доступной.
Контент должен структурироваться и группироваться так, чтобы в интерфейсе всегда можно было не только выполнить одно нужное действие, но и перемещаться между схожими группами.
(рис 10.11) Структуризация контента
Строить работу системы нужно вокруг задач пользователя и контента, который он создает. В том числе речь идет об удобной группировке контента по тому, какие задачи он должен решать. Т.е. пользователь сможет получать доступ ко всей информации одного типа из одного места благодаря удобной группировке.
В дальнейшем Microsoft планирует углублять и улучшать эту интеграцию. В том числе, сторонним разработчикам будет предоставляться больше возможностей взаимодействовать с системными компонентами и данными пользователя. Например, приложение для поиска стихов в интернете может получать информацию от музыкального хранилища о песне, для которой нужно найти стихи. Сторонние приложения могут реализовывать и много других функций.
При создании Metro дизайнеры старались уйти от аналогий а визуальных образов реального мира. Наоборот, они активно изучали фантастические произведения, смотрели фантастические фильмы чтобы понять, какие интерфейсы ожидают от современных и будущих устройств, что в них хотели бы видеть, какова должна быть их идеология.
Современные интерфейсы до сих пор основываются на иконках, которые во многом копируют либо обыгрывают реальные объекты и эффекты окружающего нас мира.
И они считаются тем интереснее, чем больше они копируют эти объекты реального мира, чем точнее и реалистичнее воспроизводятся характерные для реального мира черты: отблески, тени и пр. Это трансляция наших представлений из реального мира в виртуальный, который совершенно другой. В интерфейсе Metro создатели попытались отойти от этой традиции и в полной мере использовать те возможности, которые дает именно виртуальный интерфейс.
Суть подхода инфографики состоит в том, что в интерфейсе на первый план выходят другие приоритеты:
Т.е. для такого интерфейса важнее цифровой контент, информирование и взаимодействие с пользователем, в т.ч. предоставление ему нужной информации и прием команд. Использование объектов реального мира идет только там, где оно оправдано (например, в случае работы с фотографиями).
Говоря о взаимодействии с интерфейсом нужно учитывать и то, как телефон реагирует на воздействие пользователя. Формы и методы приема информации также играют важную роль и во многом формируют мнение пользователя о платформе, интерфейсе, приложениях и системе в целом.
В предыдущей лекции мы рассматривали важные элементы управления Panorama и Pivot теперь познакомимся с оставшимися – это
Рассмотрим элемент управления
Это небольшая полоска внизу экрана, предназначенная для осуществления действий и реализации выбора пользователя. В идеологии WP7 размещать кнопки (например, подтвердить, отказаться и т.д.) следует именно здесь, а не на самом экране приложения. Помимо кнопок, сюда может быть запрограммировано контекстное меню, которое появляется при нажатии в правом углу. О его наличии предупреждает символ в виде трех точек справа.
(рис 10.12) Application Bar
Этот элемент надо использовать только для самых важных и универсальных функций приложения. Не стоит использовать их просто для навигации, эти элементы удобнее делать внутри страницы.
Поговорим о
Это дополнительный элемент приложения. Этот элемент выносится в главное меню и выполняет несколько задач. Во-первых, это кнопка вызова приложения. Именно этот элемент в первую очередь развлекает и привлекает пользователя. Во-вторых, он несет информационную нагрузку. Чаще всего, это уведомление о новых событиях (например, количество непрочитанных писем).
Важной особенностью элемента
(рис 10.13) Live Tiles
Построение и функционирование тайлов настраивается индивидуально, что удобно и для разработчика, и для пользователя. Можно подчеркнуть, выделить нужную функциональность.
Ну и резюме: в мире много хороших идей. Однако для каждой идеи необходима еще и грамотная реализация и доведение ее до стадии рыночного продукта.
(рис 10.14) Ещё один пример интерфейса
Чтобы создать хороший интерфейс нужно не просто иметь идею. Нужно четко представлять, что ты хочешь сделать, как это делать. И довести идею до выхода конкретного приложения на рынок.
В данной лекции мы:
Разработайте своё самостоятельное приложение, с использованием всех изученных элементов управления.
Для получения официальных документов о завершении программы дополнительного профессионального образования (удостоверения о повышении квалификации, дипломов о профессиональной переподготовке и MBA) необходимо предоставить:
Внимание! Вы можете не заказывать доставку бумажной версии официального документы, а скачать его в электронном виде и распечатать самостоятельно. Информация о выданном документе в течение 1 месяца загружается в Федеральную информационную систему «Федеральный реестр сведений о документах об образовании и (или) о квалификации, документах об обучении» - ФИС ФРДО.
Доступ на новый сайт осуществляется с использованием адреса электронной почты, который был указан вами при регистрации на "старом". Мы постарались перенести все ваши данные с прежнего ресурса, однако не исключена вероятность потери части информации.
При возникновении проблемы со входом, воспользуйтесь функцией сброса пароля
Если вы обнаружите несоответствия, пожалуйста, сообщите нам.