Принципы проектирования Майкрософт

Статья
04/07/2015

Принципы хорошего проектирования

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

О современном проектировании

Корпорация Майкрософт долгое время остается технологическим лидером во многих областях и продуктах. В последнее время начали происходить перемены, которые заставляют уделять все больше внимания проектированию. Эти перемены характеризуются четкими принципами, перспективными и важными идеями, замечательными исследованиями и ощущением, что все остальное уже устарело. Принципы, лежащие в основе этих перемен, воплотились в принципах проектирования корпорации Майкрософт.

Философия принципов проектирования Майкрософт находит выражение в просторных, не загроможденных лишними деталями экранах приложений, которые быстро работают, позволяют минимизировать ввод текста и автоматически уведомляют вас о наличии новой и обновленной информации. Пользователь взаимодействует с содержимым, а не с элементами управления, которые представляют содержимое. Размещение и оформление визуальных элементов прекрасно продумано.

Принципы современного дизайна

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

Баухауз: широко известная школа дизайна, основанная в 1919 году, продвигала философию эффективного дизайна: избавляйтесь от всего лишнего. Мало определить, какие функции приложения являются основными, — необходимо быть дисциплинированным, чтобы не увеличивать их количество сверх необходимости. Антуан де Сент-Экзюпери отмечал, что совершенство достигается тогда, когда уже нечего убавить. Простота способствует не только красоте, но и удобству использования.
Международный типографский (швейцарский) стиль: этот стиль вдохновляет дизайнеров корпорации Майкрософт прежде всего и больше всего своим отчетливым, опрятным, красивым шрифтом. Основными преимуществами стиля являются опрятность, удобочитаемость и вещественность. Из этого стиля мы взяли обязательное использование сетки как для печати, так и для визуального отображения, а также использование асимметричных макетов с точки зрения принципиального построения и красоты.
Динамический дизайн: движение оживляет взаимодействие и создает ощущение изящества. Мы черпаем вдохновение в работах таких пионеров, как Сол Басс, который при создании прекрасных титров для кинофильмов сочетал движение, шрифтовые эффекты и дизайн. Хороший динамический дизайн не только нравится пользователям, но и может подсказать, как выполнить задачу.

Подробнее об этих основах см. в разделе о современном проектировании в Майкрософт.

Все вышеописанное вдохновило нас на создание наших собственных принципов, которыми мы руководствуемся при проектировании. Хотя мы выбрали эти принципы для себя, в определенном смысле они являются общими, поэтому мы надеемся, что они помогут вам развивать вашу торговую марку на нашей платформе. Принципы проектирования Майкрософт:

Мастерство
Лаконичность
Быстрота и плавность
Естественная цифровая среда
Единство

Мастерство

Мы не зря считаем этот принцип главным. Творцы, создатели и мастера всегда отличались в профессиональной среде тем, что гордились своей работой. Этот принцип заключается в том, чтобы уделять внимание деталям — тратить время, энергию и вдохновение на мельчайшие подробности, которые часто оказываются на виду или замечаются многими людьми. Мы говорим о проектировании взаимодействия, которое должно быть законченным и оформленным на любом этапе — от элементов, тщательно (буквально до пикселя) выровненных по сетке, до цветовых решений и шрифтов на экране. Стремитесь к тому, чтобы ощущать гордость за свое мастерство на любой стадии разработки.

Использование сетки

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

Современная типографская сетка — это основа, которая обеспечивает целостное восприятие вашего содержимого.

Иерархия и баланс

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


Иерархия	Плохо обозначенная иерархия

Крупный текст, высокая цветовая контрастность. В предыдущем примере "потоки" представляют собой заголовки выбранного элемента pivot. Он задает контекст для отображаемого под ним содержимого. Заголовок имеет высокую контрастность (белый на черном). Это сообщает нам, что он является выделенным на странице. Остальные заголовки элементов имеют более низкую контрастность (серый на черном). Благодаря этому они не выделяются на странице.

Текст среднего размера. Самой важной деталью в списке потоков является имя лица, с которым вы обмениваетесь сообщениями.

Текст самого малого размера. Первые одна-две строки в каждом сообщении — это следующий по важности элемент. Прочитанные сообщения отделяются от непрочитанных и от имени отправителя цветом.

Интервалы и выравнивание. Используйте большие интервалы между потоками — и меньшие внутри потоков, — чтобы визуально сформировать иерархию. Даже простое выравнивание отметки времени сообщения по правому краю выделяет это сообщение.

Плохо обозначенная иерархия. Без иерархии страница теряет смысловую нагрузку и удобочитаемость. Пропадает эстетическая привлекательность, и, что еще более важно, пропадает удобство использования.

Кто вы?

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

Традиционные гарнитуры шрифтов отражают серьезность этого источника новостей.

Приложение The New York Times Традиционные гарнитуры шрифтов отражают серьезность этого источника новостей.

Гарнитуры шрифтов в этом приложении являются современными и элегантными.

Camera360 Гарнитуры шрифтов в этом приложении являются современными и элегантными.

Резюме и контрольный список

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

Лаконичность

Согласно этому принципу приложение ограничивается только своими основными функциями. Думайте о содержимом, а не о внешнем оформлении. Содержимое может существовать в различных формах: изображения, сообщения электронной почты, новые статьи и т. п. Откажитесь от избыточного внешнего оформления, оставив на экране только самые важные элементы. И везде, где это возможно, создавайте элементы навигации в самом содержимом. Обеспечьте четкое иммерсивное взаимодействие. Каждый элемент на экране должен быть нужным и иметь четкое назначение.

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

Думайте о содержимом, а не о внешнем оформлении

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


Акцент на содержимом	Отказ от избыточного внешнего оформления

Освободите пространство для содержимого

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

Резюме и контрольный список

Лучше быть выдающимся в чем-то одном, чем посредственностью во многом.
Сначала содержимое, и лишь затем — внешнее оформление.
Следуйте визуально ориентированному, прямому подходу, позволяя людям погрузиться в то, что они любят, и они пойдут дальше.
Добивайтесь доверия пользователей.
Сокращайте избыточность пользовательского интерфейса.

Быстрота и плавность

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

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

Динамичность

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

Живые плитки быстро реагируют на изменения, они динамичны и привлекательны.

Движение

Создайте ощущение непрерывности и позвольте приложению самому рассказать о себе через продуманное использование движения. Движение может подсказать пользователю, как перейти к действию или отличить разные виды действий. Экран блокировки при прикосновении подпрыгивает, чтобы показать, что вы можете сдвинуть его вверх. Переход при скрытии элемента подсказывает, как вернуть его обратно.

Используйте движение со смыслом

Резюме и контрольный список

Чутко реагируйте на взаимодействие с пользователем и будьте готовы к следующему взаимодействию.
Проектируйте непосредственное сенсорное взаимодействие.
Восхищайте пользователей с помощью движения.
Создавайте плавные переходы от предыдущих событий к последующим.

Естественная цифровая среда

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

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

Доставка информации

Будьте инфографичными, а не иконографичными. Главная цель — доставка информации. Нельзя допустить, чтобы она затерялась в лишних деталях. Внедрение принципа инфографии означает более четкое представление содержимого, доставку информации, с которой можно работать, и ничего отвлекающего.


Иконографично	Инфографично

Резюме и контрольный список

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

Единство

Этот принцип означает унификацию вашей собственной работы, согласование ее с общей экосистемой и внедрение инноваций везде, где это возможно. Разложите вашу работу на простые операции, чтобы сценарии приложения и пользователя на других платформах работали совместно, как одно общее взаимодействие и одна торговая марка. Знакомые методы воодушевляют пользователей, которые не хотят переучиваться для каждой поверхности, с которой они взаимодействуют. Поэтому отталкивайтесь от общей платформы программного обеспечения и служб Майкрософт. Стройте ваши взаимодействия на признанных и распространенных элементах управления, касаниях, шаблонах взаимодействия и даже на распространенных методах проверки подлинности и использовании облачных служб для хранения.

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

Мыслите платформенно

Подумайте, как ваше приложение могло бы работать на различных устройствах и форм-факторах экосистемы Майкрософт. Спросите себя: "Для чего лучше использовать это устройство?" — и оптимизируйте взаимодействие под эти сильные стороны. Использование нескольких платформ может обеспечить вам возможность проектировать для сценариев, которые были бы невозможными при работе только с одной платформой.

Подумайте, как ваше приложение могло бы работать на различных устройствах и форм-факторах экосистемы.

Резюме и контрольный список

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

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