UXPUB 🇺🇦 Спільнота дизайнерів

Cover image for Как мы создаем Dark Mode для продуктов Microsoft 365
Редакція
Редакція

Опубліковано

Как мы создаем Dark Mode для продуктов Microsoft 365

Люди думают, что Dark Mode - это просто выбор между черным и белым экраном, но эта функция также включает в себя широкий спектр градаций серого и цветовых градиентов.

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

Мнение аудитории сильно повлияло на то, почему мы впервые добавили более темную тему пользовательского интерфейса в настольные приложения Office 2010 и с тех пор все чаще используем ее в работе с Microsoft.

Взаимодействие между компаниями в области дизайна способствует беспрепятственному внедрению Dark Mode в более широкий набор продуктов M365, и на сегодняшний день Dark Mode уже доступен для Outlook, для iOS и Android, а также для Office.com!

https://www.youtube.com/watch?v=E4pFtIybimo

Проектирование Dark Mode для мобильных версий Outlook и Office.com

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

Наше дизайн исследование было сосредоточено именно на этих ситуациях, когда Dark Mode необходим пользователям. В то время как некоторые приложения в Dark Mode могут быть слишком яркими, при работе в Outlook люди почувствовали расслабление. Аудитория отреагировала на этот опыт очень положительно, это удобно, изображение четкое, ясное и эстетически приятное, Dark Mode действительно снижает нагрузку на глаза.

Dark Mode на iOS.

Dark Mode также экономит заряд аккумулятора, удобно, если вы часто путешествуете или находитесь в пути в течение длительного времени. Мы расширяем возможности, поэтому после следующего цикла выпусков ОС на iOS и Android, Outlook автоматически переключится в Dark Mode в зависимости от заданных вами предпочтений. В то же время, Outlook для Android автоматически переключается в Dark Mode при включении режима экономии заряда батареи.

Веб-версия Dark Mode

Дизайн культура творческого взаимодействия

Наш последовательный творческий процесс полностью отражается в плавности и гибкости системы проектирования Microsoft 365. Мы собрали вместе всех дизайнеров компании, чтобы создать уникальный режим Dark Mode для всех наших мобильных и веб-приложений. Процесс создания режима был полон творчества и обмена идеями, взаимодействие с новыми коллегами, это было так круто.

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

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

Ожидаемый выпуск Dark Mode в приложениях Microsoft 365

Мы рады предоставить доступ к Dark Mode еще большему количеству продуктов Microsoft 365, начиная с дополнительных мобильных приложений. Dark Mode будет доступен в Word, Excel и PowerPoint на мобильных устройствах с выпуском iOS 13, а также iPad. Этот же запуск также позволит использовать Dark Mode для мобильных версий SharePoint, OneDrive, OneNote, Planner и To-Do.

Впереди еще много новинок и улучшений - Dark Mode для всех клиентов Outlook, Planner и OneDrive - так что следите за обновлениями. Будем очень рады услышать ваши мысли и отзывы в комментариях ниже!


Перевод статьи Jon Friedman

Топ коментарі (0)

Web Design Junior

Логічне продовження курсу Web Design Beginning. За три місяці перейдемо від створення базових лендингів до роботи над складними сайтами та e-commerce проєктами. Навчимося презентувати роботу клієнту й аргументувати власні дизайн-рішення
Дізнатись більше