Представляем Walrus - усовершенствованную систему проектирования DigitalOcean, основанную на доступности и мобильности

Представляем Walrus — усовершенствованную систему проектирования DigitalOcean, основанную на доступности и мобильности

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

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

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

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

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

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

Для первой итерации компонентов пользовательского интерфейса мы разработали с учетом Руководства по обеспечению доступности WCAG AA W3C, задали много вопросов в сообществе Slack A11Y и изучили системы проектирования с открытым исходным кодом. Когда компоненты были размещены в виде, мы также активно использовали удивительный инструмент De Pro Ax Pro, который выявлял проблемы, когда в наших собственных знаниях были пробелы.

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




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

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

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

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


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

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

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

Мы надеемся, что вы присоединитесь к нам — среди многих других великих компаний — в исправлении ошибки, заключающейся в том, что вы не включили ее с самого начала. И если вы используете консоль DigitalOcean со вспомогательными технологиями, мы приглашаем вас принять участие в исследованиях, которые помогут еще больше улучшить впечатления. Если это так, пожалуйста, свяжитесь с amorozoff@digitalocean.com. И если у вас есть какие-либо отзывы или мысли, мы рекомендуем вам поделиться ими!

С любовью,
Команда разработчиков и разработчиков DigitalOcean