Отличия в дизайне приложений iPad и Metro

    Чтобы помочь разработчикам под iPad портировать приложения на планшеты Windows 8, компания Microsoft опубликовала на портале Windows Dev Center кейс с демонстрацией, как дизайн Metro-приложения отличается от дизайна iPad. Для примера взяли некое вымышленное приложение, онлайновый календарь фотографий и видео с комментариями. Показано, как информация подаётся на iPad, и как то же самое должно выглядеть в Metro.



    На конкретных примерах показываются ключевые отличия. Например, в Windows 8 внимание пользователя больше сконцентрировано на контенте приложения за счёт отсутствия некоторых элементов интерфейса: верхней панели навигации, интерфейса пагинации, то есть разбиения на страницы, нижней панели табов.

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



    Иерархию навигации iPad-приложений нужно упростить до одного уровня. Например, в iPad-приложении нижняя панель табов отвечает за переключение между двумя экранами: просмотр фотографий и просмотр комментариев.



    В интерфейсе Metro всё это упрощается до одного уровня.



    Жесты вместо пальца. Чтобы выбрать год календаря, в iPad приложении пальцем нажимается кнопка «Год» и выбирается нужный год из выпадающего списка. В Metro это делается жестом двумя пальцами, а интерфейс календаря соответствует стилю Metro.



    В кейсе Microsoft речь идёт об отличиях iPad/Metro в стиле управления, реализации горизонтальной и вертикальной ориентации приложения, режимов просмотра, уведомлений и жестов на тачскрине.

    Это руководство предназначено, в первую очередь, для дизайнеров. Кроме него, выпущены отдельные руководство по продаже приложений Windows 8, а также руководство для разработчиков.
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 67

      +24
      Маркетинг хороший. Вопрос в том, как все окажется на самом деле.

      Хотя — в первый раз за много лет — я на стороне МС
      • UFO just landed and posted this here
          –18
          Никто из них не желает зла человечеству, оба стараются сделать вашу жизнь лучше…
          Тогда бы не было ТАКИХ патентных войн с конкурентами и договоров о запрете установки других ОС.
          • UFO just landed and posted this here
              +1
              Никто из них не желает зла человечеству, оба стараются сделать вашу жизнь лучше…
              Тогда бы не было ТАКИХ патентных войн с конкурентами и договоров о запрете установки других ОС.
              Нет, они действительно стараются сделать нашу жизнь лучше. Но конкуренции в этом деле не потерпят.
              +8
              >Apple хорошие. Microsoft хорошие. Никто из них не желает зла человечеству

              Про Google вы специально промолчали? :)
              • UFO just landed and posted this here
                0
                Отлично, что у дизайнеров появится еще одна возможность применять свои навыки в юзабилити. Надеюсь дожить до момента, когда интерфейсы придут к единому максимально удобному виду, как стол, стул или дверная ручка. Разновидностей миллион, но принцип один.
              • UFO just landed and posted this here
                  +1
                  Так они же сами в своём «вымышленном» приложении написали такой календарик, который хуже читается. Оригинальное приложение для просмотра фотографий на айпаде точно таким же жестом переходит по уровням. Но часто бывает удобнее ткнуть кнопку, для этого панели и существуют в iOS.
                  +18
                  Красиво. Но на последней картинке я так и не понял как попали в календарь. Полез читать описание в оригинале — pinch two fingers to zoom out and see all the months and years. Но где логика? Боюсь такие приемы в интерфейсе только запутают пользователей.
                    +1
                    Я пользовался и айфоном и вп7, сначала метро-дизайн кажется странным и уж конечно непривычным, но к нему привыкаешь буквально за несколько дней, в силу причин пришлось вернуться на айфон и некоторых вещей не хватает — например people hub.А вот самое большое разочарование был маркетплейс — по ощущениям 90 процентов полный шлак.
                    • UFO just landed and posted this here
                        +2
                        Просто само приложение Marketplace не умеет хорошо ориентироваться в своих приложениях! Есть, например, AppFlow, там подбираются гораздо более достойные вещи.
                        • UFO just landed and posted this here
                      +1
                      Ну почему же, вполне логично. В данный момент вы находитесь на странице записей конкретного месяца. Два пальца в стороны открыли бы конкретную запись, то есть вы как бы зумите, углубляетесь.
                      А два пальца внутрь, то есть pinch, означает отдаление или переход на уровень выше, то есть ко всему календарю.
                        +9
                        я понял что МС предлагает использовать semantic zoom в зависимости от контекста, т.е. пользователю прийдется запомнить zoom навигацию на каждом экране каждой программы? А при первом использовании программы действовать наугад? Как то это не интуитивно.

                        Вот другой пример из кейса. Как в нем вообще догадаться, что за жестом скрывается уровень выше и какая в нем информация?



                        Интерфейс конечно легкий и красивый, но пока мне нифига не понятный :(
                          +5
                          Это дело привычки. Лично мне пока все кажется логичным. Я думаю, в гайдах у МС будет четко прописаны действия и их семантика.
                            0
                            Очень надеюсь, что это всё будет прописано и будет контролироваться.
                              +1
                              т.е. чтобы пользоваться планшетом нужно будет читать гайды?)
                              • UFO just landed and posted this here
                            • UFO just landed and posted this here
                                0
                                т.е. мне как разработчику, если я захочу выпустить программу для metro, надо начинать учиться делать такие же видео для обычных функций? Вопрос же не в том как удобно будет пользоваться продуктами от МС, а как делать свои :)
                                • UFO just landed and posted this here
                                +1
                                Тут вот в чём дело — попользуйтесь Вин8 — привыкните. Я посмотрел пару роликов и привык к тому, что практически в любом списке можно сдвинуть пальцы и попасть вверх. Будет это поиск, или другой уровень зума приложения — не важно.

                                Кабэ вопрос в том, что они ввели новый интерфейс и новые понятия, так что это можно. Прикол, например в том, что МС запретили по стандарту использовать больше двух пальцев для жестов, что на самом деле очень круто. Это создаёт меньше замешательства, чем случайный трёхпальцевый жест на айподах-айфонах, который приводит к зуму экрана. У меня просто очередь юзверей на анзум была.
                                  +1
                                  Стоп а с мышкой как?
                                    0
                                    Ctrl(или Win)+колесо
                                    • UFO just landed and posted this here
                                        0
                                        Скоро так и будет — компы пойду с touch-screen-ами, а мышкая найдется применение лишь в качестве педали. ))
                                    0
                                    Загвоздка в том, что почти никто не использует жестов, кроме прокрутки и увеличения.
                                    В iOS или Android с этим не будет никаких проболем, так как там все действия продублированы с помощью кнопок, а Metro вынуждает использовать замысловатые жесты, что усложняет взаимодействие с устройством не давая простому человеку ничего взамен.
                                      0
                                      Что именно вы называете «замысловатыми жестами»?
                                +2
                                Это semantic zoom — масштабирование в текущем контексте. Например, длинное содержимое с контентом, разбитым по категориям, схлопывается до списка категорий с метаинформаций, откуда можно быстро перепрыгнуть в нужный раздел.
                                  0
                                  Вот вот, а еще на картинках на iPad в 3 раза больше информации умещается, хотя если брать этот масштаб у windows экран больше. Красиво конечно… но как будто бы оторвали руки ноги и голову, осталось туоловище которое надо пинать ногами чтобы оно двигалось. Из за этого приходится придумывать мультитач жесты причем без подсказок. Я бы никогда не додумался, что можно на картинке в окошке сделать пинчтузум… и вместо увеличения картинки появился календарь :-0. Вообще странная штука, раньше у винды были мелкие элементы вроде например кучи иконок внизу бара или кнопочки в windows mobile мелкие для стилуса. А тут прямо противоположное… из одной крайности в другую… кстати на верхней панеле можно было бы сделать типа пути в проводнике (иерархию меню) мы же переходит то в одно из него в другое и т.д. + кнопочку типа запущенные приложение и расположить их плиткой в metro где они все живые и работающие… удобно и красиво.
                                    0
                                    Я думаю, что в МС люди рассматривали эти варианты, и по каким-то объектимным причинам пришли пришли к такой концепции. Не хочу Вас обижать, но силньо сомневаюсь что Вы самый умный и вот за пару минут рассказали ребятам из МС, что и как надо делать.
                                    Если вам не нравится концепция Метро, Вы можете пройти мимо, не покупать девайсов на win8 и не делать приложений под нее. Вы даже не пользовались системой какое-то время, что бы понять удобно это или нет, а уже выводы делаете.
                                    Я думаю, что те кому по душе Метро стиль, разбируться в системя и достаточно быстро привыкнут. Не вижу ничего плохо в новых механизмах, которые не совсем вписываются в устоявшееся представление, собственно это и есть прогерсс.
                                    +3
                                    >pinch two fingers to zoom out and see all the months and years
                                    Во встроенном просмотрщике фотографий в ипаде управление как раз такое. Или эта цитаты и была про ипад?

                                    По теме: я рад, что под влиянием Эппла и другие начали задумываться о дизайне, вместо того, чтобы гнаться за мегабайтами и мегагерцами, а создание интерфейса поручать программистам :)
                                    С нетерпением ожидаю виндопланшетов.
                                    +1
                                    А что за планшет такой на котором демонстрируется W8? iPad по сравнению с ним выглядит как-то не очень)
                                      +33
                                      я могу вам такой нарисовать
                                      • UFO just landed and posted this here
                                          +3
                                          264 DPI у айпада нового. Ну да не принципиально.
                                          • UFO just landed and posted this here
                                              +5
                                              В чём? В том, что это не принципиально?)
                                              Потому что информация по DPI прямо в спеках устройства на сайте Apple указана.
                                            +1
                                            Если верить блогу build windows 8, то планшеты на win 8 будут вплоть до 291DPI (да, у the new iPad таки 264 DPI)
                                            image
                                              0
                                              "- А почему Вы решили, что он — может?
                                              — Так он сам говорит!
                                              — Ну и Вы говорите!"

                                              А если серьезно, то с какого-то момента разницы уже особо не будет. Если конкуренты выпустят не 291, а 300 или 250, вряд ли это заставит юзеров выкинуть старое и купить новое: и так четкость и плавность линий будут «за гранью».

                                              Вопрос только, чтобы при любых dpi элементы управления имели удобный для навигации на конкретном устройстве размер. А то в текущей релизной винде (7 и ниже) dpi в системных настройках лучше не менять, так что при (взятом из примера) 10.1" нетбуке и разрешалке 1366х768 надо уже потренироваться в кнопки попадать — и с мышкой, и с пальцем свои затруднения возникают.
                                                0
                                                там рядышком лежит еще одна картинка, тренеруйтесь :) image
                                          0
                                          МС типа спроектировали сами интерфейс для iPad, в проектировании которого они ничего не понимают и спроектировали интерфейс под Вин, в проектировании которого только они и понимают и как это сравнивать?

                                          Пусть они сделают iPhoto(например) для Вин и сравнят, я думаю, что только в этом случае сравнение может быть более-менее равным, а так, ниочем, чистый маркетинг, аля «у нас лучше чем у них, смотрите как у нас можно делать».
                                            +1
                                            Я согласен. Поведение MS достаточно biased, много примеров приложений для iOS которые имеют очень интуитивный и простой интерфейс (Twitter, Sparrow). Метро вообще на любителя, я не считаю что это новая веха в дизайне приложений. Да, это оригинально и неплохо смотрится на мобильных телефонах и таблетках (наверное:-), но ничем объективно не лучше чем iOS или ICS. ИМХО
                                              +1
                                              Если бы Вы внимательно читали статью, то поняли бы, что статья не о том, что win8 лучше iOS, а ориентированна на разработчиков, что бы объяснить концепции Метро дизайна и показать как сделать под Метро то, что они делали по iOS.
                                                0
                                                О чем статья я понимаю. Другой вопрос, о чем была мысль в моем комментарии: показать отличия одного подхода от другого, объяснить концепцию — это здорово, но конкретно в этом случае это выглядит так:
                                                «спроектировали сами интерфейс для iPad, в проектировании которого они ничего не понимают и спроектировали интерфейс под Вин, в проектировании которого только они и понимают и как это сравнивать?».

                                                PS Я имею большой опыт проектирования для iOS, очень хорошо знаю и понимаю их подходы и методы. И, когда я со своего профессионального уровня оцениваю то, что написано в статье, то сразу понимаю, что спроектировали интерфейс приложения для iOS они очень плохо.
                                                  0
                                                  Ничего не понимаю в проектировании под iOS, поэтому не могу дискутировать. Просто мне показалось, что Вы увидели статье сравнение концепций на тему «кто лучше», хотя статья о другом.
                                                  Если я неправильно понял Ваш комментарий, то прошу прощения.
                                              +1
                                              Интересно, а как мышкой можно двупальцевый жест симулировать?
                                                +2
                                                а много мобильных устройств используется с мышкой?
                                                  +6
                                                  А зачем мобильных? Метро и на десктопе будет. С точно теми же самыми приложениями.
                                                  +6
                                                  Нужна вторая мышка!
                                                    +4
                                                    Роликом. Всегда ваш, к.о.
                                                      +1
                                                      А если у Кэпа мышь в этот момент будет находиться над прокручиваемой лентой? А если вся программа будет прокручиваемой лентой (часто бывает)? А если программа у Кэпа будет иметь несколько таких ступеней интерфейса? Не очень-то удобно колесом мыши делать строгое количество «шагов». Особенно в уже хорошо попользованных мышках, у которой шаги почти не ощущаются.
                                                      • UFO just landed and posted this here
                                                      +1
                                                      Посмотрите на мышки Microsoft Touch Mouse и Logitech M600. У них сенсорная поверхность с поддержкой мультитач. Также, как и у многих тачпадов на новых ноутбуках.
                                                        +2
                                                        Какая разница, что это есть в некоторых устройствах? Чтобы на Win8 не плевались, нормальная работа с интерфейсом должна быть у всех пользователей.
                                                      +3
                                                      Молодцы Майкрософт.
                                                      Побольше таких демонстраций и, может быть, больше разработчиков под WP7(а дальше и под Win8/WP8) начнут грамотно работать со стилем Metro. А то, порой, за голову хватаешься, как плохо обстоят дела с интерфейсом у огромного количества софта в Маркетплейсе.
                                                        +1
                                                        Ребята из Майкрософта хорошо понимают где будет очередное сражение и начиняют потихоньку к нему готовится. В их случае, с windows знакомы куда больше народу чем с работами коллег по опасному бизнесу.
                                                          +1
                                                          а по-моему microsoft сейчас пытается запрыгнуть в уходящий поезд
                                                            +1
                                                            Им бы только не опоздать на это самое сражение годика так на два
                                                              0
                                                              С XBox получилось, может и здесь получится.
                                                            –4
                                                            Мне кажется, политика «догоним и перегоним Эппл» изначально является провальной.
                                                            Почему нельзя просто делать свои хорошие продукты, не обращая внимания на конкурентов?

                                                            А это вообще звучит как какое-то оправдание своей „крутости“:
                                                            «Иерархию навигации iPad-приложений нужно упростить до одного уровня. Например, в iPad-приложении нижняя панель табов отвечает за переключение между двумя экранами: просмотр фотографий и просмотр комментариев… В интерфейсе Metro всё это упрощается до одного уровня»

                                                            А ведь это всего лишь руководство предназначеное, в первую очередь, для дизайнеров.
                                                            Лично я увидел в этом трактате другое название «Почему у Эппла интерфейс говно, а у нас всë круто».
                                                              +5
                                                              Никакого «Почему у Эппла интерфейс говно, а у нас всë круто» тут нет.

                                                              Просто парадигмы интерфейса WP7 кардинально отличаются от того, что есть у конкурентов.
                                                              Простым портированием софт с iOS на винфон не перенести, в отличии от Андройда.
                                                              Тут нужно полностью перерабатывать интерфейс. Именно о том, как это делать и пишутся подобные статьи.
                                                              0
                                                              В приложении Photo на iPad есть вкладка Places, которой я не пользуюсь — у меня все фотографии в одном городе сделаны или вообще без геотага. Получается, что в Metro эта карта должна мозолить мне глаза возле каждого альбома?
                                                                +1
                                                                Кто такое сказал? :) все зависит от проектировщика интерфейса. Если это ключевая функция приложения (например карта у 4sq) то конечно лучше ее на первый экран. Если какая-то второстепенная, то найдется много мест, куда ее пристроить.
                                                                Здравый смысл выключать в гайдлайнах не рекомендуют.

                                                              Only users with full accounts can post comments. Log in, please.