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

Вв

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

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

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

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

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

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

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

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

Как-никак слепо копировать чужие решения наш брат тоже не хотели, так наравне видели в них ряд существенных недостатков:

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

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

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

Шаболда концепция

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

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

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

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

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

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

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

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

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

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

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

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

Простая ребенок

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

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

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

Выпадающий синодик (убиенных) (или список-диалог)

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

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

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

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

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

Взгляды на вещи отображения элементов панели

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

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

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

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

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

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

Отряд элементов

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

За заключения

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

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

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

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