Привет! Мы компания АСКОН, разработчик инженерного софта. Возможно, вы слышали про наши продукты КОМПАС-3D, Вертикаль, ЛОЦМАН:PLM, Pilot-ICE, Renga и геометрическое ядро C3D.
Они помогают промышленным предприятиям создавать модели изделий любой сложности и затем выпускать их на производстве, а строительным компаниям и проектным организациям воплощать архитектурные замыслы и управлять информационной моделью зданий и сооружений.
В нашем блоге мы будем рассказывать о самых разных сторонах разработки продуктов: развитии функционала, тестировании, api, дизайне, юзабилити, работе с геометрическим ядром (а оно у нас собственное!), команде и других важных, любопытных и иногда инсайдерских подробностях!
Сегодня у нас важный день. Не только потому, что мы опубликовали наш первый материал
на Хабре. 17 апреля мы выпустили новую, можно даже сказать революционную, версию
системы 3D-моделирования КОМПАС-3D v17. И главный герой этой революции — интерфейс. Ему и посвящается пост (в нескольких главах!) Сергея Швецова, дизайнера-проектировщика
пользовательских интерфейсов АСКОН. Осторожно, трафик.
Эпиграф
«Писать книгу — это как мыть слона: трудно решить, с чего начать, и трудно понять, где слон уже вымыт, а где ещё нет». Не знаю, кому принадлежит этот афоризм, но верность его я испытал на собственной шкуре. Это верно для книг и так же верно в отношении дизайна интерфейсов. Все просто: слон большой, но и любой проект тоже большой. В нём много работы вообще и даже много разных видов работ. Нужно знать, что делать, когда делать, когда переставать это делать.
Влад В. Головач
«Дизайн пользовательского интерфейса 2. Искусство мыть слона»
Глава никакая, из которой тем не менее можно кое-что узнать
Чтобы узнать, почему КОМПАС-3D v17 получился таким, каким получился, нужно знать входные требования заказчика к современным САПР и пожелания пользователей. Как любой зрелый продукт, КОМПАС-3D подошел к рубежу жизни, когда пользователи хотят, разработчики не могут и терпеть уж нету больше сил! На фоне этих событий было принято решение провести модернизацию. Зачем?
1. Преодолеть моральное и технологическое устаревание. Архитектура нового интерфейса (в том числе интерфейса взаимодействия, а не только картинки) должна позволять решать задачи, возникающие в будущем, без серьезной переделки концепции. Например, тенденция к росту диагоналей и разрешений экранов мониторов ведет к тому, что интерфейсу нужно подстраиваться под эти растущие разрешения. И самое главное — это должно быть удобно пользователю. Т.е. пользователь должен иметь возможность подстроить размеры интерфейсных элементов и текста. Начало такой работе положено. Новый интерфейс КОМПАС-3D v17, за исключением изображений в интерфейсной справке, полностью «векторный». Это позволяет масштабировать интерфейсные элементы и тексты вне зависимости от разрешения монитора. И пользователь с монитором стандартного разрешения, и пользователь с монитором высокого разрешения смогут работать с привычной «картинкой» одинаково хорошего качества.
2. Создать задел на будущее, чтобы новый КОМПАС-3D мог решать задачи и выполнять пожелания пользователей в ближайшие несколько лет. Т.е. новый интерфейс должен быть достаточно гибким, чтобы соответствовать требованиям пользователей и одновременно быть быстрым в производстве. Также важна возможность конструирования потенциально любого интерфейса с минимальными издержками для разработки. Для этих целей мы провели тотальную унификацию и стандартизацию всех интерфейсных элементов, диалогов, панелей.
3. Сохранить преемственность старого и нового интерфейсов. Это был, пожалуй, самый сложный этап из всех, но систематизация и унификация сделали свое дело. Удалось практически без потерь перенести функциональность прошлых версий, не потеряв при этом сложившихся приемов работы.
4. Унифицировать КОМПАС-3D с иностранными популярными САПР для условно «бесшовного» перехода пользователей в КОМПАС-3D, не потеряв собственного «лица», приобретенного в предыдущих версиях.
5. Увеличить юзабилити.
6. Бесшовно интегрировать в интерфейс библиотеки и приложения, которых у КОМПАСа очень много.
Как мы решали эти задачи, вы узнаете в следующих главах. Но перед тем, как начать, мы приобрели:
Специальный подарочный набор «Инструменты Оккама».
То, что сегодня называют «бритвой Оккама», не было создано Оккамом, если иметь в виду базовое содержание этого принципа. То, что в условиях Проторенессанса сформулировал Оккам, было известно, по крайней мере, со времён Аристотеля.
В набор входят:
1. Бритва Оккама – 1 шт.
2. Грабли Оккама – 1 шт.
3. Клизма Оккама (в специальной подарочной упаковке от компании «Хэнк и Ко») – 1 шт.
4. Булавка Оккама (в специальной подарочной упаковке от компании «Кант и Ко») – 1 шт.
И вот мы запаслись необходимым инструментарием, терпением и здравым смыслом и сделали это:
Нет, погодите, еще рано. Давайте сначала вспомним суфийскую притчу Джаллаладина Руми про слона.
Из Индии недавно приведен,
В сарае тесном был поставлен слон,
Но тот, кто деньги сторожу платил,
В загон к слону в потемках заходил.
А в темноте, не видя ничего,
Руками люди шарили его.
Слонов здесь не бывало до сих пор.
И вот пошел средь любопытных спор.
Один, коснувшись хобота рукой:
«Слон сходен с водосточною трубой!»
Другой, пощупав ухо, молвил: «Врешь,
На опахало этот зверь похож!»
Потрогал третий ногу у слона,
Сказал: «Он вроде толстого бревна».
Четвертый, спину гладя: «Спор пустой
Бревно, труба… он просто схож с тахтой».
Все представляли это существо
По-разному, не видевши его.
Их мненья — несуразны, неверны —
Неведением были рождены.
А были б с ними свечи-при свечах
И разногласья не было б в речах.
– Слон сходен с водосточною трубой!
Глава 1. Интерфейс — зло
«Зачищаем» интерфейс от визуального мусора (лишние линии, градиенты, цвета). Делаем доступными «все» кнопки, убираем лишние. В текущий момент присутствует только то, что сейчас нужно. Группируем команды. Быстрая панель. Панель деревьев.
Визуальный мусор окружает нас повсюду, а природа человека такова, что мы приспосабливаемся и через некоторое время перестаем замечать его. Но как всякая система, человек тратит ресурсы на поддержание распознавания и игнорирования этого мусора, но уже в фоновом режиме. Для того, чтобы увеличить производительность наших пользователей, мы бережно убрали линеечки в три ряда, градиентики, черточки и палочки — всё, что превращало панели инструментов в смесь золы и гороха.
Оставив только необходимые элементы, мы сделали интерфейс более чистым и выразительным. Каждый элемент теперь отвечает за свое поведение, и везде это поведение одинаково.
Следующей задачей было уменьшить «количество» ненужного интерфейса, не потеряв в удобстве, с учетом того, что современные экраны становятся все более и более широкими. Для этого мы совместили главное меню и практически не использовавшийся заголовок окна. Убрали Строку сообщений. Её функциональность была распределена между панелью Параметры (показ контекстных подсказок в командах) и Центром уведомлений (отображение индикаторов выполнения операций). У панели Параметры оставили только одно положение — вертикальное.
Классический интерфейс. Панель параметры снизу. (Картинка кликабельна)
Классический интерфейс (Картинка кликабельна)
Обновленный интерфейс (Картинка кликабельна)
В предыдущих версиях КОМПАС-3D на экране присутствовало очень большое количество неактивных элементов, которые загромождали интерфейс и затрудняли поиск нужной команды или опции. С одной стороны, интерфейс говорил пользователю, что командой нельзя воспользоваться, с другой стороны, вызывал кучу вопросов. Почему команда неактивна? Что мне нужно сделать, чтобы активировать её? Чтобы убрать деактивацию команд, пришлось существенно переработать внутренние механизмы активации/деактивации. В новом интерфейсе деактивируется небольшое количество элементов с понятной историей деактивации. Например, кнопки Отменить/Повторить (действие), т.к. контекст их активации/деактивации понятен.
Классический вид (Картинка кликабельна)
Обновленный вид (Картинка кликабельна)
Существенные переделки претерпела так называемая Компактная панель. Её «дух» сохранился, но работать все стало по-другому. Её наследник, Список наборов, теперь располагается в верхнем левом углу и имеет гораздо меньше (в конфигурации по умолчанию) элементов, чем прежняя панель. Это связано с тем, что под набором сейчас понимается необходимый комплект инструментов пользователя для выполнения какой-то группы задач. Например, в 3D-моделировании это твердотельное, листовое или поверхностное моделирование. Более того, существуют «виртуальные» наборы, которые включаются в зависимости от контекста использования. Например, набор Инструменты эскиза доступен только в режиме Эскиза. Также некоторые библиотеки могут создавать свои наборы. Еще набор может содержать в себе любую команду, доступную в v17, в том числе и библиотечную, а в v17.1 пользователи сами смогут создавать такие наборы, компонуя команды и группы команд по своему усмотрению.
В 17-ой версии все кнопки, индикаторы, списки и прочие элементы, которые отвечали за отображение состояния модели или чертежа, собраны на специальной Быстрой панели. Это сделано, чтобы интерфейс стал более компактным, а однотипные инструменты были сосредоточены в одном месте. Также на эту панель переехали кнопки режимов и состояний (развертка, разнесение, эскиз).
Классические панели (картинка кликабельна)
Быстрая панель
В 3D все деревья теперь собраны в единую панель. Т.е. понятие Менеджер документа постепенно исчезает. На единой панели теперь сосредоточены: Дерево построения — историческое и структурное, Дерево исполнения и Зоны. Само представление деревьев существенно переработано и унифицировано.
Слева направо: Классическое дерево, Обновленное дерево, несуществовавшее ранее прозрачное дерево в окне модели (картинка кликабельна).
В деревьях появился новый столбец, позволяющий быстро включатьвыключать частотную функциональность. Например, для 3D-документа это Видимость, Возможность редактирования, Включение в расчет и Проецирование.
В Чертеже дерево чертежа тоже существенно переработано. Упразднен Менеджер документа. Вся информация о документе теперь доступна в одном месте, а поиск с фильтрацией позволит быстрее находить необходимый объект на чертеже. Также в дерево перенесены списки для выбора текущего вида и слоя. Если кликнуть по индикатору цветаномера в списке вида или слоя, то можно быстро перейти на текущий вид или слой в дереве.
– Не отличить слона от опахала!
Глава 2. Главное окно и новая панель инструментов
Компоновка. Экономия места. Доступность (контрастность, выбор цветов подсветки, масштабируемость интерфейса). Поиск по командам. Почему не «лента»? Поиск в деревьях.
Основной центр компоновки интерфейса — это левый верхний угол. Вокруг него строится вся компоновочная схема. Инструментальная область, панель Параметры, Список наборов, панель вкладок документов.
Сделано это с целью быстрого доступа к часто используемым инструментам.
Новая панель инструментов объединила сильные стороны классической Панели инструментов и Быстрой панели: быстрый доступ, компактность, расширяемость, быстрое переключение между наборами инструментов.
Многие спрашивают, почему бы не использовать проверенное временем решение от Microsoft — ленту? Мол, все ведущие САПР её используют. После глубокого анализа мы нашли несколько причин, которые привели нас к разработке собственной панели инструментов.
1. Сложность проектирования под ленту. Концепция ленты предполагает выделение «частотных» команд, которые выглядят как большие кнопки. В этом есть частица здравого смысла для небольших приложений с одной ролью пользователя, для коих лента и разрабатывалась (текстовый редактор, небольшой графический редактор). Но для таких приложений, как КОМПАС-3D, где несколько сотен команд и несколько ролей пользователей, такое решение выглядит спорным. Например, возьмем блок команд Выдавливание.
Классический вид. Группа отображалась по зажатой ЛКМ на иконке.
Обновленный вид. Добавился вариант отображения группы в верхней части панели параметры.
В некоторых ролях это одна из главных команд, в некоторых нет, какие-то пользователи чаще пользуются командой Элемент выдавливания, другие — Элемент по сечениям, а кто-то вообще не использует этот блок команд. Допустим, аналитики по умолчанию решили сделать блок Выдавливание большой кнопкой и поместить команду Элемент выдавливания на первое место. Для пользователей, которые не пользуются этой командой или вообще выдавливанием, такое решение будет неудовлетворительным, ведь у них частотностьважность команд совсем другая. «Но пользователь сам может подстроить под себя такой интерфейс!» — возразит пытливый исследователь. Например, сделает размер кнопки под себя, поменяет порядок и прочее. Да, конечно, может. Но разработка такого конструктора, который позволит пользователям настраивать ленточный интерфейс под себя, займет много времени, но и это не главное. В общем случае пользователь не должен настраивать интерфейс, он должен заниматься своей работой, ведь именно для этого он использует наше приложение, а не чтобы часами заниматься его настройкой.
2. Компактность, вернее отсутствие компактности в ленте. Одна большая кнопка занимает место трех кнопок с подписями или шести без подписей.
3. Вкладки. Тут две проблемы. Первая заключается в том, что КОМПАС-3D использует вкладки для отображения открытых документов, пользователям это очень нравится.
Закладки. Классический вид
Закладки. Обновленный вид(появилась миниатюра при наведении на закладку)
Расположение вкладок ленты и вкладок открытых документов в одном месте сильно бы усложнило интерфейс и осложнило жизнь пользователей. Так как мы хотели сохранить преемственность между прошлыми и новой версиями КОМПАС-3D, при анализе обнаружили вторую проблему – бесконтрольное «расползание» вкладок. О чем речь? Текущий Список наборов является преемником Компактной панели предыдущих версий КОМПАС-3D. Компактная панель, в свою очередь, может содержать в себе некоторое количество кнопок, переключающих панели. Причем это некоторое количество ничем не ограничено, так как в Компактную панель может встроиться практически любое стороннее приложение. Если бы мы использовали ленту, то при работе даже со стандартным набором приложений пользователь мог получить панель вкладок ленты, не умещающуюся в экран, а также был вынужден постоянно «катать» мышью в горизонтальной области экрана, чтобы выбрать необходимую команду.
4. Невозможность разместить все обилие настроек команды на ленте. Концепция ленты от Microsoft предполагает размещение дополнительных контролов на самой ленте. Т.е. там могут располагаться не только кнопки, но и другие интерфейсные элементы. Расположение только кнопок нарушает проработанность концепции и сводит её преимущества к нулю.
Чтобы облегчить пользователям КОМПАС-3D поиск команд в новом, переработанном главном меню мы добавили поиск по командам, который располагается в одной строке с главным меню. Сейчас поиск ищет и запускает только команды, находящиеся в главном меню. В будущем мы предполагаем заметно расширить функциональность поиска и сделать его глобальным.
Новинка версии. Поиск по командам
Одним из нововведений 17-ой версии является появление поисковых полей практически во всех длинных списках и деревья. Дерево построения в 3D и Дерево чертежа дополнительно обладают фильтрами для более быстрого и точного поиска
Новинки версии. Слева направо. Поиск в дереве построения, в переменных и в библиотеках
Сергей Швецов, дизайнер-проектировщик пользовательских интерфейсов АСКОН
Автор: kompas_3d
