Кейс из России: Разработка панели инструментов для программ «МойОфис»

Включение

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

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

У пользователя, тот или иной долго взаимодействует с любым продуктом, вырабатываются определённые привычки: производство с теми или иными функциями, надавливание на кнопки в привычных местах и яко далее. Например, все пользователи Windows привыкли к кнопке «Home» в левом нижнем углу и к тому, что-что происходило при нажатии на эту кнопку. Рано ли кнопка исчезла и затем вернулась, так уже с измененным принципом работы, пользователи испытывали глубокий дискомфорт и теряли в производительности.

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

• Ленточный (Ribbon) — если большое количество действий распределено числом разным вкладкам:

• Традиционный — когда большое контингент действий выводится на единую обшивка инструментов, а менее важные действия переносятся в карточка:

Пользователи привыкают к одной схеме и перевоплощение на другую часто воспринимается «в штыки». Хватает вспомнить обновление пакета Microsoft Office в 2007 году, в отдельных случаях ленточный интерфейс пришёл на смену традиционному.

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

Всё же слепо копировать чужие решения пишущий эти строки тоже не хотели, так (как) будто видели в них ряд существенных недостатков:

• Как води 80% пользователям требуется только 20% функциональности изо того многообразия, которое они видят получи панели управления.
• Некоторые функции являются контекстными (ведь есть зависят от выбранных в документе объектов), многие относятся к документу в целом. Но подле этом функции могут находиться для одной вкладке.
• Некоторые функции дублируются возьми разных вкладках, но при этом функции имеют небо и земля названия.
• И много других мелких (и мало-: неграмотный очень) особенностей.

Кроме того, современные пользователи в ходе работы по-над документом могут переключаться между разными форм-факторами и платформами: творить документ на ноутбуке в самолёте, нести труды и заботы совместно с коллегами в браузере, вносить правки с мобильного устройства. В некотором расстоянии не все офисные пакеты позволяют свободно (с точки зрения пользовательского взаимодействия) перепрыгивать между устройствами.

Ниже мы расскажем о тех правилах, подходах и особенностях, которые да мы с тобой используем в панели управления редакторов «МойОфис».

Развратница концепция

В нашей панели инструментов основы управления распределены по нескольким вкладкам:

• «Текст». Охватывает функции для работы с текстом: размер шрифта, лучший текста, междустрочный интервал и другие.
• «Таблица» (сиречь «Ячейка» для табличного редактора). Заключает функции для работы с ячейками таблицы: помещение столбцов или строк, заливка ячейки, фильтрование значений и другие.
• «Рецензирование». Содержит функции для того работы с изменениями в документе: принять иначе говоря отклонить правки, включить или отключить их индикация и другие.

В ближайшее время появятся пока еще несколько вкладок, например «Изображение».

С первого взгляда, сие очень похоже на «ленточный» отношение. Но в нашей реализации различные настройки и системные поступки с документом (создание копии, совместный вход и другое) перенесены в главное меню. А поведение по добавлению различных объектов собраны в едином месте:

• Во (избежание веб- и настольных редакторов — панель в правой части экрана.
• Во (избежание мобильных редакторов — панель действий в верхней части экрана.

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

Получилась сильно сфокусированная пульт управления инструментов, где набор функций и цифра вкладок определяются объектом, с которым в разрешенный момент взаимодействует пользователь. Например, рядом работе в текстовом редакторе человек в большинстве случаев видит точию одну вкладку «Текст», которая включает действия по форматированию текста. Возле вставке таблицы в документ и работе с этой таблицей (в таком случае есть при выборе ячеек возможно ли самой таблицы) автоматически появляется супинатор для работы с объектом. Как не менее таблица теряет фокус — вкладка исчезает.

Такая контекстность влияет и нате набор элементов управления на панели. Во, в текстовом редакторе при работе с текстом в таблице возьми вкладке «Текст» появляются действия на выравнивания по вертикали.

В режиме «Только чтение» пульт управления инструментов может вообще отсутствовать, если только владелец документа не включил заметка изменений.

Все функции панели управления продублированы в главном каталог.

Из чего состоит панель инструментов

Позволяется выделить несколько типов элементов управления:

Простая кнопочка

Нажатие на такую кнопку производит единичное реализация с объектом. Например, увеличивает размер шрифта или — или добавляет столбец в таблицу.

Кнопка включения али отключения какого-либо свойства

Во, сделать текст жирным. Такие кнопки навсегда имеют два состояния.

Выпадающий прай (или список-диалог)

Позволяет отобрать один из вариантов форматирования. Хоть бы, выбор цвета текста или вроде маркированного списка.

Двухсегментый элемент управления

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

Сложный составляющий список (или диалог)

Список не то — не то диалог, который позволяет выполнять едва действий без закрытия. Например, форматировать габариты ячейки или настраивать абзац.

Порядок отображения элементов панели

Редакторы «МойОфис» работают для большом количестве платформ и форм-факторов: через небольших телефонов с диагональю экрана почти четырех дюймов до больших планшетов словно iPad Pro.

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

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

Уменьшение размера элемента

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

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

Узел элементов

Несколько элементов управления могут сводиться в один элемент вроде «Выпадающий список». Такое организация возможно для элементов, которые имеют одинаковую в соответствии с смыслу функциональность. Например, элементы в (видах выравнивания текста.

Несколько строк в панели управления

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

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

С целью смартфонов наличие нескольких строк в панели управления — сие стандартная ситуация. Ширина экрана мало-: неграмотный позволяет уместить в одну строку вконец набор элементов управления (либо придётся сооружать эту строку с горизонтальной прокруткой). Хотя и на экране смартфонов могут показываться или исчезать дополнительные строки около изменении ориентации.

Скрытие элементов в дополнительное выпадающее подбор

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

Особенности работы на мобильных устройствах

Расположение панели инструментов

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

На) этом месте сразу же возникает сложность — кайфовый время написания текста появляется клавишная панель, которая, естественно, перекрывает панель инструментов. К решения этой проблемы мы реализовали коммуникатор над клавиатурой. Он позволяет борзо скрыть либо клавиатуру, либо панелька инструментов.

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

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

Особенности элементов управления

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

На Android-смартфонах не вводится дополнительного уровня иерархии и конец выпадающие списки и диалоги ведут себя соответствующе. Их размер (размах и высота) зависит от информации, которая в них отображается.

На (место заключения

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

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

Пожалуйста было бы прочитать в комментариях, а какие ваша милость выделяете недостатки или, наоборот, добродетели офисных приложений на разных платформах? Редактируете ли тексты неужто документы на смартфоне или планшете?

Источник: vc.ru