Дизайн
Как мы собрали Интранет на Confluence
Реальный кейс
Зачем нам новый портал
Я работаю дизайнером в IT-компании. Наш внутренний портал был создан больше десяти лет назад. Сейчас он устарел и не вмещает всю необходимую информацию. У нас несколько офисов, и у каждого есть свои особенности, которые должны быть отражены на портале: фотогалереи, ДМС и корпоративные скидки, клубы по интересам и мероприятия.
Адаптации на портале посвящен отдельный раздел: что делать в первый рабочий день, в первые три месяца работы; кому и куда писать, если ушел на больничный; когда можно пойти в отпуск и другая полезная информация.
В условиях удаленной работы нагрузка на портал увеличилась. Пришла пора сделать новый Интранет. Выбор руководства пал на Confluence. Расскажу, какие трудности возникли с дизайном, и что получилось сделать в итоге.
Отмечу, что это не дизайн с нуля, а верстка из доступных элементов.
Проект под NDA, поэтому некоторые места на скринах скрыты.
Что такое Confluence
Confluence — это пространство для командной работы, которое позволяет легко управлять знаниями и вести командную работу. Это «коробочное» решение, которое можно адаптировать под нужды конкретной компании, в том числе с помощью различных плагинов.
Плагины делятся на бесплатные и платные. Цена плагина зависит от количества пользователей:
- до 10 пользователей — стоимость небольшая и составляет от $2 до $5 в месяц;
- от 500 пользователей — от $110 до $1,000 и больше.
Мы использовали стандартные возможности Confluence.
Особенности дизайна на Confluence
Лэйауты и редактор страницы
Лэйауты:
Их всего шесть, при этом есть свои особенности. Если в одном блоке у вас короткий текст, а в другом длинный, новый блок, который идет ниже, будет выровнен по низу самого длинного верхнего блока. То есть блоки нельзя перемешивать. Цвет фона у блоков тоже поменять нельзя.
Стили текста
Шесть (магическое число Confluence) стилей заголовков, один стиль для абзаца, один для цитаты и дополнительно неформатированный текст.
Размер шрифта изменить нельзя. Совсем. При том, что у абзаца 14 кегль, и текст мелкий. Вероятно, это можно поменять в коде, но я пока не нашла как.
Цвет ссылок меняется в коде, но внутри страницы он не изменится. Цвет текста можно выбрать только из предложенных — свой добавить нельзя. Нам повезло — наш фирменный цвет есть в палитре. Что делать тем, кому не так повезло — непонятно. Может быть, есть плагины для расширения палитры.
Ширину текста, интерлиньяж, межбуквенное расстояние — задать / изменить нельзя. С грустью вспоминаю Figma: все макеты делаю в ней.
Радует, что можно загрузить свой шрифт.
Настройки текста
- типы выравнивания — относятся к любым элементам страницы;
- отступы слева / справа;
- маркированный и нумерованный список.
НО: с выравниванием элементов все не так просто.
Confluence не воспринимает неразрывный пробел и отображает его как символ.
Часто в режиме редактирования все аккуратно, а после сохранения верстка слетает.
Получается, если на странице нужно сделать блок с аватарками и текстом, нужно взять не один лэйаут, а три. В каждом настроить отображение аватарки и текста.
Если аватарки еще можно расставить в одну строку, используя выравнивание, то текст так разместить нельзя. Можно применить костыль и вручную настроить отступы с помощью пробелов, но Confluence это не простит — в режиме просмотра верстка уедет.
Таблицы
С ними все более-менее хорошо, они даже адаптивные. Цвет шапки можно включить / выключить, но поменять нельзя. Залить ячейку цветом тоже.
Плагины и макросы
Самое интересное скрывается под плюсиком. Это возможность добавить на страницу плагины и макросы.
Плагинов много, но не все можно использовать — некоторые просто не работают, или несовместимы с другими. Расскажу, что использовала я:
Draw.io — графический редактор.
Теоретически с его помощью можно сделать все, но есть особенности:
- Редактор откровенно неудобный в использовании (особенно после Figma);
- Ужасный адаптив.
Я сделала таймлайн и схему структуры организации. Кажется, что проще это сделать в Figma и вставить картинку, но это не так:
1) картинки адаптивятся еще хуже,
2) картинку сложнее изменить: предполагается, что сайт будет поддерживать контент-менеджер, а ему проще менять в плагине.
Еще есть плагин EasyMap — предназначен для создания mindmap.
Google map — плагин для вставки карты. Здесь все хорошо, карта масштабируется, все легко настраивается. Единственное — долго грузится. Сначала появляется skeleton screen, потом сама карта.
Expand — плагин раскрывающегося списка. Удобно.
Viewport Tabs Container и Viewport Tab — плагин, который вставляет табы.
Еще один, более аккуратный плагин для табов — Local Tab Group, в него нужно вставить Localtab. Здесь уже можно добавить иконки в табы: выбрать из предложенных; и стили: их два.
С табами есть один интересный момент — внутрь контейнера таба уже нельзя добавить стандартный лейаут.
Поэтому текст будет располагаться на всю ширину страницы, и его ширину придется регулировать неразрывным пробелом. Повторю, это может привести к появлению символов.
Но можно вставить макрос «Область», в него — «Столбец» и указать ширину: в пикселях или в процентах. Для текстов я вставляла два столбца, где первому указывала ширину 70 %, второму 30 %, оставляя его пустым.
Таким же способом легко поделить область внутри таба на три части: вставить три макроса «Столбец» и каждому задать ширину 33 %.
С помощью разделителя можно оформлять цитаты или разделять текст. Жаль только, что цвет и ширину разделителя поменять нельзя.
Макросы для вставки фото
Их довольно много, отличаются внешним видом.
Content Slider Entry — все просто, вставила плагин, в него — фото, выровняла. Можно настроить размер отображения — если размер не влезет в лейаут блока, фотки будут не в строчку, а в столбик.
Carousel Image Slider — выглядит отлично, но требует отдельной настройки вложений: надо для каждой фотографии прописать метку, и потом в плагине указать, фотографии с какой меткой отображать. То есть если у вас один слайдер на страницу — все хорошо, а если несколько — придется заморачиваться с метками. Я с этим разбиралась довольно долго.
Количество фото, высота блока, стрелки, точки и подписи к фото — вариативно, можно включить, можно выключить.
Accordion Image Slider — слайдер с анимацией, удобно, когда места мало, а фотографий много.
Image Slider — хороший вариант слайдера с автопрокруткой, показывает по одной фото.
Gallery Slider — слайдер как в интернет-магазине.
Даже есть Before After Image Slider — пока не использовала.
Если фотографий много, и их нужно упаковать в архив, удобно использовать Image Column Gallery. Будет не так скучно выглядеть.
Другие плагины
Есть возможности для вставки pdf (и отображения документа в режиме презентации), видео, ссылки на любые документы.
Важная особенность верстки
Опытным путем мы выяснили, что лучше «прибивать» весь контент к левому краю и использовать лэйаут из двух блоков, иначе при адаптиве все уедет.
Если вставить фото в правый блок, у него появится скролл. Если сделать 3 блока, и в каждом делать фото — при адаптиве будет 3 скролла.
UPD: Вчера я разгадала еще одну загадку: если сохранять картинки в figma и вставлять в конфу, а потом изменять размер — они будет выглядеть слегка размытыми (не в резкости). Даже если вы уменьшили размер картинки, а не увеличили. Особенно это заметно у текста (например, на баннерах и кнопках). Почему так — не знаю.
То есть для корректного отображения не стоит менять размер картинки.
Ощущения от работы с Confluence
Это был интересный опыт работы с жесткими ограничениями платформы. Иногда, чтобы сделать простую с виду вещь, приходилось тратить много времени. Иногда казалось, что из-за особенностей платформы хорошо сделать не получится, но в итоге мы находили решение. Надеюсь, что нашим сотрудникам будет легко и удобно находить нужную информацию.
Курсы со скидкой 55%. Промокод DESIGNPUB.
